/* ===========================================================================
   intro-offset-collage — art-directed intro, three panels on different offsets
   ---------------------------------------------------------------------------
   Scope: .vbs-intro-offset-collage
   Depends on: css/tokens.css, css/base.css
   Contains no literal colour, font, size, radius, shadow or duration.

   Two flow columns rather than a placed 12-column grid, on purpose: every
   offset here is expressed as a margin relative to a sibling, so the overlap
   survives a preset that makes the heading three lines taller. Nothing is
   absolutely positioned and nothing can land on top of live text.

     media column   4:5 portrait, then a 1:1 square pulled up and pushed right
                    so it laps the portrait's bottom corner
     copy column    the statement, dropped down the page, then a 16:9 panel
                    that reaches back left over the square on a paper mat

   The copy therefore sits in the negative space the three panels leave behind.
   ========================================================================= */

.vbs-intro-offset-collage__grid {
	display: grid;
	gap: clamp(2.5rem, 6vw, 3.5rem);
	isolation: isolate;
}

.vbs-intro-offset-collage__copy-col,
.vbs-intro-offset-collage__media-col {
	display: grid;
	align-content: start;
	gap: clamp(2rem, 5vw, 3rem);
}

/* --- copy ----------------------------------------------------------------- */
.vbs-intro-offset-collage__title { margin-block-start: 1.25rem; }

.vbs-intro-offset-collage__lead {
	margin-block-start: 1.5rem;
	max-inline-size: var(--vb-max-prose);
}

/* Datelines get an accent tick instead of a bullet: one coloured element in
   the whole composition, and it is a role token. */
.vbs-intro-offset-collage__meta {
	margin-block-start: 1.75rem;
	display: flex;
	align-items: baseline;
	gap: 0.85em;
	color: var(--vb-color-ink-soft);
}
.vbs-intro-offset-collage__meta::before {
	content: "";
	flex: none;
	inline-size: clamp(1.25rem, 3vw, 2.25rem);
	block-size: var(--vb-border-hair);
	background-color: var(--vb-color-accent);
	transform: translateY(-0.3em);
}

.vbs-intro-offset-collage__action { margin-block-start: 1.5rem; }

/* --- panels --------------------------------------------------------------- */
.vbs-intro-offset-collage__media--tall   { --vb-ratio: 4 / 5; }
.vbs-intro-offset-collage__media--square { --vb-ratio: 1 / 1; }
.vbs-intro-offset-collage__media--wide   { --vb-ratio: 16 / 9; }

.vbs-intro-offset-collage__caption {
	display: block;
	margin-block-start: 0.85rem;
	max-inline-size: 46ch;
	color: var(--vb-color-ink-soft);
}

/* --- tablet: staircase, no overlap ----------------------------------------
   The columns are still stacked here, so the art direction is carried by
   width alone: three different measures, the square pushed to the far side.
   inline-size:100% is load-bearing — an auto margin on a grid item cancels
   the stretch, and the panel would collapse to the width of its own label. */
@media (min-width: 40rem) {
	.vbs-intro-offset-collage__panel--tall {
		inline-size: 100%;
		max-inline-size: 72%;
	}
	.vbs-intro-offset-collage__panel--square {
		inline-size: 100%;
		max-inline-size: 58%;
		margin-inline-start: auto;
	}
	.vbs-intro-offset-collage__panel--wide {
		inline-size: 100%;
		max-inline-size: 86%;
	}
}

/* --- desktop: the collage -------------------------------------------------
   Percentage margins resolve against each column's inline size, so the whole
   arrangement scales with the viewport and the overlaps never change ratio. */
@media (min-width: 64rem) {
	.vbs-intro-offset-collage__grid {
		grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
		column-gap: clamp(1.5rem, 3vw, 3rem);
		align-items: start;
	}

	.vbs-intro-offset-collage__media-col {
		display: block;
		grid-column: 1;
		grid-row: 1;
	}
	.vbs-intro-offset-collage__copy-col {
		display: block;
		grid-column: 2;
		grid-row: 1;
		margin-block-start: clamp(1.5rem, 3.5vw, 3.5rem);
	}

	/* Every panel that sits ON another one is mounted on a paper mat. Without
	   it two placeholder fields — or two photographs of the same beach — fuse
	   into one ambiguous polygon at the seam, and the overlap reads as a
	   rendering fault instead of as layering. The mat also gives the caption
	   an opaque ground where the 16:9 crosses the square beneath it. It only
	   exists at this breakpoint because below it nothing overlaps.
	   Stacking order is document order — tall, square, wide — so only the
	   16:9 needs an explicit z-index, and only to clear the copy column. */
	.vbs-intro-offset-collage__panel--square,
	.vbs-intro-offset-collage__panel--wide {
		padding: clamp(0.5rem, 1.2vw, 0.9rem);
		background-color: var(--vb-panel);
		background-image: var(--vb-panel-image);
		background-blend-mode: var(--vb-panel-blend);
		border-radius: var(--vb-radius-lg);
		box-shadow: var(--vb-shadow-card);
	}

	.vbs-intro-offset-collage__caption {
		padding-inline: clamp(0.25rem, 1vw, 0.65rem);
		margin-block-end: 0.3rem;
	}

	/* Back to block layout, so inline-size returns to auto and each panel is
	   sized by its max-inline-size against the column it lives in. */
	.vbs-intro-offset-collage__panel--tall {
		inline-size: auto;
		max-inline-size: 74%;
	}

	.vbs-intro-offset-collage__panel--square {
		inline-size: auto;
		max-inline-size: 62%;
		margin-inline-start: 34%;
		margin-block-start: -16%;
	}

	.vbs-intro-offset-collage__panel--wide {
		position: relative;
		z-index: 2;
		inline-size: auto;
		max-inline-size: none;
		margin-block-start: clamp(2rem, 3.5vw, 3.25rem);
		margin-inline-start: -24%;
	}
}