/* ================================================================
   MAGNETIS OFFRE — magnetis.ca

   A numbered list, not a row of three cards with icons. Five services
   is more than a card row can hold without shrinking each to a label,
   and the two reference sites the owner named both delineate their
   services as a list with rules rather than as tiles.

     band     cream, py 112, the site's 1240 measure
     tête     énoncé left (Benzin 56 / 1.05, the second half in red),
              appui right at 38ch — one baseline, two columns
     rangée   filet above, 28 top / 28 bottom, THREE COLUMNS on one
              baseline: 01 (Poppins 14 red), le service (Benzin 28),
              la ligne (Poppins 16). The line is a real column with a
              fixed left edge, not text pushed right: ragged-right
              against a ragged left read as five unrelated fragments,
              and the two services that carry no line read as an empty
              cell in a column instead of a hole in the row
     dernière no closing rule: the list ends on its own last row, and a
              rule under it would draw a line the band does not need
================================================================ */

.wp-block-aisa-magnetis-ca-offre {
	box-sizing: border-box;
	padding-block: 112px;
}
/* THE SITE MEASURE. Same three declarations in every band. */
.wp-block-aisa-magnetis-ca-offre .aisa-magnetis-ca-offre__inner {
	box-sizing: border-box;
	inline-size: min(1240px, 100% - 112px);
	margin-inline: auto;
}

.wp-block-aisa-magnetis-ca-offre .aisa-magnetis-ca-offre__eyebrow {
	line-height: 1;
	font-weight: 500;
	letter-spacing: 0.18em;
}
.wp-block-aisa-magnetis-ca-offre .aisa-magnetis-ca-offre__statement { flex: 1 1 22rem; min-inline-size: 0; }
.wp-block-aisa-magnetis-ca-offre .aisa-magnetis-ca-offre__heading {
	font-size: min(var(--wp--preset--font-size--xx-large), 4.4vw);
	line-height: 1.05;
	font-weight: 600;
	max-inline-size: 18ch;
}
.wp-block-aisa-magnetis-ca-offre .aisa-magnetis-ca-offre__text { flex: 0 1 38ch; }
.wp-block-aisa-magnetis-ca-offre .aisa-magnetis-ca-offre__text p { margin: 0; line-height: 1.6; }

.wp-block-aisa-magnetis-ca-offre .aisa-magnetis-ca-offre__list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.wp-block-aisa-magnetis-ca-offre .aisa-magnetis-ca-offre__row { list-style: none; }
/* The filet, as an element so it can be wiped in from the left. It is 1px of
   accent across the full row, drawn on the row's own top edge — exactly what
   the border-block-start it replaced looked like, and identical with no JS
   because it rests at scaleX(1). */
.wp-block-aisa-magnetis-ca-offre .aisa-magnetis-ca-offre__rule {
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	inline-size: 100%;
	block-size: 1px;
	background-color: var(--wp--preset--color--accent);
	transform-origin: left center;
	pointer-events: none;
}
.wp-block-aisa-magnetis-ca-offre .aisa-magnetis-ca-offre__cell {
	padding-block: 28px;
	/* 3ch for the number, the service takes the slack, the line gets a fixed
	   38ch column. 38 rather than the old 42ch cap: at 1240 the first three
	   columns need the rest, and a description that sets in three tight lines
	   is worse than one that sets in two comfortable ones. */
	grid-template-columns: 3ch minmax(0, 1fr) minmax(0, 38ch);
	transition: color 0.2s ease;
}
.wp-block-aisa-magnetis-ca-offre .aisa-magnetis-ca-offre__num {
	inline-size: 3ch;
	flex: 0 0 auto;
	line-height: 1;
	font-weight: 500;
	font-variant-numeric: tabular-nums;
}
.wp-block-aisa-magnetis-ca-offre .aisa-magnetis-ca-offre__name {
	flex: 0 1 auto;
	line-height: 1.1;
	font-weight: 500;
	font-size: min(var(--wp--preset--font-size--large), 3vw);
}
/* Third column, left-aligned. It is placed EXPLICITLY rather than by source
   order because two of the five services carry no line: without this, row 04's
   name would flow into the column that every other row uses for its
   description. */
.wp-block-aisa-magnetis-ca-offre .aisa-magnetis-ca-offre__line {
	grid-column: 3;
	line-height: 1.5;
}
a.aisa-magnetis-ca-offre__cell:hover .aisa-magnetis-ca-offre__name { color: var(--wp--preset--color--primary); }
a.aisa-magnetis-ca-offre__cell:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

.wp-block-aisa-magnetis-ca-offre .aisa-magnetis-ca-offre__cta {
	font-weight: 500;
	line-height: 1;
	min-block-size: 44px;
	margin-block: -12px;
	transition: color 0.2s ease;
}
.wp-block-aisa-magnetis-ca-offre .aisa-magnetis-ca-offre__cta:hover { color: var(--wp--preset--color--primary); }
.wp-block-aisa-magnetis-ca-offre .aisa-magnetis-ca-offre__cta:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 4px;
}
.wp-block-aisa-magnetis-ca-offre .aisa-magnetis-ca-offre__caret {
	inline-size: 14px; block-size: 10px; flex: 0 0 auto; position: relative;
}
.wp-block-aisa-magnetis-ca-offre .aisa-magnetis-ca-offre__caret::before {
	content: ""; position: absolute; inset-block-start: 50%; inset-inline-start: 0;
	inline-size: 100%; block-size: 1.5px; background-color: currentColor; transform: translateY(-50%);
}
.wp-block-aisa-magnetis-ca-offre .aisa-magnetis-ca-offre__caret::after {
	content: ""; position: absolute; inset-block-start: 50%; inset-inline-end: 0;
	inline-size: 6px; block-size: 6px;
	border-block-start: 1.5px solid currentColor; border-inline-end: 1.5px solid currentColor;
	transform: translateY(-50%) rotate(45deg);
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-aisa-magnetis-ca-offre a, .wp-block-aisa-magnetis-ca-offre .aisa-magnetis-ca-offre__cell { transition: none; }
}

@media (max-width: 767px) {
	.wp-block-aisa-magnetis-ca-offre { padding-block: 64px; }
	.wp-block-aisa-magnetis-ca-offre .aisa-magnetis-ca-offre__inner { inline-size: min(1240px, 100% - 48px); }
	/* One column under the other below 768: a 38ch column and a 28px name do
	   not both fit, and the number keeps its own 3ch gutter so the names stay
	   on one left edge. */
	.wp-block-aisa-magnetis-ca-offre .aisa-magnetis-ca-offre__cell { grid-template-columns: 3ch minmax(0, 1fr); }
	.wp-block-aisa-magnetis-ca-offre .aisa-magnetis-ca-offre__line { grid-column: 2; }
	.wp-block-aisa-magnetis-ca-offre .aisa-magnetis-ca-offre__heading { font-size: var(--wp--preset--font-size--large); }
	.wp-block-aisa-magnetis-ca-offre .aisa-magnetis-ca-offre__name { font-size: var(--wp--preset--font-size--lead); }
}

/* ================================================================
   PRE-ANIMATION STATE — the floor that has to be right on frame one.

   view.js cannot put an element in its hidden state: it is a script MODULE, so
   it is deferred, and the browser has already painted this band at rest before
   a line of it runs. prepare() then hides what the reader has just seen.
   Measured at 1440 on the héros: visible from 494ms to 589ms — six frames of
   the band, then a snap to opacity 0 to animate in. Every band with a view.js
   did it.

   html.aisa-js is set by a BLOCKING script in <head>, so these rules apply to
   the first frame. .aisa-entered is added to the block root by onBlock() the
   moment view.js has had its turn — success OR throw — which takes the floor
   away and hands each property to the identical inline value prepare() has
   just written. Same values, so the handover is invisible.

   Every declaration below mirrors a prepare() call in view.js. Change one and
   change the other, or the band will jump at the handover.
   ================================================================ */

html.aisa-js .wp-block-aisa-magnetis-ca-offre:not(.aisa-entered) .aisa-magnetis-ca-offre__head {
	opacity: 0;
	transform: translateY(24px);
}
html.aisa-js .wp-block-aisa-magnetis-ca-offre:not(.aisa-entered) .aisa-magnetis-ca-offre__cell {
	opacity: 0;
	transform: translateY(18px);
}
html.aisa-js .wp-block-aisa-magnetis-ca-offre:not(.aisa-entered) .aisa-magnetis-ca-offre__rule {
	transform: scaleX(0);
}
html.aisa-js .wp-block-aisa-magnetis-ca-offre:not(.aisa-entered) .aisa-magnetis-ca-offre__cta {
	opacity: 0;
	transform: translateY(12px);
}

/* If view.js never runs at all — it failed to load, the import map is broken,
   the module threw before onBlock could register — nothing will ever add
   .aisa-entered and the floor above would hold this band at opacity 0 for good.

   The condition is only :not(.aisa-entered), deliberately NOT the
   html.aisa-ready this was first written against: a block whose own view.js
   404s leaves the library booted and aisa-ready set, which is precisely the
   case that needs rescuing. There is no false positive to trade against,
   because the moment .aisa-entered lands this rule stops matching and the
   browser cancels a delay that had not yet elapsed. The @keyframes lives in
   interact.css, which is enqueued on every front-end page. */
html.aisa-js .wp-block-aisa-magnetis-ca-offre:not(.aisa-entered) .aisa-magnetis-ca-offre__head,
html.aisa-js .wp-block-aisa-magnetis-ca-offre:not(.aisa-entered) .aisa-magnetis-ca-offre__cell,
html.aisa-js .wp-block-aisa-magnetis-ca-offre:not(.aisa-entered) .aisa-magnetis-ca-offre__rule,
html.aisa-js .wp-block-aisa-magnetis-ca-offre:not(.aisa-entered) .aisa-magnetis-ca-offre__cta {
	animation: aisa-failsafe 1ms 3s forwards;
}