/* ===========================================================================
   hero-overlap-bleed — art-directed opener, headline over a bleeding panel
   ---------------------------------------------------------------------------
   Scope: .vbs-hero-overlap-bleed
   Depends on: css/tokens.css, css/base.css

   The whole idea is one deliberate collision: a media panel that runs off the
   right edge of the viewport, and a display headline pulled up over its lower
   third with a negative margin so the type breaks BOTH the left and the bottom
   edge of the image. A rotated rail label holds the empty left column; a scroll
   cue closes the composition.

   Mobile-first: below 62rem none of that applies. The panel is a plain
   full-bleed image, the rail is an ordinary horizontal eyebrow above it, and
   the copy stacks underneath with no overlap at all.

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

.vbs-hero-overlap-bleed {
	/* The media leaves the viewport on purpose — clip rather than scroll. */
	overflow-x: clip;
}

.vbs-hero-overlap-bleed__stage {
	position: relative;
	isolation: isolate;
}

/* --- side rail ------------------------------------------------------------
   One element, two lives. Horizontal label + trailing hairline on a phone;
   from 62rem the same box turns 90 degrees and pins to the left margin.
   Logical sizing means the hairline needs no separate desktop rule — inline
   runs down the page once the writing mode is vertical. */
.vbs-hero-overlap-bleed__rail {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-block-end: 1.25rem;
	padding-inline: var(--vb-gutter);
	color: var(--vb-color-ink-soft);
}
.vbs-hero-overlap-bleed__rail::after {
	content: "";
	flex: none;
	inline-size: clamp(2rem, 10vw, 4rem);
	block-size: var(--vb-border-hair);
	background-color: var(--vb-color-rule);
}

/* --- media panel ----------------------------------------------------------
   Square corners on purpose: the panel touches the viewport edge, and a radius
   on a bleeding edge always reads as a mistake. */
.vbs-hero-overlap-bleed__media {
	--vb-ratio: 4 / 5;
	border-radius: 0;
}

/* A 4:5 panel that spans a tablet would be a full screen of image and nothing
   else — the crop widens with the viewport. */
@media (min-width: 40rem) {
	.vbs-hero-overlap-bleed__media { --vb-ratio: 3 / 2; }
}

/* No scrim. The headline crosses the foot of the picture, and a gradient
   washing the image out to the paper colour was doing the type's job for it —
   it read as a smear across the photograph rather than as an edge. The
   contract moved to the picture instead: this composition needs a high-key
   image whose lower left is light enough to carry ink type on its own. That
   is stated on the image slot in meta.json, and it is the one thing to check
   when swapping the photograph.

   One exception, below: on a dark ground the headline is paper-coloured, and
   paper type cannot sit on a high-key picture either. There the foot of the
   image keeps a scrim — and there it is not washing anything out, it is
   putting the picture on the same dark paper as the type. */
.vbs-hero-overlap-bleed[data-vb-surface="dark"] .vbs-hero-overlap-bleed__media::before,
.vbs-hero-overlap-bleed[data-vb-surface="dark-surface"] .vbs-hero-overlap-bleed__media::before,
html[data-vb-surface="dark"] .vbs-hero-overlap-bleed__media::before,
html[data-vb-surface="dark-surface"] .vbs-hero-overlap-bleed__media::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(
		to top,
		color-mix(in srgb, var(--vb-surface) 92%, transparent) 0%,
		color-mix(in srgb, var(--vb-surface) 70%, transparent) 22%,
		transparent 52%
	);
}

/* --- copy panel ----------------------------------------------------------- */
.vbs-hero-overlap-bleed__panel {
	position: relative;
	z-index: 2;
	margin-block-start: clamp(1.5rem, 4vw, 2.5rem);
	padding-inline: var(--vb-gutter);
}

.vbs-hero-overlap-bleed__lead {
	margin-block-start: clamp(1.25rem, 2.5vw, 1.75rem);
	max-inline-size: 34rem;
}

.vbs-hero-overlap-bleed__meta {
	margin-block-start: 1rem;
	max-inline-size: 34rem;
}
.vbs-hero-overlap-bleed__dot {
	margin-inline: 0.35em;
	color: var(--vb-color-mute);
}

.vbs-hero-overlap-bleed__actions {
	margin-block-start: clamp(1.75rem, 3vw, 2.25rem);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem 1.75rem;
}

/* --- scroll cue ----------------------------------------------------------- */
.vbs-hero-overlap-bleed__cue {
	margin-block-start: clamp(2.5rem, 5vw, 3.5rem);
	margin-inline-start: var(--vb-gutter);
	display: inline-flex;
	align-items: center;
	gap: 0.9em;
	color: var(--vb-color-mute);
	transition: color var(--vb-dur-base) var(--vb-ease-out-soft);
}
.vbs-hero-overlap-bleed__cue:hover { color: var(--vb-color-ink); }
.vbs-hero-overlap-bleed__cue-label { color: inherit; }
.vbs-hero-overlap-bleed__cue-arrow {
	flex: none;
	animation-name: vbs-hero-overlap-bleed-drop;
	animation-duration: calc(var(--vb-dur-slow) * 4);
	animation-timing-function: var(--vb-ease-in-out);
	animation-iteration-count: infinite;
}

@keyframes vbs-hero-overlap-bleed-drop {
	from { transform: translateY(0); }
	50%  { transform: translateY(0.4rem); }
	to   { transform: translateY(0); }
}

/* --- the art direction, from 62rem ---------------------------------------- */
@media (min-width: 62rem) {

	/* Rail turns vertical and reads bottom-to-top up the left margin.
	   Physical offsets on purpose: once the box is vertical-rl its own logical
	   sides rotate with it, so inset-block/inline would pin it to the wrong
	   edge. top/left say exactly what is meant here.

	   The half-turn is the `rotate` property, not `transform`: data-vb-reveal
	   owns `transform` (translateY in, `none` once .is-in lands) and would
	   otherwise animate the label through a visible 180deg spin on entry and
	   leave it un-turned at rest. With the reveal's travel zeroed in the
	   markup the rail simply fades in, already facing the right way. */
	.vbs-hero-overlap-bleed__rail {
		position: absolute;
		top: 0;
		left: var(--vb-gutter);
		z-index: 3;
		margin-block-end: 0;
		padding-inline: 0;
		gap: 1.5rem;
		writing-mode: vertical-rl;
		rotate: 180deg;
	}
	.vbs-hero-overlap-bleed__rail::after {
		inline-size: clamp(3rem, 7vw, 5.5rem);
	}

	/* Media runs off the right edge of the viewport and is inset from the left,
	   so the headline has somewhere to break out to. */
	.vbs-hero-overlap-bleed__media {
		--vb-ratio: 16 / 9;
		margin-inline-start: 20%;
	}

	/* The collision: pull the copy up over the foot of the image. */
	.vbs-hero-overlap-bleed__panel {
		margin-block-start: clamp(-12rem, -9vw, -6rem);
		padding-inline-start: clamp(2.5rem, 7vw, 7.5rem);
		max-inline-size: min(54rem, 68%);
	}

	/* Oversized relative to the brand's own display step, not to a fixed px —
	   a 300-weight luxury face and an 800-weight grotesque both scale. */
	.vbs-hero-overlap-bleed__title {
		font-size: calc(var(--vb-fs-display-1) * 1.08);
	}

	/* Cue moves to the far corner and balances the empty quarter left by the
	   copy block. It aligns with the bottom of the actions row. */
	.vbs-hero-overlap-bleed__cue {
		position: absolute;
		inset-block-end: 0;
		inset-inline-end: var(--vb-gutter);
		margin-block-start: 0;
		margin-inline-start: 0;
	}
}