/* ===========================================================================
   gallery-parallax-columns — three columns drifting at three rates
   ---------------------------------------------------------------------------
   Scope: .vbs-gallery-parallax-columns
   Depends on: css/tokens.css, css/base.css, css/motion.css

   Nine plates in three columns. Each column carries data-vb-parallax with its
   own --vb-parallax, and the middle one is set NEGATIVE so it drifts against
   the other two rather than merely slower than them. Two of the columns also
   start lower than the first, so no two plate edges ever line up across the
   page — which is the whole point of the composition and the reason it still
   looks art-directed with the animation switched off.

   Mixed crops on purpose (4:5, 1:1, 3:4, rotated between columns) so the
   columns are unequal heights before anything moves.

   HOW IT COLLAPSES — the columns are `display: contents` below 64rem. The
   plates become direct children of the grid and reflow into two columns, then
   one. That also makes the parallax inert on a phone with nothing to switch
   off: a display:contents element generates no box, so there is nothing for
   the transform to move. On a small screen that is exactly right — parallax
   on a touch device is noise.

   MOTION
     data-vb-split      the heading rises word by word
     data-vb-parallax   three columns, three rates, one of them reversed
     data-vb-stagger    each plate rises just ahead of its own caption
     hover / focus      an accent hairline draws across the caption rule

   The stagger sits on the figure, not on the column: a column is
   display:contents on small screens and therefore has no box for an
   observer to see, which would strand its children at opacity 0. The figure
   always has a box. The column's parallax transform and the figure's
   stagger transform are on different elements, so they never fight.

   Resting state: three columns at their natural offsets, every plate in
   place and un-drifted, every caption rule a plain hairline. Finished, not
   waiting.

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

/* --- head -----------------------------------------------------------------
   Title left, standfirst dropped onto its baseline at the right. */
.vbs-gallery-parallax-columns__head {
	display: grid;
	gap: 1.5rem;
	padding-block-end: clamp(2.5rem, 5vw, 4rem);
}

@media (min-width: 64rem) {
	.vbs-gallery-parallax-columns__head {
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
		align-items: end;
		gap: 2rem clamp(2.5rem, 6vw, 5rem);
	}
}

.vbs-gallery-parallax-columns__title {
	margin-block-start: 1.25rem;
	max-inline-size: 16ch;
}

/* A hair of padding so descenders clear the per-word mask. */
.vbs-gallery-parallax-columns__title .vb-split__inner { padding-block-end: 0.06em; }

.vbs-gallery-parallax-columns__lede {
	max-inline-size: var(--vb-max-prose);
}

/* --- the bed --------------------------------------------------------------
   One plate wide on a phone. align-items:start everywhere, so a short crop
   never stretches to match a tall one sharing its row. */
.vbs-gallery-parallax-columns__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: start;
	gap: clamp(2rem, 4vw, 3rem) clamp(1rem, 2.5vw, 2rem);
}

@media (min-width: 40rem) {
	.vbs-gallery-parallax-columns__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 64rem) {
	.vbs-gallery-parallax-columns__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* --- columns --------------------------------------------------------------
   Transparent until there is room for three of them. See the note at the top
   of this file: display:contents is what both reflows the plates and takes
   the parallax out of play on small screens. */
.vbs-gallery-parallax-columns__col {
	display: contents;
}

@media (min-width: 64rem) {
	.vbs-gallery-parallax-columns__col {
		display: flex;
		flex-direction: column;
		gap: clamp(1.75rem, 3.5vw, 3rem);
	}

	/* The offsets. Column B drops a long way and drifts upward against the
	   scroll; column C drops a little. Nothing lines up with anything. */
	.vbs-gallery-parallax-columns__col--b { margin-block-start: clamp(3rem, 6vw, 5rem); }
	.vbs-gallery-parallax-columns__col--c { margin-block-start: clamp(1.25rem, 2.5vw, 2rem); }
}

/* --- plate + caption ------------------------------------------------------ */
.vbs-gallery-parallax-columns__item {
	display: grid;
	row-gap: 0.85rem;
	--vb-motion-distance: 20px;
	--vb-motion-step: 90ms;
}

.vbs-gallery-parallax-columns__media {
	border-radius: var(--vb-radius-card);
}

/* The rule above the caption is a plain hairline at rest; the accent line is
   a second layer sitting on top of it, drawn in on hover or keyboard focus.
   Doing it with a pseudo-element rather than by recolouring the border means
   the resting composition is complete and the highlight is purely additive. */
.vbs-gallery-parallax-columns__cap {
	position: relative;
	display: grid;
	row-gap: 0.2rem;
	padding-block-start: 0.75rem;
	border-block-start: var(--vb-border-hair) solid var(--vb-color-rule);
}

.vbs-gallery-parallax-columns__cap::after {
	content: "";
	position: absolute;
	inset-block-start: calc(var(--vb-border-hair) * -1);
	inset-inline: 0;
	block-size: var(--vb-border-hair);
	background-color: var(--vb-chroma);
	transform: scaleX(0);
	transform-origin: 0 50%;
	transition: transform var(--vb-dur-base) var(--vb-ease-out-soft);
}

.vbs-gallery-parallax-columns__item:hover .vbs-gallery-parallax-columns__cap::after,
.vbs-gallery-parallax-columns__item:focus-within .vbs-gallery-parallax-columns__cap::after {
	transform: scaleX(1);
}

.vbs-gallery-parallax-columns__name {
	font-family: var(--vb-font-display);
	font-size: var(--vb-fs-h3);
	line-height: var(--vb-lh-h3);
	letter-spacing: var(--vb-ls-h3);
	font-weight: var(--vb-weight-heading);
	color: var(--vb-color-ink);
	text-wrap: pretty;
	transition: color var(--vb-dur-base) var(--vb-ease-out-soft);
}

.vbs-gallery-parallax-columns__item:hover .vbs-gallery-parallax-columns__name,
.vbs-gallery-parallax-columns__item:focus-within .vbs-gallery-parallax-columns__name {
	color: var(--vb-chroma-ink);
}

.vbs-gallery-parallax-columns__meta {
	font-variant-numeric: tabular-nums;
}

/* --- foot -----------------------------------------------------------------
   The columns end ragged by design; this rule is what gives the bottom of the
   section a straight edge to sit on. */
.vbs-gallery-parallax-columns__foot {
	margin-block-start: clamp(3rem, 6vw, 5rem);
	padding-block-start: clamp(1.25rem, 2.5vw, 2rem);
	border-block-start: var(--vb-border-hair) solid var(--vb-color-rule);
	display: grid;
	gap: 1rem clamp(2rem, 5vw, 4rem);
	align-items: center;
}

@media (min-width: 48rem) {
	.vbs-gallery-parallax-columns__foot { grid-template-columns: minmax(0, 1fr) auto; }
}

.vbs-gallery-parallax-columns__note {
	max-inline-size: 62ch;
	font-size: var(--vb-fs-small);
	line-height: var(--vb-lh-small);
	color: var(--vb-color-ink-soft);
	text-wrap: pretty;
}

/* --- reduced motion -------------------------------------------------------
   motion.css already stops the parallax and the staggered arrivals. This kills
   the caption sweep too, so the hover state simply appears. */
@media (prefers-reduced-motion: reduce) {
	.vbs-gallery-parallax-columns__cap::after { transition: none; }
}