/* Hero (front-page + single post) — hero-viewport wrapper, hero-featured-post
   cover/overlay/badge/byline, hero logo overlay. Loaded on
   is_front_page() || is_singular('post'). Slice 4. */

/* Layer 3 — hero photo banner (under the primary nav). The hero-featured-post
   pattern in the template fills it with a cover block + image + overlay; the
   empty placeholder in parts/header.html collapses when nothing is injected. */
.header-hero-banner {
	background-color: var(--wp--preset--color--primary-dark);
	max-width: 1440px;
	margin-inline: auto;
	min-height: 0;
}

/* Collapse the empty placeholder cover when no content was injected. */
.header-hero-banner > .wp-block-cover__inner-container:empty {
	display: none;
}

.header-hero-banner:has(> .wp-block-cover__inner-container:empty) {
	display: none;
}

/* Remove WP root blockGap around hero on front-page and single */
.hero-featured-post {
	margin-block: 0;
}

/* Author link on hero — white, underline on hover */
.hero-featured-post__author a,
.hero-featured-post__author a:visited {
	color: var(--wp--preset--color--surface);
	text-decoration: none;
}

.hero-featured-post__author a:hover {
	text-decoration: underline;
}

/* ===================================================================
   Hero Viewport — front-page wrapper around header + hero.
   Hero always maintains 16:9 aspect ratio. On 16:9 viewports the hero
   fills the screen exactly, so the utility bar overlays the top and
   the primary nav overlays the bottom. On other aspect ratios, navs
   sit normally above/below the hero.
   =================================================================== */
.hero-viewport {
	position: relative;
	margin-block: 0;
}

/* Hero always uses 16:9 aspect ratio */
.hero-viewport .hero-featured-post {
	margin-block: 0;
}

/* Scroll-down arrow — hidden by default, shown at 16:9 */
.hero-scroll-arrow {
	display: none;
	position: absolute;
	bottom: 96px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 201;
	color: var(--wp--preset--color--surface);
	opacity: 0.8;
	transition: opacity 0.2s ease;
	text-decoration: none;
	animation: hero-bounce 2s ease-in-out infinite;
}

.hero-scroll-arrow:hover {
	opacity: 1;
	color: var(--wp--preset--color--surface);
}

@keyframes hero-bounce {

	0%, 100% { transform: translateX(-50%) translateY(0); }

	50% { transform: translateX(-50%) translateY(8px); }
}

/* === 16:9 overlay layout ===
   At 16:8–16:10 viewports, the hero fills the viewport exactly.
   Accounts for OS taskbar, browser chrome reducing effective viewport.
   Utility bar overlays top, primary nav overlays bottom. */
@media (min-aspect-ratio: 16/10) and (max-aspect-ratio: 2/1) {

	.hero-viewport {
		height: 100vh;
		overflow: hidden;
	}

	/* Utility bar overlays the top of the hero */
	.hero-viewport > .wp-block-template-part:first-child {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		z-index: 200;
	}

	.hero-viewport .utility-bar {
		background: rgba(0, 0, 0, 0.3);
	}

	/* Hero fills the entire viewport */
	.hero-viewport .hero-featured-post__cover.wp-block-cover {
		height: 100vh;
		width: 100%;
		max-width: none;
		max-height: none;
		aspect-ratio: auto;
	}

	/* Primary nav pulled up over hero bottom, then sticky.
	   Solid white bg — the 0.92 opacity caused a tinted color artifact.
	   z-index raised above hero overlay (200) so nav stays on top. */
	.hero-viewport + .wp-block-template-part:has(.primary-nav-bar) {
		margin-top: -80px;
		background: var(--wp--preset--color--surface);
		z-index: 200;
	}

	/* Overlay content clearance — push content away from nav bars.
	   Top: 36px utility bar + 40px gap = 76px.
	   Bottom: 80px primary nav + 40px gap = 120px. */
	.hero-viewport .hero-featured-post__cover .wp-block-cover__inner-container {
		padding-bottom: 120px;
	}

	/* Hero logo must clear the utility bar on 16:9 viewports */
	.hero-viewport .hero-logo-overlay {
		top: 76px;
	}

	/* Show scroll arrow — positioned between overlay bottom and nav top */
	.hero-scroll-arrow {
		display: block;
		bottom: 96px;
	}
}

/* 14. Hero template part */
.site-hero img[data-object-fit][src=""],
.site-hero img[data-object-fit]:not([src]) {
	display: block;
}

.site-hero {
	aspect-ratio: 16 / 9;
	max-height: 100vh;
	max-width: 2560px;
	width: min(100%, calc(100vh * 16 / 9));
	margin-inline: auto;
	position: relative;
}

.site-hero img[data-object-fit] {
	aspect-ratio: unset;
	max-height: none;
}

/* Hero logo overlay — top-left of the hero cover, not the inner container.
   Positioned relative to .hero-featured-post__cover (which has position:relative). */
.hero-logo-overlay {
	display: none;
	position: absolute;
	top: 32px;
	left: max(20px, calc((100% - 1440px) / 2));
	z-index: 2;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

.hero-logo-overlay__img {
	display: block;
	width: 168px;
	height: auto;
	object-fit: contain;
}

@media (min-width: 782px) {

	.hero-logo-overlay { display: block; }
}

/* Hero cover — full-bleed. Inside .hero-viewport it fills 100vh (overridden above).
   Outside hero-viewport (fallback), uses 16:9 capped at viewport height. */
.hero-featured-post__cover.wp-block-cover {
	max-width: 2560px;
	max-height: 100vh;
	width: min(100%, calc(100vh * 16 / 9));
	margin-inline: auto;
	aspect-ratio: 16 / 9;
	min-height: 0;
	align-items: flex-end;
	justify-content: flex-start;
}

/* Inner container constrained to 1440px for nav-level alignment. */
.hero-featured-post__cover .wp-block-cover__inner-container {
	width: 100%;
	max-width: 1440px;
	margin-inline: auto;
	padding-left: 20px;
	padding-right: 20px;
}

/* Left-align overlay content within the hero cover. Width and position
   match Figma: 900px wide starting 120px from hero left edge. */
.hero-featured-post__cover .hero-featured-post__overlay {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	max-width: 900px;
	margin-left: 0;
	margin-right: auto;
	padding-left: 0;
	padding-right: 0;
}

/* Hero category badge — yellow chip on the overlay.
   wp:post-terms renders as <div class="...hero-featured-post__badge"><a>Cat</a></div>.
   The block JSON sets backgroundColor/textColor but we also need padding + shape. */
.hero-featured-post__badge {
	display: inline-block;
	width: auto;
	margin: 0;
}

.hero-featured-post__badge a {
	display: inline-block;
	background: var(--wp--preset--color--accent-1);
	color: var(--wp--preset--color--primary-dark);
	padding: 4px 12px;
	text-decoration: none;
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	line-height: 1.4;
}

.hero-featured-post__badge a:hover {
	background: var(--wp--preset--color--accent-1-hover);
	color: var(--wp--preset--color--primary-dark);
}

.hero-featured-post__category,
.hero-featured-post__category a {
	text-decoration: none;
}

.hero-featured-post__category a {
	color: inherit;
}

.hero-featured-post__category a:hover {
	color: var(--wp--preset--color--accent-2);
}

/* Title on hero cover: white-on-photo, link-color override via descendant
   specificity (no !important — spec policy). */
.hero-featured-post__cover .hero-featured-post__title,
.hero-featured-post__cover .hero-featured-post__title a,
.hero-featured-post__cover .hero-featured-post__title a:visited,
.hero-featured-post__cover .hero-featured-post__title a:hover {
	color: var(--wp--preset--color--surface);
	text-decoration: none;
}

/* Reset WP default block margins inside the hero overlay — Figma uses gap:12px */
.hero-featured-post__cover .hero-featured-post__title { margin-block: 0; }

.hero-featured-post__cover .hero-featured-post__meta { margin-block: 0; }

/* On mobile, reduce hero overlay padding so headline has more room in 16:9 frame */
@media (max-width: 768px) {

	.hero-featured-post__cover .hero-featured-post__overlay {
		gap: 4px;
		padding-bottom: 0;
	}

	.hero-featured-post__badge a { font-size: 10px; padding: 3px 8px; }

	/* Reduce gap between title and meta to near-zero so long titles fit */
	.hero-featured-post__cover .hero-featured-post__title { margin-block-end: 0; }

	.hero-featured-post__meta { gap: 0.3rem; margin-block-start: 2px; }

	/* Push overlay closer to the bottom edge of the hero.
	   WP cover block has its own 18px padding; inner container adds more.
	   Zero both and let the overlay's gap handle minimal spacing. */
	.hero-featured-post__cover.wp-block-cover {
		padding-bottom: 8px;
	}

	.hero-featured-post__cover .wp-block-cover__inner-container {
		padding-bottom: 4px;
	}

	/* Remove bottom margin on meta row */
	.hero-featured-post__cover .hero-featured-post__meta {
		margin-block-end: 0;
	}

}

/* Hero byline row: all elements must match — Figma: Roboto 14px white */
.hero-featured-post__meta {
	gap: 8px;
}

.hero-featured-post__meta,
.hero-featured-post__meta .wp-block-post-author-name,
.hero-featured-post__meta .wp-block-post-date,
.hero-featured-post__meta .wp-block-post-date time {
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--surface);
}

.hero-featured-post__meta .wp-block-post-author-name {
	font-weight: 700;
}