/**
 * Video Group Carousel — image gallery styles.
 *
 * Deliberately thin. The gallery reuses the video carousel's stage, track, card,
 * scrim, caption, arrow and dot rules verbatim (that is what makes it look like
 * the group slider), so this file only adds what is genuinely gallery-specific:
 * the image badge placement and the image lightbox.
 *
 * Every colour here resolves to a --vgc-* custom property set from the shared
 * settings, so galleries follow the same colour scheme as the video carousels.
 */

/* Pre-JS fallback only; the coverflow engine sets the real height. */
.vgc-gimage-stage { min-height: 300px; }

/* Caption visibility toggle (mirrors the group/video toggles). */
.vgc-no-image-caption .vgc-level-images .vgc-card-caption { display: none; }

/* No badge over gallery images. The whole card is the click target, so an icon
   in the middle of a photograph would only cover the subject. Belt-and-braces:
   the markup no longer emits one, and this makes sure a cached older page cannot
   show one either. */
.vgc-gimage-stage .vgc-play { display: none; }

/* --------------------------------------------------------------------- *
 *  Lightbox
 * --------------------------------------------------------------------- */
/*
 * The shared dialog is a fixed 16:9 box built for a video player. An image has
 * its own shape, so the dialog shrink-wraps the image instead and the chrome
 * moves to the image itself.
 */
.vgc-gal-dialog {
	width: auto;
	max-width: min( 1280px, 92vw );
	background: transparent;
	box-shadow: none;
}
.vgc-gal-media {
	position: relative;
	aspect-ratio: auto;
	background: transparent;
	overflow: visible;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 120px;
}
.vgc-gal-media img {
	display: block;
	width: auto;
	height: auto;
	max-width: min( 1280px, 92vw );
	max-height: 78vh;
	border-radius: var(--vgc-dialog-radius, 14px);
	background: #000;
	box-shadow: none;
}

/* ---- Lightbox arrows ------------------------------------------------- */
.vgc-lb-arrow {
	position: absolute;
	top: 50%;
	transform: translateY( -50% );
	z-index: 4;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--vgc-arrow-size, 42px);
	height: var(--vgc-arrow-size, 42px);
	padding: 0;
	border: var(--vgc-arrow-bd-w, 0) solid var(--vgc-arrow-bd, #fff);
	border-radius: 50%;
	background: var(--vgc-arrow-bg, #1f1f1f);
	color: var(--vgc-arrow-icon, #fff);
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}
.vgc-lb-arrow[hidden] { display: none; }
.vgc-lb-prev { left: -62px; }
.vgc-lb-next { right: -62px; }
.vgc-lb-arrow:hover:not( :disabled ) {
	background: var(--vgc-arrow-hover-bg, var(--vgc-accent, #f5a623));
	color: var(--vgc-arrow-icon-hover, #111);
}
.vgc-lb-arrow:disabled { opacity: 0.3; cursor: default; }
.vgc-gal-modal .vgc-lb-arrow:focus-visible {
	outline: 2px solid var(--vgc-accent, #f5a623) !important;
	outline-offset: 2px;
}

/* Not enough room outside the image — bring the arrows inside its edges. */
@media ( max-width: 1100px ) {
	.vgc-lb-prev { left: 8px; }
	.vgc-lb-next { right: 8px; }
	.vgc-lb-arrow { background: rgba( 0, 0, 0, 0.55 ); }
}

/* ---- Caption + counter ---------------------------------------------- */
.vgc-lb-bar {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 20px;
	margin-top: 14px;
	color: var(--vgc-muted, #9a9a9a);
}
.vgc-lb-bar[hidden] { display: none; }
.vgc-lb-cap {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 3px;
}
.vgc-lb-title {
	font-family: var(--vgc-heading-font, var(--vgc-serif));
	font-size: calc( var(--vgc-heading-size, 26px) * 0.7 );
	font-weight: var(--vgc-heading-weight, 500);
	line-height: 1.25;
	color: var(--vgc-title, #fff);
}
.vgc-lb-title:empty,
.vgc-lb-desc:empty { display: none; }
.vgc-lb-desc {
	font-family: var(--vgc-desc-font, inherit);
	font-size: var(--vgc-desc-size, 15px);
	line-height: var(--vgc-desc-lh, 1.55);
	color: var(--vgc-muted, #9a9a9a);
}
.vgc-lb-count {
	flex: 0 0 auto;
	font-size: 13px;
	letter-spacing: 0.04em;
	color: var(--vgc-muted, #9a9a9a);
	white-space: nowrap;
}

@media ( max-width: 600px ) {
	.vgc-gal-media img { max-height: 66vh; }
	.vgc-lb-arrow { width: 36px; height: 36px; }
	.vgc-lb-bar {
		flex-direction: column;
		align-items: flex-start;
		gap: 6px;
		margin-top: 10px;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.vgc-lb-arrow { transition-duration: 1ms !important; }
}