/**
 * Homepage hero — index-4 gallery layout (Vantage Journeys).
 *
 * @package Vantage_Journeys
 */

.hero-home {
	/*
	 * Map opacity defaults assume mobile-first.
	 * The map asset is already very pale grey, so on small screens
	 * we boost opacity to keep it readable as a backdrop.
	 */
	--hero-map-opacity: 0.55;
	--hero-gallery-grid-gap: var(--gap-md);
	--hero-layout-gap: var(--space-3xl);
	position: relative;
	box-sizing: border-box;
	margin: 0;
	padding: var(--layout-hero-padding-top) var(--layout-hero-gutter) var(--layout-hero-padding-bottom);
	overflow: hidden;
	max-height: var(--layout-hero-max-height);
	background-color: var(--surface-grey-default);
	background-image: none;
}

body.has-transparent-header .hero-home {
	--layout-hero-padding-top: var(--layout-hero-padding-top-floating);
	display: flex;
	flex-direction: column;
	justify-content: center;
	box-sizing: border-box;
	min-height: 100svh;
}

body.has-transparent-header .hero-home__shell {
	max-height: 100%;
}

body.has-transparent-header .hero-home__layout {
	max-height: 100%;
}

.hero-home__decor {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	overflow: hidden;
}

.hero-home__map {
	position: absolute;
	/*
	 * On mobile the map fills the hero and is centred,
	 * so the visible cropped area always shows continents.
	 * Tablet+ overrides this back to a top-anchored banner.
	 */
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	transform: none;
	opacity: 1;
	display: flex;
	align-items: center;
	justify-content: center;
}

.hero-home__map-img {
	display: block;
	width: 100%;
	height: 100%;
	opacity: var(--hero-map-opacity);
	object-fit: contain;
	object-position: center;
	transform: scale(1.1);
}

.hero-home__shell {
	position: relative;
	z-index: 1;
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	width: 100%;
	min-height: 0;
}

.hero-home__layout {
	display: grid;
	align-items: center;
	gap: var(--hero-layout-gap);
	grid-template-columns: minmax(0, 1fr);
	width: 100%;
	max-width: var(--size-container-wide);
	margin-inline: auto;
}

.hero-home__col--gallery {
	display: none;
}

/*
 * Gallery grid — CSS Grid 2×2.
 *
 * Each card lives in its own cell (no overlap possible).
 * Organic feel is achieved via margins on individual slots
 * (margins don't conflict with GSAP transform animations).
 */
.hero-home__gallery-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: auto auto;
	gap: var(--hero-gallery-grid-gap);
	width: 100%;
	align-content: center;
}

.hero-home__media {
	position: relative;
	display: block;
	overflow: hidden;
	width: 100%;
	border-radius: var(--radius-lg);
	aspect-ratio: 3 / 4;
	opacity: 1;
	visibility: visible;
	background: color-mix(in srgb, var(--color-primary-800) 65%, var(--color-brand-secondary) 35%);
	box-shadow: var(--shadow-lg);
	will-change: transform, opacity;
	transition: box-shadow var(--transition-base);
}

.hero-home__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*
 * Slot offsets — natural scatter without vertical overlap.
 *
 * Layout doctrine:
 *  - Each card stays inside its own grid cell. NEVER use a negative
 *    `margin-top`: that pulls the card into the row above, which is
 *    what caused the stacking visible in earlier screenshots.
 *  - Use only horizontal margins for outward edge-bleed.
 *  - Use positive top margins on slot-1 / slot-3 to stagger the row,
 *    creating a natural offset between adjacent cards while keeping
 *    them in their own cells (the cell auto-grows; no overlap).
 *  - Rotation supplies the resting tilt and is preserved by JS so
 *    there is no snap when GSAP releases inline transforms.
 *
 * Grid mapping (2×2):
 *   slot-0 = top-left   slot-1 = top-right
 *   slot-2 = bottom-left slot-3 = bottom-right
 */

/* Left column — gentle outward pull to the page edge. */
.hero-home__col--start .hero-home__media--slot-0 {
	margin: 0 0 0 -4%;
	transform: rotate(-3deg);
	z-index: 3;
}

.hero-home__col--start .hero-home__media--slot-1 {
	margin: 18% 0 0 6%;
	transform: rotate(2.5deg);
	z-index: 2;
}

.hero-home__col--start .hero-home__media--slot-2 {
	margin: 0 0 0 -7%;
	transform: rotate(2.5deg);
	z-index: 4;
}

.hero-home__col--start .hero-home__media--slot-3 {
	margin: 12% 0 0 2%;
	transform: rotate(-2deg);
	z-index: 1;
}

/* Right column — mirrored pull to the right edge. */
.hero-home__col--end .hero-home__media--slot-0 {
	margin: 0 -4% 0 0;
	transform: rotate(3deg);
	z-index: 3;
}

.hero-home__col--end .hero-home__media--slot-1 {
	margin: 18% 6% 0 0;
	transform: rotate(-2.5deg);
	z-index: 2;
}

.hero-home__col--end .hero-home__media--slot-2 {
	margin: 0 -7% 0 0;
	transform: rotate(-2.5deg);
	z-index: 4;
}

.hero-home__col--end .hero-home__media--slot-3 {
	margin: 12% 2% 0 0;
	transform: rotate(2deg);
	z-index: 1;
}

.hero-home__media--placeholder {
	background: linear-gradient(145deg,
			var(--color-primary-800) 0%,
			var(--color-primary-700) 45%,
			color-mix(in srgb, var(--color-brand-secondary) 40%, var(--color-primary-800)) 100%);
}

.hero-home__main {
	min-width: 0;
}

.hero-home__content {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--layout-hero-content-gap);
	max-width: 56rem;
	margin-inline: auto;
	text-align: center;
}

.hero-home__title {
	margin: 0 0 0.5em;
}

.hero-home__title-line {
	/*
	 * Script accent ("way") sits inline at the end of the heading.
	 * Bumped ~20% over the primary heading size to give it visual
	 * dominance; line-height stays tight so descenders don't push
	 * the surrounding lines apart.
	 */
	display: inline-block;
	font-family: var(--font-family-accent);
	font-size: var(--fs-6xl);
	font-weight: 500;
	line-height: 0.85;
	letter-spacing: var(--ls-tighter);
	color: var(--color-brand-secondary);
	vertical-align: -0.06em;
}

.hero-home__title .hero-home__title-main {
	font-family: var(--font-family-primary);
	font-size: var(--fs-5xl);
	line-height: var(--lh-tight);
	font-weight: var(--font-weight-extrabold);
	letter-spacing: var(--ls-tighter);
	color: var(--color-brand-primary);
}

.hero-home__lead {
	margin: 0;
	max-width: 36rem;
	font: var(--type-body-lg);
	color: var(--color-text-secondary);
}

.hero-home__lead-highlight {
	display: inline-block;
	padding: var(--padding-2xs) var(--padding-sm);
	border-radius: var(--radius-pill);
	background-color: var(--color-brand-secondary);
	color: var(--color-text-on-secondary);
	font-weight: var(--font-weight-semibold);
}

.hero-home__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--gap-sm);
	margin-top: var(--space-sm);
}

@media (min-width: 768px) {
	.hero-home {
		--hero-gallery-grid-gap: var(--gap-lg);
		--hero-layout-gap: var(--gap-grid-col-xl);
		--hero-map-opacity: 0.4;
	}

	body.has-transparent-header .hero-home__shell {
		overflow: hidden;
	}

	.hero-home__layout {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr);
	}

	/* Tablet+ — restore top-anchored map banner; the gallery columns
	   sit on either side, so the map can stay subtle and centred. */
	.hero-home__map {
		inset: auto;
		top: 0;
		left: 50%;
		width: min(72rem, 100%);
		height: auto;
		max-width: 100%;
		transform: translate3d(-50%, 0, 0);
	}

	.hero-home__map-img {
		height: auto;
		object-fit: contain;
		object-position: center top;
	}

	.hero-home__col--gallery {
		display: block;
		padding-inline: 0;
	}
}

@media (min-width: 1024px) {
	body.has-transparent-header .hero-home {
		--layout-hero-title-main: clamp(3.25rem, 2.5rem + 4vw, 5.5rem);
		--layout-hero-title-accent: clamp(2.75rem, 2rem + 3.5vw, 5rem);
		--layout-hero-content-gap: var(--gap-stack-xl);
		--hero-map-opacity: 0.26;
		--hero-gallery-grid-gap: clamp(1.25rem, 1.5vw, 2rem);
		--hero-layout-gap: clamp(1.25rem, 2vw, 2.5rem);
		/*
		 * Bigger gallery cards — reads more like a magazine spread
		 * than a thumbnail grid. Range chosen so 2x2 stack still
		 * fits within 100svh alongside the centred copy.
		 */
		--layout-hero-gallery-max-height: clamp(13rem, 28svh, 18rem);
		height: 100svh;
		max-height: 100svh;
	}

	.hero-home__title-line {
		font-size: clamp(4rem, 2.75rem + 5.5vw, 7rem);
	}

	.hero-home__layout {
		/* Wider gallery columns → physically larger images. */
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.2fr) minmax(0, 1.1fr);
		gap: clamp(1.5rem, 2.5vw, 3rem);
	}

	.hero-home__col--gallery {
		padding-inline: 0;
	}

	.hero-home__gallery-grid {
		gap: var(--hero-gallery-grid-gap);
	}

	.hero-home__media {
		max-height: min(var(--layout-hero-gallery-max-height), 32svh);
	}

	.hero-home__actions {
		gap: var(--gap-sm);
		margin-top: var(--space-md);
	}

	.hero-home__content {
		gap: var(--gap-stack-md);
	}

	.hero-home__lead {
		font: var(--type-body-md);
	}
}

/* Tablet (≥768px and <1024px) — simplified composition for cleaner spacing.
 *
 * Strategy:
 *  - Show only the top row of cards per column (slot-0 + slot-1) so the
 *    gallery never feels cramped. 2 cards per side × 2 sides = 4 total.
 *  - Stack them vertically inside each gallery column rather than a 2×2
 *    grid so each card has clear breathing room.
 *  - Boost map opacity so the world-map backdrop reads clearly even
 *    when GSAP is slow to apply its inline opacity tween.
 *  - Tighten slot offsets — the narrower tablet column can't carry
 *    the larger desktop scatter values without breaking alignment. */
@media (min-width: 768px) and (max-width: 1023px) {
	.hero-home {
		--hero-map-opacity: 0.55;
	}

	body.has-transparent-header .hero-home {
		min-height: 92svh;
		padding-bottom: var(--space-xl);
	}

	.hero-home__title-line {
		font-size: clamp(3.5rem, 2rem + 7vw, 5.5rem);
	}

	.hero-home__title .hero-home__title-main {
		font-size: clamp(2.5rem, 1.5rem + 5vw, 4rem);
		line-height: var(--lh-tight);
	}

	.hero-home__content {
		gap: var(--gap-stack-md);
	}

	.hero-home__lead {
		font: var(--type-body-md);
	}

	.hero-home__layout {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1fr);
		gap: var(--gap-sm);
	}

	/* Wider aspect ratio on tablet so images don't look too tall & narrow
	   in the narrower gallery columns. */
	.hero-home__media {
		aspect-ratio: 3 / 3.5;
	}

	/* Vertical 2-card stack per side instead of a 2×2 grid. */
	.hero-home__gallery-grid {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto auto;
		gap: var(--gap-md);
	}

	/* Hide bottom row entirely on tablet — keeps composition uncluttered. */
	.hero-home__col--gallery .hero-home__media--slot-2,
	.hero-home__col--gallery .hero-home__media--slot-3 {
		display: none;
	}

	/* Subtler scatter for the narrower tablet column. */
	.hero-home__col--start .hero-home__media--slot-0 {
		margin: 0 0 0 -3%;
		transform: rotate(-3deg);
	}

	.hero-home__col--start .hero-home__media--slot-1 {
		margin: 6% 0 0 6%;
		transform: rotate(2.5deg);
	}

	.hero-home__col--end .hero-home__media--slot-0 {
		margin: 0 -3% 0 0;
		transform: rotate(3deg);
	}

	.hero-home__col--end .hero-home__media--slot-1 {
		margin: 6% 6% 0 0;
		transform: rotate(-2.5deg);
	}

	/* Cards take the full column width — image presence over density. */
	.hero-home__media {
		max-height: 32vh;
	}

	/* Map banner reads more prominently on tablet. */
	.hero-home__map-img {
		max-height: 60vh;
	}
}

/* Mobile (≤767px) — single column, taller content area, larger map. */
@media (max-width: 767px) {
	.hero-home {
		padding-inline: var(--container-gutter);
		padding-bottom: var(--space-xl);
	}

	body.has-transparent-header .hero-home {
		min-height: auto;
		padding-top: calc(var(--size-header-height, 5rem) + var(--space-xl));
		padding-bottom: var(--space-2xl);
	}

	.hero-home__col--gallery {
		display: none;
	}

	.hero-home__content {
		max-width: 100%;
		gap: var(--gap-stack-md);
	}

	.hero-home__title .hero-home__title-main {
		font-size: clamp(2.25rem, 7vw + 1rem, 3.25rem);
		line-height: var(--lh-tight);
	}

	.hero-home__title-line {
		font-size: clamp(4.5rem, 15vw + 1rem, 6rem);
		vertical-align: -0.04em;
	}

	.hero-home__lead {
		font: var(--type-body-md);
		max-width: 32rem;
	}

	/*
	 * Buttons size to content and centre as a group instead of stretching
	 * across the available row. Earlier rules used `flex: 1 1 14rem` and
	 * `width: 100%` which produced the unwanted full-width treatment on
	 * mobile screenshots.
	 */
	.hero-home__actions {
		width: auto;
		flex-wrap: wrap;
		justify-content: center;
		margin-top: var(--space-md);
	}

	.hero-home__actions .btn,
	.hero-home__actions a.btn,
	.hero-home__actions button.btn {
		flex: 0 0 auto;
		width: auto;
		min-width: 11rem;
	}
}

@media (max-width: 480px) {
	.hero-home__actions {
		flex-direction: column;
		align-items: center;
	}

	.hero-home__actions .btn,
	.hero-home__actions a.btn,
	.hero-home__actions button.btn {
		flex: 0 0 auto;
		width: auto;
		min-width: 13rem;
	}
}

@media (max-height: 52rem) and (min-width: 1024px) {
	.hero-home__gallery-grid {
		gap: var(--gap-md);
	}

	.hero-home__media {
		/* Shorter desktop viewports (laptop ≤832px tall) — keep cards
		   big but trimmed so the 2x2 stack still fits the available
		   height alongside the centred copy. */
		max-height: clamp(10rem, 22vh, 14.5rem);
	}

	.hero-home__content {
		gap: var(--gap-stack-md);
	}
}

/* CSS entrance (no GSAP) — test animations on homepage hero */
.hero-home--entrance {
	--hero-entrance-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--hero-entrance-duration-heading: 1.15s;
	--hero-entrance-duration: var(--duration-slow);
}

@keyframes hero-home-fade-up {
	from {
		opacity: 0;
		transform: translate3d(0, 1.75rem, 0);
	}

	to {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}

@keyframes hero-home-heading-in {
	from {
		opacity: 0;
		transform: translate3d(0, 4.5rem, 0) scale(0.92);
	}

	to {
		opacity: 1;
		transform: translate3d(0, 0, 0) scale(1);
	}
}

@keyframes hero-home-map-in {
	from {
		opacity: 0;
		transform: scale(0.94);
	}

	to {
		opacity: 1;
		transform: scale(1);
	}
}

/* Tablet+ map keyframe accounts for the -50% horizontal centring. */
@keyframes hero-home-map-in-banner {
	from {
		opacity: 0;
		transform: translate3d(-50%, 0, 0) scale(0.94);
	}

	to {
		opacity: 1;
		transform: translate3d(-50%, 0, 0) scale(1);
	}
}

@keyframes hero-home-map-img-in {
	from {
		opacity: 0;
	}

	to {
		opacity: var(--hero-map-opacity);
	}
}

@keyframes hero-home-gallery-in-start {
	from {
		opacity: 0;
		transform: translate3d(-3.5rem, 2.5rem, 0) scale(0.88);
	}

	to {
		opacity: 1;
		/* End at `none` so the per-slot CSS rotation rule takes over
		   immediately. Previous value `translate3d(0,0,0) scale(1)`
		   zeroed-out rotation, overriding the slot transforms. */
		transform: none;
	}
}

@keyframes hero-home-gallery-in-end {
	from {
		opacity: 0;
		transform: translate3d(3.5rem, 2.5rem, 0) scale(0.88);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

/* Entrance runs only when the user has not requested reduced motion (OS/browser setting). */
@media (prefers-reduced-motion: no-preference) {
	.hero-home--entrance .hero-home__title-line {
		animation-name: hero-home-fade-up;
		animation-duration: var(--hero-entrance-duration);
		animation-timing-function: var(--hero-entrance-ease);
		animation-delay: 0.05s;
		animation-fill-mode: both;
	}

	.hero-home--entrance [data-hero-heading] {
		animation-name: hero-home-heading-in;
		animation-duration: var(--hero-entrance-duration-heading);
		animation-timing-function: var(--hero-entrance-ease);
		animation-delay: 0.12s;
		animation-fill-mode: both;
	}

	.hero-home--entrance .hero-home__lead {
		animation-name: hero-home-fade-up;
		animation-duration: var(--hero-entrance-duration);
		animation-timing-function: var(--hero-entrance-ease);
		animation-delay: 0.35s;
		animation-fill-mode: both;
	}

	.hero-home--entrance .hero-home__actions {
		animation-name: hero-home-fade-up;
		animation-duration: var(--hero-entrance-duration);
		animation-timing-function: var(--hero-entrance-ease);
		animation-delay: 0.45s;
		animation-fill-mode: both;
	}

	.hero-home--entrance .hero-home__map {
		animation-name: hero-home-map-in;
		animation-duration: 1s;
		animation-timing-function: var(--ease-standard);
		animation-delay: 0s;
		animation-fill-mode: both;
	}

	.hero-home--entrance .hero-home__map-img {
		animation-name: hero-home-map-img-in;
		animation-duration: var(--hero-entrance-duration);
		animation-timing-function: var(--ease-standard);
		animation-delay: 0.1s;
		animation-fill-mode: both;
	}

	@media (min-width: 768px) {
		/* Tablet+ uses the centred banner keyframe so the horizontal
		   translate keeps the map locked to the centre line. */
		.hero-home--entrance .hero-home__map {
			animation-name: hero-home-map-in-banner;
		}

		.hero-home--entrance .hero-home__col--start .hero-home__media {
			animation-name: hero-home-gallery-in-start;
			animation-duration: 0.85s;
			animation-timing-function: var(--hero-entrance-ease);
			animation-fill-mode: both;
		}

		.hero-home--entrance .hero-home__col--start .hero-home__media--slot-0 {
			animation-delay: 0.08s;
		}

		.hero-home--entrance .hero-home__col--start .hero-home__media--slot-1 {
			animation-delay: 0.17s;
		}

		.hero-home--entrance .hero-home__col--start .hero-home__media--slot-2 {
			animation-delay: 0.26s;
		}

		.hero-home--entrance .hero-home__col--start .hero-home__media--slot-3 {
			animation-delay: 0.35s;
		}

		.hero-home--entrance .hero-home__col--end .hero-home__media {
			animation-name: hero-home-gallery-in-end;
			animation-duration: 0.85s;
			animation-timing-function: var(--hero-entrance-ease);
			animation-fill-mode: both;
		}

		.hero-home--entrance .hero-home__col--end .hero-home__media--slot-0 {
			animation-delay: 0.14s;
		}

		.hero-home--entrance .hero-home__col--end .hero-home__media--slot-1 {
			animation-delay: 0.23s;
		}

		.hero-home--entrance .hero-home__col--end .hero-home__media--slot-2 {
			animation-delay: 0.32s;
		}

		.hero-home--entrance .hero-home__col--end .hero-home__media--slot-3 {
			animation-delay: 0.41s;
		}
	}
}

@media (prefers-reduced-motion: reduce) {

	.hero-home--entrance .hero-home__title-line,
	.hero-home--entrance [data-hero-heading],
	.hero-home--entrance .hero-home__lead,
	.hero-home--entrance .hero-home__actions,
	.hero-home--entrance .hero-home__map,
	.hero-home--entrance .hero-home__map-img {
		animation: none;
		opacity: 1;
		transform: none;
	}

	/* Cards: kill the slide-in animation but keep the resting tilt
	   set by the slot rules — that's a static layout choice, not
	   motion, and removing it would flatten the composition. */
	.hero-home--entrance .hero-home__col--gallery .hero-home__media {
		animation: none;
		opacity: 1;
	}

	/* Tablet+ centred banner needs the horizontal translate restored
	   when motion is suppressed; mobile map fills via inset:0 and needs
	   no transform. */
	@media (min-width: 768px) {
		.hero-home--entrance .hero-home__map {
			transform: translate3d(-50%, 0, 0);
		}
	}
}