/* Block: Panel Stack (acf/panel-stack)
   ---------------------------------------------------------------------------
   Feature panels that hand over to each other as the page scrolls (brief item
   5): Keane's pins in place, then The Penthouse slides up over it. Notes:
   docs/panel-stack-block.md.

   The pattern is 1101 Westlake's acf/stickyimages: every slide is
   `position: sticky`, with half a screen of scroll between hand-offs. Theirs
   are full-window photos, which always fit; ours are content panels about
   706px tall (photo, copy, button). So while the stack is active a panel is
   stretched to the space under the pinned header, with its content centred,
   and on a window too short to hold it, it pins by its FOOT instead (see "The
   stack" below). Either way the hand-off is panel over panel.

   Phone first: the panels sit in plain flow, exactly as Feature panels do
   anywhere else (feature.css: the second rides up over the first by
   --feature-panel-overlap, and the first keeps its content clear of it).

   Block stylesheets print BEFORE reset.min.css and style.css (header.md, "CSS
   order trap"), so every rule here wins on specificity, never on order.
--------------------------------------------------------------------------- */

.panel-stack--section {
	/* How far the first panel rides up over the section above: mirrors
	   feature.css's --feature-panel-overlap (the panel radius on phones, 73px
	   from 992). The underlay below starts there. */
	--panel-stack-overlap: var(--lwh-panel-radius, 60px);
	/* The pin line: the admin bar (from 601px, below) plus the header's
	   CONDENSED height, 46px, 96 from 1100 (menubar.css, which page 18 loads
	   since the front-page header went in on 2026-10-09). Where the header
	   isn't loaded the variable is undefined and this is the top of the
	   window. The condensed height, not the live --lwh-header-h: by the time
	   the stack is reached the bar has long since condensed. */
	--panel-stack-pin-admin: 0px;
	--panel-stack-top: calc(var(--panel-stack-pin-admin) + var(--lwh-header-h-pinned, 0px));
	/* The hold between hand-offs: 1101's 50vh "pause". */
	--panel-stack-pause: 50vh;

	/* A stacking context of its own: the panels paint over the section above
	   (a later sibling wins the tie at z-index 1) and the image band after it
	   paints over them. */
	position: relative;
	z-index: 1;
}

/* What the panels' rounded top corners show once a panel is pinned and the
   section above has scrolled away: the page's Deep Sea, not whatever is behind
   the stack (on Home, the pinned full hero's photo). It starts at the overlap,
   so the section above still shows in the first panel's corners on the way in.
   Behind the panels everywhere else, so in flow it never shows.

   ::after, not ::before: in the editor, style.css prints every block's name on
   `.acf-block-preview > div::before` (a grey tag at z-index 4), and a ::before
   here merged with it into a grey sheet over the panels. Nothing pins in the
   editor, so the underlay is switched off there. z-index -1 puts it at the
   bottom of the stack's own stacking context, under every panel whatever its
   z-index (an ::after comes last in tree order, so at 0 it would cover a
   Feature without the panel shape, which is z-index auto). */
.panel-stack--section::after {
	content: "";
	position: absolute;
	top: var(--panel-stack-overlap);
	right: 0;
	bottom: 0;
	left: 0;
	z-index: -1;
	background-color: var(--wp--preset--color--deep-sea, #1b2632);
	pointer-events: none;
}

.editor-styles-wrapper .panel-stack--section::after,
.acf-block-preview .panel-stack--section::after {
	content: none;
}

/* The section above keeps its content clear of the first panel's lift, as
   feature.css does for a Feature that a panel follows: on Home today that is
   acf/amenities in its split layout, whose 89px bottom padding was cut for a
   band to abut it. Without this the lift left its last line of copy 16px above
   the green edge (1512). Its padding grows by the overlap, so the space you
   see under the copy is exactly what it was. Not the Centred layout: its
   bottom padding already counts the Penthouse panel's lift (amenities.css). */
.amenities--section:not(.centred-mod):has(+ .panel-stack--section) {
	padding-bottom: calc(var(--amenities-pad-bottom, 96px) + var(--lwh-panel-radius, 60px));
}

@media (min-width: 992px) {
	.amenities--section:not(.centred-mod):has(+ .panel-stack--section) {
		padding-bottom: calc(var(--amenities-pad-bottom, 89px) + 73px);
	}
}

/* 601px tracks WordPress core's admin-bar breakpoint (fixed above it, scrolled
   away at 600 and under), as in menubar.css, hero.css and amenities.css: not
   one of ours, don't snap it to the ladder. */
@media (min-width: 601px) {
	.admin-bar .panel-stack--section {
		--panel-stack-pin-admin: var(--wp-admin--admin-bar--height, 32px);
	}
}

@media (min-width: 992px) {
	.panel-stack--section {
		--panel-stack-overlap: 73px;
	}
}

/* --- The stack ---------------------------------------------------------------
   From 992px, and only under `html.lwh-js` (printed in the head before first
   paint, so the stack never flips mid-page). Without JS the header never
   condenses (from 1100 it stays 178px), so the pin line would be wrong, and
   js/panel-stack.js couldn't print the heights below: plain flow is the safe
   fallback. Phones stay in flow too: the phone comp draws one panel, and both
   references stack on desktop only.

   The editor is excluded by construction: its canvas has no `lwh-js`, and ACF
   wraps the inner blocks there, so `>` never matches (as acf/hero, sticky is
   off in the editor).

   Inside, every panel:
   - is sticky, confined by the stack (its parent), so the panels scroll away
     together once the last one is up
   - fills at least the space under the pin line: min-height 100svh (100vh
     fallback) minus the pin line, content centred. The hand-off is then panel
     over panel, with no page showing below a pinned panel
   - pins at  top: min(pin line, 100svh - its own height)
     On a window tall enough to hold it, the panel IS that min-height, so the
     second term equals the pin line and it pins there, as it always has. On a
     shorter window the panel is taller than the space under the header and
     pins by its foot: it scrolls on until its button and bottom padding are
     in view (its bottom edge on the window's), holds there with its top under
     the header or above the window, and the next panel slides up over it.
     --panel-stack-h is the panel's rendered height, printed on it by
     js/panel-stack.js: a sticky `top` percentage refers to the window, not to
     the element, so CSS alone can't say "my own height". Unset (the script
     didn't run) the term is 100svh and the top is the pin line: the old
     behaviour.
   - is at least as tall as every panel before it: --panel-stack-floor, from
     the same script, the running maximum of the panels' natural heights. The
     panels all end at the foot of the stack, so they leave together with
     their feet level, and a panel shorter than one before it would leave
     that one's top showing above it. Today Keane's, the first, is never the
     taller (682.64 against 718.11 at 992, 706 each from about 1275), so the
     floor changes nothing; it is there for content that changes.
   - keeps its normal bottom padding (feature.css adds the overlap to a panel
     that a panel follows in flow; here the next one doesn't overlap in flow)
   and every panel after the first arrives after the hold, a top MARGIN rather
   than a spacer element. Sticky clamps the margin box: a hold on the panel
   above (its bottom margin) would let it scroll away half a screen early,
   while a top margin on the panel below counts as room for the one above to
   stay pinned in. The last panel has nothing after it, so it doesn't hold:
   the stack ends the moment it covers the one before. The hold is the same
   half screen whichever way a panel pins: it fills the window down to its
   bottom edge either way, so the next panel enters as soon as the hold has
   scrolled by.

   Until 2026-10-17 the stack ran only on windows tall enough to hold the
   tallest panel under the header (two lists of min-height media queries,
   797/847/831px by width tier and 32px more logged in), with plain flow
   below. Dapper's designer reviewed on a 1374x634 window and never saw the
   hand-off (docs/dapper-review.md, DR-1), so the foot pin replaced the gate.
   --panel-stack-top already counts the admin bar, so logged in needs no
   rules of its own. */

@media (min-width: 992px) {
	html.lwh-js .panel-stack--section > .feature--section {
		position: sticky;
		top: min(var(--panel-stack-top), calc(100vh - var(--panel-stack-h, 0px)));
		top: min(var(--panel-stack-top), calc(100svh - var(--panel-stack-h, 0px)));
		display: flex;
		flex-direction: column;
		justify-content: center;
		min-height: max(calc(100vh - var(--panel-stack-top)), var(--panel-stack-floor, 0px));
		min-height: max(calc(100svh - var(--panel-stack-top)), var(--panel-stack-floor, 0px));
		padding-bottom: var(--feature-pad-bottom);
	}

	html.lwh-js .panel-stack--section > .feature--section + .feature--section {
		margin-top: var(--panel-stack-pause);
	}

	/* A flex item with auto side margins doesn't stretch: keep the container
	   its usual full width (max-width and auto margins still centre it). */
	html.lwh-js .panel-stack--section > .feature--section > .feature--container {
		width: 100%;
	}
}