/* ===========================================================================
   cta-statement-bleed — one enormous statement on an inverted full-bleed band
   ---------------------------------------------------------------------------
   Scope: .vbs-cta-statement-bleed
   Depends on: css/tokens.css, css/base.css

   No container, no card, no button. The band runs the full width of the
   viewport, two full-bleed hairlines frame the composition, and everything in
   between is one sentence set as large as the brand's own display step allows.
   The single action is an oversized arrow link pushed to the opposite corner
   from the headline's first word, so the eye crosses the whole statement to
   reach it.

   The headline wraps naturally rather than on hand-set breaks: a statement
   that must fill the measure has to re-flow when the preset swaps a 300-weight
   Optima for an 800-weight grotesque. Only the multiplier is ours —
   --vbs-scale steps the brand's display size up as the viewport widens.

   Contains no literal colour, font, size, radius, shadow or duration.
   ========================================================================= */

.vbs-cta-statement-bleed {
	--vbs-scale: 1;
	/* Label and arrow have to stay on one line at 320px, so both step up with
	   the viewport rather than being oversized everywhere. */
	--vbs-cta-scale: 0.95;
	--vbs-arrow-size: 1.4em;
	overflow-x: clip;
}

/* Children carry the gutter themselves, so the two hairlines reach the
   viewport edge while the type stays on the same left margin as the page. */
.vbs-cta-statement-bleed__bleed > * { padding-inline: var(--vb-gutter); }

/* --- top rail ------------------------------------------------------------- */
.vbs-cta-statement-bleed__rail {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5rem 2rem;
	padding-block-end: clamp(1rem, 2vw, 1.25rem);
	border-block-end: var(--vb-border-hair) solid var(--vb-color-rule);
}
.vbs-cta-statement-bleed__rail-item { color: var(--vb-color-mute); }

/* --- the statement --------------------------------------------------------
   Sized off the brand's display token, never off a raw viewport unit, so a
   quiet brand stays quiet and a loud one gets to shout. */
.vbs-cta-statement-bleed__title {
	margin-block-start: clamp(2rem, 6vw, 4.5rem);
	font-size: calc(var(--vb-fs-display-1) * var(--vbs-scale));
	text-wrap: pretty;
}

.vbs-cta-statement-bleed__em { color: var(--vb-color-accent); }

@media (min-width: 30rem) { .vbs-cta-statement-bleed { --vbs-scale: 1.1; } }
@media (min-width: 48rem) {
	.vbs-cta-statement-bleed {
		--vbs-scale: 1.25;
		--vbs-cta-scale: 1.15;
		--vbs-arrow-size: 1.9em;
	}
}
@media (min-width: 62rem) { .vbs-cta-statement-bleed { --vbs-scale: 1.6; } }

/* --- oversized arrow link ------------------------------------------------- */
.vbs-cta-statement-bleed__action {
	margin-block-start: clamp(2.5rem, 5vw, 3.5rem);
	display: flex;
}

/* Opposite corner from the headline's first word once there is room for the
   eye to travel; directly under it on a phone, where there isn't. */
@media (min-width: 48rem) {
	.vbs-cta-statement-bleed__action { justify-content: flex-end; }
}

.vbs-cta-statement-bleed__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	font-family: var(--vb-font-display);
	font-size: calc(var(--vb-fs-h1) * var(--vbs-cta-scale));
	line-height: 1.1;
	font-weight: var(--vb-weight-heading);
	color: var(--vb-color-ink);
	padding-block-end: 0.25em;
	border-block-end: var(--vb-border-hair) solid var(--vb-color-rule);
	transition: color var(--vb-dur-base) var(--vb-ease-out-soft),
	            border-color var(--vb-dur-base) var(--vb-ease-out-soft);
}
.vbs-cta-statement-bleed__cta:hover {
	color: var(--vb-color-accent);
	border-block-end-color: currentColor;
}

.vbs-cta-statement-bleed__cta-arrow {
	flex: none;
	inline-size: var(--vbs-arrow-size);
	block-size: auto;
	transition: transform var(--vb-dur-base) var(--vb-ease-out-soft);
}
.vbs-cta-statement-bleed__cta:hover .vbs-cta-statement-bleed__cta-arrow {
	transform: translateX(0.25em);
}

/* --- bottom rail ---------------------------------------------------------- */
.vbs-cta-statement-bleed__meta {
	margin-block-start: clamp(3rem, 6vw, 4.5rem);
	padding-block-start: clamp(1rem, 2vw, 1.25rem);
	border-block-start: var(--vb-border-hair) solid var(--vb-color-rule);
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

/* Three items spread across the full bleed once they fit on one line;
   a plain left-aligned list before that, rather than a ragged two-up. */
@media (min-width: 48rem) {
	.vbs-cta-statement-bleed__meta {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
		gap: 0.35rem 2rem;
	}
}