/**
 * Woo Elementor Product Gallery — front-end styles.
 * Pure CSS Grid, CSS custom properties for Elementor-controlled values.
 */

.wepg-gallery {
	--wepg-gap: 12px;
	--wepg-radius: 16px;
	--wepg-featured-width: 60%;
	position: relative;
	width: 100%;
}

.wepg-grid {
	display: grid;
	gap: var(--wepg-gap);
	width: 100%;
}

.wepg-tile {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	/* Grid items default to min-height/min-width:auto, which lets a tile
	   shrink to fit its content (the image's own aspect-ratio-driven
	   height) instead of stretching to fill its assigned track. This is
	   most visible on the hero tile, which spans two rows: without this
	   reset it can collapse to the image's natural height and leave a
	   gap in the remaining track space below it. */
	min-height: 0;
	min-width: 0;
	align-self: stretch;
	justify-self: stretch;
	overflow: hidden;
	border-radius: var(--wepg-radius);
}

.wepg-tile img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.35s ease, filter 0.35s ease, opacity 0.35s ease;
}

/* Full-cover invisible trigger: a real <button>, sibling to the overlay
   pills rather than their parent, so the "Watch Videos" button (also a
   real <button>) never ends up nested inside another interactive control.
   Native browser focus/keyboard activation "just works" without any
   custom ARIA widget pattern. */
.wepg-tile-trigger {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
	border: 0;
	background: none;
	cursor: pointer;
	z-index: 1;
}

/* ---------- Airbnb / Booking style: 1 hero + 2x2 grid ----------
   The hero and the four small tiles are NOT siblings in one flat grid
   with the hero row-spanning across two tracks — an item spanning
   multiple tracks alongside non-spanning siblings in the same track set
   is a genuinely inconsistent area across browser CSS Grid
   implementations. Instead: a plain single-row, 2-column outer grid
   (hero | substack) containing a plain 2x2 nested grid (the substack).
   Neither grid ever has to resolve a spanning item, which is what makes
   this reliable everywhere. */
.wepg-layout-airbnb .wepg-grid {
	grid-template-columns: var(--wepg-featured-width) 1fr;
	aspect-ratio: 16 / 9;
}

.wepg-layout-airbnb .wepg-tile--hero {
	height: 100%;
}

.wepg-airbnb-substack {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr 1fr;
	gap: var(--wepg-gap);
	height: 100%;
	min-height: 0;
	min-width: 0;
}

/* ---------- Even grid layout ---------- */
.wepg-layout-grid .wepg-grid {
	grid-template-columns: repeat(3, 1fr);
}
.wepg-layout-grid .wepg-tile {
	aspect-ratio: 4 / 3;
}

/* ---------- Stack layout (mobile-first single column) ---------- */
.wepg-layout-stack .wepg-grid {
	grid-template-columns: 1fr;
}
.wepg-layout-stack .wepg-tile {
	aspect-ratio: 4 / 3;
}

/* ---------- Carousel layout ---------- */
.wepg-layout-carousel .wepg-grid {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	gap: var(--wepg-gap);
	scrollbar-width: none; /* Firefox */
}
.wepg-layout-carousel .wepg-grid::-webkit-scrollbar {
	display: none; /* Chrome/Safari/Edge */
}
.wepg-layout-carousel .wepg-tile {
	flex: 0 0 80%;
	scroll-snap-align: start;
	aspect-ratio: 4 / 3;
}

.wepg-nav-btn {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	width: 40px;
	height: 40px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.85);
	color: #222;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
	transition: background 0.2s ease, transform 0.2s ease;
}

.wepg-nav-btn:hover {
	background: #fff;
	transform: translateY(-50%) scale(1.06);
}

.wepg-nav-btn:focus-visible {
	outline: 3px solid #2271b1;
	outline-offset: 2px;
}

.wepg-nav-btn--prev { left: 12px; }
.wepg-nav-btn--next { right: 12px; }

.wepg-nav-btn[disabled] {
	opacity: 0.35;
	cursor: default;
	pointer-events: none;
}

.wepg-nav-btn__icon {
	display: flex;
	width: 16px;
	height: 16px;
}

.wepg-nav-btn__icon svg {
	width: 100%;
	height: 100%;
	display: block;
}

/* The icon library only defines one (right-pointing) direction per style;
   "prev" mirrors it with a flip rather than needing a second icon set. */
.wepg-nav-btn__icon--prev svg {
	transform: scaleX(-1);
}

/* Carousel layout always shows its nav; Airbnb/Grid only need nav arrows
   once they collapse into a horizontal-scroll track on mobile (see the
   max-width:640px block below) — kept hidden above that breakpoint so
   they don't float uselessly over a layout that isn't scrollable there. */
.wepg-nav-btn--mobile-only {
	display: none;
}

@media (max-width: 640px) {
	.wepg-nav-btn--mobile-only {
		display: flex;
	}
}

/* ---------- Image ratio overrides ----------
   Only meaningful for Grid / Stack / Carousel: the Airbnb layout's tile
   shapes are dictated by its grid template, so it's intentionally excluded
   (guarded with :not() below in case older saved settings still carry a
   ratio value from before this control was scoped).
   Applied to .wepg-tile itself, with height reset to auto — aspect-ratio
   has no effect once both width and height are already definite (100%). */
.wepg-gallery:not(.wepg-layout-airbnb).wepg-ratio-square .wepg-tile { aspect-ratio: 1 / 1; height: auto; }
.wepg-gallery:not(.wepg-layout-airbnb).wepg-ratio-4-3 .wepg-tile { aspect-ratio: 4 / 3; height: auto; }
.wepg-gallery:not(.wepg-layout-airbnb).wepg-ratio-3-2 .wepg-tile { aspect-ratio: 3 / 2; height: auto; }
.wepg-gallery:not(.wepg-layout-airbnb).wepg-ratio-16-9 .wepg-tile { aspect-ratio: 16 / 9; height: auto; }

/* ---------- Hover effects ---------- */
.wepg-hover-zoom .wepg-tile:hover img { transform: scale(1.06); }
.wepg-hover-fade .wepg-tile:hover img { opacity: 0.85; }
.wepg-hover-lift .wepg-tile:hover { transform: translateY(-4px); box-shadow: 0 12px 24px rgba(0, 0, 0, 0.18); }

/* ---------- "Show all N photos" / "Watch Videos" pills ---------- */
.wepg-overlay {
	position: absolute;
	left: 12px;
	bottom: 12px;
	display: inline-flex;
	gap: 8px;
	z-index: 2;
}

.wepg-overlay__text {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background-color: rgba(0, 0, 0, 0.55);
	color: #fff;
	padding: 8px 14px;
	border-radius: 999px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	border: 0;
	cursor: pointer;
	font-family: inherit;
}

.wepg-overlay__video-btn {
	background-color: rgba(0, 0, 0, 0.55);
	transition: background-color 0.2s ease;
}

.wepg-overlay__video-btn:hover {
	background-color: rgba(0, 0, 0, 0.75);
}

.wepg-overlay__icon {
	font-size: 15px;
	line-height: 1;
}

/* ---------- Focus states (accessibility) ---------- */
.wepg-tile-trigger:focus-visible {
	outline: 3px solid #2271b1;
	outline-offset: -3px;
}

.wepg-overlay__video-btn:focus-visible {
	outline: 3px solid #2271b1;
	outline-offset: 2px;
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
	.wepg-layout-airbnb .wepg-grid {
		grid-template-columns: 1fr;
		aspect-ratio: unset;
	}
	.wepg-layout-airbnb .wepg-tile--hero {
		aspect-ratio: 16 / 9;
		height: auto;
	}
	.wepg-airbnb-substack {
		aspect-ratio: 16 / 9;
		height: auto;
	}
}

@media (max-width: 640px) {
	.wepg-layout-airbnb .wepg-grid,
	.wepg-layout-grid .wepg-grid {
		grid-template-columns: 1fr;
		display: flex;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		aspect-ratio: auto;
	}
	/* Makes the substack "disappear" as a box for layout purposes, so its
	   four tiles rejoin the outer flex track as equal-width slides
	   alongside the hero — restoring "all 5 photos scroll horizontally"
	   on mobile without needing a different DOM structure per breakpoint. */
	.wepg-layout-airbnb .wepg-airbnb-substack {
		display: contents;
	}
	.wepg-layout-airbnb .wepg-tile,
	.wepg-layout-grid .wepg-tile {
		flex: 0 0 100%;
		aspect-ratio: 4 / 3;
		grid-column: auto !important;
		grid-row: auto !important;
		scroll-snap-align: start;
	}
}

/* =====================================================================
   LIGHTBOX
   ===================================================================== */
.wepg-lightbox {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	flex-direction: column;
}

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

.wepg-lightbox__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.92);
}

.wepg-lightbox__content {
	position: relative;
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 32px;
}

.wepg-lightbox__figure {
	margin: 0;
	max-width: 90vw;
	max-height: 80vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	opacity: 0;
	transform: scale(0.98);
	transition: opacity 0.25s ease, transform 0.25s ease;
}

.wepg-lightbox__figure.is-visible {
	opacity: 1;
	transform: scale(1);
}

.wepg-lightbox__image {
	max-width: 90vw;
	max-height: 75vh;
	object-fit: contain;
	border-radius: 8px;
}

.wepg-lightbox__caption {
	color: #f2f2f2;
	margin-top: 12px;
	font-size: 14px;
	text-align: center;
}

.wepg-lightbox__close,
.wepg-lightbox__nav {
	position: absolute;
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.2s ease;
}

.wepg-lightbox__close:hover,
.wepg-lightbox__nav:hover {
	background: rgba(255, 255, 255, 0.25);
}

.wepg-lightbox__close {
	top: 20px;
	right: 20px;
	width: 44px;
	height: 44px;
	font-size: 26px;
	z-index: 3;
}

.wepg-lightbox__nav {
	top: 50%;
	transform: translateY(-50%);
	width: 52px;
	height: 52px;
	font-size: 20px;
	z-index: 3;
}

.wepg-lightbox__prev { left: 20px; }
.wepg-lightbox__next { right: 20px; }

.wepg-lightbox__counter {
	position: absolute;
	top: 24px;
	left: 24px;
	color: #fff;
	font-size: 14px;
	background: rgba(255, 255, 255, 0.12);
	padding: 6px 12px;
	border-radius: 999px;
}

.wepg-lightbox__thumbs {
	display: flex;
	gap: 8px;
	padding: 12px 20px 20px;
	overflow-x: auto;
	justify-content: center;
}

.wepg-lightbox__thumbs img {
	width: 64px;
	height: 48px;
	object-fit: cover;
	border-radius: 6px;
	cursor: pointer;
	opacity: 0.5;
	transition: opacity 0.2s ease, outline 0.2s ease;
	flex: 0 0 auto;
}

.wepg-lightbox__thumbs img.is-active {
	opacity: 1;
	outline: 2px solid #fff;
}

.wepg-editor-placeholder {
	padding: 24px;
	border: 2px dashed #ccc;
	border-radius: 8px;
	color: #666;
	text-align: center;
	font-size: 14px;
}

/* =====================================================================
   SHOP / ARCHIVE LOOP BADGES
   Purely additive — appended as a *sibling* after the product link
   closes (see LoopBadges.php), never wrapping or restructuring whatever
   Blocksy (or WooCommerce core) already renders for the card. Positioned
   over `li.product`, which WooCommerce core CSS already makes
   position:relative for its own "on sale" badge — every WooCommerce
   theme preserves that, so no dependency on Blocksy-specific markup.
   ===================================================================== */
.products .product,
ul.products li.product {
	position: relative;
}

.wepg-loop-badges {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 5;
	display: flex;
	gap: 6px;
	pointer-events: none; /* Row itself ignores clicks; buttons opt back in below. */
}

.wepg-loop-badge {
	pointer-events: auto;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	background: rgba(0, 0, 0, 0.6);
	color: #fff;
	border: 0;
	border-radius: 999px;
	padding: 5px 10px;
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	transition: background 0.2s ease;
}

.wepg-loop-badge:hover {
	background: rgba(0, 0, 0, 0.8);
}

.wepg-loop-badge:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

.wepg-loop-badge svg {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
}

.wepg-loop-badge--video {
	padding: 5px 8px;
}

/* =====================================================================
   VIDEO POPUP
   ===================================================================== */
.wepg-video-popup {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	flex-direction: column;
}

.wepg-video-popup[hidden] {
	display: none;
}

.wepg-video-popup__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.92);
}

.wepg-video-popup__content {
	position: relative;
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 32px;
}

.wepg-video-popup__player {
	position: relative;
	width: min(90vw, 960px);
	aspect-ratio: 16 / 9;
	background: #000;
	border-radius: 8px;
	overflow: hidden;
}

.wepg-video-popup__player video,
.wepg-video-popup__player iframe {
	width: 100%;
	height: 100%;
	display: block;
	border: 0;
}

.wepg-video-popup__close {
	position: absolute;
	top: 20px;
	right: 20px;
	width: 44px;
	height: 44px;
	font-size: 26px;
	z-index: 3;
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.2s ease;
}

.wepg-video-popup__close:hover {
	background: rgba(255, 255, 255, 0.25);
}

.wepg-video-popup__nav.wepg-nav-btn {
	position: absolute;
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
	width: 52px;
	height: 52px;
}

.wepg-video-popup__nav.wepg-nav-btn:hover {
	background: rgba(255, 255, 255, 0.25);
}

.wepg-video-popup__prev { left: 20px; }
.wepg-video-popup__next { right: 20px; }

.wepg-video-popup__counter {
	position: absolute;
	top: 24px;
	left: 24px;
	color: #fff;
	font-size: 14px;
	background: rgba(255, 255, 255, 0.12);
	padding: 6px 12px;
	border-radius: 999px;
}

/* =====================================================================
   CUSTOM GALLERY HEIGHT
   Locks the whole gallery block to a fixed height. Internal row/column
   proportions stay as the chosen layout defines them; grid-auto-rows:1fr
   is needed for Grid/Stack so an unknown number of auto rows can still
   divide the fixed height evenly. Images keep cropping via object-fit:cover.
   ===================================================================== */
.wepg-has-height .wepg-grid {
	height: var(--wepg-height, 400px);
	aspect-ratio: unset;
}

.wepg-has-height .wepg-tile {
	height: 100%;
	aspect-ratio: unset;
}

.wepg-has-height.wepg-layout-grid .wepg-grid,
.wepg-has-height.wepg-layout-stack .wepg-grid {
	grid-auto-rows: 1fr;
}

/* =====================================================================
   NATIVE INTEGRATION: FULL-WIDTH GALLERY, SUMMARY BELOW
   Applied by gallery.js at runtime to whichever ancestor the theme uses
   to place the gallery and WooCommerce summary side by side (see the
   maybeForceFullWidthStack() comment in gallery.js for why this isn't a
   hardcoded theme selector). Removes flex/grid column behavior from that
   one container and makes each of its direct children full width, so the
   gallery renders full-bleed and the summary/booking form stacks below.
   ===================================================================== */
.wepg-full-width-parent {
	display: block !important;
}

.wepg-full-width-child {
	width: 100% !important;
	max-width: 100% !important;
	flex: 0 0 100% !important;
	float: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	box-sizing: border-box !important;
}

.wepg-full-width-child + .wepg-full-width-child {
	margin-top: 32px;
}

@media (prefers-reduced-motion: reduce) {
	.wepg-tile img,
	.wepg-lightbox__figure {
		transition: none !important;
	}
}