/* Block: Intro Panel (acf/intro)
   ---------------------------------------------------------------------------
   A Deep Sea panel with a rounded top that rides up over the pinned hero. The
   hero is `position: sticky; z-index: 0`; this panel is `relative; z-index: 1`
   so it paints on top of it while the page scrolls.

   Spacing is expressed as custom properties at the top of the block so the
   whole vertical rhythm can be retuned in one place. The values are the Figma
   comp's gaps converted from its (padded) text frames to real CSS line boxes —
   e.g. the eyebrow's frame is 64px tall for an 18px/1.4 line, so ~19px of that
   frame is empty and has to be added back to the margins either side of it.

   Comp reference — desktop 71:655 @1512, mobile 120:246 @402.
--------------------------------------------------------------------------- */

.intro--section {
	/* Mobile (comp frame 402 wide, panel 487 → 1616) */
	--intro-pad-top: 76px;
	--intro-pad-bottom: 59px;
	/* 32px in the comp, less the 0.06em descender padding .is-style-sunset adds
	   to the bottom of the headline's box (2.9px at the 48px mobile size). */
	--intro-gap-h1: 29px; /* headline → body */
	--intro-gap-body: 59px; /* body → eyebrow */
	--intro-gap-eyebrow: 30px; /* eyebrow → stat row */
	--intro-gap-stats: 47px; /* stat row → CTA */
	--intro-stat-gap: 44px; /* between stacked stats */
	/* Extra inset on the copy column only: the comp gutters the paragraphs to
	   48px a side but lets the headline run nearly full-bleed, which is what
	   keeps "Second to None" on one line at the 48px mobile size. */
	--intro-copy-inset: min(8vw, 33px);
	/* pulls the headline back out to the comp's ~8px-a-side frame */
	--intro-heading-bleed: 8px;

	position: relative;
	z-index: 1;
	background-color: var(--wp--preset--color--deep-sea, #1b2632);
	border-radius: var(--lwh-panel-radius, 60px) var(--lwh-panel-radius, 60px) 0 0;
}

/* --- The overlap ----------------------------------------------------------
   No negative margin: the panel starts at its natural flow position, which is
   the bottom edge of the 100svh hero. So the visitor lands on the full hero
   image with nothing over it, and the panel slides up over the pinned hero as
   they scroll — the hero holds at top:0 while this rides over it on z-index 1.

   The Figma boards show the panel already crossing mid-screen (y=460 of the
   1512 board, y=487 of the 402 one), but those frames are a composite of the
   whole scroll rather than a first-paint state, so that crossing is a moment
   partway through the scroll, not the landing view.

   style.css already zeroes this block's flow margin via
   `:root .wp-block-acf-intro`, so there is nothing to set here. */

/* --- Content column ------------------------------------------------------ */

.intro--container {
	padding-top: var(--intro-pad-top);
	padding-bottom: var(--intro-pad-bottom);
}

/* Reset the flow margins core and the reset stylesheet apply, then lay the
   comp's rhythm back on in DOM order.

   The doubled-up `:is()` selector covers both DOM shapes this block renders in.
   ACF normally wraps InnerBlocks output in an extra
   <div class="acf-innerblocks-container">; the front end opts out of that (see
   lwh_unwrap_block_innerblocks in blocks/register-blocks.php) so
   [data-reveal-group] can see the real children and stagger them, but the block
   editor still adds the wrapper client-side. `:is()` also pins every one of
   these at the same specificity, so they cascade in source order. */

:is(.intro--container, .intro--container > .acf-innerblocks-container) > * {
	margin-top: 0;
	margin-bottom: 0;
}

:is(.intro--container, .intro--container > .acf-innerblocks-container) > * + * {
	margin-top: var(--intro-gap-h1);
}

/* Paragraphs are capped at the global contentSize; the headline, stat row and
   CTA use the full 1280 container. */
:is(.intro--container, .intro--container > .acf-innerblocks-container) > p {
	max-width: var(--wp--style--global--content-size, 900px);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--intro-copy-inset);
	padding-right: var(--intro-copy-inset);
}

:is(.intro--container, .intro--container > .acf-innerblocks-container) > .is-style-eyebrow {
	margin-top: var(--intro-gap-body);
}

/* The comp gives the headline a near-full-bleed frame (7 → 394 on the 402
   mobile board, 87 → 1425 on the 1512 desktop board) so the big display type
   gets more room than the copy column. Reclaiming those few pixels is what
   keeps "Second to None" on one line at the mobile size. */
:is(.intro--container, .intro--container > .acf-innerblocks-container) > .wp-block-heading {
	margin-left: calc(-1 * var(--intro-heading-bleed));
	margin-right: calc(-1 * var(--intro-heading-bleed));
}

/* gap has to beat core's generated .wp-container-core-columns-is-layout-*
   rule (0,1,0), which otherwise pins the stack to the 24px blockGap. */
:is(.intro--container, .intro--container > .acf-innerblocks-container) > .wp-block-columns {
	margin-top: var(--intro-gap-eyebrow);
	gap: var(--intro-stat-gap);
}

:is(.intro--container, .intro--container > .acf-innerblocks-container) > .wp-block-buttons {
	margin-top: var(--intro-gap-stats);
}

/* --- Stats --------------------------------------------------------------- */

/* Columns stretch by default, so if one stat wraps to two lines (a narrow
   editor canvas does this to "Trophy Office") the others hang from the top of
   the taller row instead of reading as one line of figures. */
.intro--stats > .wp-block-column {
	align-self: center;
}

/* --- Desktop ------------------------------------------------------------- */

@media (min-width: 992px) {
	.intro--section {
		/* comp panel 460 → 1297 on the 1512 frame */
		--intro-pad-top: 111px;
		--intro-pad-bottom: 75px;
		--intro-gap-h1: 27px; /* 34 in the comp, less the 7.4px sunset descender */
		--intro-gap-body: 77px;
		--intro-gap-eyebrow: 52px;
		--intro-gap-stats: 83px;
		--intro-copy-inset: 0px;
		/* the 1220 container already clears the 863px headline at 124px */
		--intro-heading-bleed: 0px;
	}
}