/**
 * Brand Grid — TC2-T38
 *
 * Section chrome around firsttracks-theme/term-cards. The tile surface itself
 * lives in style.css as the shared .tc-logo-tile kit (TC2-T40 consumes it too);
 * this file owns the band, the header row, the grid tracks, and undoing
 * category-grid's card treatment on these tiles.
 *
 * Breakpoints are written at the token values with the token named in a comment
 * (CSS vars cannot be used in @media conditions). Mobile-first, min-width only.
 *
 * Colour tokens are `--wp--custom--color--<family>--<step>`. Phase 0: there is
 * NO `--wp--preset--color--neutral-50` / `--secondary-700` / `--black`. The
 * theme palette holds only the nine `scheme-*` entries, so the hand-off's
 * preset spellings would have fallen through to their literals every time.
 *
 * @package WordPress
 * @subpackage FTM_Theme
 */

.tc-brand-grid {
	/*
	 * Seventh per-pattern definition of this property (F22). There is no
	 * shared --tc-icon-* layer: the contract layer that would supply one is
	 * dead (build-knowledge §6/§17), so every pattern needing the arrow
	 * declares its own on its own root.
	 *
	 * Sync note (2026-09-28, Gary batch E): the path is the Figma export of
	 * `Property 1=fi-rs-arrow-right` (42222:4552), the component behind all 122
	 * `Icon R` arrows on the boards, and it is the same path in all nine
	 * `--tc-icon-arrow-right` declarations — icon-consistency-verify.spec.ts
	 * fails if one drifts. Filled white here because it is a background-image
	 * on the filled secondary-600 chip, not a mask. docs/reports/icon-audit.md §7.
	 */
	--tc-icon-arrow-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M23.124 9.87897L18.538 5.29297L17.124 6.70697L21.386 10.97L0 11V13L21.446 12.97L17.123 17.293L18.537 18.707L23.124 14.121C23.6847 13.5575 23.9995 12.7949 23.9995 12C23.9995 11.205 23.6847 10.4425 23.124 9.87897Z'/%3E%3C/svg%3E");
}

/* ── Header ─────────────────────────────────────────────────────────────────
   Written at (0,2,0) to beat WP's `:root :where()` flow-layout margins at
   (0,1,0). Same specificity trap as the footer's accordion and the 24px grid
   bug — beat it on specificity, never on enqueue order. */

.tc-brand-grid .tc-brand-grid__header {
	display: flex;
	flex-direction: column;
	gap: var( --wp--preset--spacing--normal, 1rem ); /* 16 — mobile heading->link */
}

.tc-brand-grid .tc-brand-grid__header > *,
.tc-brand-grid .tc-brand-grid__titles > * {
	margin-block: 0; /* flow layout injects margins the flex column must not inherit */
}

.tc-brand-grid .tc-brand-grid__titles {
	display: flex;
	flex-direction: column;
	gap: var( --wp--preset--spacing--xsmall, 0.5rem ); /* 8 — mobile eyebrow->heading */
}

/* The header->grid gap is set on the grid itself, in the Grid tracks block
   below, so this selector is written once per breakpoint. */

@media (min-width: 48rem) { /* breakpoint/md */

	.tc-brand-grid .tc-brand-grid__titles {
		gap: var( --wp--preset--spacing--normal, 1rem ); /* 16 */
	}

	.tc-brand-grid .tc-brand-grid__header {
		gap: var( --wp--preset--spacing--large, 1.5rem ); /* 24 — tablet heading->link */
	}
}

@media (min-width: 64rem) { /* breakpoint/lg */

	.tc-brand-grid .tc-brand-grid__header {
		flex-direction: row;
		align-items: flex-end; /* frame: link ink bottom 83.5 vs heading 83 */
		gap: var( --wp--preset--spacing--normal, 1rem ); /* 16 */
	}

	.tc-brand-grid .tc-brand-grid__titles {
		flex: 1 0 0;
		min-width: 0;
	}
}

/* ── Type stand-ins ─────────────────────────────────────────────────────────
   The theme's typeStyles block is inert site-wide (DECISIONS, H2), so headings
   render at weight 400 without this. Fourth family to carry a scoped stand-in;
   second to restate the heading-medium clamp — F23. */

.tc-brand-grid .tc-brand-grid__heading {
	font-weight: 700;
	letter-spacing: -0.02em; /* bound at -2% on every heading in the file */
}

.tc-brand-grid .has-heading-medium-font-size {
	/* 23px @320 -> 41px, max reached at breakpoint/md:
	   23 + 18 * (100vw - 320px) / 448. Byte-identical to the media family's
	   --tc-heading-medium-size; !important beats the fluid preset. Frame ink
	   heights confirm it: 39.5 at BOTH 1920 and 768, dropping at 320. */
	font-size: clamp(1.4375rem, 0.634rem + 4.018vw, 2.5625rem) !important;
	line-height: 1.171; /* 48/41 */
}

/* The shared .tc-eyebrow kit paints its 20x4 bar from `currentcolor`. All three
   frames draw it at primary-600 (#123B9E, sampled), and the inherited text
   colour on this white band is not that — so the family pins it, exactly as the
   media family does for the same reason. The fix belongs in the kit; pinning
   here keeps it off every other consumer until that is a designer decision. */
.tc-brand-grid .tc-eyebrow::before {
	background-color: var( --wp--custom--color--primary--600, #123b9e );
}

/* ── "Shop All Brands" ──────────────────────────────────────────────────── */

.tc-brand-grid .tc-brand-grid__link a {
	display: inline-flex;
	align-items: center;
	gap: var( --wp--preset--spacing--xsmall, 0.5rem ); /* 8 */

	/* `button` role: label-large 15/20, weight 500. The comp binds label-large
	   SIZE to body-large LINE-HEIGHT (15/24) — a mixed binding, invisible on a
	   single line. J40. Literal because label-large is a fluid preset and the
	   frames draw 15 flat at all three widths. */
	font-family: var( --wp--preset--font-family--body, inherit );
	font-size: 0.9375rem; /* 15 — label-large, static across modes */
	font-weight: 500;
	line-height: 1.3333;

	/* J41 CLOSED 2026-08-06 — the comp draws secondary-600 (sampled #0284C7 off
	   all three frames) and that binding is now what ships. The 700 remap was
	   for the OLD 600's 4.09:1 on white, an AA fail at 15px. secondary-600 is
	   #057DB9 as of 2026-08-06 and measures 4.53:1 — AA clear. The chip below
	   tracks this colour. */
	color: var( --wp--custom--color--secondary--600, #057db9 );
	text-decoration: none;
}

.tc-brand-grid .tc-brand-grid__link a::after {
	content: "";
	flex: 0 0 auto;
	inline-size: 1.75rem; /* 28 chip — frame 43782:19517 */
	block-size: 1.75rem;
	border-radius: 4px;
	background-color: var( --wp--custom--color--secondary--600, #057db9 );
	background-image: var( --tc-icon-arrow-right );
	background-position: center;
	background-repeat: no-repeat;
	background-size: 1rem 1rem; /* 16 glyph */
}

@media (min-width: 48rem) { /* breakpoint/md */

	.tc-brand-grid .tc-brand-grid__link a::after {
		/* 32 from tablet up; the mobile frame draws 28. Measured on all three:
		   32x32 / 32x32 / 28x28. */
		inline-size: 2rem;
		block-size: 2rem;
	}
}

.tc-brand-grid .tc-brand-grid__link a:hover,
.tc-brand-grid .tc-brand-grid__link a:focus-visible {
	text-decoration: underline;
}

/* ── Grid tracks ────────────────────────────────────────────────────────────
   term-cards emits its own <ul>, which nothing in core-blocks.css selects — so
   these tracks hold with no specificity contest and no !important. That is the
   deliberate advantage T34 records; do not reach for core/columns here.

   NOTE the selector: `className` on a dynamic block lands on the block's OWN
   root element, and this block's root IS the <ul>. So it is
   `ul.tc-brand-grid__grid`, not the hand-off's `.tc-brand-grid__grid ul`,
   which matches nothing.

   Desktop is exact: 6 x 220 + 5 x 16 = 1400. Tablet and mobile are `1fr`
   rounding artifacts (measured 218.67 and 140 against the hand-off's nominal
   218 / 139) — do NOT pin the tracks. */

.tc-brand-grid .tc-brand-grid__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var( --wp--preset--spacing--xsmall, 0.5rem ); /* 8 */
	margin-inline: 0;
	padding: 0;
	list-style: none;

	/* header -> grid: 24 base, 48 at md. Measured off the frames as 25 / 48.5 /
	   48.5. 48 is a documented literal, NOT a preset: no preset resolves to a
	   flat 48 (xxlarge is 4rem/64, xxxlarge a 48->96 clamp). Same treatment as
	   category-grid's chrome->grid gap, the media band padding and the hero
	   5rem. */
	margin-block-start: var( --wp--preset--spacing--large, 1.5rem ); /* 24 */
}

@media (min-width: 48rem) { /* breakpoint/md */

	.tc-brand-grid .tc-brand-grid__grid {
		grid-template-columns: repeat(3, 1fr);
		gap: var( --wp--preset--spacing--normal, 1rem ); /* 16 */
		margin-block-start: 3rem; /* 48 — one-off, see above */
	}
}

@media (min-width: 64rem) { /* breakpoint/lg */

	.tc-brand-grid .tc-brand-grid__grid {
		grid-template-columns: repeat(6, 1fr);
	}
}

/* ── Undoing category-grid's card treatment ─────────────────────────────────
 *
 * NOT anticipated by the hand-off, and load-bearing. category-grid.css styles
 * `.tc-term-card*` unscoped, and pattern CSS loads globally (build-knowledge
 * §1) — so every rule it writes for a category card also lands on a brand
 * tile. Left alone the tiles would render as navy panels with a dark scrim,
 * a cover-fit logo stretched edge to edge, and an invisible white title.
 *
 * Scoped under `.tc-brand-grid__grid` rather than fixed by rescoping
 * category-grid.css, because T34 is shipped and frame-verified and this build
 * must not move it. Reaching (0,2,0)/(0,3,0) against its (0,1,0)/(0,1,1), so
 * this wins on specificity and not on which stylesheet the glob emits first.
 */

.tc-brand-grid .tc-brand-grid__grid .tc-term-card__media {
	position: static;
	inset: auto;
	z-index: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	background-color: transparent;
}

.tc-brand-grid .tc-brand-grid__grid .tc-term-card__media::after {
	content: none; /* category-grid's bottom-up scrim */
}

.tc-brand-grid .tc-brand-grid__grid .tc-term-card__img {
	position: static;
}

/*
 * J38 fallback. Three real pwb-brand terms (D-Link, Titan Photonics,
 * Tripp-Lite) point at deleted attachments, so this path is live on real data,
 * not only against a scratch term. The title row is the block's own element;
 * category-grid paints it white at 20/700 for a photo card, which on a
 * neutral-50 panel is invisible.
 */

.tc-brand-grid .tc-brand-grid__grid .tc-term-card__row {
	justify-content: center;
}

.tc-brand-grid .tc-brand-grid__grid .tc-term-card__title {
	font-size: var( --wp--preset--font-size--label-medium, 0.875rem );
	font-weight: 500;
	line-height: 1.4286;
	letter-spacing: normal;
	color: var( --wp--custom--color--base--black, #0a205b );
	text-align: center;
	overflow-wrap: anywhere;
}

/*
 * The chip is category-grid's own affordance and the brand frames draw none.
 * Safe to remove in CSS — unlike the title, it is decorative, carries no text
 * and is already aria-hidden, so nothing leaves the accessibility tree.
 */
.tc-brand-grid .tc-brand-grid__grid .tc-term-card__chip {
	display: none;
}

/* Focus ring: category-grid's is on `.tc-term-card__link:focus-visible` at
   (0,1,1) and still applies. Restated only to move it clear of the tile's own
   4px radius, which is tighter than a category card's. */
.tc-brand-grid .tc-brand-grid__grid .tc-term-card__link:focus-visible {
	outline: 2px solid var( --wp--custom--color--secondary--700, #0369a1 );
	outline-offset: 2px;
}

/* Phone tap target (QA batch A3, R4). "Shop All Brands" is 28 tall: the 15/20
   label beside the 28 chip. 8px of padding above and below with matching
   negative margin makes it 44 without moving the label or the chip; the
   nearest control, a brand tile, is 24px away. 48rem up it is 32 and out of
   the phone brief. */
@media (max-width: 47.9375rem) {
	.tc-brand-grid .tc-brand-grid__link a {
		padding-block: 8px;
		margin-block: -8px;
	}
}

/* ── The brand index (/brands/, tools/create-brands-page.php) ───────────────
   The same grid with no header group: the "Page with title" template's H1 is
   the heading, and its own title gap (40) already spaces the grid. The 24/48
   header->grid margin above would double it. (0,3,0) beats the (0,2,0) track
   rules at every breakpoint; the homepage band never carries the modifier. */
.tc-brand-grid.tc-brand-grid--index .tc-brand-grid__grid {
	margin-block-start: 0;
}