/* ===========================================================================
   hero-curtain-arch — full-bleed photograph, ground rising into it as one arc
   ---------------------------------------------------------------------------
   Scope: .vbs-hero-curtain-arch
   Depends on: css/tokens.css, css/base.css
   Contains no literal colour, font, size, radius, shadow or duration.

   The move: the page ground swells up into the photograph's bottom edge as a
   single, very shallow convex arc — a stage-curtain hem, a horizon. It is drawn
   with one oversized ellipse painted in the section's own ground colour, so it
   is invisible everywhere except where its crown crosses the picture.
   ========================================================================= */

.vbs-hero-curtain-arch {
	/* How far the ground rises into the photo at the centre. Shallower on a
	   phone, where the picture is short and the arc would eat it. */
	--rise: clamp(1.5rem, 5vw, 4.25rem);
}

/* --- the photograph ------------------------------------------------------- */

.vbs-hero-curtain-arch__stage {
	position: relative;
	isolation: isolate;
	/* The ellipse lives inside the stage and is clipped by it: only the crown
	   that crosses the picture is ever painted, so it can never sit on the copy
	   below and never widens the page. */
	overflow: clip;
	/* ~60vh on a desktop; capped by width on a phone so a tall viewport does
	   not turn the picture into a poster. */
	block-size: clamp(18rem, min(60vh, 110vw), 44rem);
}

.vbs-hero-curtain-arch__photo {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

/* The arc. An ellipse 200vw wide whose crown pokes --rise above the stage's
   bottom edge. With semi-axes a = 100vw and b, the sagitta over a 100vw chord
   is ~0.134·b, so b = --rise / 0.134 and the full height is 15 × --rise — that
   keeps the curve's peak exactly at --rise whatever the viewport does. Painted from the surface roles so it is
   the ground itself, on all four grounds and under a gradient brand. */
.vbs-hero-curtain-arch__stage::after {
	content: "";
	position: absolute;
	z-index: 1;
	inset-inline-start: 50%;
	inset-block-start: calc(100% - var(--rise));
	inline-size: 200vw;
	block-size: calc(var(--rise) * 15);
	translate: -50% 0;
	border-radius: 50%;
	background-color: var(--vb-surface);
	background-image: var(--vb-surface-image);
	background-blend-mode: var(--vb-surface-blend);
	pointer-events: none;
}

/* --- the copy row --------------------------------------------------------- */

.vbs-hero-curtain-arch__row {
	display: grid;
	grid-template-areas:
		"eyebrow"
		"title"
		"aside";
	gap: 0;
	padding-block-start: clamp(1.5rem, 3vw, 2.5rem);
}

.vbs-hero-curtain-arch__eyebrow { grid-area: eyebrow; }

.vbs-hero-curtain-arch__title {
	grid-area: title;
	margin-block-start: 1.25rem;
	/* Two lines, and the biggest thing on the page after the picture. */
	font-size: max(var(--vb-fs-display-1), clamp(2.75rem, 5.6vw + 0.5rem, 6.25rem));
	max-inline-size: 14ch;
}

.vbs-hero-curtain-arch__aside {
	grid-area: aside;
	margin-block-start: 2rem;
	max-inline-size: 34rem;
}

.vbs-hero-curtain-arch__lead { max-inline-size: none; }

.vbs-hero-curtain-arch__aside .vb-btn { margin-block-start: 2rem; }

/* Two columns: eyebrow and title stack on the left; the aside sits on the
   right, top-aligned with the headline (not the eyebrow), because the grid
   row it shares is the title's. */
@media (min-width: 62rem) {
	.vbs-hero-curtain-arch__row {
		grid-template-columns: 1.15fr 0.85fr;
		grid-template-areas:
			"eyebrow ."
			"title   aside";
		align-items: start;
		column-gap: clamp(3rem, 6vw, 6rem);
	}

	.vbs-hero-curtain-arch__aside {
		margin-block-start: 1.25rem;
		/* Sit the lead's first line on the headline's cap line rather than on
		   its line-box top. */
		padding-block-start: 0.35em;
	}
}