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

   The claim an expertise page turns on, set as large as the band will
   allow, with its explanation beside it. The live site sets this on
   red; here it is `secondary`, because the closing CTA band is
   already red and two full-bleed red bands within one screen of each
   other stop reading as emphasis. Dark also gives the page the same
   pause the manifeste gives the homepage.

     band   secondary, py 112, the site's 1240 measure
     grille claim 1fr / body 400 — the claim leads, because it is the
            sentence someone would quote
     claim  Benzin 56 / 1.05 uppercase at 16ch, so it breaks into
            three or four short lines rather than one long one
     appui  Poppins 20 statement, then 16 body at 46ch
================================================================ */

/* The ground is declared HERE as well as by the `bg-secondary` utility in
   render.php, and the redundancy is deliberate. The contrast checker builds its
   list of background contexts from the body plus any rule whose selector is the
   BLOCK ROOT — it cannot see a utility class — so without this line it measured
   the CTA's hover colour against the page's cream and reported accent at 1.3:1.
   That is true of the body and false of this band: on secondary the same pair
   measures about 11:1. Declaring it costs nothing (the utility wins on
   specificity with the identical value) and makes the block state its own
   ground rather than leaving a checker to infer it.

   The tempting fix was to copy the footer's `color: primary` hover, which
   passes the gate for the wrong reason — red on this navy is roughly 2.9:1,
   genuinely worse than the accent it would have replaced. Satisfying a
   validator by degrading the design is the one trade never to make. */
.wp-block-aisa-magnetis-ca-argument {
	box-sizing: border-box;
	padding-block: 112px;
	background-color: var(--wp--preset--color--secondary);
}
/* THE SITE MEASURE. Same three declarations in every band. */
.wp-block-aisa-magnetis-ca-argument .aisa-magnetis-ca-argument__inner {
	box-sizing: border-box;
	inline-size: min(1240px, 100% - 112px);
	margin-inline: auto;
	grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
}

.wp-block-aisa-magnetis-ca-argument .aisa-magnetis-ca-argument__claim {
	font-size: min(var(--wp--preset--font-size--xx-large), 4.4vw);
	line-height: 1.05;
	font-weight: 600;
	letter-spacing: -0.01em;
	max-inline-size: 16ch;
}
/* A word. It carries nothing at rest, so with no JavaScript the sentence is
   byte for byte the sentence PHP printed. */
.wp-block-aisa-magnetis-ca-argument .aisa-magnetis-ca-argument__word { display: inline-block; }

.wp-block-aisa-magnetis-ca-argument .aisa-magnetis-ca-argument__statement {
	line-height: 1.5;
	font-weight: 500;
	max-inline-size: 46ch;
}
.wp-block-aisa-magnetis-ca-argument .aisa-magnetis-ca-argument__text { max-inline-size: 46ch; }
.wp-block-aisa-magnetis-ca-argument .aisa-magnetis-ca-argument__text p { margin: 0 0 14px; line-height: 1.65; }
.wp-block-aisa-magnetis-ca-argument .aisa-magnetis-ca-argument__text p:last-child { margin-block-end: 0; }

.wp-block-aisa-magnetis-ca-argument .aisa-magnetis-ca-argument__cta {
	font-weight: 500;
	line-height: 1;
	min-block-size: 44px;
	margin-block: -12px;
	transition: color 0.2s ease;
}
.wp-block-aisa-magnetis-ca-argument .aisa-magnetis-ca-argument__cta:hover { color: var(--wp--preset--color--accent); }
.wp-block-aisa-magnetis-ca-argument .aisa-magnetis-ca-argument__cta:focus-visible {
	outline: 2px solid var(--wp--preset--color--base);
	outline-offset: 4px;
}
.wp-block-aisa-magnetis-ca-argument .aisa-magnetis-ca-argument__caret {
	inline-size: 14px; block-size: 10px; flex: 0 0 auto; position: relative;
}
.wp-block-aisa-magnetis-ca-argument .aisa-magnetis-ca-argument__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-argument .aisa-magnetis-ca-argument__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-argument a { transition: none; }
}

@media (max-width: 1023px) {
	.wp-block-aisa-magnetis-ca-argument .aisa-magnetis-ca-argument__inner { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
	.wp-block-aisa-magnetis-ca-argument { padding-block: 64px; }
	.wp-block-aisa-magnetis-ca-argument .aisa-magnetis-ca-argument__inner { inline-size: min(1240px, 100% - 48px); }
	.wp-block-aisa-magnetis-ca-argument .aisa-magnetis-ca-argument__claim { font-size: min(var(--wp--preset--font-size--large), 8.2vw); }
}

/* ================================================================
   PRE-ANIMATION STATE — the floor that has to be right on frame one.
   Mirrors this block's prepare() calls value for value; see LESSONS.md 63.
   ================================================================ */
html.aisa-js .wp-block-aisa-magnetis-ca-argument:not(.aisa-entered) .aisa-magnetis-ca-argument__word {
	opacity: 0;
	transform: translateY(0.5em);
}
html.aisa-js .wp-block-aisa-magnetis-ca-argument:not(.aisa-entered) .aisa-magnetis-ca-argument__body {
	opacity: 0;
	transform: translateY(20px);
}
html.aisa-js .wp-block-aisa-magnetis-ca-argument:not(.aisa-entered) .aisa-magnetis-ca-argument__word,
html.aisa-js .wp-block-aisa-magnetis-ca-argument:not(.aisa-entered) .aisa-magnetis-ca-argument__body {
	animation: aisa-failsafe 1ms 3s forwards;
}