/*
 * Blog Archive — Journal Archive: Featured Post + Filterable Grid.
 *
 * Layout: centered header → featured (2-col image|text) → filter tabs
 *   → 3-col post card grid → pagination.
 * Tablet: featured stacks (image full-width, text below); grid 2-col.
 * Mobile: featured stacks; post cards switch to compact horizontal layout
 *   (small square thumb + title inline).
 *
 * Post card helper (.wpdl-blog-post-card) shared with single-post related
 * grid — styles defined once here, reused there via the same class.
 *
 * Two-class selectors (0,2,0) beat WP layout rules (0,1,0) without !important.
 *
 * Tokens read:
 *   color.terracotta.500 / 300    — card placeholder, filter hover
 *   color.green.300 / 500 / 700   — card placeholder, featured image
 *   color.neutral.200 / 400       — card placeholder
 *   semantic.color.text.primary   — page title, featured title, card titles
 *   semantic.color.text.muted     — excerpts, pagination inactive, filter inactive
 *   semantic.color.border.base    — filter bar border, pagination underline
 *   semantic.color.bg.surface     — (reserved for future use)
 *   semantic.typography.display   — page title, featured title, card titles (Cormorant)
 *   semantic.typography.body      — kicker, meta, excerpt, filter tabs, pagination (Jost)
 *   space.1 – 10
 *   duration.base / easing.default
 */

/* ── Archive header ───────────────────────────────────────────────── */

.wpdl-blog-archive__kicker {
	font-family: var(--wp--custom--semantic--typography--body--font-family);
	font-size: 0.75rem;
	font-weight: 400;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--wp--custom--semantic--color--accent--primary);
	margin-block: var(--wp--custom--space--8) var(--wp--custom--space--4);
}

.wpdl-blog-archive__title.wp-block-heading {
	font-family: var(--wp--custom--semantic--typography--display--font-family);
	font-size: clamp(1.3125rem, 0.7rem + 2.68vw, 2.5rem);
	font-weight: 500;
	color: var(--wp--custom--semantic--color--text--primary);
	margin-block: 0 var(--wp--custom--space--9);
}

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

.wpdl-blog-archive__featured.wp-block-group {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: var(--wp--custom--space--8);
	align-items: center;
	margin-block: 0 var(--wp--custom--space--9);
}

.wpdl-blog-archive__featured-img.wp-block-image {
	margin-block: 0;
	min-block-size: 21.25rem;
	overflow: hidden;
	background-color: var(--wp--custom--semantic--color--brand--primary);
}

.wpdl-blog-archive__featured-img.wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.wpdl-blog-archive__featured-body.wp-block-group {
	margin-block: 0;
}

.wpdl-blog-archive__featured-meta {
	font-family: var(--wp--custom--semantic--typography--body--font-family);
	font-size: 0.625rem;
	font-weight: 400;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--custom--semantic--color--accent--primary);
	margin-block: 0 var(--wp--custom--space--5);
}

.wpdl-blog-archive__featured-title.wp-block-heading {
	font-family: var(--wp--custom--semantic--typography--display--font-family);
	font-size: clamp(1.1875rem, 0.8rem + 1.67vw, 1.875rem);
	font-weight: 500;
	color: var(--wp--custom--semantic--color--text--primary);
	margin-block: 0 var(--wp--custom--space--5);
}

.wpdl-blog-archive__featured-excerpt {
	font-family: var(--wp--custom--semantic--typography--body--font-family);
	font-size: 0.8125rem;
	font-weight: 300;
	line-height: 1.7;
	color: var(--wp--custom--semantic--color--text--muted);
	margin-block: 0 var(--wp--custom--space--6);
}

.wpdl-blog-archive__read-more {
	margin-block: 0;
}

.wpdl-blog-archive__read-link {
	font-family: var(--wp--custom--semantic--typography--body--font-family);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--custom--semantic--color--text--primary);
	text-decoration: underline;
	text-underline-offset: var(--wp--custom--space--1);
	transition: color var(--wp--custom--duration--base) var(--wp--custom--easing--default);
}

.wpdl-blog-archive__read-link:hover {
	color: var(--wp--custom--semantic--color--accent--primary);
}

/* ── Category filter tabs ─────────────────────────────────────────── */

.wpdl-blog-archive__filters.wp-block-group {
	gap: var(--wp--custom--space--7);
	align-items: center;
	padding-block: var(--wp--custom--space--6);
	border-block-start: 1px solid var(--wp--custom--semantic--color--border--base);
	border-block-end: 1px solid var(--wp--custom--semantic--color--border--base);
	margin-block: 0 var(--wp--custom--space--8);
}

.wpdl-blog-archive__filter {
	font-family: var(--wp--custom--semantic--typography--body--font-family);
	font-size: 0.75rem;
	font-weight: 400;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--custom--semantic--color--text--muted);
	margin-block: 0;
	cursor: pointer;
	padding-block-end: var(--wp--custom--space--2);
	border-block-end: 0.0938rem solid transparent;
	transition: color var(--wp--custom--duration--base) var(--wp--custom--easing--default);
}

.wpdl-blog-archive__filter:hover {
	color: var(--wp--custom--semantic--color--text--primary);
}

.wpdl-blog-archive__filter.is-active {
	color: var(--wp--custom--semantic--color--text--primary);
	border-block-end-color: var(--wp--custom--semantic--color--text--primary);
}

/* ── Post grid ────────────────────────────────────────────────────── */

.wpdl-blog-archive__grid.wp-block-group {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--wp--custom--space--8);
	margin-block: 0 var(--wp--custom--space--9);
}

/* ── Post card (shared with single-post related grid) ─────────────── */

.wpdl-blog-post-card.wp-block-group {
	display: flex;
	flex-direction: column;
	gap: var(--wp--custom--space--4);
	cursor: pointer;
	margin-block: 0;
}

.wpdl-blog-post-card__img.wp-block-image {
	overflow: hidden;
	margin-block: 0;
}

.wpdl-blog-post-card__img.wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--wp--custom--duration--base) var(--wp--custom--easing--default);
}

.wpdl-blog-post-card:is(:hover, :focus-within) .wpdl-blog-post-card__img.wp-block-image img {
	transform: scale(1.015);
}

/* Placeholder colours — set on archive grid children */
.wpdl-blog-archive__grid > .wpdl-blog-post-card:nth-child(1) .wpdl-blog-post-card__img.wp-block-image { background-color: var(--wp--custom--semantic--color--accent--primary); }
.wpdl-blog-archive__grid > .wpdl-blog-post-card:nth-child(2) .wpdl-blog-post-card__img.wp-block-image { background-color: var(--wp--custom--semantic--color--brand--primary); }
.wpdl-blog-archive__grid > .wpdl-blog-post-card:nth-child(3) .wpdl-blog-post-card__img.wp-block-image { background-color: var(--wp--custom--semantic--color--text--muted); }
.wpdl-blog-archive__grid > .wpdl-blog-post-card:nth-child(4) .wpdl-blog-post-card__img.wp-block-image { background-color: var(--wp--custom--semantic--color--brand--soft); }
.wpdl-blog-archive__grid > .wpdl-blog-post-card:nth-child(5) .wpdl-blog-post-card__img.wp-block-image { background-color: var(--wp--custom--semantic--color--accent--primary); }
.wpdl-blog-archive__grid > .wpdl-blog-post-card:nth-child(6) .wpdl-blog-post-card__img.wp-block-image { background-color: var(--wp--custom--semantic--color--border--subtle); }

.wpdl-blog-post-card__meta {
	font-family: var(--wp--custom--semantic--typography--body--font-family);
	font-size: 0.625rem;
	font-weight: 400;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--custom--semantic--color--accent--primary);
	margin-block: 0;
}

.wpdl-blog-post-card__title.wp-block-heading {
	font-family: var(--wp--custom--semantic--typography--display--font-family);
	font-size: clamp(0.8125rem, 0.65rem + 0.74vw, 1.1875rem);
	font-weight: 500;
	color: var(--wp--custom--semantic--color--text--primary);
	margin-block: 0;
	line-height: 1.3;
}

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

.wpdl-blog-archive__pagination.wp-block-group {
	gap: var(--wp--custom--space--6);
	align-items: center;
	margin-block: 0 var(--wp--custom--space--10);
}

.wpdl-blog-archive__page-link {
	font-family: var(--wp--custom--semantic--typography--body--font-family);
	font-size: 0.8125rem;
	font-weight: 400;
	letter-spacing: 0.06em;
	color: var(--wp--custom--semantic--color--text--muted);
	margin-block: 0;
}

.wpdl-blog-archive__page-link.is-current {
	color: var(--wp--custom--semantic--color--text--primary);
	border-block-end: 1px solid var(--wp--custom--semantic--color--text--primary);
	padding-block-end: 0.125rem;
}

.wpdl-blog-archive__page-a {
	color: var(--wp--custom--semantic--color--text--muted);
	text-decoration: none;
	transition: color var(--wp--custom--duration--base) var(--wp--custom--easing--default);
}

.wpdl-blog-archive__page-a:hover {
	color: var(--wp--custom--semantic--color--text--primary);
}

/* ── Tablet (< 64em / 1024px) ────────────────────────────────────── */

@media (width < 64em) {
	.wpdl-blog-archive__featured.wp-block-group {
		grid-template-columns: 1fr;
	}

	.wpdl-blog-archive__featured-img.wp-block-image {
		min-block-size: 18.75rem;
	}

	.wpdl-blog-archive__grid.wp-block-group {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--wp--custom--space--6);
	}
}

/* ── Mobile (< 40em / 640px) ─────────────────────────────────────── */

@media (width < 40em) {
	.wpdl-blog-archive__featured-img.wp-block-image {
		min-block-size: 13.75rem;
	}

	.wpdl-blog-archive__grid.wp-block-group {
		grid-template-columns: 1fr;
		gap: var(--wp--custom--space--4);
	}

	/* Compact horizontal card layout on mobile */
	.wpdl-blog-post-card.wp-block-group {
		flex-direction: row;
		align-items: center;
		gap: var(--wp--custom--space--5);
	}

	.wpdl-blog-post-card__img.wp-block-image {
		flex: 0 0 4rem;
		aspect-ratio: 1 / 1;
		min-block-size: 4rem;
	}

	.wpdl-blog-archive__filters.wp-block-group {
		gap: var(--wp--custom--space--5);
		overflow-x: auto;
		flex-wrap: nowrap;
		scrollbar-width: none;
	}

	.wpdl-blog-archive__filters.wp-block-group::-webkit-scrollbar {
		display: none;
	}
}

/* ── Reduced motion ───────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	.wpdl-blog-post-card__img.wp-block-image img,
	.wpdl-blog-archive__read-link,
	.wpdl-blog-archive__filter,
	.wpdl-blog-archive__page-a {
		transition: none;
	}
}