/*
 * archive.css — archive.php / search.php / 404.php only.
 * Enqueued by functions.php (handle "aiblogsai-archive", depends on "aiblogsai")
 * as the fallback template stylesheet for every non-front, non-singular view.
 * Tokens and shared components live in style.css — nothing is redefined here.
 */

.archive-layout {
	padding-block: var(--space-7) var(--space-8);
}

/* --- page head ------------------------------------------------------------ */

.page-head {
	margin-bottom: var(--space-6);
	padding-bottom: var(--space-5);
	border-bottom: 1px solid var(--color-line);
}

.page-head__title {
	margin: var(--space-3) 0 0;
}

.page-head__desc {
	font-size: var(--text-md);
	line-height: 1.6;
	color: var(--color-ink-soft);
	margin-top: var(--space-4);
}

.page-head__desc p {
	margin: 0;
}

.page-head__desc p + p {
	margin-top: var(--space-3);
}

.page-head__count {
	margin-top: var(--space-4);
	text-transform: uppercase;
	letter-spacing: 0.12em;
}

/* --- right rail (>= 1024px only, per the layout spec) --------------------- */

.archive-rail {
	display: none;
}

@media (min-width: 1024px) {
	.archive-layout--rail {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 250px;
		gap: var(--space-7);
		align-items: start;
	}

	.archive-rail {
		display: block;
		position: sticky;
		top: var(--space-5);
		border-left: 1px solid var(--color-line);
		padding-left: var(--space-5);
	}

	.archive-rail .widget + .widget {
		margin-top: var(--space-6);
	}

	.archive-rail .search-form {
		flex-direction: column;
	}

	.archive-rail .search-form .search-submit {
		padding: 0.85em 1.2em;
	}
}

/* The rail eats ~250px, so three cards only fit once the viewport is wide. */
@media (min-width: 1024px) and (max-width: 1279px) {
	.archive-layout--rail .card-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* --- empty state (no results / 404) --------------------------------------- */

.empty-state {
	padding-block: var(--space-4) var(--space-6);
}

.empty-state__title {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: var(--text-lg);
	line-height: 1.2;
	margin: 0 0 var(--space-4);
}

.empty-state__body {
	font-size: var(--text-md);
	line-height: 1.65;
	color: var(--color-ink-soft);
	margin: 0;
}

.empty-state__form {
	max-width: 32rem;
	margin-top: var(--space-6);
}

.empty-state__label {
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--color-ink-soft);
	margin: var(--space-7) 0 var(--space-3);
}