/**
 * 438 Main — Sections
 * ---------------------------------------------------------------------------
 * The homepage sequence and the interior page openings. Motion states live in
 * motion.css; this file is purely structure, tone and typography per section.
 */

/* ===========================================================================
 * Hero
 * ======================================================================== */
.hero {
	position: relative;
	display: flex;
	flex-direction: column;
	/* Fills the screen but never traps the user in an unscrollable panel.
	   svh avoids the iOS toolbar jump that dvh/vh cause. */
	min-height: 100svh;
	padding-block-start: var(--header-h);
	background-color: var(--c-forest);
	color: #fff;
	overflow: hidden;
	isolation: isolate;
}

.hero--compact {
	min-height: min(72svh, 620px);
}

.hero__visual {
	position: absolute;
	/* Oversized so the parallax drift never exposes an edge. */
	inset: -6% 0 -6%;
	z-index: var(--z-base);
}

.hero__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* No photograph yet: an architectural abstraction in the brand palette so the
   hero still reads as designed during staging. */
.hero__visual--placeholder {
	background-image:
		linear-gradient(
			100deg,
			rgba(22, 30, 25, 0.86) 0%,
			rgba(22, 30, 25, 0.28) 52%,
			rgba(22, 30, 25, 0.6) 100%
		),
		radial-gradient(
			circle at 70% 34%,
			rgba(226, 214, 186, 0.3),
			transparent 30%
		),
		linear-gradient(
			148deg,
			#4f5d54 0 23%,
			#8b9588 23% 24.5%,
			#a6ada1 24.5% 44%,
			#65716a 44% 45.5%,
			#3d4841 45.5% 100%
		);
}

/* The scrim guarantees WCAG AA contrast for hero text over any photograph. */
.hero__scrim {
	position: absolute;
	inset: 0;
	z-index: var(--z-media);
	background-image:
		linear-gradient(
			to top,
			rgba(20, 28, 23, 0.82) 0%,
			rgba(20, 28, 23, 0.42) 42%,
			rgba(20, 28, 23, 0.14) 72%,
			rgba(20, 28, 23, 0.34) 100%
		);
	pointer-events: none;
}

.hero__body {
	position: relative;
	z-index: var(--z-content);
	margin-block-start: auto;
	padding-block-end: clamp(3rem, 8vh, 5.5rem);
	width: 100%;
}

.hero__inner {
	max-width: 46rem;
}

.hero__eyebrow {
	color: rgba(255, 255, 255, 0.78);
}

.hero__headline {
	font-size: var(--fs-display-xl);
	margin-block: var(--sp-4) var(--sp-5);
}

.hero__lead {
	color: rgba(255, 255, 255, 0.84);
	max-width: 30rem;
}

.hero__actions {
	margin-block-start: var(--sp-6);
}

/* Corner facts, aligned to the baseline of the hero copy. */
.hero__facts {
	position: absolute;
	inset-inline-end: var(--gutter);
	inset-block-end: clamp(3rem, 8vh, 5.5rem);
	z-index: var(--z-content);
	display: none;
	text-align: right;
	/* Newlines from the Customizer field render as lines. */
	white-space: pre-line;
	font-size: var(--fs-eyebrow);
	line-height: 1.9;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.72);
}

@media (min-width: 900px) {
	.hero__facts { display: block; }
}

/* A quiet scroll cue. Decorative only — never the sole affordance. */
.hero__cue {
	position: absolute;
	inset-inline-start: 50%;
	inset-block-end: var(--sp-5);
	z-index: var(--z-content);
	translate: -50% 0;
	display: none;
	color: rgba(255, 255, 255, 0.6);
}

@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
	.hero__cue {
		display: block;
		animation: m438-cue 3.2s var(--ease-in-out) infinite;
	}
}

@keyframes m438-cue {
	0%, 100% { transform: translateY(0); opacity: 0.5; }
	50%      { transform: translateY(7px); opacity: 1; }
}

/* --- Interior page hero --------------------------------------------------- */
.page-hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: min(66svh, 560px);
	padding-block: calc(var(--header-h) + var(--sp-8)) var(--sp-8);
	background-color: var(--c-forest);
	color: #fff;
	overflow: hidden;
	isolation: isolate;
}

.page-hero__inner {
	position: relative;
	z-index: var(--z-content);
	max-width: 44rem;
}

.page-hero__title {
	font-size: var(--fs-display-l);
	margin-block: var(--sp-4) var(--sp-4);
}

.page-hero__lead {
	color: rgba(255, 255, 255, 0.84);
	max-width: 34rem;
}

.page-hero .crumbs {
	color: rgba(255, 255, 255, 0.7);
	margin-block-end: var(--sp-5);
}

/* Pages without a hero image still need a properly weighted opening. */
.page-head {
	padding-block: calc(var(--header-h) + var(--sp-8)) var(--sp-7);
}

.page-head__title {
	font-size: var(--fs-display-l);
	margin-block: var(--sp-4) var(--sp-4);
}

/* ===========================================================================
 * Intro / editorial positioning
 * ======================================================================== */
.intro__headline {
	font-size: var(--fs-display-l);
	margin-block-start: var(--sp-4);
	max-width: 22ch;
}

.intro__copy {
	max-width: 26rem;
	color: var(--c-text-muted);
	font-size: var(--fs-lead);
	line-height: 1.65;
}

/* ===========================================================================
 * Sticky residence storytelling
 * ======================================================================== */
.story__headline {
	font-size: var(--fs-display-m);
	margin-block-start: var(--sp-4);
}

.story__copy {
	max-width: 27rem;
	color: var(--c-text-muted);
}

/* Alternating image scale creates vertical rhythm as they pass the copy. */
.story__media .media:nth-child(2) { --media-ratio: 3 / 4; }
.story__media .media:nth-child(3) { --media-ratio: 1 / 1; }

@media (min-width: 900px) {
	.story__media .media:nth-child(even) {
		/* Nudges every other image out of the column for an editorial feel. */
		margin-inline-start: clamp(1rem, 6%, 4rem);
	}
}

/* ===========================================================================
 * Floor plans
 * ======================================================================== */
.plans {
	--c-bg: var(--c-forest);
}

.plans__grid {
	display: grid;
	gap: var(--gap-tight);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 265px), 1fr));
}

/*
 * On wide screens the plans read as a horizontal editorial row that scrolls
 * with a snap. On phones it is a single, honest column — no forced carousel.
 */
@media (min-width: 1024px) {
	.plans__grid--scroll {
		display: flex;
		gap: var(--gap-tight);
		overflow-x: auto;
		scroll-snap-type: x proximity;
		scrollbar-width: thin;
		padding-block-end: var(--sp-4);
		/* Lets the row bleed to the viewport edge while staying in the shell. */
		margin-inline-end: calc(var(--gutter) * -1);
		padding-inline-end: var(--gutter);
	}

	.plans__grid--scroll > .plan-card {
		flex: 0 0 clamp(280px, 26vw, 380px);
		scroll-snap-align: start;
	}
}

.plans__empty {
	padding: var(--sp-7);
	border: var(--hairline) dashed var(--c-line-strong);
	border-radius: var(--radius-sm);
	text-align: center;
	color: var(--c-text-muted);
	font-size: var(--fs-small);
}

/* ===========================================================================
 * Availability teaser
 * ======================================================================== */
.avail-teaser__headline {
	font-size: var(--fs-display-m);
	margin-block-start: var(--sp-4);
}

.avail-teaser__copy {
	max-width: 25rem;
	color: var(--c-text-muted);
	margin-block-start: var(--sp-5);
}

.avail-teaser .live {
	margin-block-start: var(--sp-6);
}

/* ===========================================================================
 * Amenities
 * ======================================================================== */
.amenities__headline {
	font-size: var(--fs-display-m);
	margin-block: var(--sp-4) var(--sp-6);
}

.amenities__media {
	--media-ratio: 4 / 5;
}

@media (min-width: 900px) {
	.amenities__media { --media-ratio: 3 / 4; }
}

/* ===========================================================================
 * Location band
 * ======================================================================== */
.location {
	--c-bg: var(--c-sand);
	position: relative;
	overflow: hidden;
}

.location__headline {
	font-size: var(--fs-display-l);
	margin-block: var(--sp-4) var(--sp-6);
	max-width: 20ch;
}

.location__copy {
	max-width: 26rem;
	color: var(--c-text-muted);
}

/* Concentric rings suggesting travel distance. Decorative, so aria-hidden. */
.location__rings {
	position: absolute;
	inset-inline-end: -18%;
	inset-block-start: 12%;
	width: min(30rem, 62vw);
	aspect-ratio: 1;
	border: var(--hairline) solid rgba(36, 37, 34, 0.16);
	border-radius: 50%;
	pointer-events: none;
}

.location__rings::before,
.location__rings::after {
	content: "";
	position: absolute;
	border: var(--hairline) solid rgba(36, 37, 34, 0.16);
	border-radius: 50%;
	inset: 14%;
}

.location__rings::after { inset: 30%; }

.location__list {
	margin-block-start: var(--sp-7);
	max-width: 34rem;
}

.location__map {
	margin-block-start: var(--gap);
	border: var(--hairline) solid var(--c-line);
	border-radius: var(--radius-sm);
	overflow: hidden;
	aspect-ratio: 16 / 10;
	background-color: var(--c-ivory);
}

.location__map iframe {
	width: 100%;
	height: 100%;
	border: 0;
}

/* ===========================================================================
 * Gallery
 * ======================================================================== */
.gallery__grid {
	display: grid;
	gap: var(--gap-tight);
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.gallery__grid .media { --media-ratio: 4 / 5; }

/* An asymmetric, editorial arrangement on wide screens. */
@media (min-width: 860px) {
	.gallery__grid {
		grid-template-columns: repeat(6, minmax(0, 1fr));
		grid-auto-rows: minmax(0, auto);
	}

	.gallery__item:nth-child(1) { grid-column: span 4; }
	.gallery__item:nth-child(1) .media { --media-ratio: 16 / 11; }
	.gallery__item:nth-child(2) { grid-column: span 2; }
	.gallery__item:nth-child(3) { grid-column: span 2; }
	.gallery__item:nth-child(4) { grid-column: span 2; }
	.gallery__item:nth-child(5) { grid-column: span 2; }
	.gallery__item:nth-child(6) { grid-column: span 6; }
	.gallery__item:nth-child(6) .media { --media-ratio: 21 / 8; }
}

/* ===========================================================================
 * Closing CTA
 * ======================================================================== */
.final {
	position: relative;
	padding-block: var(--section-y-large);
	background-color: var(--c-forest-deep);
	color: #fff;
	text-align: center;
	overflow: hidden;
	isolation: isolate;
}

.final__visual {
	position: absolute;
	inset: 0;
	z-index: var(--z-base);
}

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

.final__visual::after {
	content: "";
	position: absolute;
	inset: 0;
	background-color: rgba(20, 28, 23, 0.66);
}

.final__inner {
	position: relative;
	z-index: var(--z-content);
	max-width: 52rem;
	margin-inline: auto;
}

.final__headline {
	font-size: var(--fs-display-l);
	margin-block: var(--sp-5) var(--sp-5);
}

.final__copy {
	max-width: 32rem;
	margin-inline: auto;
	color: rgba(255, 255, 255, 0.8);
}

.final .actions {
	justify-content: center;
}

/* ===========================================================================
 * Availability page framing (the interactive grid itself is rendered and
 * styled by the availability plugin, which owns that data).
 * ======================================================================== */
.availability-page__intro {
	display: grid;
	gap: var(--gap);
	margin-block-end: var(--gap-wide);
}

@media (min-width: 860px) {
	.availability-page__intro {
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
		align-items: end;
	}
}

/* Give the plugin's components the theme's typography and rhythm. */
.m438a-availability {
	--m438a-radius: var(--radius-sm);
	font-family: var(--font-body);
}

/* ===========================================================================
 * 404 / search
 * ======================================================================== */
.simple-page {
	padding-block: calc(var(--header-h) + var(--sp-9)) var(--section-y);
	min-height: 60svh;
	display: flex;
	align-items: center;
}

.simple-page__title {
	font-size: var(--fs-display-m);
	margin-block-end: var(--sp-5);
}