/**
 * Multi-Column Grid additions, built 2026-10-12 for the designer's
 * /ai-infrastructure/ page:
 *
 *   - The "Stats" style: a light title and short text, a thin gray rule, then
 *     a bold figure and caption. Opt-in -- the Style select adds .grid--stats.
 *   - Footnote numbers (.cite), in either style, linking into a Sources row.
 *     Only printed when a block's "Source #" is filled in.
 *
 * Neither matches an existing row: the grid is on nine other pages, none uses
 * Stats and none has a source number, and their markup was diffed before and
 * after (identical bar indentation). Markup is template-parts/flex/
 * flex-grid.php; footnotes come from unify2021_source_refs() and land on
 * template-parts/flex/flex-sources.php.
 *
 * Sizes were taken off the designer's screenshot, calibrated against the
 * section headline beside them (a known 30.24px at 1440): title ~28px, text
 * ~18px, figure ~29px bold, caption ~17px. They are set in rem so they ride
 * the theme's root ladder -- 16px, 18px from 980, 20px from 1400 -- and every
 * px figure in these comments is the value at the >=1400 tier. Text sizes
 * carry px floors so they cannot shrink below body-copy size on a phone.
 *
 * Breakpoints are the theme's grid ones, not the house ladder: the compiled
 * grid goes to two columns at 600 ($grid-break) and to four at 1024
 * ($grid-break-2), and the subgrid below has to switch on exactly there.
 *
 * Hand-authored outside the gulp/SASS build -- see CLAUDE.md.
 */

.grid__wrap {
	/* Named for their role, not their colour: the Dark Blue background
	   redefines all four, and "navy" meaning white would be a trap. */
	--grid-ink: #143250;  /* $color-dark-blue: the figures             */
	--grid-copy: #6a747c; /* $color-gray: captions and block eyebrows  */
	--grid-rule: #e6e6e6; /* $color-light-gray                         */
	/* The mockup's footnote teal (#49a39e) is ~3:1 on white, too faint for
	   small link text; $color-teal-text is the theme's teal for exactly that. */
	--grid-cite: #00857e;
}

/* --- The lead: title and text ------------------------------------------------
   One step down from the theme's grid h3 (1.5rem, 30px), keeping its 400
   weight and +0.04em tracking -- that light, airy title is the mockup's. */

.grid--stats .grid__lead h3 {
	margin-bottom: 1.1rem;
	font-size: 1.4rem;
}

.grid--stats .grid__lead .wysiwyg p {
	font-size: max(16px, 0.9rem);
	line-height: 1.5;
}

/* --- The figure ------------------------------------------------------------- */

/* The rule only separates two halves; a figure on its own (the "Where the
   market is heading" row) has nothing above it to rule off. */
.grid--stats .grid__lead + .grid__stat {
	margin-top: 1.75rem;
	padding-top: 0.75rem;
	border-top: 1px solid var(--grid-rule);
}

.grid--stats .grid__stat-value {
	margin: 0 0 0.15rem;
	font-size: 1.45rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0;
	color: var(--grid-ink);
}

.grid--stats .grid__stat-text {
	margin: 0;
	font-size: max(15px, 0.85rem);
	line-height: 1.4;
	color: var(--grid-copy);
}

/* --- Footnote links, either style ----------------------------------------------
   The theme's sup is 75% at -0.5em; these sit a little smaller and higher, as
   in the mockup. The padding widens a hit area that is otherwise one digit.
   Two classes deep so they outrank `.wysiwyg a` when the footnote ends the
   block's text rather than a stat caption. */

.grid__block .cite {
	margin-left: 0.1em;
	font-size: 0.65em;
	font-weight: 600;
	letter-spacing: 0;
	top: -0.65em;
}

.grid__block .cite a {
	padding: 0 0.15em;
	color: var(--grid-cite);
	text-decoration: none;
}

.grid__block .cite a:hover {
	text-decoration: underline;
}

/* --- Rules that line up across columns ----------------------------------------
   Each block spans two rows of the parent grid and adopts them as its own, so
   every block's lead shares one row and every figure the next. Text that wraps
   to three lines in one column pushes all the rules down together instead of
   leaving that column's rule lower than its neighbours'.

   row-gap: 0 hands the parent's gutter between lead and figure back to the
   items, so the 1.75rem margin above is the whole space over the rule, as it
   is on a phone. The gutter between one row of blocks and the next is the
   parent's and is untouched.

   Gated on .grid--stats-paired (set in PHP when some block has both halves):
   a row of figures alone would otherwise leave an empty second row and a
   gutter of dead space under it. Browsers without subgrid keep the stacked
   layout, rules unaligned. */

@media (min-width: 600px) {
	/* Between one row of blocks and the next -- two columns, or five-plus
	   blocks at four. The theme's 2.2rem matched the 1.75rem above each rule
	   closely enough that a caption and the next title read as one block.
	   3rem is the gap the theme already leaves between stacked blocks on a
	   phone. */
	.grid--stats .grid__grid {
		row-gap: 3rem;
	}

	@supports (grid-template-rows: subgrid) {
		.grid--stats-paired:not(.grid--one) .grid__block {
			display: grid;
			grid-row: span 2;
			grid-template-rows: subgrid;
			row-gap: 0;
		}
	}
}

/* --- Block eyebrow, either style ---------------------------------------------
   Added 2026-10-13 for /utilities/'s "Three places to find us": a date above
   each title. Same treatment as .ctacol__label -- base-type.css sizes tags on
   a card at 13px and kickers over a full-width band at 14px, and this is the
   former. Only printed when the block's Eyebrow field is filled. */

.grid__block .grid__eyebrow {
	margin: 0 0 10px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--grid-copy);
}

/* --- Dark Blue background ------------------------------------------------------
   The Background select (Format tab) adds .grid--navy. It is a navy PANEL
   inside the page container, not a full-bleed band: it sits among the labelled
   Two-Column CTA's navy panels on /utilities/, which are panels too, and a band
   would run straight into the navy footer when the row is last on the page --
   as "Three places to find us" is there. The row's own white padding keeps the
   two apart.

   Colours follow the navy CTA (flex-twocol-cta.css): white headings, teal
   labels, #c8d8e6 copy (~10:1 on navy), yellow outline button. Teal #1dc2bb on
   #143250 is ~5.9:1, fine for the 13px labels and the footnotes. The padding
   is the same clamp as that CTA's panel, so the two line up when stacked. */

.grid--navy {
	--grid-ink: #fff;
	--grid-copy: #c8d8e6;
	--grid-rule: rgba(255, 255, 255, 0.2);
	--grid-cite: #1dc2bb; /* $color-teal */
}

.grid--navy .grid {
	padding: clamp(32px, 5vw, 64px) clamp(20px, 5vw, 64px);
	background-color: #143250; /* $color-dark-blue */
}

/* Stacked on a phone, every block carries the theme's 3rem bottom margin --
   the last one too, which on a white row is lost in the row padding but inside
   the panel reads as a dead navy strip under the final block. */
.grid--navy .grid__block:last-child {
	margin-bottom: 0;
}

.grid--navy .row__header .wysiwyg {
	--rowhead-gray: #1dc2bb; /* the eyebrow: teal, as over the hero */
	--rowhead-navy: #fff;    /* the headline */
}

.grid--navy .row__header .wysiwyg,
.grid--navy .row__header .wysiwyg p,
.grid--navy .grid__block .wysiwyg,
.grid--navy .grid__block .wysiwyg p {
	color: var(--grid-copy);
}

/* row-header.css only colours a header h6 and the heading after it; a header
   typed some other way (a bare h3, an h2) would otherwise stay navy-on-navy. */
.grid--navy .row__header .wysiwyg :is(h1, h2, h3, h4, h5),
.grid--navy .grid__block h3 {
	color: #fff;
}

.grid--navy .grid__block .grid__eyebrow {
	color: #1dc2bb;
}

.grid--navy .row__header .wysiwyg a,
.grid--navy .grid__block .wysiwyg a {
	color: #fff;
}

/* The yellow outline button from .ctacol--light, so a link reads the same in
   either navy module. */
.grid--navy .btn {
	border: 2px solid #fced1e;
	color: #fced1e;
	background-color: transparent;
}

.grid--navy .btn:before {
	background: transparent url("../../images/arrow-ur-yellow.svg") no-repeat center center;
}

.grid--navy .btn:after {
	background: transparent url("../../images/arrow-ur-blue.svg") no-repeat center center;
}

.grid--navy .btn:hover {
	border-color: #fced1e;
	background-color: #fced1e;
	color: #143250;
}

/* The theme's ring is black, which vanishes on navy. */
.grid--navy a:focus-visible,
.grid--navy button:focus-visible {
	outline-color: #fff;
}

/* --- Image Ratio (image variant) ----------------------------------------------
   Added 2026-10-15 for "Meet the Team" on /ai-infrastructure/: headshots in
   the theme's 2:1 frame (.grid__img's padding-bottom: 49.7%) lost the top of
   every head. The frame keeps the theme's padding-ratio technique, so the
   absolutely-positioned image and its object-fit: cover still apply; only the
   height changes. Faces sit in the upper part of most portraits, so the crop
   favours the top rather than the dead centre. */

.grid--ratio-square .grid__img {
	padding-bottom: 100%;
}

.grid--ratio-portrait .grid__img {
	padding-bottom: 125%;
}

.grid--ratio-square .grid__img > img,
.grid--ratio-portrait .grid__img > img {
	object-position: 50% 25%;
}