/* ===========================================================================
   hero-split-portrait — asymmetric editorial hero
   ---------------------------------------------------------------------------
   Scope: .vbs-hero-split-portrait
   Depends on: css/tokens.css, css/base.css
   Contains no literal colour, font, size, radius, shadow or duration.
   ========================================================================= */

.vbs-hero-split-portrait__grid {
	display: grid;
	gap: clamp(2.5rem, 5vw, 4.5rem);
	align-items: center;
}

@media (min-width: 62rem) {
	.vbs-hero-split-portrait__grid {
		grid-template-columns: 1.15fr 0.85fr;
		gap: clamp(3rem, 6vw, 6rem);
	}
}

/* --- copy column ---------------------------------------------------------- */

/* Eyebrow rides a short rule — a cheap, brand-neutral way to anchor the
   top-left of the type block without adding a decorative element. */
.vbs-hero-split-portrait__eyebrow {
	display: flex;
	align-items: center;
	gap: 0.85em;
}
.vbs-hero-split-portrait__eyebrow::before {
	content: "";
	inline-size: clamp(1.5rem, 4vw, 3rem);
	block-size: var(--vb-border-hair);
	background-color: var(--vb-color-accent);
	flex: none;
}

.vbs-hero-split-portrait__title { margin-block-start: 1.5rem; }

/* The one word the client wants to own. Swappable to any role token. */
.vbs-hero-split-portrait__accent { color: var(--vb-color-accent); }

.vbs-hero-split-portrait__lead {
	margin-block-start: 1.75rem;
	max-width: var(--vb-max-prose);
}

.vbs-hero-split-portrait__actions {
	margin-block-start: 2.5rem;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem 1.75rem;
}

/* --- trust strip ---------------------------------------------------------- */
.vbs-hero-split-portrait__trust {
	margin-block-start: clamp(2.5rem, 5vw, 3.5rem);
	padding-block-start: 1.5rem;
	border-block-start: var(--vb-border-hair) solid var(--vb-color-rule);
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.75rem 2rem;
}
.vbs-hero-split-portrait__trust-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1.75rem;
}
.vbs-hero-split-portrait__trust-item {
	font-weight: var(--vb-weight-strong);
	color: var(--vb-color-ink-soft);
	font-size: var(--vb-fs-small);
}

/* --- media column ---------------------------------------------------------
   The frame is an offset accent-tinted panel sitting behind the image. It is
   drawn with a token colour and inherits the preset's radius, so Brutalist
   renders a hard square slab and Organic a soft pillow — same markup. */
.vbs-hero-split-portrait__media-wrap {
	position: relative;
	isolation: isolate;
	/* Capped at the gutter, because this panel is pushed OUT past the media's
	   right edge — offset it further than the page margin and the section
	   scrolls sideways under any brand with a tight gutter. */
	--offset: min(clamp(0.875rem, 2.2vw, 1.75rem), var(--vb-gutter));
}
.vbs-hero-split-portrait__media-wrap::before {
	content: "";
	position: absolute;
	/* Offset down-and-right by one shared step so the panel reads as a
	   deliberate second plane rather than a misaligned background. */
	inset-block: var(--offset) calc(var(--offset) * -1);
	inset-inline: var(--offset) calc(var(--offset) * -1);
	background-color: var(--vb-color-accent-soft);
	border-radius: var(--vb-radius-lg);
	z-index: -1;
}

.vbs-hero-split-portrait__media {
	--vb-ratio: 4 / 5;
	box-shadow: var(--vb-shadow-card);
}

/* Caption card overlapping the image's bottom-left corner. */
.vbs-hero-split-portrait__caption {
	position: absolute;
	inset-block-end: -1.25rem;
	inset-inline-start: -1.25rem;
	max-inline-size: 15rem;
	padding: 1rem 1.25rem;
	background-color: var(--vb-panel);
	background-image: var(--vb-panel-image);
	background-blend-mode: var(--vb-panel-blend);
	border: var(--vb-border-hair) solid var(--vb-color-rule);
	border-radius: var(--vb-radius-card);
	box-shadow: var(--vb-shadow-card);
}
.vbs-hero-split-portrait__caption-figure {
	font-family: var(--vb-font-display);
	font-size: var(--vb-fs-h2);
	font-weight: var(--vb-weight-heading);
	line-height: 1;
	color: var(--vb-color-ink);
	display: block;
}
.vbs-hero-split-portrait__caption-label {
	margin-block-start: 0.4rem;
	display: block;
}

/* Below the breakpoint the caption would hang off-canvas — tuck it in. */
@media (max-width: 40rem) {
	.vbs-hero-split-portrait__caption {
		position: static;
		max-inline-size: none;
		margin-block-start: 1.25rem;
	}
	.vbs-hero-split-portrait__media-wrap::before { display: none; }
}

/* Supported art-direction variants; inert in the original preview. */
.vbs-hero-split-portrait[data-vb-compose] .vbs-hero-split-portrait__grid { gap: var(--vb-section-gap); }
.vbs-hero-split-portrait[data-vb-compose] .vbs-hero-split-portrait__copy { min-inline-size: 0; }
.vbs-hero-split-portrait[data-vb-compose] .vbs-hero-split-portrait__media-wrap { min-inline-size: 0; margin: 0.75rem; }
.vbs-hero-split-portrait[data-vb-compose] .vbs-hero-split-portrait__caption { inset-inline-start: -.75rem; inset-block-end: -.75rem; }
.vbs-hero-split-portrait[data-vb-compose] { --vb-heading-measure: 10ch; }
.vbs-hero-split-portrait[data-vb-compose] .vbs-hero-split-portrait__title { max-inline-size: var(--vb-heading-measure); }
.vbs-hero-split-portrait[data-vb-compose] .vbs-hero-split-portrait__actions { margin-block-start: var(--vb-section-gap); }
.vbs-hero-split-portrait[data-vb-frame="plain"] .vbs-hero-split-portrait__media-wrap::before,
.vbs-hero-split-portrait[data-vb-frame="arch"] .vbs-hero-split-portrait__media-wrap::before { display: none; }
.vbs-hero-split-portrait[data-vb-frame="offset"] .vbs-hero-split-portrait__media-wrap::before {
 background-color: var(--vb-chroma); border-radius: 0;
 transform: rotate(-4deg); mix-blend-mode: var(--vb-blend-ink);
}
@media (max-width: 61.999rem) {
 .vbs-hero-split-portrait[data-vb-frame="offset"] .vbs-hero-split-portrait__media-wrap::before { transform: none; }
}
@media (min-width: 62rem) {
 .vbs-hero-split-portrait[data-vb-layout="copy-heavy"] .vbs-hero-split-portrait__grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, .6fr); }
 .vbs-hero-split-portrait[data-vb-layout="balanced"] .vbs-hero-split-portrait__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
 .vbs-hero-split-portrait[data-vb-layout="image-heavy"] .vbs-hero-split-portrait__grid { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
 .vbs-hero-split-portrait[data-vb-layout="image-heavy"] .vbs-hero-split-portrait__media { --vb-ratio: 1 / 1; }
}