/*
 * assets/css/home.css · Out & Down theme · Phase 12.3
 *
 * Loaded on is_front_page() only. Covers the hero (blueprint Section 18),
 * the section-band pattern (Section 20), the near-you radius bar
 * (Section 19, oad-archive-filters' own markup) and the two theme blocks
 * (theme-cards, this-week) that draw their own band. .oad-poster-card*
 * (near-you, guides) and .oad-af-wall's grid come from poster.css and
 * archive.css respectively -- not duplicated here.
 *
 * --oad-header-h is chrome.css's own token (54/100px fallback), measured
 * at runtime by header.js so the hero's height accounts for the true
 * in-flow header, admin bar included.
 */

/* ------------------------------------------------------------------ */
/* 1 · hero — Section 18                                               */
/* ------------------------------------------------------------------ */

.oad-hero {
	position: relative;
	min-height: 100vh; /* fallback for browsers without svh */
	min-height: calc(100svh - var(--oad-header-h) - var(--oad-adminbar-h, 0px));
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	/* No grid-template-rows: the content cells (kicker/title/strap/cta,
	   given explicit grid-row numbers below) size to their own content,
	   and align-content: end pushes that whole row-group to the bottom
	   of the full-height grid -- the same visual anchor a leading 1fr
	   spacer row would give, without a row-template value outside this
	   theme's locked grid-template-columns allow-list. */
	align-content: end;
	background: var(--wp--preset--color--ground);
	overflow: hidden;
}

/* On-image variant: a background image set in the Site Editor (core/group's
   own background-image support). No overlay, ever — Rule against dimming
   the one full-bleed photo on the page (Section 18's whole point). */
.oad-hero.has-background {
	background-size: cover;
	background-position: 50% 40%;
}

/* Plain variant (no background image set): the Display XL headline alone
   carries the page, matching blueprint Section 18's "plain" specimen. */
.oad-hero:not(.has-background) .oad-hero__kicker {
	grid-row: 1;
	grid-column: 1 / -1;
	align-self: start;
	padding: var(--wp--preset--spacing--32);
	margin: 0;
}

.oad-hero:not(.has-background) .oad-hero__title {
	font-size: var(--wp--preset--font-size--display-xl);
}

.oad-hero__kicker {
	grid-row: 2;
	grid-column: 1 / span 2;
	align-self: end;
	margin: 0;
	padding: var(--wp--preset--spacing--32) var(--wp--preset--spacing--32) 0;
	background: var(--wp--preset--color--ground);
	font-family: var(--wp--preset--font-family--meter);
	font-weight: 500;
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

.oad-hero.has-background .oad-hero__kicker {
	border-top: 2px solid var(--wp--preset--color--ink);
	border-right: 2px solid var(--wp--preset--color--ink);
}

.oad-hero__title {
	grid-row: 3;
	grid-column: 1 / span 2;
	margin: 0;
	padding: var(--wp--preset--spacing--8) var(--wp--preset--spacing--32) 0;
	background: var(--wp--preset--color--ground);
	font-family: var(--wp--preset--font-family--shout);
	font-weight: 800;
	text-transform: uppercase;
	font-size: var(--wp--preset--font-size--display-l);
	line-height: 0.92;
	letter-spacing: -0.015em;
}

.oad-hero.has-background .oad-hero__title {
	border-right: 2px solid var(--wp--preset--color--ink);
}

.oad-hero__strap {
	grid-row: 4;
	grid-column: 1 / span 2;
	margin: 0;
	padding: var(--wp--preset--spacing--8) var(--wp--preset--spacing--32) 0;
	background: var(--wp--preset--color--ground);
	font-family: var(--wp--preset--font-family--speak);
	font-weight: 500;
	font-size: 16px;
	line-height: 1.45;
	max-width: 42ch;
}

.oad-hero.has-background .oad-hero__strap {
	border-right: 2px solid var(--wp--preset--color--ink);
}

.oad-hero__cta {
	grid-row: 5;
	grid-column: 1 / span 2;
	padding: var(--wp--preset--spacing--16) var(--wp--preset--spacing--32) var(--wp--preset--spacing--32);
	background: var(--wp--preset--color--ground);
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--8);
}

.oad-hero.has-background .oad-hero__cta {
	border-right: 2px solid var(--wp--preset--color--ink);
}

/* Location cell — bottom-right corner, col 6, blueprint Section 18. */
.oad-hero__location {
	grid-row: 2 / span 4;
	grid-column: 6;
	align-self: end;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--16);
	padding: var(--wp--preset--spacing--16);
	background: var(--wp--preset--color--ground);
	color: var(--wp--preset--color--ink);
	border-top: 2px solid var(--wp--preset--color--ink);
	border-left: 2px solid var(--wp--preset--color--ink);
	text-decoration: none;
	transition-property: background-color, color;
	transition-duration: 100ms;
	transition-timing-function: ease-out;
}

.oad-hero__location:hover {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--white);
}

.oad-hero__location-text {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--8);
}

.oad-hero__location-lbl {
	font-family: var(--wp--preset--font-family--meter);
	font-weight: 500;
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

.oad-hero__location:hover .oad-hero__location-lbl {
	color: inherit;
}

.oad-hero__location-val {
	font-family: var(--wp--preset--font-family--shout);
	font-weight: 800;
	text-transform: uppercase;
	font-size: 13px;
	letter-spacing: 0.04em;
}

.oad-hero__location svg {
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	stroke: currentColor;
	stroke-width: 1.5;
	fill: none;
	stroke-linecap: round;
	stroke-linejoin: round;
}

@media (max-width: 1023px) {
	.oad-hero {
		grid-template-rows: auto auto auto auto auto auto;
	}

	.oad-hero__kicker,
	.oad-hero__title,
	.oad-hero__strap,
	.oad-hero__cta,
	.oad-hero__location {
		grid-column: 1 / -1;
	}

	.oad-hero.has-background .oad-hero__kicker,
	.oad-hero.has-background .oad-hero__title,
	.oad-hero.has-background .oad-hero__strap,
	.oad-hero.has-background .oad-hero__cta {
		border-right: none;
	}

	/* Cells are 24 on the tram's gutter. */
	.oad-hero__kicker,
	.oad-hero:not(.has-background) .oad-hero__kicker {
		padding-right: var(--wp--preset--spacing--24);
		padding-left: var(--wp--preset--spacing--24);
	}

	.oad-hero__title,
	.oad-hero__strap {
		padding-right: var(--wp--preset--spacing--24);
		padding-left: var(--wp--preset--spacing--24);
	}

	.oad-hero__cta {
		padding: var(--wp--preset--spacing--16) var(--wp--preset--spacing--24) var(--wp--preset--spacing--24);
	}

	/* One 44px row after the card (the CTA), never between the kicker and the
	   headline: pinned to row 6 so auto-placement cannot slot it into row 1. */
	.oad-hero__location {
		grid-row: 6;
		min-height: 44px;
		padding: 0 var(--wp--preset--spacing--24);
		border-left: none;
		border-top: 2px solid var(--wp--preset--color--ink);
	}

	.oad-hero__location-text {
		flex-direction: row;
		align-items: center;
		gap: var(--wp--preset--spacing--16);
	}

	.oad-hero__title {
		font-size: var(--wp--preset--font-size--display-l);
	}

	.oad-hero:not(.has-background) .oad-hero__title {
		font-size: var(--wp--preset--font-size--display-l);
	}
}

/* ------------------------------------------------------------------ */
/* 3 · near-you radius text. No longer a bar: it sits on the one small */
/* meta line under the filter bar (archive.css section 3), which       */
/* supplies the type. Just the words; no Refresh button.               */
/* ------------------------------------------------------------------ */

.oad-af-radius {
	display: block;
	padding: 0;
	border: 0;
	background: none;
}

.oad-af-radius__txt {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--8);
	font-size: inherit;
	color: inherit;
}

.oad-af-radius__k {
	color: var(--wp--preset--color--ink);
}

/* ------------------------------------------------------------------ */
/* 4 · theme cards — "By theme." band                                  */
/* ------------------------------------------------------------------ */

.oad-theme-cards {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--wp--preset--spacing--16);
}

@media (min-width: 1024px) {
	.oad-theme-cards {
		grid-template-columns: repeat(3, 1fr);
		gap: var(--wp--preset--spacing--24);
	}
}

.oad-theme-card {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--8);
	padding: var(--wp--preset--spacing--24);
	border: 2px solid var(--wp--preset--color--ink);
	background: var(--wp--preset--color--ground);
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	transition-property: background-color, color;
	transition-duration: 100ms;
	transition-timing-function: ease-out;
}

.oad-theme-card:not([data-cat="active"]):hover {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--white);
}

/* The one carve-out from the hover-only yellow rule (outanddown-yellow-rule):
   the Active category keeps its resting fill everywhere else on the site,
   so its card does too, rather than looking unstyled next to the others. */
.oad-theme-card[data-cat="active"] {
	background: var(--wp--preset--color--active);
	border-color: var(--wp--preset--color--active);
}

.oad-theme-card__name {
	font-family: var(--wp--preset--font-family--shout);
	font-weight: 800;
	text-transform: uppercase;
	font-size: 20px;
	letter-spacing: -0.01em;
}

.oad-theme-card__count {
	font-family: var(--wp--preset--font-family--meter);
	font-weight: 500;
	font-size: 11px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

.oad-theme-card:hover .oad-theme-card__count {
	color: inherit;
}

/* The first poster frame's top edge is the radius bar's closing line. */
.oad-af-radius:has(~ .oad-af-results .oad-poster-card__frame) {
	border-bottom: 0;
}