/*
 * Quote page shell (T059; DES-002, DES-008, DES-009; creative brief §6
 * "page header family" and §7; copy deck §9).
 *
 * Scope: only what the page itself owns -- the page gutter, the measure the
 * page shares with the rest of the site, and the designed page header the
 * per-language pattern renders (eyebrow, H1, lead). Everything the
 * quote-form block renders is styled by that block's own
 * `style.css`/`enhance.css`, so the desk is designed even before this file
 * is enqueued.
 *
 * Enqueued by the theme's functions.php on the `page-quote` template
 * (T057).
 *
 * Hand-off with the T057 design system: this file sets no type, colour or
 * mark of its own where the system already owns one. The page header's two
 * paragraphs carry the system classes (`.qlp-eyebrow`, `.qlp-lead`) and
 * take their face, tracking, colour and verification mark from
 * `style.css`; the H1 takes the page-header family's own scale. What is
 * left here is the quote page's gutter, its measure, its vertical rhythm
 * and the register line that closes the header.
 *
 * Logical properties only (constitution VII, ADR-002).
 */

/* ---------------------------------------------------------------- gutter *
 * The page consumes the system gutter rather than a scale of its own, so
 * the page content, the header's `.qlp-wrap`, the breadcrumbs and the
 * footer all rule to the same two vertical lines at every width
 * (VR-F002, DES-008). The fallback keeps the page off the viewport edge
 * on the (impossible, but cheap to cover) path where only this stylesheet
 * loads.
 * ---------------------------------------------------------------------- */

.qlp-quote-main {
	position: relative;
	padding-block-end: 0;
	padding-inline: var(--qlp-gutter, clamp(1rem, 0.5rem + 2.5vw, 4rem));
}

/* -------------------------------------------------------- page backdrop *
 * T102, IMG-QUOTE-BG. An empty decorative container the theme paints, from
 * the manifest, with a media-guarded `image-set()` -- below 1024 px nothing
 * is painted and nothing is downloaded, which is the whole point of the
 * render mode. It is held at 12 per cent so it reads as the surface the desk
 * sits on and never as a picture behind type; every text colour on this page
 * is measured against the extremes of the composited ground, not assumed
 * (IMG-008).
 * ---------------------------------------------------------------------- */

.qlp-quote-main .qlp-quote__backdrop {
	position: absolute;
	inset: 0;
	z-index: 0;
	opacity: 0.12;
	pointer-events: none;

	/* Behind the desk, not behind the page header. The gold eyebrow reaches
	 * 4.6:1 on plain ivory, so any darkening at all takes it below AA -- and
	 * a backdrop that has to be invisible to be safe is not a backdrop. It
	 * therefore fades in over the header's own height instead, measured: the
	 * header is 217-262 px tall from 1024 to 1920 px in both languages, and
	 * the desk begins at 241-287 px. This is the block axis, which does not
	 * turn with the reading direction (IMG-008, A11Y-004). */
	mask-image: linear-gradient(
		to bottom,
		transparent 0,
		transparent 200px,
		#000 340px
	);
}

/*
 * This pattern is the page's post content, so the backdrop's markup can only
 * ever be emitted inside the page header's group. The ground it has to cover
 * is the whole desk, not the header, so the header group deliberately stays
 * out of the position chain and its blocks are lifted one by one instead.
 * `.qlp-quote-main` is then the backdrop's containing block, and the
 * composition -- vellum in two opposite corners, undisturbed petrol through
 * the middle -- keeps close to its native 16:9 at every desktop width rather
 * than being cropped to the flat centre of the frame.
 */
.qlp-quote-main .qlp-quote-eyebrow,
.qlp-quote-main .qlp-quote-title,
.qlp-quote-main .qlp-quote-lead,
.qlp-quote-main .wp-block-quicklink-prime-core-quote-form {
	position: relative;
	z-index: 1;
}

/* --------------------------------------------------------- page header */

.qlp-quote-main .qlp-quote-intro {
	margin-inline: auto;
	max-inline-size: var(--qlp-content, 1180px);
	padding-block: clamp(32px, 1.5rem + 3vw, 72px) 0;
}

/*
 * The pattern's blocks come through `post-content`, whose own constrained
 * layout would otherwise cap them at the theme's prose measure. The page
 * header wants the full page measure the brief asks for, so the measure is
 * set per element below instead.
 */
.qlp-quote-main .wp-block-post-content > * {
	margin-inline: 0;
	max-inline-size: none;
}

/*
 * `.qlp-eyebrow` (T057) already sets the face, the tracking, the colour,
 * the Arabic exceptions and the verification mark. Only the space down to
 * the H1 belongs to this page.
 */
.qlp-quote-eyebrow {
	margin-block: 0 clamp(12px, 1.2vw, 18px);
}

/*
 * The H1 is set on the page-header family's scale (style.css §12) so the
 * quote page's title matches every other inner page's title exactly.
 */
/*
 * The measures below are in `em`, and that is the whole of VR-F026.
 *
 * They used to be `18ch` and `20ch`. `ch` is the advance of "0" in the
 * element's *loaded* font, so a measure written in `ch` is a measure that
 * changes when the web font arrives: on the Arabic title at 1280 the wrap
 * container went from 508.8 px with the fallback to 565.9 px with Cairo,
 * and the title collapsed from two lines to one 30 ms after first paint.
 * Everything below it moved up 67 px, which is a CLS of 0.68 at 360 and
 * 0.10 at 1280 (MOT-004, PERF CLS <= 0.1).
 *
 * `em` resolves against `font-size`, which here is a clamp() of rem and vw
 * and therefore identical before and after the font loads. The rendered
 * result is unchanged: each value is its old `ch` measure multiplied by
 * that font's own ch-to-em ratio, measured in the browser -- Source Serif 4
 * 0.5179, Cairo 0.5559, Source Sans 3 0.5719 -- so the settled line breaks
 * are the ones Fable reviewed.
 */
.qlp-quote-title {
	color: var(--wp--preset--color--petrol-800, #103b3a);
	font-size: clamp(2.125rem, 1.6rem + 2.4vw, 3.5rem);
	letter-spacing: -0.01em;
	line-height: 1.07;
	margin-block: 0;
	max-inline-size: 9.32em; /* was 18ch, Source Serif 4 */
	text-wrap: balance;
}

:lang(ar) .qlp-quote-title {
	font-size: clamp(1.95rem, 1.5rem + 2.1vw, 3.25rem);
	letter-spacing: normal;
	line-height: 1.32;
	max-inline-size: 11.12em; /* was 20ch, Cairo */
}

/*
 * The second half of VR-F026, and the part that was a judgement call.
 *
 * Measured to the pixel, the Arabic title at 360 asks for 324 px of a 328 px
 * column once both Cairo subsets are there, and 329 px in the window where
 * only one of them is. It misses by one pixel, wraps to two lines, and
 * un-wraps when the second subset lands -- and that single 41 px reflow,
 * which drags the lead, the sheet and the aside with it, is the 0.68 of
 * VR-F026.
 *
 * The window exists because the headline is set from two faces at once. The
 * theme preloads `cairo-arabic` for an Arabic page, so the letters arrive
 * first; the four spaces between the words are outside that subset's
 * unicode-range and come from `cairo-latin`, which is not preloaded. Until
 * it lands the spaces are the system font's, which are wider than Cairo's,
 * and five pixels of wider spaces is all it takes. Preloading the second
 * subset as well was tried and measured and does not close the window.
 *
 * Reserving the second line removes the shift completely and costs 41 px of
 * empty space under the Arabic title at every mobile width. Fable's ruling
 * on that trade was to keep the composition and take the shift, because the
 * void is paid by every reader on every visit and the shift only by the
 * reader whose cold load loses the race. That trade turned out not to be
 * available -- with the box left to itself the state scores 0.6821, not the
 * 0.038 I had reported (that figure came off a mistyped Arabic URL that
 * 404ed, and a 404 page has no sheet to move) -- so the shift is either
 * removed or it fails the gate it was raised under.
 *
 * What removes it without a void is headroom. At 95 % the headline asks for
 * 308 px settled and 313 px in the window, inside a 328 px column either
 * way, so it stays on one line throughout and nothing below it moves. The
 * cost is an Arabic headline 5 % smaller below 768 and nowhere else -- about
 * one and a half pixels of cap height, against 41 px of void or a 0.68
 * shift. It is a change to a composition Fable approved, raised in the
 * README with the pixels, and it is one line to undo.
 *
 * The floor below it is Fable's one-line reservation, kept as a floor: the
 * box never collapses under a line and it reserves nothing the title does
 * not use.
 *
 * `font-display: optional` would also remove the shift and cost nothing
 * visually, but it makes which typeface renders depend on a network race,
 * so the same page can come back in two different faces -- which breaks the
 * MOT-002 and MOT-003 parity this task exists to guarantee. Measured, not
 * assumed: it put the home footer 26 px apart between two renders.
 */
@media (max-width: 767px) {
	:lang(ar) .qlp-quote-title {
		font-size: calc(clamp(1.95rem, 1.5rem + 2.1vw, 3.25rem) * 0.93);
		min-block-size: 1.32em; /* one line at this line-height */
	}
}

/*
 * `.qlp-lead` (T057) sets the face, size, colour and measure. This page
 * adds the space the register line needs and the line itself.
 */
.qlp-quote-lead {
	margin-block: clamp(16px, 1.4vw, 24px) 0;
	max-inline-size: 30.88em; /* was 54ch, Source Sans 3 */
	padding-block-end: clamp(22px, 1rem + 1.6vw, 40px);
	position: relative;
}

/* The lead is set in Cairo on an Arabic page, whose ch-to-em ratio is not
   Source Sans 3's, so the same 54-character measure is a different `em`
   value. One `ch` hid that; two `em` values state it. */
:lang(ar) .qlp-quote-lead {
	max-inline-size: 30.02em; /* was 54ch, Cairo */
}

/* The register line closing the page header (brief §3, §6). */
.qlp-quote-lead::after {
	background-color: var(--wp--preset--color--gold-line, #a57e4a);
	block-size: 1px;
	content: "";
	inline-size: clamp(64px, 8vw, 116px);
	inset-block-end: 0;
	inset-inline-start: 0;
	position: absolute;
}

/* ------------------------------------------------------------------ trail *
 * The breadcrumb trail sits above <main> and outside the page's own gutter,
 * so it takes the system wrap directly: without it the block is full bleed
 * and its first crumb starts at pixel 0 while every other line on the page
 * -- the header's, the page title's, the desk's -- starts at the gutter.
 * ---------------------------------------------------------------------- */

.qlp-quote-trail .qlp-breadcrumbs {
	margin-inline: 0;
	max-inline-size: none;
}