/* SN Blog — archives: category, tag, author, date, search, 404 (v2) */

.snb-archive {
	background: var(--snb-bg);
	color: var(--snb-ink);
}

/* -------------------------------------------------------------------------
   Archive header band
   ---------------------------------------------------------------------- */
.snb-archive-head {
	background: var(--snb-surface);
	border-bottom: 1px solid var(--snb-line);
	padding: clamp(28px, 4vw, 48px) 0 clamp(24px, 3vw, 36px);
}

.snb-archive-head .snb-container {
	max-width: var(--snb-container);
}

.snb-archive-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 var(--snb-s3);
	font-size: var(--snb-fs-xs);
	font-weight: var(--snb-fw-bold);
	letter-spacing: var(--snb-track-caps);
	text-transform: uppercase;
	color: var(--snb-accent);
}

.snb-archive-eyebrow::before {
	content: "";
	width: 18px;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
}

.snb-archive-title {
	margin: 0 0 var(--snb-s3);
	font-size: var(--snb-fs-5xl);
	font-weight: var(--snb-fw-black);
	line-height: var(--snb-lh-tight);
	letter-spacing: var(--snb-track-tight);
	color: var(--snb-ink);
	max-width: 26ch;
}

.snb-archive-desc {
	margin: 0 0 var(--snb-s4);
	max-width: 68ch;
	font-size: var(--snb-fs-body);
	line-height: var(--snb-lh-relaxed);
	color: var(--snb-ink-2);
}

.snb-archive-meta a {
	display: inline-flex;
	align-items: center;
	padding: 3px 0;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.snb-archive-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--snb-s2) var(--snb-s4);
	margin: 0;
	font-size: var(--snb-fs-sm);
	color: var(--snb-muted);
}

.snb-archive-count {
	font-weight: var(--snb-fw-semibold);
	color: var(--snb-ink-2);
}

/* Author archive extras */
.snb-author-head {
	display: flex;
	align-items: center;
	gap: var(--snb-s5);
	flex-wrap: wrap;
}

.snb-author-head img {
	width: 72px;
	height: 72px;
	border-radius: var(--snb-r-pill);
	border: 1px solid var(--snb-line);
}

.snb-author-head .snb-author-head-text {
	min-width: 0;
	flex: 1 1 320px;
}

/* Search form inside the band */
.snb-archive-search {
	max-width: 560px;
	margin-top: var(--snb-s5);
}

.snb-archive-search .snb-search {
	margin: 0;
	box-shadow: none;
	border: 1px solid var(--snb-line-2);
}

.snb-archive-search .snb-search:focus-within {
	border-color: var(--snb-accent);
	box-shadow: 0 0 0 4px var(--snb-accent-soft);
}

/* Category chips row */
.snb-chip-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--snb-s2);
	margin-top: var(--snb-s5);
}

/* -------------------------------------------------------------------------
   Results
   ---------------------------------------------------------------------- */
.snb-archive-body {
	max-width: var(--snb-container);
	margin-inline: auto;
	padding: clamp(28px, 4vw, 44px) var(--snb-gutter) clamp(48px, 6vw, 76px);
}

.snb-archive-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(20px, 2.4vw, 30px);
}

.snb-archive-grid .snb-card-thumb {
	aspect-ratio: 16 / 10;
}

.snb-archive-foot {
	display: flex;
	flex-direction: column;
	gap: var(--snb-s7);
	margin-top: clamp(40px, 5vw, 64px);
	padding-top: clamp(32px, 4vw, 48px);
	border-top: 1px solid var(--snb-line);
}

.snb-cta-band {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--snb-s5);
	padding: clamp(24px, 3vw, 36px);
	background: linear-gradient(135deg, var(--snb-navy-800), #14305a);
	border-radius: var(--snb-r-xl);
	color: #fff;
}

.snb-cta-band h2 {
	margin: 0 0 6px;
	font-size: var(--snb-fs-2xl);
	font-weight: var(--snb-fw-bold);
	letter-spacing: var(--snb-track-snug);
	color: #fff;
}

.snb-cta-band p {
	margin: 0;
	max-width: 56ch;
	font-size: var(--snb-fs-ui);
	color: rgba(255, 255, 255, 0.72);
}

/* -------------------------------------------------------------------------
   404 / empty states
   ---------------------------------------------------------------------- */
.snb-404 {
	max-width: 760px;
	margin-inline: auto;
	padding: clamp(48px, 8vw, 96px) var(--snb-gutter);
	text-align: center;
}

.snb-404-code {
	margin: 0 0 var(--snb-s4);
	font-size: clamp(64px, 14vw, 132px);
	font-weight: var(--snb-fw-black);
	line-height: 0.9;
	letter-spacing: -0.05em;
	background: linear-gradient(120deg, var(--snb-accent), var(--snb-accent-on-dark));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.snb-404 h1 {
	margin: 0 0 var(--snb-s4);
	font-size: var(--snb-fs-4xl);
	font-weight: var(--snb-fw-bold);
	letter-spacing: var(--snb-track-tight);
	line-height: var(--snb-lh-snug);
}

.snb-404 p {
	margin: 0 auto var(--snb-s6);
	max-width: 58ch;
	font-size: var(--snb-fs-body);
	color: var(--snb-ink-2);
}

.snb-404 .snb-search {
	margin-bottom: var(--snb-s5);
	box-shadow: none;
	border: 1px solid var(--snb-line-2);
}

.snb-404-gallery {
	max-width: var(--snb-container);
	margin-inline: auto;
	padding: 0 var(--snb-gutter) clamp(48px, 6vw, 80px);
}

.snb-404-gallery h2 {
	margin: 0 0 var(--snb-s5);
	font-size: var(--snb-fs-2xl);
	font-weight: var(--snb-fw-bold);
	letter-spacing: var(--snb-track-snug);
}

.snb-404-gallery .snb-grid {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.snb-suggest-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--snb-s2);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* -------------------------------------------------------------------------
   Responsive
   ---------------------------------------------------------------------- */
/* A lone card in the final row spans the full width instead of leaving holes. */
@media (min-width: 1081px) {
	.snb-archive-grid > .snb-card:last-child:nth-child(3n + 1) {
		grid-column: 1 / -1;
	}

	.snb-archive-grid > .snb-card:last-child:nth-child(3n + 1) .snb-card-thumb {
		aspect-ratio: 24 / 9;
	}
}

@media (max-width: 1080px) {
	.snb-archive-grid > .snb-card:last-child:nth-child(odd) {
		grid-column: 1 / -1;
	}

	.snb-archive-grid > .snb-card:last-child:nth-child(odd) .snb-card-thumb {
		aspect-ratio: 21 / 9;
	}
}

@media (max-width: 1080px) {
	.snb-archive-grid,
	.snb-404-gallery .snb-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 700px) {
	.snb-archive-grid,
	.snb-404-gallery .snb-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.snb-cta-band {
		grid-template-columns: minmax(0, 1fr);
	}

	.snb-author-head img {
		width: 60px;
		height: 60px;
	}
}