/* ===========================================================================
   hero-masthead-columns — a headline set as a masthead, the page starting
   beneath it in columns
   ---------------------------------------------------------------------------
   Scope: .vbs-hero-masthead-columns
   Depends on: css/tokens.css, css/base.css
   Contains no literal colour, font, size, radius, shadow or duration.

   The move: the headline is the masthead. One sentence runs the full width
   of the page at a size past the display token, ruled beneath like a
   front page; under the rule the page begins at once in three columns —
   two of text and one photograph — with no lead, no eyebrow and no
   centring. The type is the picture above the fold; the photograph is a
   column like the others.
   ========================================================================= */

/* The masthead: full measure, past the display token, ruled underneath. */
.vbs-hero-masthead-columns__masthead {
	font-family: var(--vb-font-display);
	font-size: clamp(var(--vb-fs-display-1), 6.4vw, calc(var(--vb-fs-display-1) * 1.6));
	line-height: 0.98;
	letter-spacing: var(--vb-ls-display-1);
	font-weight: var(--vb-weight-display);
	text-transform: var(--vb-case-display);
	color: var(--vb-color-ink);
	text-wrap: balance;
	padding-block-end: clamp(1.25rem, 2.4vw, 2rem);
	border-block-end: calc(var(--vb-border-hair) * 2) solid var(--vb-color-ink);
}

/* --- columns -------------------------------------------------------------- */
.vbs-hero-masthead-columns__body {
	margin-block-start: clamp(1.5rem, 3vw, 2.5rem);
	display: grid;
	gap: clamp(1.5rem, 3vw, 2.5rem);
}
@media (min-width: 48rem) {
	.vbs-hero-masthead-columns__body { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.vbs-hero-masthead-columns__media { grid-column: 1 / -1; }
}
@media (min-width: 64rem) {
	.vbs-hero-masthead-columns__body {
		grid-template-columns: minmax(0, 4fr) minmax(0, 4fr) minmax(0, 4fr);
		column-gap: clamp(2rem, 4vw, 3.5rem);
	}
	.vbs-hero-masthead-columns__media { grid-column: auto; }
}

.vbs-hero-masthead-columns__col {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1.25rem;
}
.vbs-hero-masthead-columns__when {
	font-family: var(--vb-font-display);
	font-size: var(--vb-fs-h3);
	line-height: var(--vb-lh-h3);
	font-weight: var(--vb-weight-heading);
	color: var(--vb-color-ink);
}
.vbs-hero-masthead-columns__text { max-inline-size: 40ch; }

.vbs-hero-masthead-columns__media { border-radius: var(--vb-radius-sm); }