/**
 * Homepage v2 (ADR-074, TMS-919): the top package, the Morning Brief, the dense card variants
 * (column, link, link-meta, link-feature, link-date, thumb), beat and area columns (display.layout
 * "columns") and the headline grid ("headline-grid"). ADR-118: the top package's Latest row, and the
 * `briefing` row that holds the Morning Brief card and In case you missed it. ADR-119: the Latest row shows on a
 * desktop only where it fits.
 *
 * Colours and spacing come from the theme's tokens. Type weights read ADR-074's typography tokens
 * (--tms-font-list, --tms-weight-headline / -title / -list / -label, defined in base.css; the dark
 * scheme lowers the title tiers there).
 * Breakpoints: columns 4 → 2 at 960px → 1 at 640px.
 * Also the placeholder for the deferred lower half (ADR-074 Decision 7, TMS-921), and a beat page's
 * centre-lead top area (ADR-080, TMS-938).
 */

/* ---- Top package: top story between "More coverage" and the rail ---- */
.tms-module--top_package {
	padding-block: var(--tms-space-xl) var(--tms-space-2xl);
}

.tms-top-package {
	align-items: start;
	display: grid;
	gap: var(--tms-space-xl);
	grid-template-areas: "related lead rail";
	grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr);
}

.tms-top-package.tms-top-package--no-related {
	grid-template-areas: "lead rail";
	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
}

.tms-top-package.tms-top-package--no-rail {
	grid-template-areas: "related lead";
	grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
}

.tms-top-package.tms-top-package--no-related.tms-top-package--no-rail {
	grid-template-areas: "lead";
	grid-template-columns: minmax(0, 1fr);
	max-width: var(--tms-layout-content);
}

.tms-top-package__lead {
	grid-area: lead;
}

.tms-top-package__related {
	grid-area: related;
}

.tms-top-package__rail {
	grid-area: rail;
}

.tms-top-package__label {
	border-top: 1px solid var(--tms-color-border, #e5e7eb);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	margin: var(--tms-space-md) 0 0;
	padding-top: var(--tms-space-md);
	text-transform: uppercase;
}

.tms-top-story__title {
	font-family: var(--tms-font-headline);
	font-size: clamp(2rem, 3.2vw, 2.75rem);
	font-weight: var(--tms-weight-headline, 700);
	letter-spacing: -0.02em;
	line-height: 1.08;
	margin: 0 0 var(--tms-space-md);
	text-align: center;
	text-wrap: balance;
}

/* A lead still breaking: the red flag above its headline (ADR-118). */
.tms-top-story__flag,
.tms-front-lead__flag {
	line-height: 1;
	margin: 0 0 var(--tms-space-sm);
}

.tms-top-story__flag {
	text-align: center;
}

.tms-top-story__title a,
.tms-brief__title a {
	color: inherit;
	text-decoration: none;
}

.tms-top-story__title a:hover,
.tms-top-story__title a:focus,
.tms-brief__title a:hover,
.tms-brief__title a:focus {
	color: var(--tms-color-accent-hover, inherit);
	text-decoration: underline;
}

.tms-top-story__figure {
	margin: 0;
}

.tms-top-story__media {
	display: block;
}

.tms-top-story__image {
	aspect-ratio: 16 / 9;
	display: block;
	object-fit: cover;
	width: 100%;
}

.tms-top-story__credit {
	color: var(--tms-color-muted, #6b7280);
	font-size: 0.75rem;
	margin-top: 0.35rem;
	text-align: right;
}

.tms-top-story__deck {
	font-size: 1.2rem;
	line-height: 1.45;
	margin: var(--tms-space-sm) 0 0;
}

/*
 * The Latest row under the lead (ADR-118): the 2 newest stories shown nowhere else, each with its date. It is
 * its own grid area (ADR-119): on a desktop it shows only where it fits beside the side columns (below), and
 * on tablets and phones it sits between the lead and the side columns.
 */
.tms-top-package__latest {
	grid-area: latest;
}

.tms-top-package__latest-inner {
	border-top: 1px solid var(--tms-color-border, #e5e7eb);
	padding-top: var(--tms-space-md);
}

.tms-top-package__latest-inner > .tms-top-package__label {
	border-top: 0;
	margin: 0 0 var(--tms-space-xs);
	padding-top: 0;
}

.tms-top-package__latest-list {
	display: grid;
	gap: var(--tms-space-md) var(--tms-space-xl);
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tms-top-package__latest-list .tms-card {
	border-top: 0;
	padding-top: 0;
}

/*
 * Desktops: the row takes only the height the side columns leave under the lead, and shows only where it fits
 * there, give or take 2rem (ADR-119). The second grid row is `1fr`, so More coverage and the rail size it
 * alone (`contain: size` keeps the row out of the sizing). Inside, the zero-height `::before` fills the first
 * column of a column-wrapping box: a row that fits sits under it, and a row taller than the space starts a
 * second column, past the clipped right edge. On colusa.net (site 2) on Oct. 3 the row fits at 1024 px and
 * hides at 1440, where the lead's column already ends 19 px above the rail's last line.
 */
@media (min-width: 961px) {
	.tms-top-package.tms-top-package--has-latest {
		grid-template-areas:
			"related lead rail"
			"related latest rail";
		grid-template-rows: auto 1fr;
		row-gap: 0;
	}

	.tms-top-package.tms-top-package--has-latest.tms-top-package--no-related {
		grid-template-areas:
			"lead rail"
			"latest rail";
	}

	.tms-top-package.tms-top-package--has-latest.tms-top-package--no-rail {
		grid-template-areas:
			"related lead"
			"related latest";
	}

	.tms-top-package--has-latest .tms-top-package__latest {
		align-content: flex-start;
		align-self: stretch;
		contain: size;
		display: flex;
		flex-flow: column wrap;
		margin-bottom: calc(-1 * var(--tms-space-xl));
		overflow: hidden;
	}

	.tms-top-package--has-latest .tms-top-package__latest::before {
		content: "";
		flex: none;
		width: 100%;
	}

	.tms-top-package--has-latest .tms-top-package__latest-inner {
		flex: none;
		margin-top: var(--tms-space-lg);
	}

	/* A keyboard user who tabs into a hidden row sees it for as long as it holds focus. */
	.tms-top-package--has-latest .tms-top-package__latest:focus-within {
		flex-wrap: nowrap;
		overflow: visible;
	}

	.tms-top-package--has-latest .tms-top-package__latest:focus-within .tms-top-package__latest-inner {
		background: var(--tms-page-background, #fff);
		position: relative;
		z-index: 1;
	}
}

/* ---- Dense card variants ---- */
.tms-card--link-feature,
.tms-card--column {
	border-top: 0;
	padding-top: 0;
}

.tms-card--link-feature .tms-card__title {
	font-size: 1.6rem;
	font-weight: var(--tms-weight-title, 600);
	letter-spacing: -0.01em;
	line-height: 1.12;
}

.tms-card--column .tms-card__title {
	font-size: 1.3rem;
	font-weight: var(--tms-weight-title, 600);
	line-height: 1.15;
}

.tms-link-list {
	display: grid;
}

.tms-link-list .tms-card {
	border-top-color: var(--tms-color-border, #e5e7eb);
	padding-block: var(--tms-space-sm);
}

.tms-card--link .tms-card__title,
.tms-card--link-meta .tms-card__title,
.tms-card--link-date .tms-card__title,
.tms-card--thumb .tms-card__title {
	font-family: var(--tms-font-list, var(--tms-font-body));
	font-size: 1rem;
	font-weight: var(--tms-weight-list, 600);
	letter-spacing: 0;
	line-height: 1.3;
}

.tms-card--thumb {
	align-items: start;
	display: grid;
	gap: var(--tms-space-sm);
	grid-template-columns: minmax(0, 1fr) 88px;
}

.tms-card--thumb.tms-card--no-image {
	grid-template-columns: minmax(0, 1fr);
}

.tms-card--thumb .tms-card__media {
	grid-column: 2;
	grid-row: 1;
	margin: 0;
}

.tms-card--thumb .tms-card__media--placeholder {
	display: none;
}

.tms-card--thumb .tms-card__body {
	grid-column: 1;
	grid-row: 1;
}

.tms-card--thumb .tms-card__image {
	aspect-ratio: 4 / 3;
}

.tms-card__meta--compact {
	font-size: 0.6875rem;
	font-weight: var(--tms-weight-label, 600);
	letter-spacing: 0.08em;
	margin-top: 0.35rem;
	text-transform: uppercase;
}

.tms-card__meta--recent {
	color: var(--tms-color-accent, #b91c1c);
}

/* ---- Beat and area columns (grouped modules, display.layout = columns) ---- */
.tms-term-groups--columns {
	gap: var(--tms-space-xl);
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.tms-term-groups--columns .tms-term-group__header {
	margin-bottom: var(--tms-space-sm);
}

.tms-term-groups--columns .tms-term-group__title {
	font-size: 1.35rem;
}

.tms-term-groups--columns .tms-link-list {
	margin-top: var(--tms-space-sm);
}

/* ---- Headline grid (display.layout = headline-grid): beat + headline, three columns ---- */
.tms-card-grid--headlines {
	column-gap: var(--tms-space-xl);
	row-gap: var(--tms-space-md);
}

.tms-card-grid--headlines .tms-card__location {
	display: none;
}

/* ---- Morning Brief (ADR-118): a card holding the whole brief, no section heading, no image ---- */
.tms-brief {
	background: var(--tms-color-surface, #f7f7f7);
	border-top: 3px solid var(--tms-color-accent, #b91c1c);
	padding: 18px 22px 20px;
}

.tms-brief__heading {
	font-family: var(--tms-font-body);
	font-size: 0.75rem;
	font-weight: var(--tms-weight-label, 600);
	letter-spacing: 0.08em;
	line-height: 1.4;
	margin: 0;
	text-transform: uppercase;
}

.tms-brief__label {
	color: var(--tms-color-accent, #b91c1c);
	font-weight: 800;
}

.tms-brief__dot,
.tms-brief__date {
	color: var(--tms-color-muted, #6b7280);
}

.tms-brief__date {
	font-size: 0.75rem;
	font-weight: var(--tms-weight-label, 600);
	letter-spacing: 0.08em;
}

.tms-brief__section {
	color: var(--tms-color-muted, #6b7280);
	font-family: var(--tms-font-body);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	margin: var(--tms-space-md) 0 6px;
	text-transform: uppercase;
}

.tms-brief__items {
	display: grid;
	gap: 7px;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* On the item, not the link: a wrapped headline's lines sit as close as a card's. */
.tms-brief__items li,
.tms-brief__line {
	font-family: var(--tms-font-list, var(--tms-font-body));
	font-size: 0.9375rem;
	font-weight: var(--tms-weight-list, 600);
	line-height: 1.3;
}

.tms-brief__line {
	margin: 0;
}

.tms-brief__items a,
.tms-brief__line a {
	color: inherit;
	text-decoration: none;
}

.tms-brief__items a:hover,
.tms-brief__items a:focus,
.tms-brief__line a:hover,
.tms-brief__line a:focus {
	text-decoration: underline;
}

/* A neighbour's copy: "From High Desert News Online:". */
.tms-brief__source {
	color: var(--tms-color-muted, #6b7280);
	font-size: 0.8125rem;
	font-weight: var(--tms-weight-label, 600);
}

/* A brief with no section to read shows its headline. */
.tms-brief__title {
	font-family: var(--tms-font-headline);
	font-size: clamp(1.35rem, 2vw, 1.6rem);
	font-weight: var(--tms-weight-title, 600);
	line-height: 1.15;
	margin: var(--tms-space-sm) 0 0;
}

.tms-brief__more {
	color: var(--tms-color-accent, #b91c1c);
	display: inline-block;
	font-size: 0.8125rem;
	font-weight: var(--tms-weight-label, 600);
	letter-spacing: 0.06em;
	margin-top: var(--tms-space-md);
	text-decoration: none;
	text-transform: uppercase;
}

.tms-brief__more:hover,
.tms-brief__more:focus {
	text-decoration: underline;
}

/* ---- The briefing row (ADR-118): the brief card beside In case you missed it ---- */
.tms-module-row--briefing {
	border-top: 1px solid var(--tms-color-border, #e5e7eb);
	display: grid;
	gap: var(--tms-space-xl);
	grid-template-columns: minmax(0, 1fr);
	padding-block: var(--tms-space-xl) var(--tms-space-2xl);
}

.tms-module-row--briefing.tms-module-row--count-2 {
	align-items: start;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tms-module-row--briefing > .tms-section {
	padding-block: 0;
}

/* In case you missed it: a small label over dated headlines, not a section title. */
.tms-module-row--briefing .tms-section-header {
	border-top: 0;
	margin-bottom: var(--tms-space-xs);
	padding-top: 0;
}

.tms-module-row--briefing .tms-section-title {
	font-family: var(--tms-font-body);
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	line-height: 1.4;
	text-transform: uppercase;
}

.tms-module-row--briefing .tms-card-list {
	gap: 0;
}

.tms-module-row--briefing .tms-card--headline {
	padding-block: 9px;
}

/* Without a brief that morning, it spreads across the row: three columns of headlines. */
.tms-module-row--briefing.tms-module-row--count-1 .tms-card-list {
	column-gap: var(--tms-space-xl);
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 960px) {
	.tms-top-package {
		grid-template-areas:
			"lead lead"
			"related rail";
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.tms-top-package.tms-top-package--no-related {
		grid-template-areas:
			"lead"
			"rail";
		grid-template-columns: minmax(0, 1fr);
	}

	.tms-top-package.tms-top-package--no-rail {
		grid-template-areas:
			"lead"
			"related";
		grid-template-columns: minmax(0, 1fr);
	}

	/* The Latest row follows the lead, before the side columns. */
	.tms-top-package.tms-top-package--has-latest {
		grid-template-areas:
			"lead lead"
			"latest latest"
			"related rail";
	}

	.tms-top-package.tms-top-package--has-latest.tms-top-package--no-related {
		grid-template-areas:
			"lead"
			"latest"
			"rail";
	}

	.tms-top-package.tms-top-package--has-latest.tms-top-package--no-rail {
		grid-template-areas:
			"lead"
			"latest"
			"related";
	}

	.tms-term-groups--columns,
	.tms-module-row--briefing.tms-module-row--count-1 .tms-card-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 801px) and (max-width: 960px) {
	.tms-card-grid--headlines {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Phones and small tablets stack the brief over In case you missed it. */
@media (max-width: 800px) {
	.tms-module-row--briefing.tms-module-row--count-2 {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 640px) {
	.tms-top-package {
		grid-template-areas:
			"lead"
			"related"
			"rail";
		grid-template-columns: minmax(0, 1fr);
	}

	.tms-top-package.tms-top-package--has-latest {
		grid-template-areas:
			"lead"
			"latest"
			"related"
			"rail";
	}

	.tms-term-groups--columns,
	.tms-top-package__latest-list,
	.tms-module-row--briefing.tms-module-row--count-1 .tms-card-list {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ---- Area and beat pages (ADR-079, TMS-937) ----
 * A row of 1-3 columns spreads across the row instead of leaving empty tracks: Nearby on
 * /…/high-desert/hesperia/ is High Desert and Victorville. With two or fewer, each column's first story
 * sits photo-left, text-right. The homepage keeps its four tracks (its deferred placeholder is measured
 * for them); tablets and phones keep the stacking above.
 */
@media (min-width: 961px) {
	.tms-landing .tms-term-groups--columns.tms-term-groups--count-1 {
		grid-template-columns: minmax(0, 1fr);
	}

	.tms-landing .tms-term-groups--columns.tms-term-groups--count-2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.tms-landing .tms-term-groups--columns.tms-term-groups--count-3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.tms-landing .tms-term-groups--count-1 .tms-card--column,
	.tms-landing .tms-term-groups--count-2 .tms-card--column {
		align-items: start;
		display: grid;
		gap: var(--tms-space-md);
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* The date after the beat on an area list's headlines: "EDUCATION · JUN 5, 2025". */
.tms-card__kicker-date {
	color: var(--tms-color-muted, #6b7280);
	font-weight: 400;
	letter-spacing: 0.02em;
}

/* ---- Deferred lower half: the placeholder (ADR-074 Decision 7, TMS-921) ----
 * Until assets/js/home-deferred.js swaps the real sections in, each deferred section shows its title and
 * archive links at about the height the section will take, so the page does not jump. Measured on site
 * 36's v2 homepage with full columns: a row of columns is ~830px at 4 across and ~740px per row at 2 or
 * 1 across (the placeholder carries its row counts); Must Read ~560px; 27 headlines ~1030px in 3
 * columns, ~1450px in 2, ~2710px in 1.
 */
.tms-deferred__links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--tms-space-sm) var(--tms-space-lg);
	list-style: none;
	margin: 0;
	padding: 0;
}

.tms-deferred__links a {
	font-family: var(--tms-font-list, var(--tms-font-body));
	font-weight: var(--tms-weight-label, 600);
}

.tms-deferred__section--must_read_home {
	min-height: 35rem;
}

.tms-deferred__section--latest_river {
	min-height: 64rem;
}

.tms-deferred__section--columns {
	min-height: calc(var(--tms-deferred-rows, 1) * 52rem + 4rem);
}

@media (max-width: 960px) {
	.tms-deferred__section--latest_river {
		min-height: 90rem;
	}

	.tms-deferred__section--columns {
		min-height: calc(var(--tms-deferred-rows-2, 1) * 46rem + 4rem);
	}
}

@media (max-width: 800px) {
	.tms-deferred__section--latest_river {
		min-height: 168rem;
	}
}

@media (max-width: 640px) {
	.tms-deferred__section--must_read_home {
		min-height: 39rem;
	}

	.tms-deferred__section--columns {
		min-height: calc(var(--tms-deferred-rows-1, 1) * 46rem + 4rem);
	}
}

/* Without JavaScript, or once loading has failed (home-deferred.js adds --static), nothing replaces the
   placeholder, so it reserves nothing. */
.tms-deferred--static .tms-deferred__section {
	min-height: 0;
}

@media (scripting: none) {
	.tms-deferred__section {
		min-height: 0;
	}
}

/* ---- Beat pages (ADR-080, TMS-938): the centre-lead top area ----
 * The top package's three columns, filled differently: the lead's headline sits under its photo, after a
 * short accent rule, and nothing is set on the photo; More coverage opens with a story and its photo;
 * "Latest" is a labelled list of photo-left rows. On `ourhesperia` `/crime-and-justice/`: the SMASH story,
 * "Seven Arrested in Hesperia Gun Store Burglary Probe", then Newsom · Pelosi · Hearn · Burgum · Michigan.
 */
.tms-front-lead__figure {
	margin: 0;
}

.tms-front-lead__media {
	display: block;
}

.tms-front-lead__image {
	aspect-ratio: 16 / 9;
	display: block;
	object-fit: cover;
	width: 100%;
}

.tms-front-lead__credit {
	color: var(--tms-color-muted, #6b7280);
	font-size: 0.75rem;
	margin-top: 0.35rem;
	text-align: right;
}

.tms-front-lead__title {
	font-family: var(--tms-font-headline);
	font-size: clamp(1.9rem, 2.7vw, 2.5rem);
	font-weight: var(--tms-weight-headline, 700);
	letter-spacing: -0.02em;
	line-height: 1.08;
	margin: var(--tms-space-md) 0 var(--tms-space-sm);
	text-wrap: balance;
}

.tms-front-lead__title::before {
	background: var(--tms-color-accent, #b91c1c);
	content: "";
	display: block;
	height: 4px;
	margin-bottom: var(--tms-space-sm);
	width: 2.5rem;
}

.tms-front-lead__title a {
	color: inherit;
	text-decoration: none;
}

.tms-front-lead__title a:hover,
.tms-front-lead__title a:focus {
	color: var(--tms-color-accent-hover, inherit);
	text-decoration: underline;
}

.tms-front-lead__deck {
	font-size: 1.125rem;
	line-height: 1.45;
	margin: 0;
}

.tms-front-lead__meta {
	color: var(--tms-color-muted, #6b7280);
	font-size: 0.6875rem;
	font-weight: var(--tms-weight-label, 600);
	letter-spacing: 0.08em;
	margin: var(--tms-space-sm) 0 0;
	text-transform: uppercase;
}

.tms-top-package--center-lead .tms-top-package__related .tms-link-list {
	margin-top: var(--tms-space-sm);
}

.tms-top-package__rail-label {
	align-items: center;
	display: flex;
	font-size: 0.8125rem;
	font-weight: 700;
	gap: var(--tms-space-xs);
	letter-spacing: 0.08em;
	margin: 0 0 var(--tms-space-sm);
	text-transform: uppercase;
}

.tms-top-package__rail-label::before {
	background: var(--tms-color-primary, #111827);
	content: "";
	display: block;
	height: 1.1em;
	width: 4px;
}

.tms-top-package--center-lead .tms-top-package__rail .tms-card--thumb {
	grid-template-columns: 112px minmax(0, 1fr);
}

.tms-top-package--center-lead .tms-top-package__rail .tms-card--thumb.tms-card--no-image {
	grid-template-columns: minmax(0, 1fr);
}

.tms-top-package--center-lead .tms-top-package__rail .tms-card--thumb .tms-card__media {
	grid-column: 1;
}

.tms-top-package--center-lead .tms-top-package__rail .tms-card--thumb .tms-card__body {
	grid-column: 2;
}

.tms-top-package--center-lead .tms-top-package__rail .tms-card--thumb.tms-card--no-image .tms-card__body {
	grid-column: 1;
}

.tms-top-package--center-lead .tms-top-package__rail .tms-link-list .tms-card:first-child {
	border-top: 0;
	padding-top: 0;
}

@media (max-width: 640px) {
	.tms-front-lead__title {
		font-size: 1.75rem;
	}

	.tms-front-lead__deck {
		font-size: 1rem;
	}
}