/*
 * Category Grid — firsttracks-theme/category-grid
 *
 * Chrome rhythm on the pattern group; card styling on the block's own elements.
 *
 * NOTE: the grid is the block's own <ul>, NOT core/columns — so the design
 * system's core-blocks.css grid (environment-facts §14) never touches it. That
 * rule is scoped to `.wp-block-columns.is-layout-flex`. This grid is ours end
 * to end, which is also why it needs no specificity fight to hold its tracks.
 *
 * Frame numbers: 4-up 338 square @1400 · 2-up @688 · 1-up 288×247 @288.
 * Gap 16 at every breakpoint. Chrome→grid 48 md+, 24 base. Eyebrow→h2 16 md+,
 * 8 base.
 *
 * Mobile-first throughout: min-width only, so no max-width exception to log
 * (contrast the media family, which needs one to beat core's inline widths).
 *
 * @package WordPress
 * @subpackage FTM_Theme
 */

.tc-category-grid {
	/*
	 * The arrow is defined HERE, not consumed from a shared layer. Phase 0
	 * finding: there is no global `--tc-icon-*` layer — the property is defined
	 * five separate times, once per pattern that needs it (hero-basic,
	 * hero-split, hero-overlay, media-basic, footer), each on its own root. The
	 * contract layer this would otherwise come from is dead (§6/§17). The path
	 * is the Figma export of `fi-rs-arrow-right` (42222:4552), the same in all
	 * nine declarations (2026-09-28, 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'%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");
}

/* ── Chrome rhythm ── */

.tc-category-grid > h2 {
	margin-block: var(--wp--preset--spacing--xsmall, 0.5rem) 0; /* 8 base */
}

.tc-category-grid .tc-term-cards {
	/*
	 * 24 base → 48 at md. 48 is a documented one-off, NOT a preset: the scale
	 * has no 48 step (environment-facts §1 — xxlarge is 4rem/64 and xxxlarge is
	 * a 48→96 clamp). The hand-off's `xxlarge, 3rem /* 48 *​/` would have
	 * rendered 64. Same treatment as the media band padding and the hero 5rem.
	 */
	margin-block-start: var(--wp--preset--spacing--large, 1.5rem); /* 24 */
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--normal, 1rem); /* 16, every breakpoint */
}

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

	.tc-category-grid > h2 {
		margin-block-start: var(--wp--preset--spacing--normal, 1rem); /* 16 */
	}

	.tc-category-grid .tc-term-cards {
		margin-block-start: 3rem; /* 48 — one-off, see above */
		grid-template-columns: repeat(2, 1fr);
	}
}

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

	.tc-category-grid .tc-term-cards {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* ── Card ── */

.tc-term-card {
	margin: 0;
}

.tc-term-card__link {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	aspect-ratio: 7 / 6; /* J29 — mobile frame is 288×247, landscape by intent */
	padding: var(--wp--preset--spacing--normal, 1rem); /* 16 base */
	border-radius: 4px;
	overflow: hidden;
	text-decoration: none;
	isolation: isolate;
}

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

	.tc-term-card__link {
		aspect-ratio: 1; /* J29 — tablet's 342 reads as a comp hug, 6px */
		padding: var(--wp--preset--spacing--large, 1.5rem); /* 24 */
	}
}

/*
 * Media layer. A term with no thumbnail renders this div alone — a flat
 * primary-800 panel, never a broken img (render.php omits the <img> entirely
 * rather than emitting an empty src).
 */
.tc-term-card__media {
	position: absolute;
	inset: 0;
	z-index: -1;
	background-color: var(--wp--custom--color--primary--800, #0a205b);
}

.tc-term-card__media::after {
	/* Scrim: frame binds base/black → transparent at 50%. */
	content: "";
	position: absolute;
	inset: 0;
	background-image: linear-gradient(to top, var(--wp--custom--color--base--black, #0a205b), transparent 50%);
}

.tc-term-card__img,
.tc-term-card__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.tc-term-card__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--xsmall, 0.5rem); /* 8 */
}

.tc-term-card__title {
	color: var(--wp--custom--color--base--white, #fff);

	/*
	 * Literal, not `var(--wp--preset--font-size--title-small)`. Phase 0: that
	 * preset IS defined, but it is FLUID — it resolves to
	 * clamp(1.125rem, …, 1.25rem), i.e. 18px at mobile. All three frames draw
	 * 20 flat, so the preset would be wrong at exactly the breakpoint the
	 * mobile frame covers.
	 */
	font-size: 1.25rem; /* 20 */
	line-height: 1.4; /* 28 */
	font-weight: 600; /* G14 (Gary, 2026-09-14) — was 700 */
	letter-spacing: -0.02em;
}

/*
 * `align-self: flex-end` since QA batch D (V-H1 / C-12, 2026-09-29). The row
 * centres its items, so a title that wraps to two lines ("Satellite
 * Communications" at 1024-1300) lifted its chip 14 above the chips of the
 * one-line cards beside it. On the last line, every chip shares the row's
 * baseline edge; a one-line card is unchanged (the chip is the row's height).
 */
.tc-term-card__chip {
	flex: 0 0 auto;
	align-self: flex-end;
	display: grid;
	place-items: center;
	padding: 6px;
	border-radius: 4px;
	background-color: var(--wp--custom--color--base--white, #fff);
}

.tc-term-card__chip::before {
	content: "";
	width: 16px;
	height: 16px;
	background-color: var(--wp--custom--color--base--black, #0a205b);

	/* stylelint-disable-next-line property-no-vendor-prefix -- mask needs the prefix pair; scoped exception per the header/media precedent */
	-webkit-mask: var(--tc-icon-arrow-right) center / contain no-repeat;
	mask: var(--tc-icon-arrow-right) center / contain no-repeat;
}

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

	.tc-term-card__chip {
		padding: 8px;
	}
}

.tc-term-card__count {
	position: absolute;
	inset-block-start: 8px; /* J30 — frames drift 6/8/10, normalized to 8,8 */
	inset-inline-start: 8px;
	padding: 4.5px 8px; /* 4.5 + 16 + 4.5 = 25 — G19/G34, 2026-09-17, the designer confirmed the count is included; product-grid.css has the account */
	border-radius: 0 0 0 8px; /* frame: bottom-left only */
	background-color: var(--wp--custom--color--tertiary--100, #d1fae5);
	color: var(--wp--custom--color--base--black, #0a205b);
	font-size: 0.75rem; /* 12 */
	line-height: 1.3333; /* 16 */
	font-weight: 700;
	letter-spacing: 0.002em;
}

/*
 * J32: no hover treatment beyond focus visibility — designer-list item.
 *
 * G15 (Gary, 2026-09-14): the title underlined on hover, and J32 never asked
 * for that. It came from theme.json's `elements.link.:hover`
 * (`textDecoration: underline`), which core emits at (0,1,1) — one above the
 * `text-decoration: none` on the link rule, which only covers the rest state.
 * Restated at (0,2,0) for both pointer states so the underline never appears.
 */
.tc-term-card__link:hover,
.tc-term-card__link:focus-visible {
	text-decoration: none;
}

.tc-term-card__link:focus-visible {
	outline: 2px solid var(--wp--custom--color--secondary--600, #057db9);
	outline-offset: 2px;
}