/**
 * Video Group Carousel — frontend styles (custom 3D coverflow, no Swiper).
 *
 * Cards are absolutely positioned inside a 3D stage; frontend.js sizes them and
 * sets each card's transform from its distance to the centred card. Card and
 * stage dimensions therefore come from JS (they depend on the cards-per-view
 * setting and the widget width) — the values here are only a pre-JS fallback.
 * Colours come from CSS custom properties injected per instance.
 */

.vgc-wrap {
	--vgc-accent: #f5a623;
	--vgc-bg: #0d0d0d;
	--vgc-card: #161616;
	--vgc-text: #f4f4f4;
	--vgc-muted: #9a9a9a;
	--vgc-radius: 16px;
	--vgc-backdrop-opacity: 0.85;
	--vgc-serif: "Playfair Display", "Georgia", "Times New Roman", serif;
	--vgc-dur: 480ms;
	--vgc-ease: cubic-bezier( 0.25, 0.8, 0.25, 1 );

	position: relative;
	overflow: hidden;
	background: var(--vgc-wrap-bg, var(--vgc-bg));
	color: var(--vgc-text);
	/* Padding is settings-driven. The vw cap keeps a large desktop value from
	   crushing the cards on a phone; it never enlarges the chosen value. */
	padding: min( var(--vgc-pad-y, 40px), 10vw ) min( var(--vgc-pad-x, 44px), 8vw );
	border-radius: var(--vgc-wrap-radius, 16px);
	box-sizing: border-box;
	-webkit-font-smoothing: antialiased;
}
.vgc-wrap.vgc-no-bg { background: transparent !important; }

.vgc-wrap *,
.vgc-wrap *::before,
.vgc-wrap *::after { box-sizing: border-box; }

/* Neutralize theme button styling. */
.vgc-wrap button,
.vgc-modal button {
	-webkit-appearance: none;
	appearance: none;
	box-shadow: none;
	text-transform: none;
	letter-spacing: normal;
	font-family: inherit;
	line-height: normal;
}

/* Visibility toggles. */
.vgc-no-arrows .vgc-arrow { display: none; }
.vgc-no-group-caption .vgc-level-groups .vgc-card-caption { display: none; }
.vgc-no-video-caption .vgc-level-videos .vgc-card-caption { display: none; }

.vgc-empty-notice { color: var(--vgc-muted); text-align: center; padding: 40px; }

/* Screen-reader-only live region. */
.vgc-live {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect( 0 0 0 0 );
	clip-path: inset( 50% );
	white-space: nowrap;
	border: 0;
}

/* --------------------------------------------------------------------- *
 *  Stage + track + cards (coverflow)
 * --------------------------------------------------------------------- */
.vgc-stage {
	position: relative;
	width: 100%;
	overflow: hidden;
	perspective: 1700px;
}
/* Pre-JS fallback only; frontend.js sets the real height. */
.vgc-group-stage { min-height: 320px; }
.vgc-video-stage { min-height: 260px; }

.vgc-track {
	position: absolute;
	inset: 0;
	transform-style: preserve-3d;
}

.vgc-card {
	position: absolute;
	top: 50%;
	left: 50%;
	margin: 0;
	padding: 0;
	overflow: hidden;
	border: none;
	border-radius: var(--vgc-radius);
	background: var(--vgc-card) !important;
	background-image: none !important;
	color: inherit;
	text-align: left;
	cursor: pointer;
	container-type: inline-size;          /* card-relative text sizing (cqw) */
	transform-origin: center center;
	backface-visibility: hidden;
	/*
	 * Cards carry NO shadow or glow, in any state. The property is still declared
	 * (as none) because the focus rules below re-assert it: themes commonly force
	 * a coloured box-shadow onto every focused button, and this is what overrides
	 * theirs. Removing the property instead of zeroing it would hand that ring
	 * back to the theme.
	 */
	--vgc-card-shadow: none;
	box-shadow: none;
	transition:
		transform var(--vgc-dur) var(--vgc-ease),
		opacity   var(--vgc-dur) var(--vgc-ease);
	will-change: transform, opacity;
	-webkit-tap-highlight-color: transparent;
}

/* --------------------------------------------------------------------- *
 *  Focus
 *
 *  Themes commonly force a focus indicator onto every button — usually a
 *  blue outline or box-shadow — and their stylesheet loads after this one,
 *  so it wins. Clearing only `outline` was not enough: the ring people see
 *  after clicking an arrow is often a box-shadow. Both are suppressed here.
 *
 *  Nothing is removed for keyboard users: the accent ring below still shows
 *  on :focus-visible, which browsers do not trigger for mouse clicks.
 * --------------------------------------------------------------------- */
.vgc-wrap .vgc-card:focus,
.vgc-wrap .vgc-arrow:focus,
.vgc-wrap .vgc-dot:focus,
.vgc-wrap .vgc-back:focus,
.vgc-modal .vgc-modal-close:focus {
	outline: none !important;
}
/* Themes mark focus three different ways. Outline above, box-shadow and border
   here — a coloured border is what survived the previous pass and showed as a
   thin line around the centred card. */
.vgc-wrap .vgc-card:focus {
	box-shadow: var(--vgc-card-shadow) !important;
	border: none !important;
}
.vgc-wrap .vgc-arrow:focus {
	box-shadow: none !important;
	border: var(--vgc-arrow-bd-w, 0px) solid var(--vgc-arrow-bd, transparent) !important;
}
.vgc-wrap .vgc-dot:focus,
.vgc-wrap .vgc-back:focus {
	box-shadow: none !important;
	border: none !important;
}

/* Keyboard-only ring. Never shown for mouse clicks. */
.vgc-wrap .vgc-card:focus-visible {
	outline: 3px solid var(--vgc-accent) !important;
	outline-offset: 4px;
}

/* --------------------------------------------------------------------- *
 *  Selected card
 *
 *  Marks the card the user last opened, so returning from the video level
 *  shows where they were. A ring rather than the full active treatment, so
 *  it reads as "this is the one you picked" without competing with the
 *  centred card. Drawn inside the card's own rounded box, so it follows the
 *  card's tilt and clips to its corners.
 * --------------------------------------------------------------------- */
.vgc-card.is-selected::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 3;
	border: var(--vgc-sel-width, 3px) solid var(--vgc-sel-color, var(--vgc-accent));
	border-radius: inherit;
	pointer-events: none;
}
/* A selected side card is dimmed like its neighbours; lift its caption so the
   marked card is still readable. */
.vgc-card.is-selected .vgc-card-caption { opacity: 1; }

/* ---- Image ---------------------------------------------------------- */
.vgc-card-media {
	position: absolute;
	inset: 0;
	display: block;
	overflow: hidden;
	background: var(--vgc-card);
	filter: saturate( var(--vgc-dim-sat, 0.62) ) brightness( var(--vgc-dim-bright, 0.62) );
	transition: filter var(--vgc-dur) var(--vgc-ease);
}
.vgc-card.is-active .vgc-card-media { filter: none; }

/* Forced, because themes routinely ship `img { height: auto !important }` or
   their own object-fit, either of which letterboxes the thumbnail inside the
   card instead of filling it. */
.vgc-wrap .vgc-card-media img {
	width: 100% !important;
	height: 100% !important;
	min-width: 0 !important;
	min-height: 0 !important;
	max-width: none !important;
	max-height: none !important;
	object-fit: cover !important;
	object-position: center !important;
	display: block;
}

/* Themes very often add a zoom-on-hover to images inside cards or links. Inside
   this widget that fights the 3D fan — the card is already transformed, so a
   second scale on the image makes it drift and clip. Suppressed here; the
   plugin signals hover through the play badge instead. */
.vgc-wrap .vgc-card:hover .vgc-card-media,
.vgc-wrap .vgc-card:hover .vgc-card-media img,
.vgc-wrap .vgc-card-media:hover img,
.vgc-wrap .vgc-card-media img:hover {
	transform: none !important;
	scale: none !important;
}

/* Dimming veil on the side cards + the scrim that carries the caption. */
.vgc-card-scrim {
	position: absolute;
	inset: 0;
	pointer-events: none;
	/* Two layers: the caption gradient, plus a flat veil that dims the side
	   cards. Both are driven by the Cards settings; the veil is removed on the
	   centred card. */
	background:
		linear-gradient(
			to bottom,
			rgba( var(--vgc-scrim-rgb, 7, 7, 7 ), 0 ) 30%,
			rgba( var(--vgc-scrim-rgb, 7, 7, 7 ), calc( var(--vgc-scrim-op, 0.92 ) * 0.63 ) ) 58%,
			rgba( var(--vgc-scrim-rgb, 7, 7, 7 ), var(--vgc-scrim-op, 0.92 ) ) 84%,
			rgba( var(--vgc-scrim-rgb, 7, 7, 7 ), var(--vgc-scrim-op, 0.92 ) ) 100%
		),
		rgba( var(--vgc-scrim-rgb, 7, 7, 7 ), var(--vgc-dim-op, 0.38 ) );
	transition: background var(--vgc-dur) var(--vgc-ease);
}
.vgc-card.is-active .vgc-card-scrim {
	background: linear-gradient(
		to bottom,
		rgba( var(--vgc-scrim-rgb, 7, 7, 7 ), 0 ) 30%,
		rgba( var(--vgc-scrim-rgb, 7, 7, 7 ), calc( var(--vgc-scrim-op, 0.92 ) * 0.63 ) ) 58%,
		rgba( var(--vgc-scrim-rgb, 7, 7, 7 ), var(--vgc-scrim-op, 0.92 ) ) 84%,
		rgba( var(--vgc-scrim-rgb, 7, 7, 7 ), var(--vgc-scrim-op, 0.92 ) ) 100%
	);
}

/* ---- Caption --------------------------------------------------------- */
.vgc-card-caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	display: block;
	padding: 0 7cqw 7cqw;
	opacity: 0.78;
	transition: opacity var(--vgc-dur) var(--vgc-ease);
}
.vgc-card.is-active .vgc-card-caption { opacity: 1; }

.vgc-card-title {
	display: block;
	font-family: var(--vgc-title-font, var(--vgc-serif));
	font-weight: var(--vgc-title-weight, 500);
	line-height: var(--vgc-title-lh, 1.1);
	letter-spacing: var(--vgc-title-ls, 0.005em);
	text-transform: var(--vgc-title-tt, none);
	color: var(--vgc-title, #fff);
	font-size: clamp( 13px, 12cqw, var(--vgc-title-size-idle, 30px) );
	transition: font-size var(--vgc-dur) var(--vgc-ease);
}
.vgc-card.is-active .vgc-card-title { font-size: clamp( 16px, 14cqw, var(--vgc-title-size, 42px) ); }

.vgc-card-rule {
	display: block;
	width: 26px;
	height: 2px;
	margin: 4cqw 0 3.5cqw;
	background: var(--vgc-accent);
	opacity: 0.85;
	transition: width var(--vgc-dur) var(--vgc-ease);
}
.vgc-card.is-active .vgc-card-rule { width: 42px; }

.vgc-card-desc {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	max-width: 74cqw;                      /* keeps clear of the play button */
	font-family: var(--vgc-desc-font, inherit);
	font-size: clamp( 9px, 5.4cqw, var(--vgc-desc-size, 15px) );
	font-weight: var(--vgc-desc-weight, 400);
	letter-spacing: var(--vgc-desc-ls, 0em);
	text-transform: var(--vgc-desc-tt, none);
	line-height: var(--vgc-desc-lh, 1.55);
	color: var(--vgc-muted);
	transition: color var(--vgc-dur) var(--vgc-ease);
}
.vgc-card.is-active .vgc-card-desc { -webkit-line-clamp: 3; }

/* ---- Play button (centre card only) ---------------------------------- */
.vgc-play {
	position: absolute;
	right: 7cqw;
	bottom: 7cqw;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 13cqw;
	height: 13cqw;
	min-width: 34px;
	min-height: 34px;
	max-width: 54px;
	max-height: 54px;
	border: 1.5px solid rgba( var(--vgc-play-rgb, 255, 255, 255 ), 0.85 );
	border-radius: 50%;
	background: rgba( var(--vgc-play-rgb, 255, 255, 255 ), 0.1 );
	color: var(--vgc-play, #fff);
	opacity: 0;
	transform: scale( 0.7 );
	transition: opacity var(--vgc-dur) var(--vgc-ease), transform var(--vgc-dur) var(--vgc-ease),
		background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
	pointer-events: none;
}
.vgc-card.is-active .vgc-play { opacity: 1; transform: scale( 1 ); }
.vgc-play svg { width: 42%; height: 42%; margin-left: 8%; }

/* Hover fill for the play badge, on both carousels. Declared once, forced, and
   at a specificity nothing in a theme is likely to reach — the badge sits over
   artwork, so a stray dark hover from elsewhere made it disappear rather than
   highlight. Colours are settings; the defaults are the accent with a dark
   glyph. */
.vgc-wrap .vgc-card:hover .vgc-play,
.vgc-wrap .vgc-card.is-active:hover .vgc-play,
.vgc-wrap .vgc-flat .vgc-card:hover .vgc-play {
	background: var(--vgc-play-hover-bg, #f5a623) !important;
	border-color: var(--vgc-play-hover-bg, #f5a623) !important;
	color: var(--vgc-play-hover-icon, #111111) !important;
}

/* Video carousel: every card IS a video, so every card shows its badge and it
   sits in the middle of the thumbnail rather than tucked into a corner. Scoped
   to the video stage, not to the flat look, so it holds in the coverflow look
   too. The group slider keeps its single bottom-right badge on the centred
   card. */
.vgc-video-stage .vgc-play {
	top: 50%;
	left: 50%;
	right: auto;
	bottom: auto;
	opacity: 1;
	transform: translate( -50%, -50% ) scale( 0.9 );
}
.vgc-video-stage .vgc-card.is-active .vgc-play {
	opacity: 1;
	transform: translate( -50%, -50% ) scale( 1 );
}

/* --------------------------------------------------------------------- *
 *  Arrows + dots
 * --------------------------------------------------------------------- */
/* Flex overlay pins prev to the left edge and next to the right edge —
   robust regardless of the 3D stage. */
.vgc-nav {
	position: absolute;
	inset: 0;
	z-index: 200;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 6px;
	pointer-events: none;
}
.vgc-arrow {
	position: static;
	transform: none;
	pointer-events: auto;
	flex: 0 0 auto;
	width: var(--vgc-arrow-size, 42px);
	height: var(--vgc-arrow-size, 42px);
	border-radius: 50%;
	/* box-sizing is border-box inside the widget, so a border never changes the
	   arrow's size. Width defaults to 0 = no border. */
	border: var(--vgc-arrow-bd-w, 0px) solid var(--vgc-arrow-bd, transparent);
	background: var(--vgc-arrow-bg, rgba( 255, 255, 255, 0.12 )) !important;
	color: var(--vgc-arrow-icon, #fff);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}
.vgc-arrow:hover:not( :disabled ) {
	background: var(--vgc-arrow-hover-bg, var(--vgc-accent)) !important;
	color: var(--vgc-arrow-icon-hover, #111);
}
.vgc-wrap .vgc-arrow:focus-visible { outline: 2px solid var(--vgc-accent) !important; outline-offset: 2px; }
.vgc-arrow:disabled { opacity: 0.3; cursor: default; }

.vgc-dots {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 26px;
}
.vgc-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--vgc-dot, rgba( 255, 255, 255, 0.3 ));
	border: none;
	padding: 0;
	cursor: pointer;
	transition: background 0.2s ease, width 0.2s ease, filter 0.2s ease;
}
.vgc-dot:hover { filter: brightness( 1.5 ); }
.vgc-dot.is-active {
	background: var(--vgc-dot-active, var(--vgc-accent));
	width: 22px;
	border-radius: 5px;
}
.vgc-wrap .vgc-dot:focus-visible { outline: 2px solid var(--vgc-accent) !important; outline-offset: 3px; }

/* --------------------------------------------------------------------- *
 *  Level 2 header / states
 * --------------------------------------------------------------------- */
.vgc-videos-head {
	display: flex;
	align-items: center;
	gap: 18px;
	margin-bottom: 20px;
}
.vgc-back {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--vgc-back-bg, rgba( 255, 255, 255, 0.08 ));
	color: var(--vgc-back-color, #f4f4f4);
	border: none;
	border-radius: var(--vgc-back-radius, 30px);
	padding: 8px 16px;
	cursor: pointer;
	font-size: 14px;
	transition: background 0.2s ease, color 0.2s ease;
}
.vgc-back:hover {
	background: var(--vgc-back-hover-bg, var(--vgc-accent));
	color: var(--vgc-back-hover-color, #111);
}
.vgc-wrap .vgc-back:focus-visible { outline: 2px solid var(--vgc-accent) !important; outline-offset: 2px; }
.vgc-videos-title {
	margin: 0;
	font-family: var(--vgc-heading-font, var(--vgc-serif));
	font-size: var(--vgc-heading-size, 26px);
	font-weight: var(--vgc-heading-weight, 500);
	line-height: 1.2;
	color: var(--vgc-heading, var(--vgc-accent));
}

.vgc-loading,
.vgc-error {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--vgc-muted);
}

/* --------------------------------------------------------------------- *
 *  Level 3 — Modal
 * --------------------------------------------------------------------- */
.vgc-modal[hidden] { display: none; }
.vgc-modal {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
}
.vgc-modal-backdrop {
	position: absolute;
	inset: 0;
	background: var(--vgc-backdrop-color, #000);
	opacity: var(--vgc-backdrop-opacity, 0.85);
	backdrop-filter: blur( 2px );
}
.vgc-modal-dialog {
	position: relative;
	width: min( 960px, 100% );
	background: #0a0a0a;
	border-radius: var(--vgc-dialog-radius, 14px);
	overflow: visible;
	animation: vgc-pop 0.25s ease;
}
@keyframes vgc-pop {
	from { transform: scale( 0.94 ); opacity: 0; }
	to { transform: scale( 1 ); opacity: 1; }
}
.vgc-modal .vgc-modal-close {
	position: absolute;
	top: -16px !important;
	right: -16px !important;
	left: auto !important;
	bottom: auto !important;
	z-index: 5;
	width: 40px;
	height: 40px;
	min-width: 0;
	margin: 0;
	padding: 0;
	border-radius: 50% !important;
	border: none !important;
	background: var(--vgc-close-bg, #000) !important;
	background-image: none !important;
	color: var(--vgc-close-color, #fff) !important;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: none;
	transition: background 0.2s ease, color 0.2s ease;
}
.vgc-modal .vgc-modal-close:hover { background: var(--vgc-accent) !important; color: #111 !important; }
/* The lightbox moves focus here on open, so keyboard users must see it. */
.vgc-modal .vgc-modal-close:focus-visible { outline: 2px solid var(--vgc-accent) !important; outline-offset: 3px; }
@media ( max-width: 560px ) {
	.vgc-modal .vgc-modal-close { top: 6px !important; right: 6px !important; }
}
.vgc-modal-media {
	position: relative;
	aspect-ratio: 16 / 9;
	background: #000;
	border-radius: var(--vgc-dialog-radius, 14px);
	overflow: hidden;
}
.vgc-modal-media iframe,
.vgc-modal-media video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: none;
	background: #000;
}
body.vgc-modal-open { overflow: hidden; }

/* --------------------------------------------------------------------- *
 *  Responsive  (card sizing is handled in JS from the settings)
 * --------------------------------------------------------------------- */
@media ( max-width: 900px ) {
	/* Scaled from the setting rather than hardcoded, so the Typography value
	   still governs on tablets. */
	.vgc-videos-title { font-size: calc( var(--vgc-heading-size, 26px) * 0.85 ); }
}
@media ( max-width: 600px ) {
	.vgc-arrow { width: 36px; height: 36px; }
	.vgc-dots { margin-top: 18px; }
}

/* --------------------------------------------------------------------- *
 *  Reduced motion
 * --------------------------------------------------------------------- */
@media ( prefers-reduced-motion: reduce ) {
	.vgc-card,
	.vgc-card-media,
	.vgc-card-scrim,
	.vgc-card-caption,
	.vgc-card-title,
	.vgc-card-rule,
	.vgc-card-desc,
	.vgc-play { transition-duration: 1ms !important; }
	.vgc-modal-dialog { animation: none; }
}