/*
 * USNOW theme: top stories on the homepage, wide screens (front page only,
 * loaded after main.css; enqueued in inc/homepage.php).
 *
 * Where the top stories stand side by side (a section 980px or wider), the
 * secondary stories usually make the tallest column. The room they leave
 * under the lead story's byline holds up to three key points of the lead
 * story, "More Top Stories" and the lead story's topics
 * (template-parts/home/hero-fill.php); after its own headlines the "Latest"
 * rail runs on with the next latest headlines
 * (template-parts/home/rail-fill.php). So the columns end level.
 *
 * Those lists sit in a box exactly as tall as that room: the box is
 * positioned absolutely inside an empty flex item that grows into the room,
 * so it never makes the row taller and nothing below the top stories moves.
 * Everything else (the lead story, the rail's own headlines) stays in the
 * page flow and may make the tallest column itself. In the box, entries run
 * down a wrapping flex column whose first entry is empty: an entry that
 * doesn't fit wholly (even the first one) starts a new column beside the
 * box, where it is clipped. So the box shows only whole entries from the
 * first paint, with or without the script; home-hero.js hides the clipped
 * ones from screen readers and the keyboard too.
 *
 * Phones and tablets stack the top stories: the boxes stay hidden there.
 */

.hero-fill,
.rail__fit {
	display: none;
}

/* Headlines that don't fit (home-hero.js): hidden, but still taking their place. */
[data-hero-fit] .is-clipped {
	visibility: hidden;
}

/* The lists in a box are flattened: a label and its entries are all entries of the box. */
.hero-fill__points,
.hero-fill__list,
.rail__list--more {
	display: contents;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Labels: small capitals after a short red bar, as on the lead story's photo. */
.hero-fill__label {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--c-ink);
	font: 800 0.8125rem/1.2 var(--font-head);
	letter-spacing: var(--track-label);
	text-transform: uppercase;
}

.hero-fill__label::before {
	content: "";
	flex: none;
	width: 16px;
	height: 3px;
	border-radius: 2px;
	background: var(--c-accent);
}

.hero-fill__points + .hero-fill__label {
	margin-top: 20px;
}

/* Key points: the lead story's own facts, in its summary's typeface. */
.hero-fill__points > li {
	position: relative;
	padding: 8px 0 0 18px;
	color: var(--c-text-2);
	font: 400 0.9375rem/1.45 var(--font-body);
	text-wrap: pretty;
}

/* A small red square, centered on the first line. */
.hero-fill__points > li::before {
	content: "";
	position: absolute;
	top: calc(8px + 0.725em - 3px);
	left: 2px;
	width: 6px;
	height: 6px;
	border-radius: 1px;
	background: var(--c-accent);
}

/* The first entry under a label carries the label's rule. */
.hero-fill__points > li:first-child,
.hero-fill__list > li:first-child {
	border-top: 2px solid var(--c-ink);
}

.hero-fill__points > li:first-child {
	padding-top: 12px;
}

.hero-fill__points > li:first-child::before {
	top: calc(12px + 0.725em - 3px);
}

/* More Top Stories: section label and time on one line, the headline under them. */
.hero-fill__list > li + li {
	border-top: 1px solid var(--c-rule);
}

.hero-fill__list .card--compact {
	padding: 10px 0 11px;
	border-bottom: 0;
}

.hero-fill__list .card__body {
	flex: 1 1 auto;
	flex-flow: row wrap;
	align-items: baseline;
	column-gap: 13px;
}

.hero-fill__list .card__top,
.hero-fill__list .card__meta {
	margin: 0 0 4px;
}

.hero-fill__list .card__title {
	flex: 1 0 100%;
	order: 1;
	font-size: 1rem;
	line-height: 1.28;
}

/* A dot between the section label and the time. */
.hero-fill__list .card__top ~ .card__meta {
	position: relative;
}

.hero-fill__list .card__top ~ .card__meta::before {
	content: "";
	position: absolute;
	top: 50%;
	left: -8px;
	width: 3px;
	height: 3px;
	margin-top: -1.5px;
	border-radius: 50%;
	background: currentColor;
	opacity: 0.7;
}

/* The lead story's topics: one entry, its label and chips on a row, as at the end of a story. */
.hero-fill__topics {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 10px;
	margin-top: 18px;
}

.hero-fill__topics:first-child {
	margin-top: 0;
}

.hero-fill__topics-label {
	color: var(--c-muted);
	font: 800 0.75rem/1.2 var(--font-head);
	letter-spacing: var(--track-label);
	text-transform: uppercase;
}

.hero-fill__topics .chips {
	margin: 0;
}

@container (min-width: 980px) {
	/* The lead column: the story, then the room under it down to the end of the row. */
	.hero.has-secondary > .hero__lead {
		display: flex;
		flex-direction: column;
	}

	.hero.has-secondary > .hero__lead > .card {
		flex: none;
	}

	/* No content of its own (the box inside is positioned), so it adds nothing to the row's height. */
	.hero.has-secondary .hero-fill {
		position: relative;
		display: block;
		flex: 1 1 0;
		min-height: 0;
	}

	/* The rail: its title and own headlines, then the room down to the end of the row. */
	.hero.has-rail > .hero__rail {
		display: flex;
		flex-direction: column;
	}

	.hero__rail > .rail__title,
	.hero__rail > .rail__list {
		flex: none;
	}

	.hero__rail > .rail__fit {
		position: relative;
		display: block;
		flex: 1 1 0;
		min-height: 0;
	}

	/*
	 * The boxes. Each reaches 8px past its room on every side and pads its
	 * entries back in, so focus rings around the headlines aren't clipped;
	 * the one under the lead story starts 22px under the byline, the rail's
	 * straight after its last headline. Clipped entries start their column
	 * 40px to the side, out of sight.
	 */
	.hero-fill__area,
	.rail__fit-area {
		position: absolute;
		display: flex;
		flex-flow: column wrap;
		align-content: flex-start;
		column-gap: 40px;
		padding: 8px;
		overflow: hidden;
		overflow: clip;
	}

	.hero-fill__area {
		/*
		 * A label asks for this much room under it too (it gives the room back
		 * to its first entry), so it never ends the box without an entry.
		 */
		--fill-reserve-points: 2rem;
		--fill-reserve-more: 3.5rem;
		inset: 14px -8px -8px;
	}

	.rail__fit-area {
		inset: -8px;
	}

	/* The empty first entry: every real entry, even the first, moves out of the box whole when it doesn't fit. */
	.hero-fill__area::before,
	.rail__fit-area::before {
		content: "";
		flex: none;
		width: 100%;
		height: 0;
	}

	.hero-fill__label,
	.hero-fill__points > li,
	.hero-fill__list > li,
	.hero-fill__topics,
	.rail__fit-area .rail__list > li {
		flex: none;
		width: 100%;
	}

	.hero-fill__label--points {
		padding-bottom: calc(8px + var(--fill-reserve-points));
	}

	.hero-fill__label--points + .hero-fill__points > li:first-child {
		margin-top: calc(-1 * var(--fill-reserve-points));
	}

	.hero-fill__label--more {
		padding-bottom: calc(8px + var(--fill-reserve-more));
	}

	.hero-fill__label--more + .hero-fill__list > li:first-child {
		margin-top: calc(-1 * var(--fill-reserve-more));
	}
}

@container (min-width: 980px) {
	/*
	 * No further headline fits in the rail (home-hero.js sets .is-spread), or
	 * there is none to add (no .rail__fit): its
	 * own headlines share the room instead, each row a little taller with the
	 * story centered, so the rail still ends level with the row.
	 */
	.hero__rail.is-spread > .rail__fit {
		display: none;
	}

	.hero__rail.is-spread > .rail__list,
	.hero.has-rail > .hero__rail:not(:has(> .rail__fit)) > .rail__list {
		display: flex;
		flex: 1 1 auto;
		flex-direction: column;
	}

	.hero__rail.is-spread > .rail__list > li,
	.hero.has-rail > .hero__rail:not(:has(> .rail__fit)) > .rail__list > li {
		display: flex;
		flex: 1 1 auto;
		flex-direction: column;
		justify-content: center;
		border-bottom: 1px solid var(--c-rule);
	}

	.hero__rail.is-spread > .rail__list > li:last-child,
	.hero.has-rail > .hero__rail:not(:has(> .rail__fit)) > .rail__list > li:last-child {
		border-bottom: 0;
	}

	.hero__rail.is-spread > .rail__list .card--compact,
	.hero.has-rail > .hero__rail:not(:has(> .rail__fit)) > .rail__list .card--compact {
		border-bottom: 0;
	}
}

/*
 * Locked boxes (home-hero.js, after measuring): the entries that didn't fit
 * leave the layout and the rest stay in one column, so the lead photo can
 * grow into the room left under them without pushing one of them out.
 */
[data-hero-fit].is-locked {
	flex-wrap: nowrap;
}

[data-hero-fit].is-locked .is-clipped {
	display: none;
}

/*
 * The lead photo grows in height only (home-hero.js sets its height). Its
 * frame keeps a 3:2 shape, so without a set width a taller frame would also
 * grow wider than its column and run under the stories beside it. The width
 * stays the column's; the photo fills the taller frame (object-fit).
 */
.hero__lead .card--hero .card__media {
	width: 100%;
	max-width: 100%;
}