/*
 * Media: Alternating Rows — deltas over the .tc-media family rules.
 *
 * Two presentation states driven entirely by the binary background option
 * ("none or the light blue"):
 *   scheme class present  → Engineering rhythm (open pitch, no dividers)
 *   no scheme class       → Solutions rhythm (tight rows + neutral-200 rules)
 * Rows are plain core/columns; side = column source order; nothing here
 * enforces alternation (J4-revised — D2 withdrawn).
 */

.tc-media-alternating[class*='ftm-scheme-'] {
	background-color: var(--ftm-scheme-bg);
	color: var(--ftm-scheme-text);
}

.tc-media-alternating[class*='ftm-scheme-'] :where(h1, h2, h3, h4, h5, h6):not(.has-text-color) {
	color: var(--ftm-scheme-heading);
}

/* Header stack: eyebrow→heading 16 comes from the family rules; heading→intro
   binds 16 in-frame; the intro column binds 800 = contentSize (heading itself
   is uncapped — the Solutions heading renders one line across the wide col). */
.tc-media-alt-header > .wp-block-heading + p {
	margin-block-start: var(--wp--preset--spacing--normal);
	max-width: var(--wp--style--global--content-size, 800px);
}

.tc-media-alt-header > .tc-eyebrow + .wp-block-heading {
	margin-block-start: var(--wp--preset--spacing--normal);
}

/* Header → rows: 48 (compact comp) / 80 (band comp) — both off-scale,
   documented one-offs; 80 extends the hero family's 5rem precedent. */
.tc-media-alternating > .tc-media-alt-header {
	margin-block-end: 3rem;
}

.tc-media-alternating[class*='ftm-scheme-'] > .tc-media-alt-header {
	margin-block-end: 5rem;
}

/* Band state: open row pitch. Frame binds 112 → `huge` (renders 128 at
   desktop — the accepted §5 normalization). */
.tc-media-alternating[class*='ftm-scheme-'] > .wp-block-columns + .wp-block-columns {
	margin-block-start: var(--wp--preset--spacing--huge);
}

/* Compact state: tight rows + hairline dividers (bound neutral-200). */
.tc-media-alternating:not([class*='ftm-scheme-']) > .wp-block-columns {
	padding-block: var(--wp--preset--spacing--xlarge); /* 40, bound */
}

/* Compact state row title→body tightens to normal (16, bound); the scheme
   state keeps the family's large (24). J14 per-state split. Specificity
   (0,4,1) — .tc-media-alternating + :not() arg + .wp-block-column +
   .wp-block-heading + p — beats the family's .tc-media .wp-block-column > * + *
   (0,2,0) on specificity, not order. */
.tc-media-alternating:not([class*='ftm-scheme-']) .wp-block-column > .wp-block-heading + p {
	margin-block-start: var(--wp--preset--spacing--normal);
}

.tc-media-alternating:not([class*='ftm-scheme-']) > .wp-block-columns + .wp-block-columns {
	border-top: 1px solid var(--wp--custom--color--neutral--200, #dee2e6);
}

/* ─────────────────────────────────────────────────────────────────────────
 * COMPACT VARIANT — `.is-compact`, opt-in (DECISION C, lead developer,
 * 2026-08-31)
 *
 * Reproduces the Solutions board's compact rows: a wide copy column beside a
 * small right-hand thumbnail. Frame: docs/design/services-page/desktop.png
 * (Figma 43324:16690, Frame 215), read at 3840px = 1920 CSS (the export is 2x).
 *
 * WHY THIS EXISTS. `docs/reports/services-page.md` §"Phase 1" measured the
 * Services page against this frame and recorded the row geometry as a
 * DESIGNER DECISION, deliberately not chased in page content:
 *
 *   | Measurement    | Frame | Rendered | Drift |
 *   | Content column | ~800  |   569    | −231  |
 *   | Gutter         |  223  |   143    |  −80  |
 *   | Image column   |  375  |   688    | +313  |
 *   | Image height   |  250  |   459    | +209  |
 *
 * That report's own recommendation is what this block implements: *"if the
 * frame's 800/223/375 is intended for the compact state specifically, it
 * belongs in media-alternating.css … not in per-page column widths."*
 *
 * IT IS A CLASS, NOT THE EXISTING `:not([class*='ftm-scheme-'])` SELECTOR.
 * That selector already distinguishes two RHYTHMS (row padding and dividers)
 * and every scheme-less consumer gets it automatically. Row PROPORTIONS are a
 * different axis: a scheme-less instance that wants the family's own
 * 569/143/688 row must keep it. Hanging the new geometry off the absence of a
 * scheme would have silently re-laid out every existing scheme-less instance.
 * `.is-compact` is opt-in, so the base pattern is untouched — verified by
 * fingerprinting a base instance at five widths before and after this block.
 *
 * SELF-SUFFICIENT ON PURPOSE. The padding, dividers and title→body rhythm are
 * restated here rather than left to the `:not()` rules above, so the variant
 * behaves identically whether or not a scheme class is present. Where both
 * apply they set the same values, so nothing conflicts.
 *
 * ── Layout: GRID, and that is what makes it work without `!important` ──────
 *
 * Every row is a `core/columns` whose columns carry INLINE `style="flex-basis:
 * 40.64%"`. An inline declaration cannot be beaten on specificity, so no CSS
 * rule can restyle those widths — the honest options were `!important` or a
 * different formatting context. Grid is the second: `flex-basis` is simply
 * inert on a grid item, so the track sizes below win outright with no
 * importance and no order dependency, and the pattern's markup needs no change.
 *
 * SPECIFICITY IS DELIBERATE AND IS A REAL CONTEST. media-basic.css restores
 * `display: flex` at (0,4,0) — `.page-section .tc-media .wp-block-columns
 * .is-layout-flex` — because the design system grids core/columns and that
 * broke the family (its comment explains both defects). The selector here
 * reaches (0,5,0) and beats it outright rather than tying and leaning on glob
 * order, which the house rule forbids.
 *
 * ── The three track numbers are the frame's own ────────────────────────────
 *
 * 800 + 223 + 375 = 1398, against the 1400 alignwide box — the +2 the services
 * report already logs on the row box itself.
 *
 * They are PROPORTIONAL, not fixed px, and that is a choice worth stating: the
 * frame draws this row at exactly one width (1920) and gives no second width
 * to derive a fixed-thumbnail rule from. Fixed 375px + 223px gutter would hold
 * at 1400 and then eat the row as it narrows — at a 944 wide box the copy
 * column would fall to 346 against a 375 image, i.e. the thumbnail becomes the
 * larger half, which is the inverse of the design. Fractions hold the frame's
 * proportions at every width and hit its literal numbers at the width it was
 * drawn at. Same reasoning as DECISION A's globe ratio, one build over.
 *
 * `gap` is a percentage of the row's content box, so 15.9286% of 1400 = 223.0.
 * The `fr` tracks then split what is left (1177) in the frame's own 800:375 —
 * 801.4 / 375.6, inside the +2 the row box already carries.
 *
 * ── Image ──────────────────────────────────────────────────────────────────
 *
 * NOTHING IS DECLARED HERE. The family already sets `aspect-ratio: 3 / 2` on
 * `.tc-media .tc-media-col img`, and its comment names this very frame's
 * numbers: *"every comp media is exactly 3:2 (688×459, 375×250)"*. A 375 wide
 * track therefore renders 375×250 on its own. Restating the height would add a
 * second source of truth for a value already correct.
 *
 * ── Responsive ─────────────────────────────────────────────────────────────
 *
 * ⚠ SUPERSEDED FOR TABLET, 2026-09-09 (F14) — see the TABLET BAND block at the
 * foot of this file. The tablet board DOES draw a compact row; it was missing
 * from `docs/design/services-page/`, not from the design. The mobile half of
 * this note still stands: 320 stacks, and the band stops at 48rem.
 *
 * lg and up only. THE FRAME SET DRAWS NO TABLET OR MOBILE COMPACT ROW —
 * `docs/design/services-page/` holds `desktop.png` and nothing else — so there
 * is no geometry to derive one from, the same call heading-banner and
 * media-stats make for their globes.
 *
 * The documented stacking rule is therefore: BELOW 64rem THE COMPACT VARIANT
 * IS THE BASE PATTERN. The grid is scoped inside the lg query, so below it the
 * family's own stacked state applies unchanged — one full-width column,
 * `order: -1` putting the media first, and the family's 24px stacked gap
 * (media-basic.css). Nothing about the stacked state is variant-specific, and
 * a compact-specific stacked rule invented here would be unbacked by any frame.
 * ───────────────────────────────────────────────────────────────────────── */

/* Rhythm — restated so the variant does not depend on the scheme class. */

.tc-media-alternating.is-compact > .tc-media-alt-header {
	margin-block-end: 3rem; /* 48 — the compact comp's header→rows, as above */
}

.tc-media-alternating.is-compact > .wp-block-columns {
	padding-block: var(--wp--preset--spacing--xlarge); /* 40, bound — frame reads 40 above and below each row */
}

.tc-media-alternating.is-compact > .wp-block-columns + .wp-block-columns {
	border-top: 1px solid var(--wp--custom--color--neutral--200, #dee2e6);
}

.tc-media-alternating.is-compact .wp-block-column > .wp-block-heading + p {
	margin-block-start: var(--wp--preset--spacing--normal); /* 16, bound */
}

/* ─────────────────────────────────────────────────────────────────────────
 * COMPACT VARIANT — CONTIGUOUS ROWS, 48rem and up (2026-09-10)
 *
 * ⚠ THIS SUPERSEDES THE "Not fixed here, deliberately: the 24px inter-row gap"
 * NOTE AT THE FOOT OF THIS FILE. It is fixed, and it is fixed here rather than
 * inside either band so that the divider rhythm is one rule across 1023/1024 —
 * which is the reason F14 gave for deferring it.
 *
 * WHAT THE BOARDS DRAW. Both side-by-side boards lay the six rows out
 * CONTIGUOUSLY — read the child `y` values, not the heights:
 *
 *   1920  Frame 214  43324:16795  1900 =  290 330 330 330 330 290   at y 0 290 620 950 1280 1610
 *    768  Frame 214  43324:16608  1744 =  264 304 304 304 304 264   at y 0 264 568 872 1176 1480
 *
 * Each `y` is the previous `y + h`. The hairline sits ON the boundary, so the
 * board's rhythm is 40 / rule / 40 and the render was paying 40 / 24 / rule / 40.
 *
 * THE BOARDS ALSO OMIT THE OUTER PADDING, and that is a SECOND cause, not the
 * same one. An interior row is 40 + ink + 40; the FIRST is 0 + ink + 40 (1920:
 * 290 against 330) and the LAST is 40 + ink + 0 (768: 264 against 304). Both
 * boards agree. So the section's ink starts and ends flush with its rows, and
 * the header→first-ink distance is the board's 48 rather than 48 + 40.
 *
 * The two are fixed together because they are one rhythm — where the compact
 * section pays vertical space that the board does not draw — and because
 * separating them leaves the header→rows relationship half-corrected.
 *
 * WHAT IS DELIBERATELY LEFT. Frame 214 is 1900 against a rendered 2107.46, and
 * these two causes are 120 + 80 of that 207.46. The remaining 7.46 is NOT
 * removable honestly: 5.00 is the five hairlines, which have real border
 * height where the board draws them as zero-height rules on the boundary, and
 * 2.46 is 6 x 0.41 from `800fr 375fr` resolving 375.6 wide, so the family's
 * `aspect-ratio: 3 / 2` gives 250.41 rather than 250. Pinning the thumbnail to
 * a literal 375px would close that 2.46 and is argued against at length above.
 *
 * ── WHY THE BAND STARTS AT 48rem, AND WHY IT MUST ─────────────────────────
 *
 * ⚠ THE 320 BOARD DRAWS THE 24px GAP DELIBERATELY. Frame 222 (43324:16442) is
 * 2764 = 2644 of rows + 5 x 24, with the rows at y 0 472 964 1436 1908 2360.
 * The render already matches it there to 0.00. Zeroing the margin at every
 * width would take 320 from an exact match to −120, so the band stops where
 * the row stops being side by side.
 *
 * That is also why this is ONE rule spanning 48rem→∞ rather than a declaration
 * in each of the two grid bands below: 1023 (48rem band) and 1024 (64rem band)
 * are governed by the same declaration and cannot drift apart.
 *
 * ── WHAT SUPPLIED THE 24, MEASURED ────────────────────────────────────────
 *
 * CSS.getMatchedStylesForNode on row 3, at 1920 and 768. Exactly two rules
 * declare margin-block-start on these rows and BOTH are WordPress's:
 *
 *   :root :where(.is-layout-constrained) > *                  (0,1,0)
 *   :root :where(.wp-block-group-is-layout-constrained) > *   (0,1,0)
 *       margin-block-start: var(--wp--preset--spacing--large);
 *
 * Three corrections to what was previously written about this, all in the
 * comment block at the foot of this file and in the F14 report:
 *
 *   1. It is the CONSTRAINED layout selector, not `.is-layout-flow`. The
 *      wrapper group is {"layout":{"type":"constrained"}} (media-alternating.php)
 *      and carries no `.is-layout-flow` class at all.
 *   2. It is NOT a (0,1,0) tie won on load order — the shape heading-banner
 *      (TC2-T40) and F12 hit. NO theme rule declared margin-block-start on
 *      these rows, so the WP rule applied unopposed. Same opponent, same
 *      specificity, uncontested rather than tied.
 *   3. The property is --wp--preset--spacing--large, NOT --wp--style--block-gap,
 *      which is what the note below and the F14 report both name. Both are
 *      1.5rem here, so the rendered 24 is identical and the misnaming was
 *      invisible — but they are separately settable.
 *
 * (0,4,0) — .tc-media-alternating + .is-compact on one element, then two
 * .wp-block-columns. Beats (0,1,0) outright on specificity, no !important and
 * no dependence on glob order, per house rule §5a. It is deliberately the SAME
 * selector as the border-top rule above, so the divider and the space around it
 * are declared together and cannot be changed independently by accident.
 *
 * The scheme-bearing state needs nothing: its own (0,4,0) `huge` rule already
 * beats the WP block gap, measured at 128 (64 at 320) on all three live
 * instances. Verified rather than assumed — /engineering/, /pattern-library/
 * and /demo/ carry the only other media-alternating instances on the site.
 * ───────────────────────────────────────────────────────────────────────── */

@media (min-width: 48rem) { /* breakpoint/md and up — the side-by-side range */
	/* (0,4,0) — the inter-row gap. Same selector as the border-top rule above,
	   so the divider and the space around it are declared together. */
	.tc-media-alternating.is-compact > .wp-block-columns + .wp-block-columns {
		margin-block-start: 0; /* boards draw the rows contiguous */
	}

	/*
	 * The two OUTER edges the boards omit. Both (0,4,0), both beating the
	 * (0,3,0) `padding-block: xlarge` rule above on specificity rather than on
	 * source order — they sit later in the same file, and a tie settled that
	 * way is what house rule §5a forbids.
	 *
	 * ⚠ `:first-of-type` DOES NOT WORK HERE and fails SILENTLY. `of-type`
	 * matches on element type, and `.tc-media-alt-header` is a `div` just as
	 * every row is — so the first `div` child is the header and
	 * `.wp-block-columns:first-of-type` matches NOTHING. Measured, not
	 * assumed: a probe using it left row 1 at 40px while `:last-of-type`
	 * correctly reached row 6. The first row is therefore addressed through
	 * the header adjacency, which this file already depends on (the
	 * `> .tc-media-alt-header` rule at the top). If a consumer ever drops the
	 * header, row 1 keeps its 40 and the section merely looks as it did
	 * before — a graceful fallback, not a break.
	 */
	.tc-media-alternating.is-compact > .tc-media-alt-header + .wp-block-columns {
		padding-block-start: 0;
	}

	.tc-media-alternating.is-compact > .wp-block-columns:last-child {
		padding-block-end: 0;
	}
}

@media (min-width: 64rem) { /* breakpoint/lg */
	/*
	 * (0,5,0) — beats media-basic.css's (0,4,0) `display: flex` restore.
	 * `.tc-media` and `.tc-media-alternating` are the same element, so the
	 * compound reads as one element's classes, not a descendant chain.
	 */
	.page-section .tc-media-alternating.is-compact > .wp-block-columns.is-layout-flex {
		display: grid;
		grid-template-columns: 800fr 375fr; /* frame: 800 copy, 375 thumbnail */
		gap: 15.9286%;                      /* frame: 223 of the 1400 row box */
		align-items: center;
	}
}

/* ─────────────────────────────────────────────────────────────────────────
 * COMPACT VARIANT — TABLET BAND, 48rem → below 64rem (F14, 2026-09-09)
 *
 * ⚠ THIS CORRECTS THE "Responsive" NOTE ABOVE, WHICH SAYS THE FRAME SET DRAWS
 * NO TABLET COMPACT ROW. IT DOES. That note was written against
 * `docs/design/services-page/`, which holds `desktop.png` and nothing else —
 * but the Figma file carries a full tablet board and a full mobile board, and
 * the missing PNGs were an export gap, not a design gap. Boards verified with
 * `get_metadata` and re-recorded in `docs/qa-checklist.md`:
 *
 *   768  Solutions Tablet      43324:16523  768x6830  section 2 = 43324:16602
 *   320  Solutions Smartphone  43324:16358  320x6789  section 2 = 43324:16436
 *
 * Both are finished-tier, not wireframe: real copy, real per-row button
 * labels, per-row heights that track the copy. Only the imagery is a grey
 * placeholder, exactly as on the desktop board.
 *
 * WHAT THE TABLET BOARD DRAWS (43324:16602, "Frame 215", 688 wide): six 1-up
 * rows, copy LEFT and a small thumbnail RIGHT — the compact row, not the
 * family's stacked state. `Content Section` is 451 wide, the
 * `Image Placeholder` sits at x=475 and measures 213x142, so the gutter is 24
 * and 451 + 24 + 213 = 688, the alignwide box exactly.
 *
 * The image is TOP-aligned, not centred: in every row both `Content Section`
 * and `Image Placeholder` start at the row's 40px padding edge, and the copy
 * (224) is the taller of the two. Hence `align-items: start` here where the
 * desktop rule centres — at 1920 the 250-tall image is the taller half and it
 * is the copy that gets centred against it.
 *
 * WHAT THIS COST. Below 64rem the compact variant fell through to the
 * family's stacked state, so each row rendered a full-bleed 688x459
 * photograph UNDER the copy where the board draws a 213x142 thumbnail BESIDE
 * it: 690.59 of row content against the board's 224, six times over. That is
 * +2,964 of the +3,244 whole-document deviation logged as F14 at 768.
 *
 * The 320 board genuinely does stack (image 288x192 over the copy), so
 * nothing here reaches it and the band stops at 48rem.
 *
 * ── The `order: -1` reset is load-bearing ─────────────────────────────────
 *
 * `media-basic.css:248-268` stacks the whole family below 63.9375rem with
 * three declarations. `display: grid` makes two of them inert — `flex-wrap`
 * and the columns' `flex-basis: 100% !important` mean nothing to a grid item,
 * which is the same mechanism the 64rem rule above uses to beat the inline
 * `flex-basis`. `order: -1` is NOT inert on a grid item: it moves
 * `.tc-media-col` into the FIRST track, putting the thumbnail on the left and
 * mirroring the board. So it is reset explicitly, at (0,5,0) against that
 * rule's (0,3,0) — on specificity, not on glob order.
 *
 * The 64rem rule needs no such reset because the family's stacking band is
 * capped at 63.9375rem and never reaches it.
 *
 * ── The 24px inter-row gap — ⚠ FIXED 2026-09-10, see the CONTIGUOUS ROWS ──
 *    block above, which supersedes this paragraph.
 *
 * This band shipped with the rows 24px apart where both side-by-side boards
 * draw them contiguous — 5 x 24 = 120px per section, and the same defect at
 * 1920 where Frame 214 (43324:16795) measures 1900 against a rendered 2107.
 * It was deferred here because fixing it inside this band alone would have
 * left the divider rhythm discontinuous across 1023/1024. The fix above is
 * therefore a single 48rem-and-up rule covering both bands at once.
 *
 * Two things stated in this paragraph were wrong and are corrected above: the
 * 24 came from --wp--preset--spacing--large via the CONSTRAINED layout
 * selector, not from --wp--style--block-gap; and the 120 is 120 of the 207 by
 * which 2107 exceeds 1900, not the whole of it.
 * ───────────────────────────────────────────────────────────────────────── */

@media (min-width: 48rem) and (max-width: 63.9375rem) {
	/* breakpoint/md and up, below breakpoint/lg — the upper bound matches
	   media-basic.css's stacking band exactly, so no width is unclaimed. */
	.page-section .tc-media-alternating.is-compact > .wp-block-columns.is-layout-flex {
		display: grid;

		/* Tablet frame: 451 copy, 213 thumbnail, 24 gutter. Proportional for
		   the same reason the 64rem rule is — the board draws this row at one
		   width only, and fractions hold its proportions across the band. */
		grid-template-columns: 451fr 213fr;
		gap: var(--wp--preset--spacing--large); /* 24, bound */
		align-items: start; /* frame top-aligns the thumbnail with the title */
	}

	/*
	 * ⚠ `align-items` above is NOT what does the work, and on its own it does
	 * nothing at all. Every row is `are-vertically-aligned-center` and every
	 * column `is-vertically-aligned-center`, so core sets `align-self: center`
	 * ON THE COLUMNS — and `align-self` beats the container's `align-items`.
	 * Without this reset the thumbnail rendered 44.95px low in all six rows,
	 * which is exactly half of (231.92 copy − 142 thumbnail): centred, not
	 * top-aligned.
	 *
	 * The 64rem rule above never had to deal with this because at 1920 the
	 * 250-tall thumbnail is the TALLER half, so centring is invisible on it
	 * and lands the copy where the desktop board wants it anyway. That is a
	 * coincidence of the desktop proportions, not a property of the variant —
	 * which is why it surfaced the moment the tablet band inverted them.
	 *
	 * (0,5,0) against core's (0,2,0), and `align-items` is kept above so the
	 * intent still reads if those classes ever come off the markup.
	 */
	.page-section .tc-media-alternating.is-compact > .wp-block-columns > .wp-block-column {
		align-self: start;
	}

	/* (0,5,0), beating media-basic.css's (0,3,0) `order: -1`. */
	.page-section .tc-media-alternating.is-compact > .wp-block-columns > .tc-media-col {
		order: 0;
	}
}