/**
 * SNYCF — Homepage
 *
 * Section-level layout only. Every card, row, pill and button inside these
 * sections is styled by components.css; nothing here restyles a component.
 *
 * Mobile-first. The export's homepage had no media queries and several
 * grids pinned to fixed column counts — the hero (11fr/9fr), the borough
 * grid (5 columns) and the documents band (3 columns) never collapsed.
 * Those all collapse deliberately here.
 *
 * @package snycf
 */

/* =====================================================================
 * Hero
 * ================================================================== */

.snycf-home-hero {
	padding-block: var( --snycf-section-gap ) var( --snycf-space-xl );
}

/*
 * The approved desktop composition is an asymmetric split with the text
 * leading. Below 64rem it becomes a single column with the image first —
 * a documentary photograph is the stronger opening on a phone, and it
 * keeps the headline above the fold rather than below a tall image column.
 */
.snycf-featured--hero {
	gap: var( --snycf-space-md );
}

/*
 * The approved homepage hero headline is 48px at full width — a step below
 * the 54px story-page H1, so the hero does not out-shout the article it
 * links to.
 */
.snycf-featured--hero .snycf-featured__title {
	font-size: clamp( 2rem, 1.35rem + 2.75vw, 3rem );
	line-height: 1.06;
}

.snycf-featured--hero .snycf-featured__deck {
	font-size: var( --snycf-size-deck );
}

@media ( min-width: 48rem ) {

	.snycf-featured--hero {
		gap: var( --snycf-gap-column );
	}
}

@media ( min-width: 64rem ) {

	.snycf-featured--hero.snycf-featured--media-right {
		grid-template-columns: minmax( 0, 11fr ) minmax( 0, 9fr );
		align-items: start;
		gap: var( --snycf-space-4xl );
	}
}

/* =====================================================================
 * Developing strip
 * ================================================================== */

.snycf-home-developing {
	padding-block: var( --snycf-space-2xs );
}

.snycf-developing {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var( --snycf-space-2xs ) var( --snycf-space-md );
	border-top: var( --snycf-border-width-hair ) solid var( --snycf-ink );
	border-bottom: var( --snycf-divider );
	padding-block: var( --snycf-space-xs );
}

.snycf-developing__badge {
	flex: none;
	padding: var( --snycf-space-3xs ) var( --snycf-space-2xs );
	background-color: var( --snycf-accent );
	color: var( --snycf-paper );
	font-family: var( --snycf-font-ui ), 'Archivo Fallback';
	font-size: 0.65625rem;
	font-weight: var( --snycf-weight-black );
	letter-spacing: var( --snycf-tracking-label );
	text-transform: uppercase;
}

.snycf-developing__headline {
	flex: 1 1 15rem;
	margin: 0;
	min-width: 0;
	font-family: var( --snycf-font-editorial ), 'Source Serif Fallback';
	font-size: 1.03125rem;
	font-weight: var( --snycf-weight-semibold );
	line-height: 1.4;
	color: var( --snycf-text );
	text-wrap: pretty;
}

.snycf-developing__date {
	flex: none;
	font-family: var( --snycf-font-ui ), 'Archivo Fallback';
	font-size: var( --snycf-size-kicker );
	font-weight: var( --snycf-weight-semibold );
	letter-spacing: 0.1em;
	color: var( --snycf-text-meta );
}

.snycf-developing__link {
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: var( --snycf-space-3xs );
	min-height: var( --snycf-target-min );
	font-family: var( --snycf-font-ui ), 'Archivo Fallback';
	font-size: var( --snycf-size-meta );
	font-weight: var( --snycf-weight-extrabold );
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var( --snycf-accent );
}

.snycf-developing__link:hover {
	color: var( --snycf-text );
}

/* The date is redundant beside a short headline on a phone. */
@media ( max-width: 29.9375rem ) {

	.snycf-developing__date {
		display: none;
	}
}

/* =====================================================================
 * Latest Stories
 * ================================================================== */

.snycf-home-latest__rows {
	display: flex;
	flex-direction: column;
}

/* The first row sits flush under the section heading on desktop. */
.snycf-home-latest__rows > .snycf-row:first-child {
	padding-block-start: 0;
}

@media ( min-width: 64rem ) {

	.snycf-home-latest__lead {
		padding-inline-end: var( --snycf-gap-column );
		border-inline-end: var( --snycf-divider );
	}
}

/* =====================================================================
 * Victim Stories band
 * ================================================================== */

.snycf-home-victim__intro {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: var( --snycf-space-sm ) var( --snycf-space-2xl );
	margin-block: var( --snycf-space-xs ) var( --snycf-space-xl );
}

.snycf-home-victim__intro .snycf-deck {
	flex: 1 1 22rem;
	max-width: 32rem;
	margin: 0;
}

.snycf-home-victim__featured {
	background-color: var( --snycf-paper );
	border: var( --snycf-border-width-hair ) solid var( --snycf-rule );
	padding: var( --snycf-space-md );

	/* Inside the white card, metadata returns to the page-ground token. */
	--snycf-text-meta: var( --snycf-meta );
}

.snycf-home-victim__grid {
	margin-top: var( --snycf-space-xl );
}

.snycf-home-victim__more {
	margin-top: var( --snycf-space-xl );
	padding-top: var( --snycf-space-md );
	border-top: var( --snycf-divider );
	text-align: center;
}

.snycf-home-victim__more .snycf-button {
	justify-content: center;
}

@media ( min-width: 48rem ) {

	.snycf-home-victim__featured {
		padding: var( --snycf-space-xl );
	}
}

/* =====================================================================
 * Documents band
 * ================================================================== */

.snycf-home-documents__intro {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: var( --snycf-space-sm ) var( --snycf-space-2xl );
	margin-block: var( --snycf-space-xs ) var( --snycf-space-xl );
}

.snycf-home-documents__intro .snycf-deck {
	flex: 1 1 20rem;
	max-width: 29rem;
	margin: 0;
}

.snycf-home-documents__browse {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var( --snycf-space-2xs ) var( --snycf-space-sm );
	margin-top: var( --snycf-space-xl );
}

.snycf-home-documents__browse-label {
	margin: 0;
	flex: none;
	font-family: var( --snycf-font-ui ), 'Archivo Fallback';
	font-size: var( --snycf-size-kicker );
	font-weight: var( --snycf-weight-bold );
	letter-spacing: var( --snycf-tracking-label );
	text-transform: uppercase;
	color: var( --snycf-text-meta );
}

/* Pills on the dark band take the hairline treatment from the export. */
.snycf-issues--inverse .snycf-issues__pill {
	border-color: var( --snycf-ink-2 );
	color: var( --snycf-prose-dark );
}

.snycf-issues--inverse .snycf-issues__pill:hover,
.snycf-issues--inverse .snycf-issues__pill.is-current {
	background-color: transparent;
	border-color: var( --snycf-accent-on-ink );
	color: var( --snycf-paper );
}

.snycf-home-documents__more {
	margin-top: var( --snycf-space-xl );
}

/* =====================================================================
 * Videos
 * ================================================================== */

.snycf-home-videos__rows {
	display: flex;
	flex-direction: column;
}

/* =====================================================================
 * Discussion band
 * ================================================================== */

.snycf-home-discussion {
	border-top: var( --snycf-border-width-rule ) solid var( --snycf-accent );
}

.snycf-home-discussion__intro {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var( --snycf-space-xs );
}

.snycf-home-discussion__intro .snycf-h2 {
	margin: 0;
	color: var( --snycf-paper );
}

.snycf-home-discussion__cta {
	margin-top: var( --snycf-space-2xs );
}

.snycf-home-discussion__note {
	margin: 0;
	font-size: 0.75rem;
	color: var( --snycf-text-meta );
}

.snycf-home-discussion__note a {
	color: var( --snycf-prose-dark );
	text-decoration: underline;
	text-underline-offset: 2px;
}

.snycf-home-discussion__note a:hover {
	color: var( --snycf-paper );
}

.snycf-home-discussion__list {
	border-top: var( --snycf-border-width-hair ) solid var( --snycf-ink-2 );
}

/* =====================================================================
 * Closing split — issues, mission, most discussed
 * ================================================================== */

.snycf-home-closing__main {
	display: flex;
	flex-direction: column;
	gap: var( --snycf-space-3xl );
	min-width: 0;
}

.snycf-home-mission__heading {
	margin: var( --snycf-space-2xs ) 0 0;
}

.snycf-home-mission__body {
	margin: var( --snycf-space-xs ) 0 0;
	font-family: var( --snycf-font-editorial ), 'Source Serif Fallback';
	font-size: var( --snycf-size-prose-sm );
	line-height: 1.6;
	color: var( --snycf-text-prose );
	text-wrap: pretty;
	max-width: var( --snycf-measure-prose );
}

.snycf-home-mission__actions {
	margin-top: var( --snycf-space-md );
}

.snycf-home-mission__secondary {
	color: var( --snycf-text-meta );
}

.snycf-home-mission__secondary:hover {
	color: var( --snycf-accent );
}

/* =====================================================================
 * Section rhythm between bands
 * ================================================================== */

.snycf-home-victim + .snycf-home-documents,
.snycf-home-documents + .snycf-section {
	margin-top: 0;
}