/*
 * dbi services · Neve Child Theme
 * assets/css/most-read.css — the "Most read" module (backlog #20).
 *
 * Loaded on the front page and on single posts (inc/enqueue.php);
 * markup in template-parts/most-read.php, data from inc/post-views.php.
 * A light card — the counterpart of the dark CTA it follows on the
 * homepage — using the same label language as the CTA (teal dash +
 * caps) so the two read as one editorial system. Consumes .dbi-scope
 * tokens only.
 *
 * Owner feedback 2026-09-04 (plan-2026-09-04-feedback.md §3): flat
 * hierarchy — two identical ranked lists, the all-time #1 only slightly
 * larger, no excerpt; every text token ≥ 4.5:1 on the white card, so
 * the secondary text (kickers, counts, stat, ranks) uses --muted, never
 * --faint (2.9:1). The teal label is the shared CTA language and is left
 * to the WCAG pass (enhancements #26).
 *
 * @package dbi-neve-child
 */

li.dbi-most-read-cell {
	grid-column: 1 / -1;
	list-style: none;
}
div.dbi-most-read-cell {
	margin: 40px 0 48px;
}

.dbi-most-read {
	background: var( --bg-pure );
	border: 1px solid var( --border );
	border-radius: 16px;
	padding: clamp( 28px, 4vw, 44px ) clamp( 24px, 4vw, 48px );
	font-family: var( --f-body );
}

/* Header: one row with the label left and the 30-day stat right (wraps
   on narrow widths), then the explainer on its own line */
.dbi-most-read-head {
	margin: 0 0 28px;
}
.dbi-most-read-head-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 8px 24px;
}
.dbi-most-read-stat {
	margin: 0;
	font-size: .8rem;
	letter-spacing: .01em;
	color: var( --muted );
}
.dbi-most-read-stat span {
	color: var( --text );
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}
.dbi-most-read-lead {
	margin: 14px 0 0;
	max-width: 62ch;
	font-family: var( --f-display );
	font-size: clamp( 1.15rem, 1.6vw, 1.35rem );
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: -.01em;
	color: var( --text );
}

.dbi-most-read-label {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	font-family: var( --f-body );
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var( --teal-dark );
}
.dbi-most-read-label::before {
	content: "";
	width: 20px;
	height: 1px;
	background: var( --teal );
	flex-shrink: 0;
}

.dbi-most-read-grid {
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) minmax( 0, 1fr );
	gap: 40px clamp( 32px, 5vw, 64px );
}

.dbi-most-read-kicker {
	margin: 0 0 6px;
	font-size: .7rem;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var( --muted );
}

/* Ranked lists: rank · title · count, one row each */
.dbi-most-read-list {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: dbi-most-read;
}
.dbi-most-read-list li {
	display: flex;
	align-items: baseline;
	gap: 16px;
	margin: 0;
	padding: 11px 0;
	border-top: 1px solid var( --divider );
	counter-increment: dbi-most-read;
}
.dbi-most-read-list li::before {
	content: counter( dbi-most-read );
	flex: 0 0 1.4em;
	font-family: var( --f-display );
	font-size: 1.05rem;
	line-height: 1;
	color: var( --muted );
	font-variant-numeric: tabular-nums;
}
.dbi-most-read-list a {
	flex: 1 1 auto;
	min-width: 0;
	font-size: .95rem;
	font-weight: 500;
	line-height: 1.4;
	color: var( --text );
	text-decoration: none;
	transition: color var( --t ) var( --ease );
}
.dbi-most-read-list a:hover {
	color: var( --teal-dark );
}
.dbi-most-read-count {
	flex: 0 0 auto;
	margin: 0 0 0 auto;
	font-size: .78rem;
	font-weight: 500;
	color: var( --muted );
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* The all-time #1: a modest step up (≈1.2× the rows), nothing more */
.dbi-most-read-alltime .dbi-most-read-list li:first-child a {
	font-size: 1.15rem;
	line-height: 1.3;
}

/* Keyboard focus mirrors hover (design-principles §6) */
.dbi-most-read a:focus-visible {
	outline: 2px solid var( --teal );
	outline-offset: 2px;
	border-radius: 2px;
}

@media ( max-width: 720px ) {
	.dbi-most-read-grid {
		grid-template-columns: 1fr;
		gap: 32px;
	}
	.dbi-most-read-list li {
		flex-wrap: wrap;
	}
	.dbi-most-read-list .dbi-most-read-count {
		flex-basis: 100%;
		margin-left: calc( 1.4em + 16px );
	}
}

/* ════════════════════════════════
   IN-PAGE ANCHOR (enhancements #43)
   The cell carries id="most-read"; the homepage hero proof line links
   to it. Two things make the landing legible without JavaScript:
   - scroll-margin-top keeps the card clear of the sticky filter bar
     (its height plus breathing room; --dbi-sticky-offset is the same
     hook dbi-blog.css uses if a sticky header is ever enabled);
   - :target lights the card's hairline teal — "you have arrived" —
     and settles back to the resting border; static teal border when
     motion is reduced.
   ════════════════════════════════ */
.dbi-most-read-cell {
	scroll-margin-top: calc( var( --dbi-sticky-offset, 0px ) + 88px );
}
.dbi-most-read-cell:target .dbi-most-read {
	border-color: var( --teal );
}
@media ( prefers-reduced-motion: no-preference ) {
	.dbi-most-read-cell:target .dbi-most-read {
		animation: dbi-most-read-arrive 4s var( --ease ) 1 both;
	}
	@keyframes dbi-most-read-arrive {
		0%, 60% {
			border-color: var( --teal );
			box-shadow: 0 0 0 3px var( --teal-mid );
		}
		100% {
			border-color: var( --border );
			box-shadow: 0 0 0 3px transparent;
		}
	}
}