.racg-wrapper {
	--racg-columns: 4;
	--racg-columns-mobile: 2;
	--racg-visible-cards: 1;
	--racg-visible-cards-mobile: 1;
	--racg-gap: 16px;
	position: relative;
	box-sizing: border-box;
}

.racg-item {
	box-sizing: border-box;
}

.racg-embed-wrap {
	position: relative;
	width: 100%;
	aspect-ratio: 9 / 16;
	border-radius: 12px;
	overflow: hidden;
	background: #000;
	box-shadow: 0 1px 4px rgba( 0, 0, 0, 0.15 );
}

.racg-iframe-slot {
	position: absolute;
	inset: 0;
}

.racg-iframe-slot iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
	/* Videos are pure ambient playback: no clicks reach them. This also
	   lets carousel drags that start on a video fall through to the track. */
	pointer-events: none;
}

/* ---------- Thumbnail poster (shown until the video is playing) ---------- */

.racg-thumb-cover {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
	border: 0;
	background: #111;
	cursor: default;
	display: block;
	z-index: 2;
	pointer-events: none;
	transition: opacity 0.25s ease;
}

.racg-thumb-cover img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.racg-thumb-cover.racg-thumb-hidden {
	opacity: 0;
	pointer-events: none;
}

/* ---------- GRID LAYOUT ---------- */

.racg-layout-grid .racg-track {
	display: grid;
	grid-template-columns: repeat( var( --racg-columns ), 1fr );
	gap: var( --racg-gap );
}

@media ( max-width: 1024px ) {
	.racg-layout-grid .racg-track {
		grid-template-columns: repeat( min( var( --racg-columns ), 3 ), 1fr );
	}
}

@media ( max-width: 700px ) {
	.racg-layout-grid .racg-track {
		grid-template-columns: repeat( var( --racg-columns-mobile ), 1fr );
	}
}

/* ---------- CAROUSEL LAYOUT ---------- */

.racg-layout-carousel {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
}

.racg-layout-carousel .racg-viewport {
	overflow: hidden;
	flex: 1 1 auto;
	min-width: 0;
	width: 100%;
	box-sizing: border-box;
	padding: 40px 7% 44px;
	max-width: calc( 360px * var( --racg-visible-cards ) );
	margin: 0 auto;
	touch-action: pan-y;
}

.racg-layout-carousel .racg-track {
	/* Cards are absolutely positioned and moved purely with per-card
	   translate3d transforms (set by JS every frame). The invisible
	   .racg-sizer card is the only in-flow child: it gives the track its
	   height and is what card width is measured from. */
	position: relative;
	display: block;
	cursor: grab;
	user-select: none;
	-webkit-user-select: none;
}

.racg-layout-carousel .racg-track:active {
	cursor: grabbing;
}

.racg-layout-carousel .racg-item {
	/* --racg-focus: 0 (far from center) to 1 (perfectly centered). Set live by JS. */
	--racg-focus: 0;
	position: absolute;
	top: 50%;
	left: 0;
	min-width: 0;
	width: calc(
		( 100% - ( var( --racg-visible-cards ) - 1 ) * var( --racg-gap ) ) / var( --racg-visible-cards )
	);
	cursor: grab;
	transform-origin: center center;
	/* transform (position + scale) is set inline by JS each frame;
	   will-change keeps each card on its own GPU layer so the drift is
	   one cheap composite per frame instead of paint work. */
	will-change: transform;
	/* focus 1 -> full size/sharp/opaque (center); each card further out is
	   progressively smaller, blurrier and more transparent. NO transitions:
	   the JS engine drives every frame itself (transitions would lag it). */
	filter: blur( calc( ( 1 - var( --racg-focus ) ) * 5px ) );
	opacity: calc( 0.35 + 0.65 * var( --racg-focus ) );
}

/* The sizer sits in normal flow (invisible) purely to give the track its
   height; it must not pick up the absolute positioning of real cards. */
.racg-layout-carousel .racg-item.racg-sizer {
	position: relative;
	top: auto;
	left: auto;
	margin: 0 auto;
	visibility: hidden;
	opacity: 0;
	filter: none;
	pointer-events: none;
}

@media ( max-width: 700px ) {
	.racg-layout-carousel .racg-viewport {
		max-width: 100%;
		padding: 24px 4% 30px;
	}

	/* Mobile: one large centered card, with only the edges of the two
	   neighbours peeking in to hint there's more on each side. */
	.racg-layout-carousel .racg-item {
		width: 72%;
	}

	/* Float the prev/next arrows over the carousel edges instead of letting
	   them eat horizontal space, so the centre card can stay large. */
	.racg-layout-carousel .racg-nav {
		position: absolute;
		top: 50%;
		transform: translateY( -50% );
		z-index: 5;
	}

	.racg-layout-carousel .racg-nav-prev {
		left: 6px;
	}

	.racg-layout-carousel .racg-nav-next {
		right: 6px;
	}
}

/* Once a video is actually playing, keep that card crisp regardless of focus math. */
.racg-layout-carousel .racg-item.racg-item-playing {
	filter: none;
	opacity: 1;
}

.racg-layout-carousel .racg-item .racg-embed-wrap {
	box-shadow: 0 2px 6px rgba( 0, 0, 0, 0.15 );
	transition: box-shadow 0.2s ease;
}

.racg-layout-carousel .racg-item.racg-item-active .racg-embed-wrap {
	box-shadow: 0 10px 28px rgba( 0, 0, 0, 0.32 );
}

.racg-nav {
	flex: 0 0 auto;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 1px solid #ddd;
	background: #fff;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 1px 3px rgba( 0, 0, 0, 0.15 );
	transition: background 0.15s ease;
	position: relative;
	z-index: 2;
}

.racg-nav:hover {
	background: #f0f0f0;
}

.racg-nav:active {
	background: #e6e6e6;
}

@media ( max-width: 480px ) {
	.racg-nav {
		width: 32px;
		height: 32px;
		font-size: 18px;
	}
}

/* ---------- LOOP FADE VEIL ---------- */

/* Solid-color veil over each tile. JS fades it in at the end of every loop
   cycle (in step with an audio fade), seeks the video back to 0:00 behind it,
   then fades it back out — so the restart is never visible as a hard cut. */
.racg-fade-veil {
	position: absolute;
	inset: 0;
	z-index: 2;
	background: var( --racg-fade-color, #000 );
	opacity: 0;
	pointer-events: none;
	transition: opacity var( --racg-fade-ms, 500ms ) ease;
}

.racg-item-fading .racg-fade-veil {
	opacity: 1;
}

/* ---------- SOUND UI (speaker icon + discover hint) ---------- */

/* Speaker state icon, bottom-right of each tile. pointer-events: none —
   the whole tile is the hover/tap target, the icon is pure affordance. */
.racg-sound-btn {
	position: absolute;
	right: 10px;
	bottom: 10px;
	width: 34px;
	height: 34px;
	padding: 7px;
	box-sizing: border-box;
	border-radius: 50%;
	background: rgba( 0, 0, 0, 0.55 );
	color: #fff;
	z-index: 3;
	pointer-events: none;
	opacity: 0.85;
	transition: background 0.15s ease, opacity 0.15s ease;
}

.racg-sound-btn.racg-sound-on {
	background: rgba( 0, 0, 0, 0.8 );
	opacity: 1;
}

/* Audible tile gets a subtle ring so it's obvious where the sound is from. */
.racg-item-audible .racg-embed-wrap {
	box-shadow: 0 0 0 3px rgba( 255, 255, 255, 0.9 ), 0 10px 28px rgba( 0, 0, 0, 0.35 );
}

/* One subtle "sound exists" hint per block; fades out after the first unmute. */
.racg-sound-hint {
	position: absolute;
	left: 50%;
	bottom: 6px;
	transform: translateX( -50% );
	font-size: 12px;
	line-height: 1;
	color: #444;
	background: rgba( 255, 255, 255, 0.9 );
	padding: 5px 12px;
	border-radius: 999px;
	box-shadow: 0 1px 3px rgba( 0, 0, 0, 0.15 );
	white-space: nowrap;
	z-index: 4;
	pointer-events: none;
	opacity: 1;
	transition: opacity 0.4s ease;
}

.racg-sound-hint-hidden {
	opacity: 0;
}