/*
 * The Hub (ADR-0024).
 *
 * Density is the point. The illustrated Hero establishes the section once,
 * photography is rationed below it, and everything else is a ruled index.
 *
 * The pattern this file exists to avoid: title, description, three-column card
 * grid, pagination.
 */

/* --- « À lire d'abord » : asymmetric, not a row of equals ------------------ */

/*
 * Three equal photographic previews, once, above the ruled index.
 *
 * This replaces a full-height lead beside two stacked ones. That composition was
 * right in the abstract and wrong in the page: the lead's 4:5 image ran to 725px
 * on a laptop, so the Hub's FIRST article title sat 1569px down — nearly two
 * screens of scrolling on a page whose entire job is to reach articles.
 *
 * It is not the rejected card grid: no card, no border, no fill, no shadow. It is
 * a row of photographs with their titles, and the page does it once.
 */
.dcv-picks__grid {
	display: grid;
	gap: var(--dcv-space-md);
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 40rem) {
	.dcv-picks__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* The excerpt belongs to the index below, where a reader is comparing rows. Up
   here the photograph and the title are the whole proposition. */
.dcv-picks .dcv-preview__excerpt { display: none; }

/* --- the country index (ticket 13) ----------------------------------------- */

.dcv-countries { display: flex; flex-direction: column; gap: var(--dcv-space-xl); }

.dcv-countries__region { border-top: 1px solid var(--dcv-line); padding-top: var(--dcv-space-sm); }

.dcv-countries__heading {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--dcv-space-sm);
	margin: 0 0 var(--dcv-space-md);
}

.dcv-countries__name {
	font-family: var(--dcv-font-display);
	font-size: var(--dcv-display-3);
	color: var(--dcv-ink);
	margin: 0;
}

.dcv-countries__tally {
	font-size: var(--dcv-text-xs);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--dcv-muted);
	font-variant-numeric: tabular-nums;
}

/*
 * Well-covered countries earn a photographic plate; thin ones stay plain type
 * rows. Equal visual weight per country would have been a lie: 13 countries
 * carry exactly one Article and one carries a hundred.
 *
 * Both are the shared preview component, so the semantics are identical and only
 * the treatment differs — which is exactly what ADR-0018 holds invariant.
 */
.dcv-countries__plates {
	list-style: none;
	margin: 0 0 var(--dcv-space-md);
	padding: 0;
	display: grid;
	gap: var(--dcv-space-sm);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
}

.dcv-preview--country.dcv-countries__plate {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: var(--dcv-radius);
	background: var(--dcv-olive);
	color: var(--dcv-on-olive);
}

.dcv-countries__plate .dcv-preview__figure {
	position: absolute;
	inset: 0;
	margin: 0;
	border-radius: 0;
}

.dcv-countries__plate .dcv-preview__image {
	width: 100%;
	height: 100%;
	aspect-ratio: auto;
	object-fit: cover;
	transition: transform var(--dcv-duration-slow) var(--dcv-ease);
}

.dcv-countries__plate:hover .dcv-preview__image { transform: scale(1.04); }

/* Type over photography always sits on a Scrim. */
.dcv-countries__plate::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--dcv-scrim-bottom);
	pointer-events: none;
}

.dcv-countries__plate .dcv-preview__body {
	position: relative;
	z-index: 2;
	padding: var(--dcv-space-sm);
}

.dcv-countries__plate .dcv-preview__label { color: var(--dcv-cat-glow); }

.dcv-countries__plate .dcv-preview__title {
	font-size: 1.15rem;
	color: var(--dcv-on-olive);
}

.dcv-countries__plate .dcv-preview__excerpt {
	color: var(--dcv-on-olive-muted);
	-webkit-line-clamp: 2;
	line-clamp: 2;
	font-size: var(--dcv-text-sm);
}

.dcv-countries__plate .dcv-preview__count {
	margin: var(--dcv-space-3xs) 0 0;
	font-family: var(--dcv-font-display);
	font-size: var(--dcv-text-sm);
	color: var(--dcv-cat-glow);
	font-variant-numeric: tabular-nums;
}

/* The long tail: a legible, dignified row. Never omitted, never padded. */
.dcv-countries__rows {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--dcv-line);
	columns: 2;
	column-gap: var(--dcv-space-lg);
}

@media (min-width: 60rem) {
	.dcv-countries__rows { columns: 3; }
}

.dcv-countries__row {
	break-inside: avoid;
	border-bottom: 1px solid var(--dcv-line);
}

.dcv-preview--country.dcv-countries__entry { padding: var(--dcv-space-2xs) 0; }

.dcv-countries__entry .dcv-preview__body {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--dcv-space-2xs);
}

.dcv-countries__entry .dcv-preview__title {
	font-size: 1rem;
	letter-spacing: 0;
}

.dcv-countries__entry .dcv-preview__excerpt { display: none; }

.dcv-countries__entry .dcv-preview__count {
	margin: 0;
	font-size: var(--dcv-text-xs);
	color: var(--dcv-muted);
	font-variant-numeric: tabular-nums;
}

.dcv-countries__row-link {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--dcv-space-2xs);
	padding: var(--dcv-space-2xs) 0;
	text-decoration: none;
	color: inherit;
}

.dcv-countries__row-link:hover { color: var(--dcv-cat-ink); }

.dcv-countries__row-name {
	font-family: var(--dcv-font-display);
	font-size: 1rem;
}

.dcv-countries__row-count {
	font-size: var(--dcv-text-xs);
	color: var(--dcv-muted);
	font-variant-numeric: tabular-nums;
}

/* The honest empty state: the WHERE axis may simply hold nothing yet. */