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

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

.rcg-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 );
}

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

.rcg-iframe-slot iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

/* ---------- Thumbnail / click-to-play cover ---------- */

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

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

.rcg-thumb-cover .rcg-play-icon {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 56px;
	height: 56px;
	transform: translate( -50%, -50% );
	background: rgba( 0, 0, 0, 0.55 );
	border-radius: 50%;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 14px;
	box-sizing: border-box;
	transition: transform 0.15s ease, background 0.15s ease;
}

.rcg-thumb-cover:hover .rcg-play-icon {
	background: rgba( 0, 0, 0, 0.75 );
	transform: translate( -50%, -50% ) scale( 1.08 );
}

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

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

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

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

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

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

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

.rcg-layout-carousel .rcg-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( --rcg-visible-cards ) );
	margin: 0 auto;
	touch-action: pan-y;
}

.rcg-layout-carousel .rcg-track {
	/* position:relative makes the track the offset parent for its cards, so
	   card.offsetLeft is measured from the track's own left edge (which fills
	   the visible viewport) rather than from .rcg-wrapper. Without this the
	   JS centered each card relative to the wrapper origin and the active card
	   landed left of true center by the nav button + gap + viewport padding. */
	position: relative;
	display: flex;
	align-items: center;
	gap: var( --rcg-gap );
	cursor: grab;
	user-select: none;
	-webkit-user-select: none;
}

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

.rcg-layout-carousel .rcg-item {
	/* --rcg-focus: 0 (far from center) to 1 (perfectly centered). Set live by JS. */
	--rcg-focus: 0;
	flex: 0 0 auto;
	min-width: 0;
	width: calc(
		( 100% - ( var( --rcg-visible-cards ) - 1 ) * var( --rcg-gap ) ) / var( --rcg-visible-cards )
	);
	cursor: pointer;
	transform-origin: center center;
	/* focus 1 -> full size/sharp/opaque (center); each card further out is
	   progressively smaller, blurrier and more transparent. */
	transform: scale( calc( 0.5 + 0.5 * var( --rcg-focus ) ) );
	filter: blur( calc( ( 1 - var( --rcg-focus ) ) * 5px ) );
	opacity: calc( 0.35 + 0.65 * var( --rcg-focus ) );
	transition: transform 0.32s cubic-bezier( 0.22, 0.61, 0.36, 1 ),
		filter 0.32s ease, opacity 0.32s ease;
}

/* While actively dragging OR auto-scrolling, drop the per-card transition so
   the scaling tracks the motion frame-by-frame instead of lagging behind it. */
.rcg-layout-carousel.rcg-dragging .rcg-item,
.rcg-layout-carousel.rcg-autoscrolling .rcg-item {
	transition: none;
}

@media ( max-width: 700px ) {
	.rcg-layout-carousel .rcg-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. */
	.rcg-layout-carousel .rcg-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. */
	.rcg-layout-carousel .rcg-nav {
		position: absolute;
		top: 50%;
		transform: translateY( -50% );
		z-index: 5;
	}

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

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

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

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

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

.rcg-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;
}

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

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

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

/* ---------- EXPAND-ON-PLAY (lightbox-style zoom, same element/iframe) ---------- */

.rcg-expand-backdrop {
	position: fixed;
	inset: 0;
	background: rgba( 0, 0, 0, 0 );
	z-index: 9998;
	opacity: 0;
	pointer-events: none;
	transition: background 0.25s ease, opacity 0.25s ease;
}

.rcg-expand-backdrop-visible {
	background: rgba( 0, 0, 0, 0.85 );
	opacity: 1;
	pointer-events: auto;
}

.rcg-expand-placeholder {
	visibility: hidden;
	flex-shrink: 0;
}

.rcg-item-expanded {
	position: fixed !important;
	top: 50%;
	left: 50%;
	transform: translate( -50%, -50% ) scale( 1 ) !important;
	width: min( 92vw, 420px ) !important;
	height: auto;
	max-height: 88vh;
	z-index: 9999;
	filter: none !important;
	opacity: 1 !important;
	box-shadow: 0 20px 60px rgba( 0, 0, 0, 0.5 );
	transition: transform 0.25s ease;
}

.rcg-item-expanded .rcg-embed-wrap {
	box-shadow: none;
}