/*
 * suzinok.css - the article index at /category/suzinok/.
 *
 * Mobile-first, like every other page here: the rules below describe the phone,
 * and the single min-width block at the bottom is the desktop. Measured against
 * the mockup at 390 px and 1440 px.
 *
 * THE GRID IS A GRID, NOT A FLEX ROW. Three columns of 351 px inside the
 * 1100 px container is what the mockup draws, and grid gives that with one
 * declaration and equal-height cards for free. This is written down because the
 * front page learned it the hard way: cards laid out with flex broke at the
 * widths between the breakpoints, where a wrapped row leaves one card stretched
 * across the space of three.
 */

.str-hero {
	padding-block: var( --space-8 ) var( --space-6 );
}

.str-hero__kicker {
	margin: 0;
	color: var( --text-meta );
	font-size: var( --fs-eyebrow );
	font-weight: var( --fw-bold );
	letter-spacing: var( --ls-eyebrow );
	text-transform: uppercase;
}

.str-hero__title {
	margin: var( --space-2 ) 0 0;
	color: var( --text-heading );
	font-size: var( --fs-display );
	line-height: var( --lh-tight );
	letter-spacing: var( --ls-display );
}

.str-hero__lead {
	max-width: 640px;
	margin: var( --space-3 ) 0 0;
	color: var( --text-body );
	font-size: var( --fs-lead );
	line-height: var( --lh-relaxed );
}

/* ── Featured ────────────────────────────────────────────────────────────── */

.str-list {
	padding-block: 0 var( --space-12 );
}

.str-featured {
	margin-bottom: var( --space-6 );
}

.str-featured__body {
	padding: var( --space-6 );
}

.str-featured__flags {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var( --space-2 );
	margin: 0 0 var( --space-3 );
}

.str-featured__badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border-radius: var( --radius-pill );
	padding: 5px 12px;
	background: var( --tint-ice );
	color: var( --color-accent-text );
	font-size: var( --fs-caption );
	font-weight: var( --fw-bold );
}

.str-featured__badge-icon {
	font-family: var( --font-icon );
	font-size: 16px;
}

.str-featured__title {
	margin: 0 0 var( --space-3 );
	color: var( --text-heading );
	font-size: var( --fs-h2 );
	line-height: var( --lh-heading );
}

.str-featured__excerpt {
	margin: 0 0 var( --space-4 );
	color: var( --text-body );
	font-size: var( --fs-body );
	line-height: var( --lh-relaxed );
}

.str-featured__cta {
	background: var( --action-primary );
	color: var( --color-surface );
}

.str-featured__link:hover .str-featured__cta {
	background: var( --action-primary-hover );
}

/* ── Grid ────────────────────────────────────────────────────────────────── */

.str-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var( --space-6 );
}

/* ── Empty ───────────────────────────────────────────────────────────────── */

.str-empty {
	padding-block: var( --space-6 ) var( --space-12 );
	text-align: center;
}

.str-empty__icon {
	font-family: var( --font-icon );
	font-size: 40px;
	color: var( --tint-icon-muted );
}

.str-empty__title {
	margin: var( --space-3 ) 0 0;
	color: var( --text-heading );
	font-size: var( --fs-h2 );
	line-height: var( --lh-heading );
}

.str-empty__text {
	max-width: 520px;
	margin: var( --space-3 ) auto 0;
	color: var( --text-body );
	font-size: var( --fs-body );
	line-height: var( --lh-relaxed );
}

.str-empty__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var( --space-3 );
	margin: var( --space-6 ) 0 0;
}

.str-empty__cta {
	background: var( --action-primary );
	color: var( --color-surface );
}

.str-empty__cta:hover {
	background: var( --action-primary-hover );
}

.str-empty__cta--secondary {
	background: var( --surface-card );
	border-color: var( --border-control );
	color: var( --text-heading );
}

.str-empty__cta--secondary:hover {
	background: var( --surface-soft );
}

/* ── Pagination ──────────────────────────────────────────────────────────── */

.str-pagination {
	margin-top: var( --space-8 );
}

.str-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var( --space-2 );
}

.str-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	border: 1px solid var( --color-border );
	border-radius: var( --radius-pill );
	padding-inline: var( --space-3 );
	color: var( --text-body );
	font-size: var( --fs-sm );
	font-weight: var( --fw-bold );
	text-decoration: none;
}

.str-pagination .page-numbers.current {
	border-color: var( --action-primary );
	background: var( --action-primary );
	color: var( --color-surface );
}

/* ── Desktop ─────────────────────────────────────────────────────────────── */

@media ( min-width: 921px ) {

	.str-hero {
		padding-block: var( --space-12 ) var( --space-8 );
	}

	/*
	 * The featured card becomes two columns only when it has an image to put in
	 * the first one. Without a thumbnail the text spans the full width instead
	 * of sitting in a half-empty row.
	 */
	.str-featured__link:has( .str-featured__media ) {
		display: grid;
		grid-template-columns: 1fr 1fr;
		align-items: center;
	}

	.str-featured__body {
		padding: var( --space-8 );
	}

	.str-grid {
		grid-template-columns: repeat( 3, 1fr );
	}
}