/**
 * Mona Vale — theme styles.
 *
 * Raw tokens come from theme.json (--wp--preset--*); semantic --mv-* custom
 * properties layer on top. Style sections against .mv-* classes — no inline
 * styles in block markup, no hardcoded hex/px outside this token layer.
 *
 * Brand rules (Mona_Vale_Re-Brand_Digital_Scope_2026.pdf):
 * cream is the default surface, white for alternating sections/cards, dark
 * green sparingly (CTAs, links, footer, occasional feature section), soft
 * black text — never pure black. Lovelace is H1-only.
 */

:root {
	--mv-color-bg: var(--wp--preset--color--base);
	--mv-color-surface: var(--wp--preset--color--base-2);
	--mv-color-text: var(--wp--preset--color--contrast);
	--mv-color-accent: var(--wp--preset--color--primary);
	--mv-color-inverse-text: var(--wp--preset--color--base);
	/* Banner scrim base — black, tinted with transparency at point of use. */
	--mv-color-scrim: #000000;

	/* Header rhythm — Ben-specified: 40px clear above and below the logo. */
	--mv-header-pad: 2.5rem;

	/* One horizontal gutter, applied identically on mobile and desktop. */
	--mv-gutter: 1.5rem;

	/* Fixed vertical breathing room: 80px per section side → 160px between areas. */
	--mv-space-section: 5rem;
}

body {
	-webkit-font-smoothing: antialiased;
}

/* Visible keyboard focus — uses currentColor so it reads on any surface
   (green on cream sections, cream on green sections) without new colours. */
a:focus-visible,
button:focus-visible,
.wp-block-button__link:focus-visible,
.mv-menu-toggle:focus-visible,
summary:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

/* WP injects root blockGap as margin between header / main / footer, which
   reads as phantom extra header height. Sections own their spacing. */
.wp-site-blocks > * + * {
	margin-block-start: 0;
}

/* ---------- Header ---------- */

.mv-header {
	position: relative;
	z-index: 101; /* above the menu overlay (100) so Close stays reachable */
	background-color: var(--mv-color-bg);
	padding-block: var(--mv-header-pad);
}

.mv-header__bar {
	display: flex;
	align-items: flex-end; /* nav baseline sits at the logo's bottom edge */
	justify-content: space-between;
	gap: var(--wp--preset--spacing--md);
}

.mv-header__bar > * {
	margin-block: 0;
}

.mv-header__nav a {
	color: var(--mv-color-accent);
	text-decoration: none;
	font-weight: 500;
}

.mv-header__nav a:hover {
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

/* Current-page state — italic, matching the mobile overlay's is-current. */
.mv-header__nav [aria-current="page"],
.mv-header__nav .current-menu-item > a {
	font-style: italic;
}

/* Classic menu list — horizontal top level with hover/focus flyouts. */
.mv-header__menu {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--md);
	margin: 0;
	padding: 0;
	list-style: none;
}

.mv-header__menu li {
	margin: 0;
}

.mv-header__menu .menu-item {
	position: relative;
}

/* Sub-menu flyout — hidden until the parent is hovered or focused within. */
.mv-header__menu .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 102;
	min-width: 12rem;
	margin: 0;
	padding: var(--wp--preset--spacing--xs) 0;
	list-style: none;
	background-color: var(--mv-color-bg);
	box-shadow: 0 8px 24px color-mix(in srgb, var(--mv-color-accent) 12%, transparent);
	opacity: 0;
	visibility: hidden;
	transform: translateY(0.25rem);
	transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}

.mv-header__menu .menu-item-has-children:hover > .sub-menu,
.mv-header__menu .menu-item-has-children:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.mv-header__menu .sub-menu a {
	display: block;
	padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--sm);
	white-space: nowrap;
}

/* Admin-only hint shown while no menu is assigned to the Primary location. */
.mv-header__nav--empty a {
	font-style: italic;
	opacity: 0.75;
}

/* Menu toggle — hidden on desktop; the inline nav does the work there.
   Scoped under .mv-header to out-specify core's .wp-block-navigation. */
.mv-header .mv-menu-toggle {
	display: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	font-family: var(--wp--preset--font-family--cormorant);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--mv-color-accent);
}

@media (max-width: 900px) {
	.mv-header .mv-header__nav {
		display: none;
	}

	.mv-header .mv-menu-toggle {
		display: inline-block;
	}
}

/* Mobile: shrink the logo ~a third (150px → 100px) to reclaim header height. */
@media (max-width: 48em) {
	.mv-header__logo.wp-block-site-logo {
		width: 100px;
	}

	.mv-header__logo img {
		width: 100%;
		height: auto;
	}
}

/* ---------- Mobile menu overlay ---------- */

.mv-menu {
	position: fixed;
	inset: 0;
	z-index: 100;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: calc(var(--mv-header-pad) * 2 + 9rem) var(--mv-gutter)
		var(--wp--preset--spacing--lg);
	background: color-mix(in srgb, var(--mv-color-bg) 90%, transparent);
	-webkit-backdrop-filter: blur(20px);
	backdrop-filter: blur(20px);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.4s ease, visibility 0.4s;
}

body.mv-menu-open {
	overflow: hidden;
}

body.mv-menu-open .mv-menu {
	opacity: 1;
	visibility: visible;
}

.mv-menu__panels {
	position: absolute;
	inset: 0;
}

.mv-menu__panel {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: var(--wp--preset--spacing--lg) var(--wp--preset--spacing--md);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.35s ease, visibility 0.35s;
}

body.mv-menu-open .mv-menu__panel.is-active {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.mv-menu__panel ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--sm);
}

.mv-menu__item {
	display: inline-flex;
	align-items: baseline;
	gap: 0.4em;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	font-family: var(--wp--preset--font-family--cormorant);
	font-weight: 500;
	font-size: clamp(2rem, 8vw, 3rem);
	line-height: 1.1;
	color: var(--mv-color-accent);
	text-decoration: none;
}

.mv-menu__item--sub {
	font-size: clamp(1.5rem, 6vw, 2.25rem);
}

.mv-menu__item:hover,
.mv-menu__item:focus-visible {
	color: var(--mv-color-text);
}

.mv-menu__item.is-current {
	font-style: italic;
}

.mv-menu__chevron {
	font-size: 0.7em;
	opacity: 0.6;
}

.mv-menu__back {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	margin-block-end: var(--wp--preset--spacing--md);
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	font-family: var(--wp--preset--font-family--cormorant);
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--mv-color-accent) 70%, transparent);
	transition: color 0.2s ease;
}

.mv-menu__back:hover,
.mv-menu__back:focus-visible {
	color: var(--mv-color-accent);
}

.mv-menu__back-arrow {
	font-size: 1.2em;
	line-height: 1;
}

/* Staggered reveal of the active panel's items. */
.mv-menu__panel .mv-menu__item {
	opacity: 0;
	transform: translateY(1rem);
	transition: color 0.2s ease, opacity 0.5s ease, transform 0.5s ease;
}

.mv-menu__panel.is-active .mv-menu__item {
	opacity: 1;
	transform: none;
}

.mv-menu__panel.is-active li:nth-child(1) .mv-menu__item { transition-delay: 0.05s; }
.mv-menu__panel.is-active li:nth-child(2) .mv-menu__item { transition-delay: 0.10s; }
.mv-menu__panel.is-active li:nth-child(3) .mv-menu__item { transition-delay: 0.15s; }
.mv-menu__panel.is-active li:nth-child(4) .mv-menu__item { transition-delay: 0.20s; }
.mv-menu__panel.is-active li:nth-child(5) .mv-menu__item { transition-delay: 0.25s; }
.mv-menu__panel.is-active li:nth-child(6) .mv-menu__item { transition-delay: 0.30s; }
.mv-menu__panel.is-active li:nth-child(7) .mv-menu__item { transition-delay: 0.35s; }

@media (prefers-reduced-motion: reduce) {
	.mv-menu,
	.mv-menu__panel,
	.mv-menu__panel .mv-menu__item {
		transition: opacity 0.2s ease;
		transform: none;
	}
}

/* ---------- Footer ---------- */

.mv-footer {
	padding-block: var(--wp--preset--spacing--lg);
}

/* Balance: text left, logo right; stacks with the logo on top on mobile. */
.mv-footer__inner {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--lg);
	max-width: var(--wp--style--global--content-size);
	margin-inline: auto;
	padding-inline: var(--mv-gutter);
}

.mv-footer__inner > * {
	margin-block: 0;
}

.mv-footer__text {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--sm);
}

.mv-footer__text > * {
	margin-block: 0;
}

.mv-footer__brand {
	flex-shrink: 0;
}

.mv-footer__logo {
	margin: 0;
}

.mv-footer__logo img {
	width: 12rem;
	height: auto;
}

.mv-footer a {
	color: var(--mv-color-inverse-text);
}

.mv-footer__legal {
	opacity: 0.7;
}

@media (max-width: 600px) {
	.mv-footer__inner {
		flex-direction: column-reverse;
		align-items: flex-start;
		gap: var(--wp--preset--spacing--md);
	}
}

/* ---------- Sections ---------- */

/* Section shell — every custom section block renders as .mv-section.mv-<name>.
   Default cream; variants flip surface per the brand's section rhythm. */
.mv-section {
	padding-block: var(--mv-space-section);
}

/* Uniform rhythm: sections sit flush (kill the post-content blockGap) so the
   only vertical space between areas is each section's own padding — giving a
   consistent 80px (40px + 40px) gap between every area. */
.wp-block-post-content > * {
	margin-block-start: 0;
}

.mv-section--white {
	background-color: var(--mv-color-surface);
}

/* Green feature sections — via variant class or the block colour picker. */
.mv-section--green,
.mv-section.has-primary-background-color {
	background-color: var(--mv-color-accent);
	color: var(--mv-color-inverse-text);
}

.mv-section--green :is(h1, h2, h3, a),
.mv-section.has-primary-background-color :is(h1, h2, h3, p, a) {
	color: var(--mv-color-inverse-text);
}

/* Shared constrained inner container for full-bleed sections. */
.mv-feature-split__inner,
.mv-hours__inner {
	max-width: var(--wp--style--global--content-size);
	margin-inline: auto;
	padding-inline: var(--mv-gutter);
}

/* ---------- Image lightbox (gallery only) ---------- */

/* Lightbox is enabled only on gallery images (inc/blocks.php render filter),
   so only they render an enlarge trigger. Brand-tinted, blurred backdrop: */
.wp-lightbox-overlay {
	-webkit-backdrop-filter: blur(16px);
	backdrop-filter: blur(16px);
}

.wp-lightbox-overlay .scrim {
	background-color: color-mix(in srgb, var(--mv-color-accent) 72%, transparent) !important;
	opacity: 1 !important;
}

/* ---------- Intro ---------- */

.mv-intro__inner {
	max-width: 48rem;
	margin-inline: auto;
	padding-inline: var(--mv-gutter);
	text-align: center;
}

.mv-intro__inner > * {
	margin-block: 0 var(--wp--preset--spacing--sm);
}

.mv-intro__inner > *:last-child {
	margin-block-end: 0;
}

.mv-intro__text {
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.5;
}

/* ---------- Feature Split ---------- */

.mv-feature-split__inner {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	align-items: center;
	gap: var(--wp--preset--spacing--lg);
}

.mv-feature-split__inner > * {
	margin-block: 0;
}

.mv-feature-split__media img {
	width: 100%;
	height: auto;
	aspect-ratio: 7 / 6;
	object-fit: cover;
}

.is-style-media-right .mv-feature-split__media {
	order: 2;
}

@media (max-width: 48em) {
	.mv-feature-split__inner {
		grid-template-columns: 1fr;
		gap: var(--wp--preset--spacing--md);
	}

	.is-style-media-right .mv-feature-split__media {
		order: 0;
	}
}

/* ---------- Opening Hours ---------- */

.mv-hours__inner {
	max-width: 44rem;
	text-align: center;
}

.mv-hours__table table {
	width: auto;
	min-width: 60%;
	margin-inline: auto;
	border-collapse: collapse;
}

.mv-hours__table :is(td, th) {
	border: none;
	padding-block: 0.4em;
	padding-inline: var(--mv-gutter);
}

.mv-hours__table td:first-child {
	text-align: right;
	font-weight: 500;
}

.mv-hours__table td:last-child {
	text-align: left;
}

.mv-hours__note {
	font-size: var(--wp--preset--font-size--small);
	font-style: italic;
	opacity: 0.8;
}

/* Plain table utility — borderless, left-aligned; for tables inside body
   copy (e.g. opening hours inside a feature-split). */
.mv-table--plain table {
	width: auto;
	table-layout: auto;
	border-collapse: collapse;
}

.mv-table--plain :is(td, th) {
	border: none;
	text-align: left;
	padding-block: 0.4em;
	padding-inline: 0 var(--wp--preset--spacing--md);
}

.mv-table--plain td:first-child {
	font-weight: 500;
}

/* ---------- Gallery ---------- */

.mv-gallery__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--wp--preset--spacing--sm);
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	padding-inline: var(--mv-gutter);
}

.mv-gallery__grid > * {
	margin-block: 0;
}

.mv-gallery__grid img {
	width: 100%;
	height: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

@media (max-width: 48em) {
	.mv-gallery__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ---------- Cards ---------- */

.mv-cards__inner {
	max-width: var(--wp--style--global--content-size);
	margin-inline: auto;
	padding-inline: var(--mv-gutter);
}

.mv-cards__title {
	text-align: center;
	margin-block-end: var(--wp--preset--spacing--lg);
}

.mv-cards__row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
	gap: var(--wp--preset--spacing--md);
	align-items: stretch;
}

.mv-cards__row > * {
	margin-block: 0;
}

.mv-cards__card {
	background-color: var(--mv-color-surface);
	padding-block-end: var(--wp--preset--spacing--md);
}

.mv-cards__card > :not(.mv-cards__image) {
	padding-inline: var(--wp--preset--spacing--md);
}

.mv-cards__image img {
	width: 100%;
	height: auto;
	aspect-ratio: 7 / 6;
	object-fit: cover;
}

/* A lone What's Happening card keeps the width it has in a two-up rather than
   stretching to full width (auto-fit collapses the empty tracks). Below the
   two-column breakpoint it fills the row normally, like every card on mobile. */
@media (min-width: 40em) {
	.mv-whats-on .mv-cards__row:has(> .mv-cards__card:only-child) {
		grid-template-columns: minmax(0, calc(50% - var(--wp--preset--spacing--md) / 2));
		justify-content: center;
	}
}

/* ---------- CTA Banner ---------- */

.mv-cta__inner {
	max-width: 46rem;
	margin-inline: auto;
	padding-inline: var(--mv-gutter);
	text-align: center;
}

.mv-cta__inner > * {
	margin-block: 0 var(--wp--preset--spacing--sm);
}

.mv-cta__inner > *:last-child {
	margin-block-end: 0;
}

/* Centre the button below the copy (the buttons wrapper is flex, so it
   ignores the section's text-align). */
.mv-cta__actions {
	justify-content: center;
}

/* On green, the primary (green) button would vanish — flip it to cream. */
.mv-cta .wp-block-button__link {
	background-color: var(--mv-color-inverse-text);
	color: var(--mv-color-accent);
}

.mv-cta .wp-block-button__link:hover {
	background-color: #fffdf5;
	color: var(--mv-color-accent);
}

/* ---------- Menu List ---------- */

.mv-menu-list__inner {
	max-width: var(--wp--style--global--content-size);
	margin-inline: auto;
	padding-inline: var(--mv-gutter);
}

.mv-menu-list__title {
	text-align: center;
	margin-block-end: var(--wp--preset--spacing--sm);
}

.mv-menu-list__intro {
	max-width: 44rem;
	margin-inline: auto;
	margin-block-end: var(--wp--preset--spacing--lg);
	text-align: center;
}

.mv-menu-list__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--wp--preset--spacing--md);
}

.mv-menu-list__grid > * {
	margin-block: 0;
}

@media (max-width: 48em) {
	.mv-menu-list__grid {
		grid-template-columns: 1fr;
	}
}

/* Each menu is a bordered card: title, blurb, then a link pinned to the base. */
.mv-menu-list__card {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--sm);
	padding: var(--wp--preset--spacing--lg);
	border-width: 0.0625rem;
	border-style: solid;
	border-color: color-mix(in srgb, var(--mv-color-accent) 30%, transparent);
	border-radius: 0.5rem;
}

.mv-menu-list__card > * {
	margin-block: 0;
}

.mv-menu-list__card-title {
	font-size: var(--wp--preset--font-size--large);
}

.mv-menu-list__card-text {
	flex: 1;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
	opacity: 0.85;
}

.mv-menu-list__card .wp-block-file {
	margin: 0;
}

/* View link styled as an outline button that reads on the dark background. */
.mv-menu-list__card .wp-block-file a {
	display: inline-block;
	align-self: flex-start;
	padding: 0.6em 1.4em;
	border-width: 0.0625rem;
	border-style: solid;
	border-color: var(--mv-color-accent);
	color: var(--mv-color-accent);
	font-size: var(--wp--preset--font-size--small);
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.mv-menu-list__card .wp-block-file a:hover,
.mv-menu-list__card .wp-block-file a:focus-visible {
	background-color: var(--mv-color-accent);
	color: var(--mv-color-inverse-text);
}

/* ---------- Booking ---------- */

.mv-booking__inner {
	max-width: 46rem;
	margin-inline: auto;
	margin-block-end: var(--wp--preset--spacing--md);
	padding-inline: var(--mv-gutter);
	text-align: center;
}

.mv-booking__inner > * {
	margin-block: 0 var(--wp--preset--spacing--sm);
}

.mv-booking__widget {
	max-width: var(--wp--style--global--content-size);
	margin-inline: auto;
	padding-inline: var(--mv-gutter);
}

.mv-booking__widget iframe {
	display: block;
	width: 100%;
	/* Fixed, scrollable height — no auto-resizer (see render.php). Tall enough
	   for the date/time step; caps to the viewport on short screens, and the
	   iframe scrolls natively so every step is reachable. */
	height: 700px;
	max-height: 85vh;
	border: 0;
}

/* ---------- Instagram feed ---------- */

.mv-instagram__inner {
	max-width: 46rem;
	margin-inline: auto;
	margin-block-end: var(--wp--preset--spacing--lg);
	padding-inline: var(--mv-gutter);
	text-align: center;
}

.mv-instagram__inner > * {
	margin-block: 0 var(--wp--preset--spacing--sm);
}

.mv-instagram__feed {
	max-width: var(--wp--style--global--content-size);
	margin-inline: auto;
	padding-inline: var(--mv-gutter);
}

/* The Instagram Feed (Smash Balloon) plugin renders its own responsive grid and
   ships its own styles; the wrapper above only constrains and centres it. */

/* Editor-only stand-in for the front-end Instagram feed. */
.mv-instagram__placeholder,
.mv-instagram__notice {
	max-width: var(--wp--style--global--content-size);
	margin-inline: auto;
	padding: var(--wp--preset--spacing--lg) var(--wp--preset--spacing--sm);
	border: 1px dashed color-mix(in srgb, var(--mv-color-accent) 40%, transparent);
	text-align: center;
	font-style: italic;
	opacity: 0.7;
}

/* ---------- Contact form (Gravity Forms) ---------- */

.mv-form {
	padding-block: var(--wp--preset--spacing--xl);
}

.mv-form__title {
	margin-block-end: var(--wp--preset--spacing--md);
}

/* Brand the Gravity Forms "orbital" theme through its own CSS variables. */
.mv-form .gform_wrapper,
.mv-contact__form .gform_wrapper {
	--gf-ctrl-btn-bg-color-primary: var(--mv-color-accent);
	--gf-ctrl-btn-bg-color-hover-primary: color-mix(in srgb, var(--mv-color-accent) 85%, black);
	--gf-ctrl-btn-color-primary: var(--mv-color-inverse-text);
	--gf-ctrl-btn-color-hover-primary: var(--mv-color-inverse-text);
	--gf-ctrl-btn-border-radius: 0;
	--gf-color-primary: var(--mv-color-accent);
}

/* Editor-only stand-in for the front-end reservation widget. */
.mv-booking__placeholder {
	max-width: var(--wp--style--global--content-size);
	margin-inline: auto;
	padding: var(--wp--preset--spacing--lg) var(--wp--preset--spacing--sm);
	border: 1px dashed
		color-mix(in srgb, var(--mv-color-accent) 40%, transparent);
	text-align: center;
	font-style: italic;
	opacity: 0.7;
}

/* ---------- Contact (two-column: details + form) ---------- */

.mv-contact {
	display: grid;
	grid-template-columns: 5fr 7fr;
	align-items: start;
	gap: var(--wp--preset--spacing--xl);
	max-width: var(--wp--style--global--content-size);
	margin-inline: auto;
	padding-block: var(--mv-space-section);
	padding-inline: var(--mv-gutter);
}

.mv-contact > * {
	margin-block: 0;
}

.mv-contact__details > *,
.mv-contact__form > * {
	margin-block: 0 var(--wp--preset--spacing--sm);
}

.mv-contact__details > *:last-child,
.mv-contact__form > *:last-child {
	margin-block-end: 0;
}

.mv-contact__details p a {
	color: var(--mv-color-accent);
}

.mv-contact__label {
	display: block;
	margin-block-end: 0.15rem;
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	opacity: 0.7;
}

@media (max-width: 48em) {
	.mv-contact {
		grid-template-columns: 1fr;
		gap: var(--wp--preset--spacing--lg);
	}
}

/* ---------- Map ---------- */

.mv-section.mv-map {
	padding-block: var(--mv-space-section);
}

.mv-map__frame {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 7;
}

.mv-map__frame iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

@media (max-width: 48em) {
	.mv-map__frame {
		aspect-ratio: 4 / 5;
	}
}

/* ---------- Hero (shared base: mv-hero + mv-hero-slider) ---------- */

.mv-hero {
	position: relative;
	display: grid;
	align-content: end;
	overflow: hidden;
	padding-block: var(--wp--preset--spacing--lg);
	color: var(--mv-color-inverse-text);
}

/* Interior single-image hero: ~2/3 of the homepage banner. */
.mv-hero--single {
	min-height: clamp(20rem, 54vh, 35rem);
}

/* Homepage slider: full height. */
.mv-hero--slider {
	min-height: clamp(30rem, 80vh, 52rem);
}

/* Mobile: shorten the banner and lift the content so the heading and button
   read above the fold without scrolling. svh accounts for mobile browser
   chrome; content stays bottom-aligned over the dark part of the scrim, so it
   remains legible. */
@media (max-width: 48em) {
	.mv-hero--single,
	.mv-hero--slider {
		min-height: 58svh;
	}

	.mv-hero {
		padding-block: var(--wp--preset--spacing--md);
	}
}

.mv-hero > * {
	margin-block: 0;
}

/* Media layer fills the banner — a single image OR a gallery of slides. */
.mv-hero__media {
	position: absolute;
	left: 0;
	right: 0;
	/* Taller than the banner so the parallax shift (hero-parallax.js) has room
	   to move without exposing an edge. JS translateY stays within ±28%.
	   Falls back to a centred, gently-cropped image when JS is absent. */
	top: -28%;
	height: 156%;
	z-index: 0;
	margin: 0;
	overflow: hidden;
	will-change: transform;
}

.mv-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Gallery-based slider: flatten the grid; each slide covers the banner.
   The extra classes out-specify core gallery's relative-positioned figures. */
.mv-hero__media.has-nested-images {
	display: block;
	gap: 0;
}

.mv-hero .mv-hero__media.has-nested-images > figure.wp-block-image {
	position: absolute;
	inset: 0;
	margin: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: opacity 1.5s ease-in-out;
}

/* Before JS, show the first slide only (no last-image → first-image flash). */
.mv-hero__media.has-nested-images > figure.wp-block-image:first-child {
	opacity: 1;
}

/* view.js adds .is-sliding and cycles .is-active; specificity beats first-child. */
.mv-hero .mv-hero__media.is-sliding.has-nested-images > figure.wp-block-image {
	opacity: 0;
}

.mv-hero .mv-hero__media.is-sliding.has-nested-images > figure.wp-block-image.is-active {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.mv-hero .mv-hero__media.has-nested-images > figure.wp-block-image {
		transition: none;
	}
}

.mv-hero__scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(
		to top,
		color-mix(in srgb, var(--mv-color-scrim) 70%, transparent),
		color-mix(in srgb, var(--mv-color-scrim) 38%, transparent) 40%,
		color-mix(in srgb, var(--mv-color-scrim) 12%, transparent) 75%
	);
}

.mv-hero__content {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: var(--wp--style--global--content-size);
	margin-inline: auto;
	padding-inline: var(--mv-gutter);
}

.mv-hero__content > * {
	margin-block: 0 var(--wp--preset--spacing--sm);
}

.mv-hero__content > *:last-child {
	margin-block-end: 0;
}

.mv-hero__title,
.mv-hero__intro {
	color: var(--mv-color-inverse-text);
}

.mv-hero__intro {
	max-width: 40rem;
}

/* ---------- Timeline (Our Story) ---------- */

.mv-timeline__inner {
	max-width: var(--wp--style--global--content-size);
	margin-inline: auto;
	padding-inline: var(--mv-gutter);
}

.mv-timeline__head {
	max-width: 44rem;
	margin-inline: auto;
	margin-block-end: var(--wp--preset--spacing--xl);
	text-align: center;
}

.mv-timeline__head > * {
	margin-block: 0 var(--wp--preset--spacing--sm);
}

.mv-timeline__head > *:last-child {
	margin-block-end: 0;
}

.mv-timeline__lead {
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.5;
}

/* The track carries the central vertical line; entries alternate sides. */
.mv-timeline__track {
	--mv-tl-gap: clamp(1.5rem, 4vw, 3rem);
	--mv-tl-badge: 3.75rem;
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--lg);
}

.mv-timeline__track::before {
	content: "";
	position: absolute;
	inset-block: 0;
	left: 50%;
	width: 0.125rem;
	transform: translateX(-50%);
	background-color: color-mix(in srgb, var(--mv-color-accent) 25%, transparent);
}

.mv-timeline__entry {
	position: relative;
	box-sizing: border-box;
	width: calc(50% - var(--mv-tl-gap));
	margin-block: 0;
	background-color: var(--mv-color-surface);
	border-radius: 0.5rem;
}

/* Zero WP's blockGap margins so the image sits flush at the top of the card
   (the absolutely-positioned year is still a DOM sibling, so the image would
   otherwise inherit a blockGap margin-top and drop down inside the card). */
.mv-timeline__entry > * {
	margin-block: 0;
}

/* Alternate: odd entries hug the left of the line, even the right. */
.mv-timeline__entry:nth-child(odd) {
	margin-inline-end: auto;
}

.mv-timeline__entry:nth-child(even) {
	margin-inline-start: auto;
}

/* Year badge — a circle centred on the line, beside each card. */
.mv-timeline__year {
	position: absolute;
	top: 50%;
	z-index: 2;
	display: grid;
	place-items: center;
	width: var(--mv-tl-badge);
	height: var(--mv-tl-badge);
	margin: 0;
	transform: translateY(-50%);
	border-radius: 50%;
	background-color: var(--mv-color-accent);
	color: var(--mv-color-inverse-text);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1;
	box-shadow: 0 0 0 0.35rem var(--mv-color-base);
}

.mv-timeline__entry:nth-child(odd) .mv-timeline__year {
	right: calc(-1 * var(--mv-tl-gap) - var(--mv-tl-badge) / 2);
}

.mv-timeline__entry:nth-child(even) .mv-timeline__year {
	left: calc(-1 * var(--mv-tl-gap) - var(--mv-tl-badge) / 2);
}

.mv-timeline__media img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: 0.5rem 0.5rem 0 0;
}

.mv-timeline__body {
	padding: var(--wp--preset--spacing--md);
}

.mv-timeline__body > * {
	margin-block: 0 var(--wp--preset--spacing--xs);
}

.mv-timeline__body > *:last-child {
	margin-block-end: 0;
}

/* Mobile: single rail down the left, every entry full width beside it, with
   the year badge sitting on that rail at the top of each card. */
@media (max-width: 48em) {
	.mv-timeline__track {
		--mv-tl-badge: 3rem;
	}

	.mv-timeline__track::before {
		left: calc(var(--mv-tl-badge) / 2);
		transform: none;
	}

	.mv-timeline__entry,
	.mv-timeline__entry:nth-child(odd),
	.mv-timeline__entry:nth-child(even) {
		width: 100%;
		margin-inline: 0;
		padding-left: calc(var(--mv-tl-badge) + 1rem);
		background-color: transparent;
	}

	.mv-timeline__entry .mv-timeline__body {
		padding-inline: 0;
	}

	.mv-timeline__media img {
		border-radius: 0.5rem;
	}

	.mv-timeline__entry:nth-child(odd) .mv-timeline__year,
	.mv-timeline__entry:nth-child(even) .mv-timeline__year {
		top: 0;
		left: 0;
		right: auto;
		transform: none;
	}
}