/**
 * Blog list ("Blog") — block 11.
 *
 * 1:1 with the prototype's blog-list screen: a mono eyebrow + serif H1, mono
 * year-filter pills, then a card grid — a span-2 featured hero (21:9 photo,
 * accent meta) and regular 3:2 cards (muted date meta). The shared card lift +
 * image zoom come from the `.at-card` / `.at-imgzoom` utilities in tokens.css;
 * this file only adds the layout, type and colour the prototype specifies, plus
 * resets for the legacy refur p/h1/a leaks (padding, underline, visited/hover
 * recolours) so the chrome stays byte-identical to the prototype.
 *
 * @package atvesmir
 */

/* Container — prototype <main> metrics. */
.at-bloglist {
	max-width: 1180px;
	margin: 0 auto;
	padding: clamp(34px, 5vw, 60px) clamp(18px, 5vw, 48px) 0;
}

/* Eyebrow (reset refur p{padding:0 0 20px}). */
.at-bloglist__eyebrow {
	font-family: var(--font-mono);
	font-size: 12px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--ink3);
	margin: 0 0 10px;
	padding: 0;
}

/* H1 (reset refur h1{padding:0 0 25px}). */
/* line-height:1.65 reproduces the prototype's metric — its H1 inherits the root
 * body line-height (1.65); the token h1{line-height:1.1} would shrink the bbox
 * by 30px and misalign the pills below. */
.at-bloglist__title {
	font-size: clamp(2.2rem, 5vw, 3.4rem);
	font-weight: 400;
	letter-spacing: -.02em;
	line-height: 1.65;
	margin: 0;
	padding: 0;
}

/* Year-filter pills. */
.at-bloglist__years {
	display: flex;
	gap: 9px;
	flex-wrap: wrap;
	margin: 28px 0 36px;
	font-family: var(--font-mono);
	font-size: 13px;
}

.at-bloglist__yr {
	padding: 7px 15px;
	border-radius: 999px;
	border: 1px solid var(--line2);
	background: transparent;
	line-height: 1.65;
	text-decoration: none;
	white-space: nowrap;
}

/* Pin every state to the resting colour — the prototype never recolours a pill
 * on hover/visit/focus, and class+pseudo (0,2,0) beats refur's a:visited /
 * a:hover (0,1,1) and the token a:hover{accent2}. */
.at-bloglist__yr,
.at-bloglist__yr:link,
.at-bloglist__yr:visited,
.at-bloglist__yr:hover,
.at-bloglist__yr:focus,
.at-bloglist__yr:active {
	color: var(--ink2);
}

/* The prototype's active pill is borderless (the inactive pills carry the 1px
 * line2 border). Dropping the border keeps it 2px narrower — without it every
 * following pill shifts right and the row diffs. */
.at-bloglist__yr.is-active,
.at-bloglist__yr.is-active:link,
.at-bloglist__yr.is-active:visited,
.at-bloglist__yr.is-active:hover,
.at-bloglist__yr.is-active:focus,
.at-bloglist__yr.is-active:active {
	background: var(--ink);
	color: var(--bg);
	border: 0;
}

/* Card grid. */
.at-bloglist__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: clamp(18px, 2.4vw, 30px);
	padding-bottom: 20px;
}

.at-bloglist__card {
	display: block;
	background: var(--bg2);
	border: 1px solid var(--line);
	border-radius: 16px;
	overflow: hidden;
	min-width: 0;
}

.at-bloglist__card--featured {
	grid-column: span 2;
}

.at-bloglist__thumb {
	display: block;
	aspect-ratio: 3 / 2;
	background: var(--bg3);
}

.at-bloglist__card--featured .at-bloglist__thumb {
	aspect-ratio: 21 / 9;
}

/* height:100% overrides the global img{height:auto}; cover fills the box. */
.at-bloglist__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Regular card body. */
.at-bloglist__body {
	display: block;
	padding: 22px 22px 26px;
}

.at-bloglist__card--featured .at-bloglist__body {
	padding: 26px 26px 30px;
}

.at-bloglist__meta {
	display: block;
	font-family: var(--font-mono);
	font-size: 11.5px;
	color: var(--ink3);
	margin-bottom: 9px;
}

.at-bloglist__card--featured .at-bloglist__meta {
	color: var(--accent);
	margin-bottom: 10px;
}

.at-bloglist__cardtitle {
	display: block;
	font-size: 1.28rem;
	line-height: 1.25;
	color: var(--ink);
	margin-bottom: 8px;
}

.at-bloglist__card--featured .at-bloglist__cardtitle {
	font-size: clamp(1.5rem, 2.4vw, 2rem);
	line-height: 1.18;
	margin-bottom: 12px;
}

.at-bloglist__excerpt {
	display: block;
	font-size: .98rem;
	color: var(--ink2);
	line-height: 1.5;
}

.at-bloglist__card--featured .at-bloglist__excerpt {
	font-size: 1.05rem;
	line-height: 1.55;
	max-width: 60ch;
}

/* Single-column layouts can't hold a 2-track span — drop the hero to one track
 * so it never overflows the grid on tablet/mobile. */
@media (max-width: 660px) {
	.at-bloglist__card--featured {
		grid-column: auto;
	}
	.at-bloglist__card--featured .at-bloglist__thumb {
		aspect-ratio: 3 / 2;
	}
}

/* Pagination — not in the curated 4-post prototype demo (too few posts to
 * page), but required for the live 230-post archive. Kept on-brand: mono pills
 * echoing the year filter, below all cards. */
.at-bloglist .at-bloglist__pagination,
.at-bloglist .pagination {
	margin: clamp(36px, 5vw, 60px) 0 0;
	padding-bottom: 8px;
}

.at-bloglist .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
	align-items: center;
	font-family: var(--font-mono);
	font-size: 13px;
}

.at-bloglist .nav-links .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	padding: 7px 13px;
	border-radius: 999px;
	border: 1px solid var(--line2);
	background: transparent;
	color: var(--ink2);
	line-height: 1.65;
	text-decoration: none;
}

.at-bloglist .nav-links a.page-numbers:hover,
.at-bloglist .nav-links a.page-numbers:focus,
.at-bloglist .nav-links a.page-numbers:visited,
.at-bloglist .nav-links a.page-numbers:active {
	color: var(--ink2);
}

.at-bloglist .nav-links .page-numbers.current {
	background: var(--ink);
	color: var(--bg);
	border-color: var(--ink);
}

.at-bloglist .nav-links .page-numbers.dots {
	border-color: transparent;
	min-width: 0;
	padding: 7px 4px;
}