/*
 * WC Smart Gallery — Stylesheet
 * Target: < 5 KB minified
 * No external fonts. No global resets. Zero dependencies.
 */

/* =========================================================
   Custom properties (theming hooks)
   ========================================================= */
.wcsg-gallery {
	--wcsg-accent: #0071a1;
	--wcsg-thumb-size: 75px;
	--wcsg-arrow-size: 40px;
	--wcsg-radius: 4px;
	--wcsg-transition: 200ms ease;
}

/* =========================================================
   Gallery wrapper
   ========================================================= */
.wcsg-gallery {
	position: relative;
	width: 100%;
	box-sizing: border-box;
	outline: none;
}

/* =========================================================
   Main viewport
   ========================================================= */
.wcsg-main-viewport {
	position: relative;
	width: 100%;
	overflow: hidden;
	background: #f5f5f5;
	border-radius: var(--wcsg-radius);
	cursor: zoom-in;
	aspect-ratio: 1 / 1;
}


/* =========================================================
   Slides
   ========================================================= */
.wcsg-slide {
	display: none;
	width: 100%;
}

.wcsg-slide--active {
	display: block;
}

.wcsg-slide img,
.wcsg-main-img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: contain;
	border-radius: var(--wcsg-radius);
}

/* =========================================================
   Video slide
   ========================================================= */
.wcsg-slide--video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	cursor: default;
}

/* When the video slide is active, keep absolute positioning.
   .wcsg-slide--active sets display:block which would return the element
   to normal flow — this rule re-applies the overlay positioning at higher
   specificity (two classes vs one). */
.wcsg-slide--video.wcsg-slide--active {
	display: block;
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.wcsg-video-facade {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	cursor: pointer;
	background: #000;
	border-radius: var(--wcsg-radius);
	overflow: hidden;
}

.wcsg-video-facade__thumb {
	/* Fill and crop to the square viewport — zooms into the centre of the thumbnail */
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	opacity: 0.85;
	transition: opacity var(--wcsg-transition);
	border-radius: 0;
}

.wcsg-video-facade:hover .wcsg-video-facade__thumb,
.wcsg-video-facade:focus .wcsg-video-facade__thumb {
	opacity: 1;
}

.wcsg-video-facade__play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	pointer-events: none;
}

.wcsg-play-bg {
	fill: #212121;
	fill-opacity: 0.8;
	transition: fill var(--wcsg-transition), fill-opacity var(--wcsg-transition);
}

.wcsg-play-arrow {
	fill: #fff;
}

.wcsg-video-facade:hover .wcsg-play-bg,
.wcsg-video-facade:focus .wcsg-play-bg {
	fill: #f00;
	fill-opacity: 1;
}

.wcsg-video-facade iframe {
	/* Fill the square viewport completely — no letterboxing, no YouTube border */
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* =========================================================
   Prev / Next arrows
   ========================================================= */
.wcsg-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	width: var(--wcsg-arrow-size);
	height: var(--wcsg-arrow-size);
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.15);
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: 50%;
	cursor: pointer;
	color: rgba(255, 255, 255, 0.9);
	padding: 0;
	transition: all var(--wcsg-transition);
	-webkit-tap-highlight-color: transparent;
	outline: none;
}

.wcsg-arrow:focus { outline: none; }

.wcsg-arrow:hover,
.wcsg-arrow:focus-visible {
	background: rgba(255, 255, 255, 0.85);
	border: 1px solid rgba(255, 255, 255, 0.9);
	color: #333;
	outline: none;
}

.wcsg-arrow--prev { left: 8px; }
.wcsg-arrow--next { right: 8px; }

/* =========================================================
   Thumbnail strip
   wcsg-thumb size: 150×150 — displayed at 75px (2× retina)
   ========================================================= */
.wcsg-thumbs {
	display: flex;
	flex-wrap: nowrap;
	gap: 6px;
	overflow-x: auto;
	padding: 8px 0 4px;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	scrollbar-color: #ccc transparent;
}

.wcsg-thumbs::-webkit-scrollbar { height: 4px; }
.wcsg-thumbs::-webkit-scrollbar-thumb { background: #ccc; border-radius: 2px; }

.wcsg-thumb {
	flex: 0 0 var(--wcsg-thumb-size);
	width: var(--wcsg-thumb-size);
	height: var(--wcsg-thumb-size);
	padding: 0;
	border: 3px solid transparent;
	border-radius: var(--wcsg-radius);
	cursor: pointer;
	background: #f5f5f5;
	overflow: hidden;
	transition: border-color var(--wcsg-transition);
	position: relative;
	outline: none;
	-webkit-tap-highlight-color: transparent;
}

.wcsg-thumb:focus { outline: none; }

.wcsg-thumb:hover,
.wcsg-thumb:focus-visible {
	border-color: var(--wcsg-accent);
	outline: none;
}

.wcsg-thumb--active { border-color: var(--wcsg-accent); }

.wcsg-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.wcsg-thumb__video-badge {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
}

/* =========================================================
   Lightbox
   ========================================================= */
.wcsg-lightbox {
	position: fixed;
	inset: 0;
	z-index: 99999;
	background: rgba(0, 0, 0, 0.97);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: visible;
}

.wcsg-lightbox[hidden] { display: none; }

/* position:relative so spinner and full-res img overlay the placeholder. */
.wcsg-lightbox__img-wrap {
	position: relative;
	max-width: 95vw;
	max-height: 95vh;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* =========================================================
   Lightbox image loading — placeholder → spinner → full-res
   ========================================================= */
.wcsg-lb-spinner {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 36px;
	height: 36px;
	border: 3px solid rgba(255, 255, 255, 0.2);
	border-top-color: #fff;
	border-radius: 50%;
	animation: wcsg-spin 0.7s linear infinite;
	z-index: 2;
	pointer-events: none;
}

@keyframes wcsg-spin {
	to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Low-res placeholder — shown immediately, blurred to signal loading */
.wcsg-lb-placeholder {
	display: block;
	max-width: 90vw;
	max-height: 85vh;
	object-fit: contain;
	border-radius: var(--wcsg-radius);
	opacity: 0.45;
	filter: blur(6px);
	transition: opacity var(--wcsg-transition);
}

/* Full-res — overlays placeholder, hidden until loaded */
.wcsg-lb-full {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
	border-radius: var(--wcsg-radius);
	transition: opacity var(--wcsg-transition);
}

.wcsg-lb-full--loading { opacity: 0; }

/* =========================================================
   Lightbox controls
   ========================================================= */

/* Close — minimum 48×48px touch target */
.wcsg-lightbox__close {
	position: absolute;
	top: 16px;
	right: 16px;
	min-width: 48px;
	min-height: 48px;
	width: 48px;
	height: 48px;
	background: rgba(255, 255, 255, 0.15);
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 50%;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	padding: 0;
	transition: background var(--wcsg-transition);
	z-index: 2;
}

.wcsg-lightbox__close:hover,
.wcsg-lightbox__close:focus-visible {
	background: rgba(255, 255, 255, 0.3);
	outline: 2px solid #fff;
	outline-offset: 2px;
}

/* Prev/Next — minimum 52×52px touch target */
.wcsg-lightbox__prev,
.wcsg-lightbox__next {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	min-width: 52px;
	min-height: 52px;
	width: 52px;
	height: 52px;
	background: rgba(255, 255, 255, 0.2);
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 50%;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	padding: 0;
	transition: background var(--wcsg-transition);
	z-index: 2;
}

.wcsg-lightbox__prev { left: 40px; }
.wcsg-lightbox__next { right: 40px; }

.wcsg-lightbox__prev:hover,
.wcsg-lightbox__next:hover,
.wcsg-lightbox__prev:focus-visible,
.wcsg-lightbox__next:focus-visible {
	background: rgba(255, 255, 255, 0.5);
	outline: 2px solid #fff;
	outline-offset: 2px;
}

/* =========================================================
   Thumbnail navigation arrows (desktop only, injected by JS)
   ========================================================= */
.wcsg-thumb-nav {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	flex-shrink: 0;
	background: rgba(255, 255, 255, 0.75);
	border: 1px solid rgba(0, 0, 0, 0.15);
	border-radius: 50%;
	color: #333;
	cursor: pointer;
	transition: background 200ms ease;
	outline: none;
	-webkit-tap-highlight-color: transparent;
}

.wcsg-thumb-nav:hover { background: rgba(255, 255, 255, 1); }
.wcsg-thumb-nav:focus { outline: none; }
.wcsg-thumb-nav[hidden] { display: none !important; }

/* =========================================================
   Responsive
   ========================================================= */
/* Lightbox arrows hidden on mobile — swipe to navigate instead. */
@media (max-width: 991px) {
	.wcsg-lightbox__prev,
	.wcsg-lightbox__next { display: none; }
}

/* Hide thumbnail scrollbar on all screen sizes — scroll arrows handle desktop navigation. */
.wcsg-thumbs { scrollbar-width: none; -ms-overflow-style: none; }
.wcsg-thumbs::-webkit-scrollbar { display: none; }

@media (min-width: 600px) {
	.wcsg-main-viewport { aspect-ratio: 4 / 3; }
	.wcsg-gallery { --wcsg-thumb-size: 80px; }
}

@media (min-width: 992px) {
	.wcsg-main-viewport { aspect-ratio: 1 / 1; }
	.wcsg-gallery { --wcsg-thumb-size: 90px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	.wcsg-gallery { --wcsg-transition: 0ms; }
	.wcsg-lb-spinner { animation: none; display: none; }
}