/**
 * Scroll Gallery Widget — scroll-gallery.css  v2.0
 *
 * LAYOUT MODEL:
 *
 *  Desktop:
 *    .sgw-wrapper  — position:relative; normal block flow (tall as all images)
 *    .sgw-gallery-track — flex column; images stack vertically
 *    .sgw-pagination — position:fixed; visible only while wrapper is in viewport (JS controls opacity)
 *
 *  Mobile:
 *    .sgw-wrapper  — position:relative; overflow-y:scroll; height = 100vh - top-offset - pagH (set by JS)
 *    .sgw-gallery-track — flex column; images fill container height
 *    .sgw-pagination — position:sticky; bottom (or top) of scroll container; LAST child
 */

/* ============================================================
   Box-sizing reset
   ============================================================ */
.sgw-wrapper *,
.sgw-wrapper *::before,
.sgw-wrapper *::after {
	box-sizing: border-box;
}

/* ============================================================
   Wrapper
   ============================================================ */
.sgw-wrapper {
	position: relative;
	width: 100%;
	/* overflow visible on desktop so sticky pagination doesn't get clipped */
	overflow: visible;
}

/* Mobile: overflow is set by JS to 'scroll', class added for specificity */
.sgw-wrapper.sgw-mobile-mode {
	overflow-y: scroll;
	overflow-x: hidden;
	-webkit-overflow-scrolling: touch;
}

/* ============================================================
   Gallery Track
   ============================================================ */
.sgw-gallery-track {
	display: flex;
	flex-direction: column;
	gap: 0;         /* Elementor gap selector targets this */
	width: 100%;
}

/* ============================================================
   Image Item
   ============================================================ */
.sgw-image-item {
	position: relative;
	width: 100%;
	height: 100vh;          /* desktop default — overridden by Elementor responsive */
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

/* Inside the mobile scroll container: JS sets height inline */
.sgw-mobile-mode .sgw-image-item {
	/* height set by JS to match container */
	flex-shrink: 0;
}

/* Aspect-ratio override */
.sgw-image-item[style*="aspect-ratio"] {
	height: auto;
}

.sgw-image-item img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;              /* Elementor override */
	object-position: center center; /* Elementor override */
	max-width: none;
	transition: transform 0.4s ease;
	will-change: transform;
}

/* Lightbox trigger */
.sgw-lightbox-trigger {
	display: block;
	width: 100%;
	height: 100%;
	cursor: zoom-in;
}

.sgw-lightbox-trigger:focus-visible {
	outline: 2px solid #000;
	outline-offset: 2px;
}

/* ============================================================
   Lazy-load shimmer
   ============================================================ */
.sgw-lazy {
	background: linear-gradient( 90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75% );
	background-size: 200% 100%;
	animation: sgw-shimmer 1.4s infinite;
}

@keyframes sgw-shimmer {
	0%   { background-position:  200% 0; }
	100% { background-position: -200% 0; }
}

/* ============================================================
   Pagination — base
   ============================================================ */
.sgw-pagination {
	display: flex;
	align-items: center;
	z-index: 10;
	pointer-events: auto;
	/* Smooth opacity transitions when entering/leaving viewport (JS driven) */
	transition: opacity 0.3s ease;
}

/* Desktop: vertical column */
.sgw-pagination.sgw-vertical {
	flex-direction: column;
}

/* Mobile: horizontal row */
.sgw-pagination.sgw-horizontal {
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
}

/* RTL: mirror horizontal row */
.sgw-rtl .sgw-pagination.sgw-horizontal {
	flex-direction: row-reverse;
}

/* ============================================================
   Desktop pagination — fixed position (JS controls opacity)
   Stays vertically centred while the tall gallery scrolls.
   JS sets position:fixed and side/offset, then watches the
   wrapper with IntersectionObserver to show/hide.
   ============================================================ */
.sgw-desktop-mode .sgw-pagination.sgw-vertical {
	/* JS overrides position:fixed inline; this just provides fallback */
	position: fixed;
}

/* ============================================================
   Mobile pagination — sticky inside scroll container
   Must be the LAST child of .sgw-wrapper (JS moves it there).
   ============================================================ */
.sgw-mobile-mode .sgw-pagination.sgw-horizontal {
	position: sticky;
	/* top/bottom set by JS inline */
	left: 0;
	right: 0;
	width: 100%;
	padding: 6px 0;
	background: transparent; /* override if you want a pill background */
}

/* ============================================================
   Bullets
   ============================================================ */
.sgw-bullet {
	display: block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: rgba( 0, 0, 0, 0.3 );
	border: none;
	padding: 0;
	cursor: pointer;
	transition: all 300ms ease;
	outline-offset: 3px;
	flex-shrink: 0;
}

.sgw-bullet:focus-visible {
	outline: 2px solid currentColor;
}

.sgw-bullet:hover {
	background-color: rgba( 0, 0, 0, 0.6 );
	transform: scale( 1.2 );
}

.sgw-bullet.sgw-active {
	background-color: #000;
	width: 10px;
	height: 10px;
}

/* Spacing — vertical */
.sgw-pagination.sgw-vertical .sgw-bullet {
	margin-bottom: 8px; /* Elementor override */
}
.sgw-pagination.sgw-vertical .sgw-bullet:last-child {
	margin-bottom: 0;
}

/* Spacing — horizontal */
.sgw-pagination.sgw-horizontal .sgw-bullet {
	margin-inline-end: 8px; /* Elementor override */
}
.sgw-pagination.sgw-horizontal .sgw-bullet:last-child {
	margin-inline-end: 0;
}

/* ============================================================
   Lightbox
   ============================================================ */
.sgw-lightbox-overlay {
	position: fixed;
	inset: 0;
	z-index: 99999;
	background: rgba( 0, 0, 0, 0 );
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.3s ease;
	cursor: zoom-out;
}

.sgw-lightbox-overlay.sgw-lightbox-visible {
	background: rgba( 0, 0, 0, 0.92 );
}

.sgw-lightbox-inner {
	position: relative;
	max-width: 90vw;
	max-height: 90vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	cursor: default;
	opacity: 0;
	transform: scale( 0.96 );
	transition: opacity 0.3s ease, transform 0.3s ease;
}

.sgw-lightbox-overlay.sgw-lightbox-visible .sgw-lightbox-inner {
	opacity: 1;
	transform: scale( 1 );
}

.sgw-lightbox-img {
	max-width: 90vw;
	max-height: 85vh;
	object-fit: contain;
	display: block;
	border: none;
	user-select: none;
}

.sgw-lightbox-close {
	position: absolute;
	top: -2.5rem;
	inset-inline-end: 0;
	background: none;
	border: none;
	color: #fff;
	font-size: 2rem;
	line-height: 1;
	cursor: pointer;
	padding: 0.25rem 0.5rem;
	transition: opacity 0.2s;
	z-index: 1;
}

.sgw-lightbox-close:hover {
	opacity: 0.7;
}

.sgw-lightbox-close:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

.sgw-lightbox-caption {
	color: rgba( 255, 255, 255, 0.7 );
	font-size: 0.875rem;
	margin-top: 0.75rem;
	text-align: center;
	max-width: 60ch;
}

/* ============================================================
   Editor placeholder
   ============================================================ */
.sgw-placeholder {
	width: 100%;
	min-height: 200px;
	background: #f7f7f7;
	border: 2px dashed #ccc;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 2rem;
	text-align: center;
	color: #666;
	font-family: sans-serif;
	font-size: 0.9rem;
}

/* ============================================================
   Mobile  ≤ 768px
   (JS handles the container height; these are CSS-only defaults)
   ============================================================ */
@media ( max-width: 768px ) {

	/* Default desktop height override — JS will also set inline height */
	.sgw-image-item {
		height: 60vh;
	}

	.sgw-lightbox-img {
		max-width: 95vw;
		max-height: 80vh;
	}

	.sgw-lightbox-close {
		top: -2rem;
		font-size: 1.5rem;
	}
}

/* ============================================================
   Tablet  769px – 1024px
   ============================================================ */
@media ( min-width: 769px ) and ( max-width: 1024px ) {
	.sgw-image-item {
		height: 70vh;
	}
}

/* ============================================================
   Reduced motion
   ============================================================ */
@media ( prefers-reduced-motion: reduce ) {
	.sgw-bullet,
	.sgw-image-item img,
	.sgw-lightbox-overlay,
	.sgw-lightbox-inner,
	.sgw-pagination {
		transition: none !important;
		animation:  none !important;
	}
}

/* ============================================================
   RTL misc
   ============================================================ */
.sgw-rtl .sgw-lightbox-close {
	inset-inline-end: 0;
	inset-inline-start: auto;
}