/*
 * WP Lightbox Gallery — Public Styles
 * All templates + lightbox overlay.
 * Uses CSS custom properties set inline by the renderer.
 */

/* ── Reset / base ──────────────────────────────────────── */
.wlg-gallery *,
.wlg-gallery *::before,
.wlg-gallery *::after,
.wlg-lightbox *,
.wlg-lightbox *::before,
.wlg-lightbox *::after {
	box-sizing: border-box;
}

.wlg-gallery ul,
.wlg-gallery ol {
	list-style: none;
	margin: 0;
	padding: 0;
}

.wlg-gallery a {
	text-decoration: none;
	display: block;
	color: inherit;
}

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

/* Errors */
.wlg-error,
.wlg-empty {
	color: #721c24;
	background: #f8d7da;
	border: 1px solid #f5c6cb;
	border-radius: 4px;
	padding: 12px 16px;
	font-style: italic;
}

/* ── Hover effects ─────────────────────────────────────── */
.wlg-item {
	position: relative;
	overflow: hidden;
	border-radius: var(--wlg-radius, 4px);
}

.wlg-item .wlg-img {
	transition: transform 0.3s ease, filter 0.3s ease;
}

/* Zoom */
.wlg-hover-zoom .wlg-item:hover .wlg-img {
	transform: scale(1.07);
}

/* Fade overlay */
.wlg-hover-fade .wlg-item::after {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(0,0,0,0);
	transition: background 0.3s ease;
	pointer-events: none;
	border-radius: inherit;
}
.wlg-hover-fade .wlg-item:hover::after {
	background: rgba(0,0,0,0.35);
}

/* Slide up */
.wlg-hover-slide .wlg-caption {
	transform: translateY(100%);
	transition: transform 0.3s ease;
}
.wlg-hover-slide .wlg-item:hover .wlg-caption {
	transform: translateY(0);
}

/* Caption overlay (shared) */
.wlg-caption {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 10px 12px;
	background: linear-gradient(transparent, rgba(0,0,0,0.65));
	color: #fff;
	font-size: 0.85em;
	line-height: 1.4;
	pointer-events: none;
}

/* Focus ring for keyboard accessibility */
.wlg-link:focus-visible {
	outline: 3px solid #005fcc;
	outline-offset: 2px;
	border-radius: var(--wlg-radius, 4px);
	z-index: 1;
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
	.wlg-item .wlg-img,
	.wlg-caption,
	.wlg-item::after {
		transition: none !important;
	}
}

/* ══════════════════════════════════════════════════════════
   GRID TEMPLATE
══════════════════════════════════════════════════════════ */

.wlg-template-grid .wlg-grid {
	display: grid;
	grid-template-columns: repeat(var(--wlg-columns, 3), 1fr);
	gap: var(--wlg-gap, 10px);
}

.wlg-template-grid .wlg-item {
	aspect-ratio: 1;
}

/* Responsive grid breakpoints */
@media (max-width: 900px) {
	.wlg-template-grid .wlg-grid {
		grid-template-columns: repeat(max(1, calc(var(--wlg-columns, 3) - 1)), 1fr);
	}
}
@media (max-width: 600px) {
	.wlg-template-grid .wlg-grid {
		grid-template-columns: repeat(max(1, calc(var(--wlg-columns, 3) - 2)), 1fr);
	}
}

/* ══════════════════════════════════════════════════════════
   MASONRY TEMPLATE
══════════════════════════════════════════════════════════ */

.wlg-template-masonry .wlg-masonry {
	columns: var(--wlg-columns, 3);
	column-gap: var(--wlg-gap, 10px);
}

.wlg-template-masonry .wlg-item {
	break-inside: avoid;
	margin-bottom: var(--wlg-gap, 10px);
	aspect-ratio: unset;
}

.wlg-template-masonry .wlg-item .wlg-img {
	height: auto;
	object-fit: unset;
}

@media (max-width: 900px) {
	.wlg-template-masonry .wlg-masonry {
		columns: max(1, calc(var(--wlg-columns, 3) - 1));
	}
}
@media (max-width: 600px) {
	.wlg-template-masonry .wlg-masonry {
		columns: max(1, calc(var(--wlg-columns, 3) - 2));
	}
}

/* ══════════════════════════════════════════════════════════
   JUSTIFIED TEMPLATE
   JS sets --wlg-item-width on each item.
══════════════════════════════════════════════════════════ */

.wlg-template-justified .wlg-justified {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wlg-gap, 10px);
	align-items: flex-start;
}

.wlg-template-justified .wlg-item {
	flex: 0 0 auto;
	aspect-ratio: unset;
}

.wlg-template-justified .wlg-item .wlg-img {
	object-fit: cover;
}

/* ══════════════════════════════════════════════════════════
   CAROUSEL TEMPLATE
══════════════════════════════════════════════════════════ */

.wlg-carousel {
	position: relative;
	overflow: hidden;
	user-select: none;
}

.wlg-carousel-viewport {
	overflow: hidden;
}

.wlg-carousel-track {
	display: flex;
	gap: var(--wlg-gap, 10px);
	transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	will-change: transform;
}

.wlg-carousel-slide {
	flex: 0 0 calc((100% - (var(--wlg-columns, 3) - 1) * var(--wlg-gap, 10px)) / var(--wlg-columns, 3));
	min-width: 0;
}

.wlg-carousel-slide .wlg-item {
	aspect-ratio: 4/3;
	height: 100%;
}

.wlg-carousel-btn {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 10;
	background: rgba(0,0,0,0.5);
	color: #fff;
	border: none;
	border-radius: 50%;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background 0.2s, opacity 0.2s;
	padding: 0;
}
.wlg-carousel-btn:hover {
	background: rgba(0,0,0,0.8);
}
.wlg-carousel-btn:disabled {
	opacity: 0.35;
	pointer-events: none;
}
.wlg-carousel-prev { left: 10px; }
.wlg-carousel-next { right: 10px; }

/* Dots */
.wlg-carousel-dots {
	display: flex;
	justify-content: center;
	gap: 6px;
	margin-top: 12px;
}

/* ══════════════════════════════════════════════════════════
   SLIDESHOW TEMPLATE
══════════════════════════════════════════════════════════ */

.wlg-slideshow {
	position: relative;
	overflow: hidden;
}

.wlg-slideshow-viewport {
	position: relative;
	width: 100%;
}

.wlg-slideshow-track {
	position: relative;
	width: 100%;
}

.wlg-slideshow-slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 0.6s ease;
	pointer-events: none;
}
.wlg-slideshow-slide.wlg-slide--active {
	opacity: 1;
	position: relative;
	pointer-events: auto;
}

.wlg-slideshow-slide .wlg-item {
	width: 100%;
	aspect-ratio: 16/9;
}

.wlg-slideshow-slide .wlg-img {
	height: 100%;
	object-fit: cover;
}

.wlg-slideshow-caption {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 16px 20px;
	background: linear-gradient(transparent, rgba(0,0,0,0.7));
	color: #fff;
	pointer-events: none;
}

.wlg-slide-title {
	display: block;
	font-size: 1em;
	font-weight: 700;
	line-height: 1.3;
}

.wlg-slide-desc {
	display: block;
	font-size: 0.85em;
	opacity: 0.85;
}

/* Slideshow nav buttons */
.wlg-slideshow-btn {
	position: absolute;
	z-index: 10;
	background: rgba(0,0,0,0.45);
	color: #fff;
	border: none;
	border-radius: 50%;
	width: 48px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background 0.2s;
	padding: 0;
}
.wlg-slideshow-btn:hover {
	background: rgba(0,0,0,0.75);
}

.wlg-slideshow-prev { top: 50%; left: 14px;  transform: translateY(-50%); }
.wlg-slideshow-next { top: 50%; right: 14px; transform: translateY(-50%); }
.wlg-slideshow-pause { bottom: 14px; right: 14px; transform: none; top: auto; width: 38px; height: 38px; }

.wlg-slideshow-dots {
	position: absolute;
	bottom: 14px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 7px;
}

/* ══════════════════════════════════════════════════════════
   SHARED DOT STYLES
══════════════════════════════════════════════════════════ */

.wlg-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: rgba(255,255,255,0.5);
	border: 2px solid rgba(255,255,255,0.8);
	cursor: pointer;
	padding: 0;
	transition: background 0.2s, transform 0.2s;
}
.wlg-dot:hover {
	background: rgba(255,255,255,0.85);
}
.wlg-dot--active {
	background: #fff;
	transform: scale(1.2);
}

/* Dots on light background (carousel) */
.wlg-carousel-dots .wlg-dot {
	background: #bbb;
	border-color: #888;
}
.wlg-carousel-dots .wlg-dot--active {
	background: #333;
	border-color: #333;
}

/* ══════════════════════════════════════════════════════════
   LIGHTBOX OVERLAY
══════════════════════════════════════════════════════════ */

.wlg-lightbox {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	visibility: hidden;
	pointer-events: none;
}

.wlg-lightbox.wlg-lb--open {
	visibility: visible;
	pointer-events: auto;
}

/* Overlay */
.wlg-lb-overlay {
	position: absolute;
	inset: 0;
	background: var(--wlg-overlay-color, #000);
	opacity: 0;
	transition: opacity 0.3s ease;
}
.wlg-lb--open .wlg-lb-overlay {
	opacity: var(--wlg-overlay-opacity, 0.85);
}

/* Container */
.wlg-lb-container {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: min(92vw, 1200px);
	max-height: 92vh;
	width: 100%;
}

/* ── Animations ──────────────────────────────────────────── */

/* Fade */
.wlg-anim-fade .wlg-lb-container {
	opacity: 0;
	transition: opacity 0.3s ease;
}
.wlg-anim-fade.wlg-lb--open .wlg-lb-container {
	opacity: 1;
}

/* Zoom */
.wlg-anim-zoom .wlg-lb-container {
	opacity: 0;
	transform: scale(0.85);
	transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.wlg-anim-zoom.wlg-lb--open .wlg-lb-container {
	opacity: 1;
	transform: scale(1);
}

/* Slide */
.wlg-anim-slide .wlg-lb-container {
	opacity: 0;
	transform: translateY(40px);
	transition: opacity 0.3s ease, transform 0.3s ease;
}
.wlg-anim-slide.wlg-lb--open .wlg-lb-container {
	opacity: 1;
	transform: translateY(0);
}

/* ── Spinner ─────────────────────────────────────────────── */
.wlg-lb-spinner {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}

.wlg-lb-spinner-ring {
	display: block;
	width: 44px;
	height: 44px;
	border: 4px solid rgba(255,255,255,0.2);
	border-top-color: #fff;
	border-radius: 50%;
	animation: wlg-spin 0.75s linear infinite;
}

@keyframes wlg-spin {
	to { transform: rotate(360deg); }
}

.wlg-lightbox.wlg-lb--loaded .wlg-lb-spinner {
	display: none;
}

/* ── Stage / Image ───────────────────────────────────────── */
.wlg-lb-stage {
	position: relative;
	max-height: calc(92vh - 100px);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
}

.wlg-lb-img {
	max-width: 100%;
	max-height: calc(92vh - 100px);
	width: auto;
	height: auto;
	object-fit: contain;
	border-radius: 3px;
	display: block;
	opacity: 0;
	transition: opacity 0.25s ease;
	box-shadow: 0 10px 40px rgba(0,0,0,0.5);
}

.wlg-lightbox.wlg-lb--loaded .wlg-lb-img {
	opacity: 1;
}

/* ── Caption ─────────────────────────────────────────────── */
.wlg-lb-caption {
	color: #fff;
	text-align: center;
	max-width: 680px;
	padding: 10px 16px 4px;
	min-height: 32px;
}

.wlg-lb-caption-title {
	font-size: 1em;
	font-weight: 600;
	margin: 0 0 4px;
}

.wlg-lb-caption-desc {
	font-size: 0.875em;
	opacity: 0.8;
	margin: 0;
}

/* ── Counter ─────────────────────────────────────────────── */
.wlg-lb-counter {
	position: absolute;
	top: 14px;
	left: 50%;
	transform: translateX(-50%);
	color: rgba(255,255,255,0.75);
	font-size: 0.8em;
	background: rgba(0,0,0,0.4);
	padding: 3px 10px;
	border-radius: 20px;
	white-space: nowrap;
}

/* ── Thumbnail Strip ─────────────────────────────────────── */
.wlg-lb-thumbs {
	width: 100%;
	max-width: 600px;
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: thin;
	scrollbar-color: rgba(255,255,255,0.3) transparent;
	margin-top: 10px;
}

.wlg-lb-thumbs::-webkit-scrollbar {
	height: 4px;
}
.wlg-lb-thumbs::-webkit-scrollbar-thumb {
	background: rgba(255,255,255,0.3);
	border-radius: 2px;
}

.wlg-lb-thumbs-list {
	display: flex;
	gap: 6px;
	padding: 2px 0 6px;
}

.wlg-lb-thumb {
	flex-shrink: 0;
	width: 52px;
	height: 52px;
	border-radius: 3px;
	overflow: hidden;
	cursor: pointer;
	border: 2px solid transparent;
	transition: border-color 0.15s, opacity 0.15s;
	opacity: 0.6;
}
.wlg-lb-thumb:hover,
.wlg-lb-thumb:focus-visible {
	opacity: 1;
	border-color: rgba(255,255,255,0.6);
	outline: none;
}
.wlg-lb-thumb.wlg-lb-thumb--active {
	border-color: #fff;
	opacity: 1;
}
.wlg-lb-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ── Navigation buttons ──────────────────────────────────── */
.wlg-lb-btn {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background: rgba(255,255,255,0.12);
	color: #fff;
	border: none;
	border-radius: 50%;
	width: 52px;
	height: 52px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	padding: 0;
	transition: background 0.2s, transform 0.2s;
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}

.wlg-lb-btn:hover {
	background: rgba(255,255,255,0.25);
}

.wlg-lb-btn:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

.wlg-lb-prev { left: 12px; }
.wlg-lb-next { right: 12px; }

/* Close button — top-right */
.wlg-lb-close {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 44px;
	height: 44px;
	transform: none;
}

/* Disabled state */
.wlg-lb-btn:disabled {
	opacity: 0.25;
	pointer-events: none;
}

/* ── Mobile ──────────────────────────────────────────────── */
@media (max-width: 600px) {
	.wlg-lb-prev { left: 4px; }
	.wlg-lb-next { right: 4px; }
	.wlg-lb-btn { width: 40px; height: 40px; }
	.wlg-lb-close { top: 6px; right: 6px; }
	.wlg-lb-counter { top: 8px; }
}

@media (prefers-reduced-motion: reduce) {
	.wlg-lb-overlay,
	.wlg-lb-container,
	.wlg-lb-img,
	.wlg-carousel-track,
	.wlg-slideshow-slide {
		transition: none !important;
		animation: none !important;
	}
}