/* ==========================================================================
   PE2 Gallery – Frontend Styles
   ========================================================================== */

.pe2-gallery {
	--pe2-gutter: 10px;
	--pe2-row-height: 200px;
	--pe2-columns: 4;
	--pe2-mobile-columns: 2;
	--pe2-radius: 4px;
	width: 100%;
	margin: 1.5em 0;
}

.pe2-gallery-inner {
	display: grid;
	grid-template-columns: repeat(var(--pe2-columns, 3), minmax(0, 1fr));
	gap: var(--pe2-gutter, 10px);
	width: 100%;
}

.pe2-gallery-item {
	position: relative;
	margin: 0;
	overflow: hidden;
	border-radius: var(--pe2-radius);
	background: #f0f0f0;
	box-sizing: border-box;
	min-width: 0;
	width: 100%;
}

.pe2-gallery-link {
	display: block;
	position: relative;
	width: 100%;
	height: 100%;
	text-decoration: none;
	color: inherit;
	overflow: hidden;
}

.pe2-gallery-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.35s ease, opacity 0.35s ease;
}

/* --------------------------------------------------------------------------
   Layouts – all respect --pe2-columns on desktop
   -------------------------------------------------------------------------- */

/* Square – equal crops */
.pe2-layout-square .pe2-gallery-inner {
	display: grid;
	grid-template-columns: repeat(var(--pe2-columns, 3), minmax(0, 1fr));
	gap: var(--pe2-gutter, 10px);
}

.pe2-layout-square .pe2-gallery-item {
	aspect-ratio: 1;
}

.pe2-layout-square .pe2-gallery-image {
	object-fit: cover;
	height: 100%;
}

/* Tiles – fixed-height grid (respects column count) */
.pe2-layout-tiles .pe2-gallery-inner {
	display: grid;
	grid-template-columns: repeat(var(--pe2-columns, 3), minmax(0, 1fr));
	gap: var(--pe2-gutter, 10px);
}

.pe2-layout-tiles .pe2-gallery-item {
	height: var(--pe2-row-height, 200px);
}

.pe2-layout-tiles .pe2-gallery-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Masonry – CSS multi-column (respects column count) */
.pe2-layout-masonry .pe2-gallery-inner {
	display: block;
	column-count: var(--pe2-columns, 3);
	column-gap: var(--pe2-gutter, 10px);
}

.pe2-layout-masonry .pe2-gallery-item {
	break-inside: avoid;
	-webkit-column-break-inside: avoid;
	page-break-inside: avoid;
	margin: 0 0 var(--pe2-gutter, 10px);
	width: 100%;
	display: inline-block; /* improves break-inside in some browsers */
}

.pe2-layout-masonry .pe2-gallery-image {
	width: 100%;
	height: auto;
	object-fit: contain;
	display: block;
}

/* Mosaic – mixed spans on a fixed column grid */
.pe2-layout-mosaic .pe2-gallery-inner {
	display: grid;
	grid-template-columns: repeat(var(--pe2-columns, 3), minmax(0, 1fr));
	grid-auto-rows: minmax(120px, auto);
	gap: var(--pe2-gutter, 10px);
}

.pe2-layout-mosaic .pe2-gallery-item {
	min-height: 120px;
}

.pe2-layout-mosaic .pe2-mosaic-wide {
	grid-column: span 2;
}

.pe2-layout-mosaic .pe2-mosaic-tall {
	grid-row: span 2;
}

/* When only 2 columns, wide mosaic items shouldn't overflow */
.pe2-gallery[style*="--pe2-columns: 2"] .pe2-layout-mosaic .pe2-mosaic-wide,
.pe2-layout-mosaic.pe2-cols-2 .pe2-mosaic-wide {
	grid-column: span 1;
}

/* --------------------------------------------------------------------------
   Captions & Title (centered on all viewports)
   -------------------------------------------------------------------------- */

.pe2-gallery-caption {
	font-size: 13px;
	line-height: 1.45;
	padding: 10px 12px;
	margin: 0;
	color: #333;
	background: #f8f8f8;
	text-align: center;
}

.pe2-gallery-title {
	display: block;
	font-weight: 600;
	font-size: 14px;
	line-height: 1.35;
	margin: 0 0 4px;
	text-align: center;
}

.pe2-gallery-caption-text {
	display: block;
	font-weight: 400;
	text-align: center;
}

.pe2-caption-overlay .pe2-gallery-caption {
	position: absolute;
	left: 0;
	right: 0;
	background: linear-gradient(transparent, rgba(0, 0, 0, 0.75));
	color: #fff;
	opacity: 0;
	transition: opacity 0.3s ease;
	pointer-events: none;
	text-align: center;
}

.pe2-caption-overlay .pe2-gallery-item:hover .pe2-gallery-caption,
.pe2-caption-overlay .pe2-gallery-link:focus .pe2-gallery-caption {
	opacity: 1;
}

.pe2-caption-overlay .pe2-caption-bottom {
	bottom: 0;
	padding-top: 28px;
}

.pe2-caption-overlay .pe2-caption-top {
	top: 0;
	background: linear-gradient(rgba(0, 0, 0, 0.75), transparent);
	padding-bottom: 28px;
}

.pe2-caption-overlay .pe2-caption-center {
	top: 50%;
	transform: translateY(-50%);
	background: rgba(0, 0, 0, 0.6);
	text-align: center;
	padding: 14px 12px;
}

/* Auto height – natural image proportions, still on the column grid */
.pe2-height-auto.pe2-layout-tiles .pe2-gallery-item {
	height: auto !important;
}

.pe2-height-auto.pe2-layout-tiles .pe2-gallery-image {
	height: auto;
	object-fit: contain;
}

.pe2-height-auto.pe2-layout-square .pe2-gallery-item {
	aspect-ratio: auto;
}

.pe2-height-auto.pe2-layout-square .pe2-gallery-image {
	height: auto;
	object-fit: contain;
}

.pe2-height-auto.pe2-layout-mosaic .pe2-gallery-item {
	min-height: 0;
}

.pe2-height-auto.pe2-layout-mosaic .pe2-gallery-image {
	height: auto;
	object-fit: contain;
}

.pe2-height-auto.pe2-layout-masonry .pe2-gallery-image {
	height: auto;
	object-fit: contain;
}

/* --------------------------------------------------------------------------
   Hover effects
   -------------------------------------------------------------------------- */

.pe2-hover-zoom .pe2-gallery-item:hover .pe2-gallery-image {
	transform: scale(1.08);
}

.pe2-hover-fade .pe2-gallery-item:hover .pe2-gallery-image {
	opacity: 0.85;
}

.pe2-hover-lift .pe2-gallery-item {
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.pe2-hover-lift .pe2-gallery-item:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.pe2-has-shadow .pe2-gallery-item {
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 782px) {
	.pe2-gallery-inner,
	.pe2-layout-square .pe2-gallery-inner,
	.pe2-layout-tiles .pe2-gallery-inner,
	.pe2-layout-mosaic .pe2-gallery-inner {
		display: grid;
		grid-template-columns: repeat(var(--pe2-mobile-columns, 2), minmax(0, 1fr));
		gap: var(--pe2-gutter, 10px);
	}

	.pe2-layout-masonry .pe2-gallery-inner {
		display: block;
		column-count: var(--pe2-mobile-columns, 2);
		column-gap: var(--pe2-gutter, 10px);
	}

	.pe2-layout-tiles .pe2-gallery-item {
		width: 100% !important;
		min-width: 0 !important;
		height: var(--pe2-row-height, 200px);
	}

	.pe2-height-auto.pe2-layout-tiles .pe2-gallery-item {
		height: auto !important;
	}

	.pe2-layout-mosaic .pe2-mosaic-wide,
	.pe2-layout-mosaic .pe2-mosaic-tall {
		grid-column: span 1;
		grid-row: span 1;
	}

	.pe2-gallery-item {
		min-width: 0;
		max-width: 100%;
	}

	.pe2-gallery-image {
		max-width: 100%;
	}
}

/* --------------------------------------------------------------------------
   Lightbox
   -------------------------------------------------------------------------- */

.pe2-lightbox {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.92);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s ease;
}

.pe2-lightbox.is-open {
	opacity: 1;
	visibility: visible;
}

.pe2-lightbox-inner {
	position: relative;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	max-width: 100vw;
	max-height: 100vh;
}

.pe2-lightbox-image-wrap {
	position: relative;
	max-width: 92vw;
	max-height: 88vh;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.35s ease, opacity 0.35s ease;
}

.pe2-lightbox-image {
	max-width: 92vw;
	max-height: 88vh;
	width: auto;
	height: auto;
	object-fit: contain;
	border-radius: 2px;
	user-select: none;
	-webkit-user-drag: none;
	transition: transform 0.25s ease;
}

.pe2-lightbox-caption {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 16px 20px;
	background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
	color: #fff;
	font-size: 15px;
	text-align: center;
	pointer-events: none;
}

/* Controls */
.pe2-lightbox-btn {
	position: absolute;
	z-index: 10;
	background: rgba(255, 255, 255, 0.12);
	border: none;
	color: #fff;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	transition: background 0.2s, transform 0.2s;
	backdrop-filter: blur(4px);
}

.pe2-lightbox-btn:hover {
	background: rgba(255, 255, 255, 0.25);
	transform: scale(1.08);
}

.pe2-lightbox-close {
	top: 16px;
	right: 16px;
	font-size: 28px;
}

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

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

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

.pe2-lightbox-counter {
	position: absolute;
	top: 20px;
	left: 20px;
	color: rgba(255, 255, 255, 0.7);
	font-size: 14px;
	z-index: 10;
}

.pe2-lightbox-toolbar {
	position: absolute;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 8px;
	z-index: 10;
}

.pe2-lightbox-toolbar .pe2-lightbox-btn {
	position: static;
	width: 40px;
	height: 40px;
	font-size: 16px;
}

/* Effects */
.pe2-effect-fade .pe2-lightbox-image-wrap {
	opacity: 0;
	transition: opacity 0.35s ease;
}

.pe2-effect-fade.is-open .pe2-lightbox-image-wrap {
	opacity: 1;
}

.pe2-effect-slide .pe2-lightbox-image-wrap {
	transform: translateX(40px);
	opacity: 0;
	transition: transform 0.35s ease, opacity 0.35s ease;
}

.pe2-effect-slide.is-open .pe2-lightbox-image-wrap {
	transform: translateX(0);
	opacity: 1;
}

.pe2-effect-zoom .pe2-lightbox-image-wrap {
	transform: scale(0.85);
	opacity: 0;
	transition: transform 0.35s ease, opacity 0.35s ease;
}

.pe2-effect-zoom.is-open .pe2-lightbox-image-wrap {
	transform: scale(1);
	opacity: 1;
}

/* Zoomed state */
.pe2-lightbox-image.is-zoomed {
	cursor: grab;
	max-width: none;
	max-height: none;
}

.pe2-lightbox-image.is-zoomed:active {
	cursor: grabbing;
}

/* Loading spinner */
.pe2-lightbox-loader {
	position: absolute;
	width: 40px;
	height: 40px;
	border: 3px solid rgba(255, 255, 255, 0.2);
	border-top-color: #fff;
	border-radius: 50%;
	animation: pe2-spin 0.7s linear infinite;
}

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

/* Mobile adjustments */
@media (max-width: 600px) {
	.pe2-lightbox-btn {
		width: 40px;
		height: 40px;
		font-size: 18px;
	}

	.pe2-lightbox-prev {
		left: 8px;
	}

	.pe2-lightbox-next {
		right: 8px;
	}

	.pe2-lightbox-close {
		top: 10px;
		right: 10px;
	}
}

/* Prevent body scroll when lightbox open */
body.pe2-lightbox-open {
	overflow: hidden;
}

.pe2-gallery-empty {
	padding: 20px;
	background: #f9f9f9;
	border: 1px dashed #ccc;
	text-align: center;
	color: #666;
}

/* Explicit column count fallbacks (in case CSS variables are overridden by themes) */
.pe2-cols-1 .pe2-gallery-inner { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.pe2-cols-2 .pe2-gallery-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pe2-cols-3 .pe2-gallery-inner { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pe2-cols-4 .pe2-gallery-inner { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pe2-cols-5 .pe2-gallery-inner { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.pe2-cols-6 .pe2-gallery-inner { grid-template-columns: repeat(6, minmax(0, 1fr)); }

.pe2-layout-masonry.pe2-cols-1 .pe2-gallery-inner { column-count: 1; }
.pe2-layout-masonry.pe2-cols-2 .pe2-gallery-inner { column-count: 2; }
.pe2-layout-masonry.pe2-cols-3 .pe2-gallery-inner { column-count: 3; }
.pe2-layout-masonry.pe2-cols-4 .pe2-gallery-inner { column-count: 4; }
.pe2-layout-masonry.pe2-cols-5 .pe2-gallery-inner { column-count: 5; }
.pe2-layout-masonry.pe2-cols-6 .pe2-gallery-inner { column-count: 6; }

@media (max-width: 782px) {
	.pe2-mcols-1 .pe2-gallery-inner { grid-template-columns: repeat(1, minmax(0, 1fr)); }
	.pe2-mcols-2 .pe2-gallery-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.pe2-mcols-3 .pe2-gallery-inner { grid-template-columns: repeat(3, minmax(0, 1fr)); }

	.pe2-layout-masonry.pe2-mcols-1 .pe2-gallery-inner { column-count: 1; }
	.pe2-layout-masonry.pe2-mcols-2 .pe2-gallery-inner { column-count: 2; }
	.pe2-layout-masonry.pe2-mcols-3 .pe2-gallery-inner { column-count: 3; }
}