/* Vimeo Showcase Gallery — front-end styles */

.vsg-gallery {
	--vsg-radius: 10px;
	--vsg-gap: 14px;
	--vsg-bg: transparent;
	--vsg-panel: #16181d;
	--vsg-text: #f4f5f7;
	--vsg-muted: #9aa0ab;
	--vsg-accent: #ff5a3c;
	--vsg-thumb-active: var(--vsg-accent);
	--vsg-thumb-w: 200px;
	--vsg-shadow: 0 10px 40px rgba(0,0,0,.35);

	margin: 0 auto;
	box-sizing: border-box;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: var(--vsg-text);
	background: var(--vsg-bg);
}
.vsg-gallery *,
.vsg-gallery *::before,
.vsg-gallery *::after { box-sizing: border-box; }

/* ---- Main viewer ---- */
.vsg-viewer {
	position: relative;
	border-radius: var(--vsg-radius);
	overflow: hidden;
	background: #000;
	box-shadow: var(--vsg-shadow);
}
.vsg-player {
	position: relative;
	width: 100%;
}
.vsg-player iframe {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	border: 0;
}

/* Aspect ratios drive the player height */
.vsg-aspect-16-9 .vsg-player { aspect-ratio: 16 / 9; }
.vsg-aspect-4-3  .vsg-player { aspect-ratio: 4 / 3; }
.vsg-aspect-21-9 .vsg-player { aspect-ratio: 21 / 9; }

.vsg-now-title {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	padding: 28px 18px 14px;
	font-size: 1.05rem;
	font-weight: 600;
	letter-spacing: .2px;
	background: linear-gradient(to top, rgba(0,0,0,.78), rgba(0,0,0,0));
	pointer-events: none;
}

/* ---- Slider ---- */
.vsg-slider {
	position: relative;
	margin-top: var(--vsg-gap);
	display: flex;
	align-items: center;
	gap: 6px;
}
.vsg-track {
	list-style: none;
	margin: 0;
	padding: 4px 2px;
	display: flex;
	gap: var(--vsg-gap);
	overflow-x: auto;
	scroll-behavior: smooth;
	scrollbar-width: thin;
	-webkit-overflow-scrolling: touch;
	flex: 1;
}
.vsg-track::-webkit-scrollbar { height: 6px; }
.vsg-track::-webkit-scrollbar-thumb { background: var(--vsg-muted); border-radius: 6px; }

.vsg-thumb {
	flex: 0 0 var(--vsg-thumb-w);
	width: var(--vsg-thumb-w);
	cursor: pointer;
	transition: transform .18s ease, opacity .18s ease;
	opacity: .72;
}
.vsg-thumb:hover { opacity: 1; transform: translateY(-2px); }
.vsg-thumb:focus-visible { outline: 2px solid var(--vsg-accent); outline-offset: 3px; border-radius: var(--vsg-radius); }
.vsg-thumb.is-active { opacity: 1; }

.vsg-thumb-img {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	background-size: cover;
	background-position: center;
	background-color: #222;
	border-radius: 8px;
	border: 2px solid transparent;
	transition: border-color .18s ease;
}
.vsg-thumb.is-active .vsg-thumb-img {
	border-color: var(--vsg-thumb-active);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--vsg-thumb-active) 30%, transparent);
}

.vsg-playmark {
	position: absolute;
	inset: 0;
	margin: auto;
	width: 0; height: 0;
	border-style: solid;
	border-width: 9px 0 9px 15px;
	border-color: transparent transparent transparent rgba(255,255,255,.92);
	opacity: 0;
	transition: opacity .18s ease;
	filter: drop-shadow(0 1px 2px rgba(0,0,0,.6));
}
.vsg-thumb:hover .vsg-playmark,
.vsg-thumb.is-active .vsg-playmark { opacity: 1; }

.vsg-dur {
	position: absolute;
	right: 6px; bottom: 6px;
	padding: 1px 6px;
	font-size: .72rem;
	font-weight: 600;
	color: #fff;
	background: rgba(0,0,0,.72);
	border-radius: 4px;
}

.vsg-thumb-title {
	display: block;
	margin-top: 8px;
	font-size: .82rem;
	line-height: 1.3;
	color: var(--vsg-muted);
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
.vsg-thumb.is-active .vsg-thumb-title { color: var(--vsg-text); }

/* ---- Arrows ---- */
.vsg-arrow {
	flex: 0 0 auto;
	width: 34px; height: 34px;
	border: 0;
	border-radius: 50%;
	background: var(--vsg-panel);
	color: var(--vsg-text);
	font-size: 1.4rem;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2px 8px rgba(0,0,0,.3);
	transition: background .15s ease, transform .15s ease;
}
.vsg-arrow:hover { transform: scale(1.08); }
.vsg-arrow:focus-visible { outline: 2px solid var(--vsg-accent); outline-offset: 2px; }

/* ---- Thumbnail size variants ---- */
.vsg-thumbs-small  { --vsg-thumb-w: 140px; }
.vsg-thumbs-medium { --vsg-thumb-w: 200px; }
.vsg-thumbs-large  { --vsg-thumb-w: 280px; }

/* ================= DESIGNS ================= */

/* Dark */
.vsg-design-dark {
	--vsg-bg: #0d0e11;
	--vsg-panel: #1c1f26;
	--vsg-text: #f4f5f7;
	--vsg-muted: #8b919c;
	--vsg-accent: #4f8cff;
	padding: 18px;
	border-radius: 14px;
}

/* Light */
.vsg-design-light {
	--vsg-bg: #ffffff;
	--vsg-panel: #f0f1f4;
	--vsg-text: #1a1c20;
	--vsg-muted: #6b7280;
	--vsg-accent: #2563eb;
	--vsg-shadow: 0 8px 28px rgba(20,20,40,.12);
	padding: 18px;
	border-radius: 14px;
	border: 1px solid #e6e8ec;
}
.vsg-design-light .vsg-arrow { box-shadow: 0 2px 8px rgba(0,0,0,.12); }

/* Minimal — no chrome, edge to edge */
.vsg-design-minimal {
	--vsg-bg: transparent;
	--vsg-text: inherit;
	--vsg-muted: #888;
	--vsg-accent: #111;
	--vsg-gap: 10px;
	--vsg-radius: 4px;
	--vsg-shadow: none;
}
.vsg-design-minimal .vsg-thumb-img { border-radius: 3px; }
.vsg-design-minimal .vsg-arrow {
	background: transparent;
	box-shadow: none;
	color: currentColor;
	border: 1px solid currentColor;
}

/* Cinematic — letterboxed, warm glow */
.vsg-design-cinematic {
	--vsg-bg: #07080a;
	--vsg-panel: #15171c;
	--vsg-text: #f6efe6;
	--vsg-muted: #a79a8c;
	--vsg-accent: #e8a33d;
	--vsg-radius: 0;
	--vsg-shadow: 0 0 60px rgba(232,163,61,.12), 0 18px 50px rgba(0,0,0,.6);
	padding: 32px 26px;
	background: radial-gradient(120% 140% at 50% 0%, #14151a 0%, #07080a 70%);
}
.vsg-design-cinematic .vsg-viewer { border: 1px solid rgba(232,163,61,.18); }
.vsg-design-cinematic .vsg-now-title {
	font-family: Georgia, "Times New Roman", serif;
	letter-spacing: .5px;
}
.vsg-design-cinematic .vsg-thumb-img { border-radius: 2px; }

/* ---- Admin-visible error notice ---- */
.vsg-error {
	padding: 12px 16px;
	border-left: 4px solid #d63638;
	background: #fcf0f1;
	color: #8a1f21;
	font-size: .9rem;
	border-radius: 4px;
}

/* ---- Responsive ---- */
@media (max-width: 600px) {
	.vsg-design-dark,
	.vsg-design-light,
	.vsg-design-cinematic { padding: 12px; }

	.vsg-thumbs-large  { --vsg-thumb-w: 200px; }
	.vsg-thumbs-medium { --vsg-thumb-w: 150px; }
	.vsg-thumbs-small  { --vsg-thumb-w: 116px; }

	.vsg-arrow { display: none; } /* swipe on mobile */
}

@media (prefers-reduced-motion: reduce) {
	.vsg-track { scroll-behavior: auto; }
	.vsg-thumb { transition: none; }
}