/* ===========================================================================
   showcase-fullbleed-pills
   ---------------------------------------------------------------------------
   Project plates that run the full width of the page, each carrying a solid
   pill label, an oversized caption and a ruled metadata row.

   The pill is the device that makes this readable over photography: a small
   opaque block of the page surface, so the project name never has to fight the
   image behind it. Everything else sits on a scrim mixed from the ink token,
   which means it follows the brand rather than assuming a dark photo.
   ========================================================================= */

.vbs-showcase-fullbleed-pills {
	--vbs-pills-inset: 2rem;
}

/* --- header --------------------------------------------------------------- */
.vbs-showcase-fullbleed-pills__head { margin-block-end: 3rem; }
.vbs-showcase-fullbleed-pills__head > .vb-eyebrow { display: block; margin-block-end: 0.85rem; }
.vbs-showcase-fullbleed-pills__title { max-width: 18ch; }

/* --- panels --------------------------------------------------------------- */
.vbs-showcase-fullbleed-pills__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 1rem;
}
.vbs-showcase-fullbleed-pills__panel { margin: 0; }

.vbs-showcase-fullbleed-pills__frame {
	position: relative;
	overflow: hidden;
}

/* Cinema crop is too letterboxed to hold three lines of caption on a phone,
   so the plate stands up to 4:5 until there is width to spend. */
.vbs-showcase-fullbleed-pills__media { --vb-ratio: 4 / 5; }
@media (min-width: 48rem) { .vbs-showcase-fullbleed-pills__media { --vb-ratio: 16 / 9; } }
@media (min-width: 72rem) { .vbs-showcase-fullbleed-pills__media { --vb-ratio: 21 / 9; } }

.vbs-showcase-fullbleed-pills__media { border-radius: 0; }

/* --- scrim ----------------------------------------------------------------
   Mixed from the ink token, so a light brand gets a light-ink veil rather than
   a black one that would fight its palette. */
.vbs-showcase-fullbleed-pills__scrim {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image: linear-gradient(
		to top,
		color-mix(in srgb, var(--vb-color-ink) 78%, transparent) 0%,
		color-mix(in srgb, var(--vb-color-ink) 45%, transparent) 38%,
		transparent 72%
	);
}

/* --- overlay -------------------------------------------------------------- */
.vbs-showcase-fullbleed-pills__overlay {
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	padding-block: var(--vbs-pills-inset);
}

.vbs-showcase-fullbleed-pills__pill {
	display: inline-flex;
	align-items: center;
	gap: 0.9rem;
	padding: 0.6rem 0.75rem 0.6rem 1.1rem;
	border-radius: var(--vb-radius-pill);
	/* A chip of the page laid on the photograph — the section's own ground, so
	   the label stays legible whichever surface the builder puts it on. */
	background-color: var(--vb-surface);
	color: var(--vb-color-ink);
	text-decoration: none;
	transition: background-color var(--vb-dur-fast) var(--vb-ease-out-soft),
	            color var(--vb-dur-fast) var(--vb-ease-out-soft);
}
.vbs-showcase-fullbleed-pills__pill:hover,
.vbs-showcase-fullbleed-pills__pill:focus-visible {
	background-color: var(--vb-chroma);
	color: var(--vb-chroma-contrast);
}
.vbs-showcase-fullbleed-pills__pill-name {
	font-family: var(--vb-font-display);
	font-size: var(--vb-fs-h3);
	line-height: var(--vb-lh-h3);
	font-weight: var(--vb-weight-heading);
}
.vbs-showcase-fullbleed-pills__pill-mark {
	display: inline-flex;
	transition: transform var(--vb-dur-base) var(--vb-ease-out-soft);
}
.vbs-showcase-fullbleed-pills__pill:hover .vbs-showcase-fullbleed-pills__pill-mark { transform: rotate(90deg); }

.vbs-showcase-fullbleed-pills__caption {
	margin-block: 1rem 0;
	max-width: 34ch;
	color: var(--vb-color-paper);
}

.vbs-showcase-fullbleed-pills__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem;
	margin-block-start: 1.1rem;
	padding-block-start: 0.9rem;
	border-block-start: var(--vb-border-hair) solid color-mix(in srgb, var(--vb-color-paper) 40%, transparent);
	max-width: 34ch;
}
.vbs-showcase-fullbleed-pills__meta-item {
	color: color-mix(in srgb, var(--vb-color-paper) 82%, transparent);
	font-family: var(--vb-font-mono);
}

@media (min-width: 48rem) {
	.vbs-showcase-fullbleed-pills { --vbs-pills-inset: 3rem; }
	.vbs-showcase-fullbleed-pills__caption { max-width: 44ch; }
	.vbs-showcase-fullbleed-pills__meta {
		max-width: none;
		justify-content: space-between;
		width: min(46rem, 100%);
	}
}

/* --- reduced motion --------------------------------------------------------
   The zoom is a scroll-driven enhancement and motion.css already disables it;
   nothing here needs a hidden start state, so there is nothing else to undo. */

/* ===========================================================================
   GSAP tier
   ---------------------------------------------------------------------------
   The plate parallaxes +/-38px inside a clipped frame, so it has to be taller
   than the frame or the drift would drag its edge into view at the extremes.
   ========================================================================= */
html.vb-gsap .vbs-showcase-fullbleed-pills__frame > .vbs-showcase-fullbleed-pills__media {
	block-size: 124%;
	position: absolute;
	inset-block-start: -12%;
	inset-inline: 0;
	aspect-ratio: auto;
}
/* With the plate lifted out of flow the frame has nothing left to give it a
   height, so the frame carries the ratio instead. */
html.vb-gsap .vbs-showcase-fullbleed-pills__frame { aspect-ratio: 4 / 5; }
@media (min-width: 48rem) { html.vb-gsap .vbs-showcase-fullbleed-pills__frame { aspect-ratio: 16 / 9; } }
@media (min-width: 72rem) { html.vb-gsap .vbs-showcase-fullbleed-pills__frame { aspect-ratio: 21 / 9; } }