/*
 * Blog Archive — firsttracks-theme/blog-archive
 *
 * Frame: 43782:14812 (Blog Archive Desktop), a 1920 board on a 1400 container
 * with 260 gutters — so the container IS `wideSize`, and `alignwide` needs no
 * help to hit it.
 *
 * DESKTOP IS THE ONLY BOARD. There is no tablet or smartphone frame for this
 * screen — searched and confirmed twice, see docs/design/blog-archive/README.md.
 * Every breakpoint below 1400 in this file is DERIVED from the shipped corpus
 * (category-grid's 1-up / 2-up / 4-up ladder and the 48 mobile section rhythm),
 * not measured. That derivation is designer item D1 and is cheap to change.
 *
 * Mobile-first throughout: `min-width` only, so there is no `max-width`
 * exception to log and no later rule can tie one.
 *
 * SPECIFICITY. Everything is (0,2,0) or higher. WordPress's own layout rules
 * (`:root :where(.is-layout-flow) > *`, `:root :where(.is-layout-constrained) >
 * *`) are (0,1,0) and are emitted at head index 97 — AFTER every theme
 * stylesheet, including this one at 81-96. A (0,1,0) rule here loses on load
 * order, exactly the way the section rhythm did before style.css out-specified
 * it. That is why several rules below look more scoped than they need to be.
 *
 * Frame numbers (all from get_design_context, not measured off pixels):
 *   nav -> header 80 · eyebrow 20x4 bar, gap 8 · eyebrow -> h1 16 · h1 -> tabs 24
 *   tab 16/8 padding, gap 8, container border-bottom 1px, active border 2px
 *   header -> grid 48 · grid 3x440, gaps 40 col / 80 row
 *   grid -> pagination rule 56 · rule -> content 24 · count -> numbers 16
 *   number box 40x40 r2 border 1px · current border 2px · dots no border
 *
 * @package WordPress
 * @subpackage FTM_Theme
 */

.tc-blog-archive {
	/* Chevrons for prev/next. Defined here, not consumed from a shared layer:
	   there is no global `--tc-icon-*` layer in this theme (build-knowledge §6
	   — the contract layer is dead), so every pattern that needs one defines it
	   on its own root. Same stroked shape as the media family's arrow. */
	--tc-icon-chevron-left: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m15 18-6-6 6-6'/></svg>");
	--tc-icon-chevron-right: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m9 18 6-6-6-6'/></svg>");
}

/*
 * The 80 below the nav. It is `padding-block-start` and NOT a margin, on
 * purpose: this is the page's first `.page-section`, and core-blocks' own
 * (0,2,0) `.page-section:first-child` correctly resets the section rhythm to 0
 * there. Adding a margin would either be eaten by that reset or fight it. The
 * rhythm (48 -> 96 fluid) is untouched — this build neither restates nor
 * overrides it.
 *
 * D4: 80 is in none of the existing scale steps and is not the section rhythm.
 * Both blog boards draw it (first content at y 285 against a 205 nav). The base
 * value is the corpus's own mobile section rhythm (48, the floor of
 * `spacing--xxxlarge`) rather than an invented number, because no mobile board
 * exists to say otherwise.
 */

.page-section .tc-blog-archive {
	padding-block-start: 3rem; /* 48 — derived, D1/D4 */
}

/* ══ Header ═════════════════════════════════════════════════════════════════ */

.tc-blog-archive .tc-blog-archive__header > * {
	margin-block: 0;
}

.tc-blog-archive .tc-blog-archive__title {
	margin-block-start: var(--wp--preset--spacing--normal, 1rem); /* 16 */

	/* `.ftm-type-heading-strong` supplies family/size/line-height/weight and is
	   right on all four. Two things it does not supply: the frames bind every
	   heading at -2% (here -1.02px on 51px) where the role emits 0, and no
	   `.ftm-type-*` role sets `text-transform` at all. Restating only those two
	   is the same shape as eleven other pattern stylesheets. */
	letter-spacing: -0.02em;
	text-transform: capitalize;
	color: var(--wp--custom--color--base--black, #0a205b);
}

/*
 * The shared `.tc-eyebrow` kit is reused with the SAME TWO scoped corrections
 * contact-form needed, from the same reading of a different board:
 *
 *   - the kit paints its bar from `currentcolor`; this frame draws it at
 *     primary-600 (#123B9E, and the Figma variable is literally
 *     `color/primary/600`) against #0A205B text, so it must be pinned;
 *   - the kit ships `gap: 9px`, measured off the five hero frames. This board
 *     draws 8 — the bar occupies x 0..20 and the label starts at x=28.
 *
 * The kit is right in every other respect (label-medium, 500, 20x4 bar), so it
 * is reused rather than redefined: pattern CSS is glob-loaded and unconditional,
 * so a second copy would ship on every page.
 */

.tc-blog-archive .tc-eyebrow {
	gap: var(--wp--preset--spacing--xsmall, 0.5rem); /* 8 — kit ships 9 */
	color: var(--wp--custom--color--base--black, #0a205b);
}

.tc-blog-archive .tc-eyebrow::before {
	background-color: var(--wp--custom--color--primary--600, #123b9e);
}

/* ══ Category tabs ══════════════════════════════════════════════════════════ */

.tc-blog-archive .tc-category-filter {
	margin-block-start: var(--wp--preset--spacing--large, 1.5rem); /* 24 */

	/* No mobile board says what happens when the tabs outrun the viewport, and
	   this site can grow categories from the Posts screen without a deploy. A
	   scroller is the only behaviour that cannot clip or wrap into the grid. */
	overflow-x: auto;
	overscroll-behavior-x: contain;
}

.tc-blog-archive .tc-category-filter__list {
	display: flex;
	gap: var(--wp--preset--spacing--xsmall, 0.5rem); /* 8 */
	align-items: stretch;
	width: max-content;
	min-width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;

	/*
	 * STROKE POSITION, READ OFF THE EXPORT. The node tree offers
	 * `43782:14939` — a 1400x1 `Rectangle 14` sitting right here — and it is
	 * `hidden="true"`. Deriving from the tree would have produced no rule at
	 * all. The rule is a `border-bottom` on the Menu Container (`43782:14928`),
	 * full container width, with a separate 2px on the active item.
	 */
	border-block-end: 1px solid var(--wp--custom--color--neutral--200, #dee2e6);
}

.tc-blog-archive .tc-category-filter__item {
	margin: 0;
	list-style: none;
}

.tc-blog-archive .tc-category-filter__link {
	display: flex;
	align-items: center;
	padding: var(--wp--preset--spacing--normal, 1rem) var(--wp--preset--spacing--xsmall, 0.5rem); /* 16 / 8 */
	border-block-end: 2px solid transparent;

	/* Pulls the 2px underline up over the list's 1px rule so the active tab's
	   line replaces it rather than stacking 3px of border. */
	margin-block-end: -1px;
	color: var(--wp--custom--color--base--black, #0a205b);
	white-space: nowrap;
	text-decoration: none;

	/* Exactly `.ftm-type-label` (label-medium / 500 / 1.429 / 0), but written as
	   literals rather than carried as a class: these are anchors emitted by
	   render.php, and putting a type role on them from PHP would hide the
	   binding from anyone reading this file. Values verified identical to the
	   role in the merged theme.json. */
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--label-medium, 0.875rem); /* 14, flat */
	font-weight: 500;
	line-height: 1.4286; /* 20 */
	letter-spacing: 0;
}

.tc-blog-archive .tc-category-filter__link.is-current {
	/* The frame binds Inter BOLD here — the only weight change in the tab bar,
	   and it is the active tab's whole affordance alongside the underline. */
	font-weight: 700;
	border-block-end-color: var(--wp--custom--color--secondary--600, #057db9);
}

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

/* ══ Grid ═══════════════════════════════════════════════════════════════════ */

.tc-blog-archive .tc-blog-archive__query {
	margin-block-start: 3rem; /* 48 — a documented one-off; the scale has no 48
								 step (xxlarge is 64, xxxlarge a 48->96 clamp),
								 the same call category-grid makes. */
}

.tc-blog-archive .tc-blog-archive__grid {
	display: grid;
	grid-template-columns: 1fr;

	/* Row 80, column 40 — and the row value is READ PER ROW, not divided out of
	   a total. The frame's four row origins are 0 / 458 / 948 / 1438, which is
	   not a constant pitch; per-row max card heights are 378 / 410 / 410 / 378
	   and `origin + max + 80` reproduces the next origin every time. Rows differ
	   because titles wrap to two lines, which grid does natively. A pitch
	   derived from (1438 - 0) / 3 = 479.3 would be a number in no frame. */
	gap: 5rem 2.5rem; /* 80 / 40 */
	margin: 0;
	padding: 0;
	list-style: none;
}

.tc-blog-archive .tc-blog-archive__grid > li {
	margin: 0;
}

.tc-blog-archive .tc-blog-archive__empty {
	margin-block: 0;
	color: var(--wp--custom--color--base--black, #0a205b);
}

/* ══ Pagination ═════════════════════════════════════════════════════════════ */

.tc-blog-archive .tc-blog-archive__pagination {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--wp--preset--spacing--normal, 1rem); /* 16 */
	margin-block-start: 3.5rem; /* 56 */
	padding-block-start: var(--wp--preset--spacing--large, 1.5rem); /* 24 */
	border-block-start: 1px solid var(--wp--custom--color--neutral--200, #dee2e6);
}

.tc-blog-archive .tc-blog-archive__pagination > * {
	margin-block: 0;
}

.tc-blog-archive .tc-query-page-count {
	text-align: center;

	/* Literals: the frame binds Label/Small at weight 500, and `caption` — the
	   only role on label-small — is 400. Nothing in the system fits. */
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--label-small, 0.75rem); /* 12, flat */
	font-weight: 500;
	line-height: 1.3333; /* 16 */
	letter-spacing: 0.002em;
	color: var(--wp--custom--color--base--black, #0a205b);
}

.tc-blog-archive .wp-block-query-pagination {
	gap: var(--wp--preset--spacing--xsmall, 0.5rem); /* 8 — core's flex layout
													    ships 0.5em */
	margin: 0;
}

.tc-blog-archive .wp-block-query-pagination-numbers {
	display: flex;
	gap: var(--wp--preset--spacing--xsmall, 0.5rem); /* 8 */
	align-items: center;
	margin: 0;
}

/*
 * One box. The number cells, the ellipsis and the two arrows are the same 40x40
 * so they sit on one baseline; the ellipsis then drops its border and the
 * arrows swap their text for a chevron.
 */

.tc-blog-archive .wp-block-query-pagination .page-numbers,
.tc-blog-archive .wp-block-query-pagination-previous,
.tc-blog-archive .wp-block-query-pagination-next {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 40px;
	height: 40px;
	border: 1px solid var(--wp--custom--color--neutral--200, #dee2e6);
	border-radius: 2px;
	color: var(--wp--custom--color--base--black, #0a205b);
	text-decoration: none;

	/* Label/Extra Large, bold. `label-x-large` is emitted as a preset and NO
	   `.ftm-type-*` role consumes it anywhere on the site — this is its only
	   use — so size comes from the preset and the rest are literals. */
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--label-x-large, 1rem); /* 16, flat */
	font-weight: 700;
	line-height: 1.5; /* 24 */
	letter-spacing: 0.002em;
}

.tc-blog-archive .wp-block-query-pagination .page-numbers.current {
	border: 2px solid var(--wp--custom--color--secondary--600, #057db9);
	color: var(--wp--custom--color--secondary--600, #057db9);
}

/* The only cell in the frame with no border — verified on `43869:19287`, which
   binds no neutral/200 at all where every sibling does. */

.tc-blog-archive .wp-block-query-pagination .page-numbers.dots {
	border-color: transparent;
}

/*
 * Icon-only arrows. `paginationArrow: "none"` removes core's arrow glyph but
 * keeps the "Previous Page" / "Next Page" label, which is the link's accessible
 * name — so it is pushed out of the box rather than removed. `display: none` or
 * `font-size: 0` would leave the control unnamed.
 */

.tc-blog-archive .wp-block-query-pagination-previous,
.tc-blog-archive .wp-block-query-pagination-next {
	position: relative;
	overflow: hidden;
	text-indent: 110%;
	white-space: nowrap;
}

.tc-blog-archive .wp-block-query-pagination-previous::before,
.tc-blog-archive .wp-block-query-pagination-next::before {
	content: "";
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 50%;
	width: 20px;
	height: 20px;
	transform: translate(-50%, -50%);
	background-color: var(--wp--custom--color--base--black, #0a205b);
}

.tc-blog-archive .wp-block-query-pagination-previous::before {
	/* 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-chevron-left) center / contain no-repeat;
	mask: var(--tc-icon-chevron-left) center / contain no-repeat;
}

.tc-blog-archive .wp-block-query-pagination-next::before {
	/* stylelint-disable-next-line property-no-vendor-prefix -- as above */
	-webkit-mask: var(--tc-icon-chevron-right) center / contain no-repeat;
	mask: var(--tc-icon-chevron-right) center / contain no-repeat;
}

.tc-blog-archive .wp-block-query-pagination a:focus-visible {
	outline: 2px solid var(--wp--custom--color--secondary--600, #057db9);
	outline-offset: 2px;
}

/* ══ Breakpoints — DERIVED, no board exists below 1400 (D1) ════════════════ */

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

	.page-section .tc-blog-archive {
		padding-block-start: 5rem; /* 80 — the frame's own value */
	}

	.tc-blog-archive .tc-blog-archive__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

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

	.tc-blog-archive .tc-blog-archive__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}