/**
 * css/components/reel.css — Website 2.0 shared component library (#122)
 *
 * Rust 16:9 video block. The rust box is a load fallback that shows
 * behind the Vimeo iframe; caption + outline CTA sit below
 * (space-between, align-items:flex-end). Reference: media.html `.reel`
 * / `.reelfoot`.
 *
 * Embed the Vimeo player at `?title=0&byline=0&portrait=0&controls=1&dnt=1`
 * (controls on so viewers get mute/volume; dnt=1 = do-not-track) — see
 * blocks/cg/reel.php.
 *
 * Tokens only — no raw hex, no @layer, no !important.
 */

.cg-reel {
	position: relative;
	margin-top: 64px;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var( --accent );
}

/* Services variant (#125) — ink fallback + hairline border, in place of
   the plain rust fallback box. Reference: services.html `.reel`. */
.cg-reel--bordered {
	background: var( --cg-ink );
	border: var( --hairline ) solid var( --rule-on-dark );
}

.cg-reel__video {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

.cg-reelfoot {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 60px;
	margin-top: 46px;
}

.cg-reelfoot__cap {
	max-width: 760px;
}

@media ( max-width: 1024px ) {
	.cg-reelfoot {
		flex-direction: column;
		align-items: flex-start;
		gap: 28px;
	}
}

/* divider option (Tech & AI, #124) — trailing full-bleed hairline for
   back-to-back dark bands with no colour change between them. Reference:
   tech-ai.html reel `.sec{padding-bottom:0}` + spacer + `.fbline.onDark`. */
.cg-reel__spacer {
	height: clamp( 36px, 4vw, 56px );
}

.cg-reel__fbline {
	height: 0;
	border-top: var( --hairline ) solid var( --rule-on-dark );
	margin-inline: calc( -1 * var( --pad-x ) );
}

/* bare-eyebrow (no split header) tighter top margins — Tech & AI, #124.
   Reference: tech-ai.html `.reel{margin-top:56px}`/`.reelfoot{margin-
   top:40px}`, vs the 64px/46px standard (Media/Services, which always
   pair their reel with a full eyebrow+statement header). */
.cg-reel--tight {
	margin-top: 56px;
}

.cg-reelfoot--tight {
	margin-top: 40px;
}