/* Poptein Gallery Carousel — frontend styles
   All measurements are driven by CSS custom properties set inline
   by Elementor's control selectors, so the widget stays fully themeable. */

.pgc-carousel-wrapper {
	position: relative;
	width: 100%;
	box-sizing: border-box;
	--pgc-columns: 4;
	--pgc-gap: 16px;
	--pgc-h-short: 280px;
	--pgc-h-tall: 480px;
	--pgc-peek: 0px;
}

.pgc-carousel-wrapper * {
	box-sizing: border-box;
}

/* ---------- Track (grid rendered as a horizontal carousel) ---------- */

.pgc-track,
.pgc-brick-carousel {
	display: flex;
	gap: var(--pgc-gap);
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	touch-action: pan-y pinch-zoom;
	scrollbar-width: none; /* Firefox */
	-ms-overflow-style: none; /* IE / Edge legacy */
	outline: none;
}

.pgc-track::-webkit-scrollbar,
.pgc-brick-carousel::-webkit-scrollbar {
	display: none; /* Chrome / Safari */
}

.pgc-track.pgc-is-dragging,
.pgc-brick-carousel.pgc-is-dragging {
	scroll-snap-type: none;
	cursor: grabbing;
	scroll-behavior: auto;
}

.pgc-carousel-wrapper[data-drag="1"] .pgc-track {
	cursor: grab;
}

/* ---------- Grid item ---------- */

.pgc-item {
	--pgc-img-height: 280px;

	position: relative;
	flex: 0 0 calc((100% - (var(--pgc-columns) - 1) * var(--pgc-gap)) / var(--pgc-columns));
	scroll-snap-align: start;
	border-radius: 14px;
	overflow: hidden;
	cursor: pointer;
	background: #eee;
}

.pgc-item img {
	display: block;
	width: 100%;
	height: var(--pgc-img-height);
	object-fit: cover;
	pointer-events: none;
	-webkit-user-drag: none;
	user-select: none;
	transition: transform 0.5s ease;
}

.pgc-item:hover img {
	transform: scale(1.04);
}

/* ---------- Masonry layout (staggered brick grid, natural image heights) ---------- */

.pgc-masonry {
	columns: var(--pgc-columns) auto;
	column-gap: var(--pgc-gap);
	width: 100%;
}

.pgc-masonry .pgc-item {
	display: block;
	width: 100%;
	margin: 0 0 var(--pgc-gap);
	break-inside: avoid;
	-webkit-column-break-inside: avoid;
	page-break-inside: avoid;
}

.pgc-masonry .pgc-item img {
	height: auto;
}

/* ---------- Brick layout (fixed alternating short/tall pattern) ---------- */

.pgc-brick {
	display: flex;
	align-items: flex-start;
	gap: var(--pgc-gap);
	width: 100%;
}

.pgc-brick-col {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--pgc-gap);
}

/* When "Slide As Carousel" is on: fixed-width columns (only the
   "Columns" count stays visible, with an optional peek of the next
   column at the edge) instead of an even, static division of the
   full row width. Sliding always moves exactly one column. */
.pgc-brick-carousel .pgc-brick-col {
	flex: 0 0 calc((100% - (var(--pgc-columns) - 1) * var(--pgc-gap) - var(--pgc-peek)) / var(--pgc-columns));
	scroll-snap-align: start;
}

.pgc-carousel-wrapper[data-drag="1"] .pgc-brick-carousel {
	cursor: grab;
}

.pgc-brick .pgc-item img {
	object-fit: cover;
}

.pgc-brick .pgc-item.pgc-h-short img {
	height: var(--pgc-h-short);
}

.pgc-brick .pgc-item.pgc-h-tall img {
	height: var(--pgc-h-tall);
}

@media (max-width: 767px) {
	.pgc-brick {
		flex-direction: column;
	}

	.pgc-brick-col {
		width: 100%;
	}

	.pgc-brick-carousel {
		flex-direction: row;
	}
}

/* ---------- Hover overlay (click affordance) ---------- */

.pgc-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: rgba(0, 0, 0, 0.45);
	opacity: 0;
	transition: opacity 0.25s ease;
	pointer-events: none;
}

.pgc-item:hover .pgc-overlay,
.pgc-item:focus-visible .pgc-overlay {
	opacity: 1;
}

.pgc-overlay svg {
	width: 30px;
	height: 30px;
	stroke: #fff;
	transform: scale(0.85);
	transition: transform 0.25s ease;
}

.pgc-item:hover .pgc-overlay svg {
	transform: scale(1);
}

/* Always-visible light overlay hint on touch devices (no hover state available) */
@media (hover: none) {
	.pgc-overlay {
		opacity: 0.001; /* keep clickable, invisible until tapped-and-held is unnecessary */
	}
}

/* ---------- Carousel arrows ---------- */

.pgc-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 5;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: none;
	background-color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
	transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.15s ease;
}

.pgc-arrow:hover {
	transform: translateY(-50%) scale(1.06);
}

.pgc-arrow svg {
	width: 20px;
	height: 20px;
	stroke: #111;
}

.pgc-arrow-prev {
	left: 10px;
}

.pgc-arrow-next {
	right: 10px;
}

.pgc-arrow.pgc-is-hidden {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

/* ---------- Empty state (editor only) ---------- */

.pgc-empty-state {
	padding: 40px 20px;
	text-align: center;
	border: 2px dashed #ccc;
	border-radius: 10px;
	color: #888;
	font-size: 14px;
}

/* =====================================================================
   LIGHTBOX POPUP
   ===================================================================== */

.pgc-lightbox {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #ffffff;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s ease;
}

.pgc-lightbox.pgc-active {
	opacity: 1;
	visibility: visible;
}

.pgc-lightbox-stage {
	position: relative;
	max-width: 92vw;
	max-height: 88vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	touch-action: pan-y;
}

.pgc-lightbox-image {
	max-width: 90vw;
	max-height: 82vh;
	width: auto;
	height: auto;
	object-fit: contain;
	opacity: 1;
	transition: opacity 0.18s ease, transform 0.18s ease;
	user-select: none;
	-webkit-user-drag: none;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12);
	border-radius: 6px;
}

.pgc-lightbox-image.pgc-fading {
	opacity: 0;
	transform: scale(0.98);
}

.pgc-lightbox-caption {
	margin-top: 14px;
	max-width: 70vw;
	text-align: center;
	font-size: 14px;
	color: #555;
}

.pgc-lightbox-close,
.pgc-lightbox-arrow {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: transparent;
	border: 1.5px solid #111;
	cursor: pointer;
	transition: background-color 0.2s ease, transform 0.15s ease;
	z-index: 2;
}

.pgc-lightbox-close:hover,
.pgc-lightbox-arrow:hover {
	background-color: rgba(0, 0, 0, 0.06);
	transform: scale(1.05);
}

.pgc-lightbox-close svg,
.pgc-lightbox-arrow svg {
	width: 20px;
	height: 20px;
	stroke: #111;
}

.pgc-lightbox-close {
	top: 24px;
	right: 24px;
}

.pgc-lightbox-prev {
	left: 24px;
	top: 50%;
	transform: translateY(-50%);
}

.pgc-lightbox-next {
	right: 24px;
	top: 50%;
	transform: translateY(-50%);
}

.pgc-lightbox-prev:hover,
.pgc-lightbox-next:hover {
	transform: translateY(-50%) scale(1.05);
}

.pgc-lightbox-counter {
	position: absolute;
	bottom: 24px;
	left: 50%;
	transform: translateX(-50%);
	font-size: 13px;
	letter-spacing: 0.03em;
	color: #555;
}

body.pgc-lightbox-open {
	overflow: hidden;
}

/* =====================================================================
   RESPONSIVE (mobile refinements — desktop parity is handled by
   Elementor's own responsive controls for columns/gap/height)
   ===================================================================== */

@media (max-width: 767px) {
	.pgc-arrow {
		width: 36px;
		height: 36px;
	}

	.pgc-arrow svg {
		width: 16px;
		height: 16px;
	}

	.pgc-lightbox-prev {
		left: 10px;
	}

	.pgc-lightbox-next {
		right: 10px;
	}

	.pgc-lightbox-close {
		top: 14px;
		right: 14px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.pgc-track,
	.pgc-item img,
	.pgc-overlay,
	.pgc-overlay svg,
	.pgc-lightbox,
	.pgc-lightbox-image,
	.pgc-arrow {
		transition: none !important;
		scroll-behavior: auto !important;
	}
}