/**
 * 438 Main — Layout
 * ---------------------------------------------------------------------------
 * The page shell, section rhythm and the handful of grids the design uses.
 * Mobile-first: every grid starts as a single column and earns extra columns
 * only where there is genuinely room for them.
 */

/* ---------------------------------------------------------------------------
 * Shell — the horizontal container. One class, used everywhere.
 * ------------------------------------------------------------------------ */
.shell {
	width: 100%;
	max-width: var(--shell-max);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.shell--narrow {
	max-width: calc(var(--shell-text) + var(--gutter) * 2);
}

.shell--flush {
	padding-inline: 0;
}

/* Full-bleed escape hatch for a child inside a shell. */
.bleed {
	width: 100vw;
	margin-inline: calc(50% - 50vw);
}

/* ---------------------------------------------------------------------------
 * Sections — vertical rhythm and tone.
 * ------------------------------------------------------------------------ */
.section {
	position: relative;
	padding-block: var(--section-y);
	background-color: var(--c-bg);
	color: var(--c-text);
}

.section--large {
	padding-block: var(--section-y-large);
}

.section--flush-top    { padding-block-start: 0; }
.section--flush-bottom { padding-block-end: 0; }

/* Tone variants remap the colour tokens (see tokens.css). */
.section--white,
.section--ivory,
.section--sand {
	--c-text: var(--c-ink);
	--c-text-muted: #5c5f57;
	--c-line: rgba(36, 37, 34, 0.14);
	--c-line-strong: rgba(36, 37, 34, 0.28);
}

.section--white { --c-bg: var(--c-white); }
.section--ivory { --c-bg: var(--c-ivory); }
.section--sand  { --c-bg: var(--c-sand); }

.section--forest,
.section--ink {
	--c-text: var(--c-text-on-dark);
	--c-text-muted: var(--c-text-on-dark-muted);
	--c-line: var(--c-line-on-dark);
	--c-line-strong: rgba(255, 255, 255, 0.38);
	--c-available: #8fc7a0;
	--c-pending: #d9bc84;
	--c-focus: #a8d8ff;
}

.section--forest { --c-bg: var(--c-forest); }
.section--ink    { --c-bg: var(--c-forest-deep); }

/* ---------------------------------------------------------------------------
 * Section header — eyebrow + headline on the left, supporting copy right.
 * ------------------------------------------------------------------------ */
.section-head {
	display: grid;
	gap: var(--gap);
	margin-block-end: clamp(2.5rem, 5vw, 4.5rem);
}

.section-head__intro > * + * {
	margin-block-start: var(--sp-4);
}

@media (min-width: 800px) {
	.section-head {
		grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.85fr);
		align-items: end;
	}

	.section-head--stack {
		grid-template-columns: 1fr;
	}
}

/* ---------------------------------------------------------------------------
 * Grids
 * ------------------------------------------------------------------------ */

/* Editorial two-up: wide column + narrow column. */
.grid-editorial {
	display: grid;
	gap: var(--gap);
}

@media (min-width: 860px) {
	.grid-editorial {
		grid-template-columns: minmax(0, 1.55fr) minmax(0, 0.85fr);
		align-items: end;
	}

	.grid-editorial--top    { align-items: start; }
	.grid-editorial--even   { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.grid-editorial--narrow { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr); }
}

/* Auto-fitting card grid. Never produces an orphan column that is too narrow. */
.grid-cards {
	display: grid;
	gap: var(--gap-tight);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}

.grid-cards--wide {
	gap: var(--gap);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
}

/* Two-column split used by the availability teaser and amenities. */
.grid-split {
	display: grid;
	gap: var(--gap-wide);
}

@media (min-width: 900px) {
	.grid-split {
		grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
		align-items: start;
	}

	.grid-split--reverse {
		grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
	}

	/* Puts the media second in the DOM but first visually, so screen-reader
	   order stays copy-then-image while the layout reads image-then-copy. */
	.grid-split--media-left > .grid-split__media { order: -1; }
}

/* ---------------------------------------------------------------------------
 * Sticky editorial layout — copy holds while imagery passes.
 * ------------------------------------------------------------------------ */
.sticky-story {
	display: grid;
	gap: var(--gap);
}

.sticky-story__copy > * + * {
	margin-block-start: var(--sp-5);
}

.sticky-story__media {
	display: grid;
	gap: var(--gap-tight);
}

@media (min-width: 900px) {
	.sticky-story {
		grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
		gap: var(--gap-wide);
		align-items: start;
	}

	.sticky-story__copy {
		position: sticky;
		/* Centres the copy block in the space below the header. */
		top: calc(var(--header-h) + var(--sp-7));
		padding-block: var(--sp-4);
	}

	.sticky-story__media {
		gap: var(--gap);
	}
}

/*
 * Sticky positioning needs a scroll container that is not clipped. If an
 * ancestor ever gains overflow:hidden the sticky silently degrades to static,
 * which is an acceptable, readable fallback — but we avoid it deliberately.
 */

/* ---------------------------------------------------------------------------
 * Utility spacing — used sparingly, only for one-off adjustments.
 * ------------------------------------------------------------------------ */
.stack > * + *      { margin-block-start: var(--sp-4); }
.stack-sm > * + *   { margin-block-start: var(--sp-2); }
.stack-lg > * + *   { margin-block-start: var(--sp-6); }

.actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-3);
	margin-block-start: var(--sp-6);
}

.hide-mobile { display: none; }

@media (min-width: 720px) {
	.hide-mobile   { display: revert; }
	.hide-desktop  { display: none; }
}