/* ==========================================================================
   WP Mojster — Blog archive styles (Posts page /blog/ + category archives)
   Ported from the approved archive cards: design-reference/blog/archive.html
   (2B desktop / 2C tablet / 2D mobile) and blog/archive-states.html
   (2E post-card states · 2F category nav · 2G pagination · 2H empty state).
   Breakpoints: 640 / 768 / 1024 only (tokens.css rule), mobile-first.
   Motion: the token motion set only — color / background-color /
   border-color / box-shadow at var(--transition-fast).
   ========================================================================== */

/* ==========================================================================
   Archive hero — compact paper band (2B); owns the page H1
   ========================================================================== */
.bhero {
	background: var(--color-paper);
	padding-top: var(--space-16);
}

.bhero .eyeb {
	font-size: var(--text-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: var(--tracking-eyebrow);
	color: var(--color-primary);
	margin-bottom: 12px;
}

/* Signature level mark above the H1 — the .section-heading::before echo */
.bhero h1::before {
	content: "";
	display: block;
	width: 32px;
	height: 3px;
	background: var(--color-primary);
	border-radius: 2px;
	margin-bottom: var(--space-4);
}

.bhero h1 {
	font-size: var(--text-xl);
	font-weight: 700;
	margin-bottom: 14px;
}

.bhero .lead {
	font-size: var(--text-base);
	line-height: 1.55;
	color: var(--color-text-muted);
	max-width: var(--measure-max);
}

/* Hidden-nav state (2F, decision #8): below the category threshold no nav
   markup exists, so the hero closes itself — 40px padding + hairline */
.bhero--no-nav {
	padding-bottom: 40px;
	border-bottom: 1px solid var(--color-border);
}

/* ==========================================================================
   Category nav — quiet link row closing the hero band (2F)
   ========================================================================== */
.catnav {
	margin-top: 40px;
	border-bottom: 1px solid var(--color-border);
}

.catnav ul {
	/* the classless <ul> misses global.css's ul[class] reset */
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-1) 28px; /* wrapped rows keep their 48px targets */
}

.catnav a {
	display: inline-flex;
	align-items: center;
	min-height: 48px;
	font-size: 15px;
	font-weight: 500;
	color: var(--color-text-muted);
	text-decoration: none;
	/* reserved bar so activation never shifts layout */
	border-bottom: 2px solid transparent;
	transition: color var(--transition-fast), border-color var(--transition-fast);
}
.catnav a:hover { color: var(--color-primary-strong); }
/* Inset ring: the 48px boxes sit flush in a tight band and 4px above a
   wrapped row — an outset ring would clip at the band edge (2F) */
.catnav a:focus-visible { outline: var(--focus-ring); outline-offset: -2px; border-radius: 2px; }
.catnav a[aria-current="page"] {
	color: var(--color-ink);
	font-weight: 600;
	border-bottom-color: var(--color-primary);
}

/* ==========================================================================
   Archive grid — surface band, 3-up ≥1024 / 2-up ≥640 / 1-up below (2B–2D)
   ========================================================================== */
.bgrid-band {
	background: var(--color-surface);
	padding-top: var(--space-16);
	padding-bottom: var(--space-16);
}

/* Scoped under .bgrid-band: the service benefits part reuses the bare
   `bgrid` class name (.svc-benefits .bgrid in service.css) — the sheets
   never co-load today, but the scope keeps that collision impossible */
.bgrid-band .bgrid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--grid-gutter);
}

/* ==========================================================================
   Post card (2E) — .card conventions, stretched title link, two tab stops
   ========================================================================== */
.post-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--color-paper);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-card);
	overflow: hidden;
	box-shadow: var(--shadow-card);
	transition: box-shadow var(--transition-fast), border-color var(--transition-fast);
}
.post-card:hover,
.post-card:focus-within {
	border-color: var(--color-primary);
	box-shadow: var(--shadow-card-hover);
}

/* Media: flush-top variant of .media-frame — the card owns border and
   radius, so only the bottom hairline stays; 16:9 per the approved card */
.post-card .pc-media {
	aspect-ratio: 16 / 9;
	background: var(--color-surface);
	border: 0;
	border-bottom: 1px solid var(--color-border);
	border-radius: 0;
}

/* Missing featured image (2E): intentional quiet placeholder — one slate
   32×3 level mark, #AEBDC4 from the approved card (deliberately not petrol,
   which would read as loading; not the logo, no icon) */
.post-card .pc-media--none {
	display: flex;
	align-items: center;
	justify-content: center;
}
.post-card .pc-media--none::before {
	content: "";
	width: 32px;
	height: 3px;
	border-radius: 2px;
	background: #AEBDC4;
}

.pc-body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 20px var(--space-6) var(--space-6);
}

/* Category link: 13px visual, 48px tap target via padding + negative-margin
   compensation (net 10px below text); z-index lifts it above the stretch
   layer so it stays independently clickable (2E tab stop 1) */
.pc-cat {
	position: relative;
	z-index: 2;
	align-self: flex-start;
	font-size: 13px;
	font-weight: 600;
	color: var(--color-primary);
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	padding: 14px 8px;
	margin: -14px -8px -4px;
	transition: color var(--transition-fast);
}
.pc-cat:hover {
	color: var(--color-primary-strong);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.pc-cat:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); border-radius: 2px; }

.post-card h2 {
	font-size: var(--text-md);
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.01em;
	margin-bottom: 10px;
}

/* Stretched primary link (cardlink pattern, 2E tab stop 2): its own outline
   is suppressed and the focus ring is drawn on the card box instead, so the
   ring hugs the rounded border rather than the invisible full-card layer */
.pc-title { color: inherit; text-decoration: none; }
.pc-title::after { content: ""; position: absolute; inset: 0; }
.post-card:hover h2 { color: var(--color-primary-strong); }
.pc-title:focus-visible { outline: none; }
.post-card:has(.pc-title:focus-visible) { outline: var(--focus-ring); outline-offset: var(--focus-offset); }

.pc-excerpt {
	font-size: 15px;
	color: var(--color-text-muted);
	margin-bottom: var(--space-4);
}

/* margin-top:auto bottom-anchors the date, so a missing excerpt (node
   omitted entirely) opens the gap above it and the row stays aligned (2E) */
.pc-date {
	margin-top: auto;
	font-size: var(--text-sm);
	color: var(--color-text-muted);
}

/* ==========================================================================
   Pagination (2G) — styling the native the_posts_pagination() output:
   .nav-links is the row (the design card's .bpag), .page-numbers the items;
   the current page is a non-link span, the ellipsis a decorative span.
   Scoped to .bgrid-band so nothing reaches other .navigation blocks
   (e.g. the Phase 7 single-post navigation).
   ========================================================================== */
.bgrid-band .navigation.pagination { margin-top: var(--space-12); }

.bgrid-band .nav-links {
	display: flex;
	flex-wrap: wrap; /* only ever engages below 640 */
	justify-content: center;
	align-items: center;
	gap: var(--space-2);
}

.bgrid-band .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 48px;
	min-height: 48px;
	padding: 0 14px;
	border-radius: var(--radius-btn);
	font-size: 15px;
	font-weight: 500;
	color: var(--color-text);
	text-decoration: none;
	transition: background-color var(--transition-fast), color var(--transition-fast);
}

/* Quiet slate fill from the approved 2G card — a shape cue; petrol stays
   reserved for the current page so hover never impersonates it */
.bgrid-band a.page-numbers:hover { background: #E7EEF0; color: var(--color-ink); }
/* Outset ring: items float free with 8px gaps, nothing to clip against */
.bgrid-band a.page-numbers:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }

.bgrid-band .page-numbers.current {
	background: var(--color-primary);
	color: #fff;
	font-weight: 600;
}

/* Decorative ellipsis span — never focusable; the 48px box from the shared
   item rule is kept for row rhythm only */
.bgrid-band .page-numbers.dots { color: var(--color-text-muted); }

/* ==========================================================================
   Empty state (2H) — centered paper panel replacing .bgrid in the band
   ========================================================================== */
.bempty {
	max-width: 560px;
	margin: 0 auto;
	background: var(--color-paper);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-card);
	padding: 40px var(--space-6) 28px;
	text-align: center;
}

/* The 2E placeholder's quiet slate level mark opens the panel (decorative) */
.bempty::before {
	content: "";
	display: block;
	width: 32px;
	height: 3px;
	border-radius: 2px;
	background: #AEBDC4;
	margin: 0 auto 20px;
}

.be-h {
	font-size: 22px;
	font-weight: 600;
	letter-spacing: -0.01em;
	line-height: 1.3;
	margin-bottom: 10px;
}

.be-p {
	font-size: 15px;
	line-height: var(--leading-body);
	color: var(--color-text-muted);
	max-width: 46ch;
	margin: 0 auto;
}

.be-links {
	margin-top: 10px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	column-gap: 28px;
}
.be-links a {
	display: inline-flex;
	align-items: center;
	min-height: 48px;
	font-size: 15px;
	transition: color var(--transition-fast);
}
/* Outset ring — links float free inside the panel padding (the pagination
   rationale, not the catnav's inset) */
.be-links a:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); border-radius: 2px; }

.be-link {
	font-weight: 600;
	color: var(--color-primary);
	text-decoration: none;
}
.be-link:hover {
	color: var(--color-primary-strong);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Quiet secondary — underline is the non-color link cue at rest */
.be-alt {
	font-weight: 500;
	color: var(--color-text-muted);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.be-alt:hover { color: var(--color-primary-strong); }

/* ==========================================================================
   Responsive steps — the existing 640 / 768 / 1024 breakpoints only
   ========================================================================== */
@media (min-width: 640px) {
	.bgrid-band .bgrid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 768px) {
	.bhero h1 { font-size: var(--text-2xl); }
	.bhero .lead { font-size: var(--text-md); line-height: 1.5; }
	.bgrid-band { padding-bottom: var(--space-24); }
}

@media (min-width: 1024px) {
	.bgrid-band .bgrid { grid-template-columns: repeat(3, 1fr); }
}