/* =============================================================================
   EP Gallery Grid & Masonry  v3.0.0  —  Frontend Styles
   Layouts: masonry (Masonry.js), featured (hero+masonry), grid (CSS Grid)
   ============================================================================= */

/* ── CSS custom properties ─────────────────────────────────────────────────── */
.epgm-gallery {
	--epgm-cols-d  : 3;
	--epgm-cols-t  : 2;
	--epgm-cols-m  : 1;
	--epgm-gap     : 12px;
	--epgm-ease    : cubic-bezier(.4,0,.2,1);
	--epgm-dur     : .3s;
	--epgm-overlay : rgba(8,10,26,.58);
}

/* ── Base reset ────────────────────────────────────────────────────────────── */
.epgm-gallery,
.epgm-gallery * {
	box-sizing: border-box;
	margin    : 0;
	padding   : 0;
}

/* ══════════════════════════════════════════════════════════════════════════════
   MASONRY LAYOUT — Masonry.js (horizontal order, dynamic heights)
   Masonry.js positions items with absolute — container needs position:relative.
   Items float left before JS fires (avoids FOUC).
   ══════════════════════════════════════════════════════════════════════════════ */
.epgm-gallery.epgm-layout-masonry {
	position: relative;
}

.epgm-layout-masonry .epgm-masonry-sizer {
	width: calc( (100% - (var(--epgm-cols-d) - 1) * var(--epgm-gap)) / var(--epgm-cols-d) );
}
.epgm-layout-masonry .epgm-masonry-gutter {
	width: var(--epgm-gap);
}

.epgm-layout-masonry .epgm-item {
	width        : calc( (100% - (var(--epgm-cols-d) - 1) * var(--epgm-gap)) / var(--epgm-cols-d) );
	margin-bottom: var(--epgm-gap);
	float        : left; /* fallback before Masonry.js */
}

/* Image: natural height — masonry determines layout from real heights */
.epgm-layout-masonry .epgm-item__thumb {
	position     : relative;
	overflow     : hidden;
	border-radius: 8px;
}
.epgm-layout-masonry .epgm-item__img {
	width    : 100%;
	height   : auto; /* critical — natural aspect ratio */
	display  : block;
}

/* ══════════════════════════════════════════════════════════════════════════════
   FEATURED LAYOUT — Hero (2-col wide) + Masonry.js dynamic heights
   Every 5th image (index 0, 5, 10…) gets .epgm-item--featured = 2 cols wide.
   Everything else fills 1 column, natural height.
   ══════════════════════════════════════════════════════════════════════════════ */
.epgm-gallery.epgm-layout-featured {
	position: relative;
}

/* Shared sizer/gutter for Masonry.js */
.epgm-layout-featured .epgm-masonry-sizer {
	width: calc( (100% - (var(--epgm-cols-d) - 1) * var(--epgm-gap)) / var(--epgm-cols-d) );
}
.epgm-layout-featured .epgm-masonry-gutter {
	width: var(--epgm-gap);
}

/* Normal items — 1 column wide */
.epgm-layout-featured .epgm-item {
	width        : calc( (100% - (var(--epgm-cols-d) - 1) * var(--epgm-gap)) / var(--epgm-cols-d) );
	margin-bottom: var(--epgm-gap);
	float        : left;
}

/* Hero item — 2 columns wide */
.epgm-layout-featured .epgm-item--featured {
	width: calc(
		(100% - (var(--epgm-cols-d) - 1) * var(--epgm-gap))
		/ var(--epgm-cols-d)
		* 2
		+ var(--epgm-gap)
	);
}

/* Images — natural height in both cases */
.epgm-layout-featured .epgm-item__thumb {
	position     : relative;
	overflow     : hidden;
	border-radius: 8px;
}
.epgm-layout-featured .epgm-item__img {
	width  : 100%;
	height : auto;
	display: block;
}

/* ══════════════════════════════════════════════════════════════════════════════
   GRID LAYOUT — CSS Grid, equal columns, fixed 3:2 aspect ratio
   ══════════════════════════════════════════════════════════════════════════════ */
.epgm-gallery.epgm-layout-grid {
	display              : grid;
	grid-template-columns: repeat(var(--epgm-cols-d), 1fr);
	gap                  : var(--epgm-gap);
}

.epgm-layout-grid .epgm-item {
	overflow: hidden;
}

/* 3:2 aspect ratio crop */
.epgm-layout-grid .epgm-item__thumb {
	position   : relative;
	width      : 100%;
	padding-top: 66.67%;
	overflow   : hidden;
}

.epgm-layout-grid .epgm-item__thumb .epgm-item__img {
	position  : absolute;
	inset     : 0;
	width     : 100%;
	height    : 100%;
	object-fit: cover;
}

.epgm-layout-grid .epgm-item__overlay {
	position: absolute;
	inset    : 0;
}

/* ── Shared item base ──────────────────────────────────────────────────────── */
.epgm-item {
	border-radius: 8px;
	overflow     : hidden;
	position     : relative;
}

.epgm-item__link {
	display        : block;
	text-decoration: none;
	overflow       : hidden;
	border-radius  : 8px;
	position       : relative;
}

/* Default image style (masonry / featured use height:auto above) */
.epgm-item__img {
	display            : block;
	width              : 100%;
	height             : auto;
	border-radius      : 8px;
	transition         : transform var(--epgm-dur) var(--epgm-ease),
	                     filter   var(--epgm-dur) var(--epgm-ease);
	will-change        : transform;
	backface-visibility: hidden;
}

/* ── Hover overlay ─────────────────────────────────────────────────────────── */
.epgm-item__overlay {
	position       : absolute;
	inset          : 0;
	border-radius  : 8px;
	display        : flex;
	flex-direction : column;
	align-items    : center;
	justify-content: center;
	gap            : 8px;
	opacity        : 0;
	transition     : opacity var(--epgm-dur) var(--epgm-ease),
	                 background var(--epgm-dur) var(--epgm-ease);
	pointer-events : none;
}

.epgm-item__icon {
	color     : #fff;
	display   : flex;
	transform : scale(.6);
	transition: transform var(--epgm-dur) var(--epgm-ease);
	filter    : drop-shadow(0 2px 6px rgba(0,0,0,.4));
}

.epgm-item__caption-overlay {
	color      : #fff;
	font-size  : 13px;
	font-weight: 600;
	text-align : center;
	padding    : 0 12px;
	line-height: 1.4;
	transform  : translateY(8px);
	transition : transform var(--epgm-dur) var(--epgm-ease);
	text-shadow: 0 1px 4px rgba(0,0,0,.5);
}

.epgm-item__cap-below {
	padding    : 6px 4px 2px;
	font-size  : 13px;
	color      : #555;
	text-align : center;
	line-height: 1.4;
}

/* ══════════════════════════════════════════════════════════════════════════════
   HOVER EFFECTS
   ══════════════════════════════════════════════════════════════════════════════ */
.epgm-hover-zoom .epgm-item__link:hover .epgm-item__img             { transform: scale(1.07); }
.epgm-hover-zoom .epgm-item__link:hover .epgm-item__overlay         { opacity: 1; background: var(--epgm-overlay); }
.epgm-hover-zoom .epgm-item__link:hover .epgm-item__icon            { transform: scale(1); }
.epgm-hover-zoom .epgm-item__link:hover .epgm-item__caption-overlay { transform: translateY(0); }

.epgm-hover-overlay .epgm-item__link:hover .epgm-item__overlay         { opacity: 1; background: var(--epgm-overlay); }
.epgm-hover-overlay .epgm-item__link:hover .epgm-item__icon            { transform: scale(1); }
.epgm-hover-overlay .epgm-item__link:hover .epgm-item__caption-overlay { transform: translateY(0); }

.epgm-hover-grayscale .epgm-item__img                                { filter: grayscale(85%); }
.epgm-hover-grayscale .epgm-item__link:hover .epgm-item__img         { filter: grayscale(0); transform: scale(1.04); }
.epgm-hover-grayscale .epgm-item__link:hover .epgm-item__overlay     { opacity: 1; background: rgba(0,0,0,.28); }
.epgm-hover-grayscale .epgm-item__link:hover .epgm-item__icon        { transform: scale(1); }

.epgm-hover-none .epgm-item__link:hover .epgm-item__img { filter: brightness(1.04); }

/* ══════════════════════════════════════════════════════════════════════════════
   LOAD MORE
   ══════════════════════════════════════════════════════════════════════════════ */
.epgm-load-more-wrap {
	text-align: center;
	margin-top: 28px;
	/* Clearfix — floated masonry items */
	clear: both;
}
.epgm-load-more-wrap::before {
	content: '';
	display: block;
	clear  : both;
}

.epgm-load-more-btn {
	display       : inline-flex;
	align-items   : center;
	gap           : 8px;
	padding       : 12px 36px;
	background    : #1d2327;
	color         : #fff;
	border        : 2px solid #1d2327;
	border-radius : 6px;
	font-size     : 14px;
	font-weight   : 600;
	cursor        : pointer;
	transition    : background .2s, color .2s, transform .2s;
}
.epgm-load-more-btn:hover        { background: #2c3338; transform: translateY(-2px); }
.epgm-load-more-btn:disabled,
.epgm-load-more-btn.loading      { opacity: .7; cursor: wait; pointer-events: none; }
.epgm-load-more-btn.done         { background: #e0e0e0; color: #999; border-color: #e0e0e0; cursor: default; }

.epgm-spinner {
	width        : 14px;
	height       : 14px;
	border       : 2px solid rgba(255,255,255,.35);
	border-top   : 2px solid #fff;
	border-radius: 50%;
	animation    : epgm-spin .7s linear infinite;
	display      : none;
}
.epgm-load-more-btn.loading .epgm-spinner { display: inline-block; }

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

/* ── Empty states ──────────────────────────────────────────────────────────── */
.epgm-empty {
	display      : inline-block;
	padding      : 14px 20px;
	background   : #f8f9fa;
	border       : 1px dashed #ddd;
	border-radius: 8px;
	color        : #888;
	font-size    : 14px;
}

.epgm-empty-state {
	display        : flex;
	flex-direction : column;
	align-items    : center;
	justify-content: center;
	padding        : 40px 20px;
	text-align     : center;
	gap            : 10px;
}
.epgm-empty-state__icon { font-size: 40px; }
.epgm-empty-state p     { color: #888; font-size: 14px; margin: 0; }

/* ══════════════════════════════════════════════════════════════════════════════
   ELEMENTOR EDITOR COMPATIBILITY
   Elementor wraps shortcodes in .elementor-widget-container which can clip
   absolutely-positioned Masonry items. Fix overflow + ensure full width.
   ══════════════════════════════════════════════════════════════════════════════ */
.elementor-widget-container .epgm-gallery.epgm-layout-masonry,
.elementor-widget-container .epgm-gallery.epgm-layout-featured {
	overflow: visible !important;
	width   : 100% !important;
}

/* Masonry.js sets container height via inline style — allow it */
.elementor-widget-container .epgm-gallery {
	min-height: 1px;
}

/* ── PhotoSwipe caption ────────────────────────────────────────────────────── */
.epgm-pswp-caption {
	position      : absolute;
	bottom        : 0; left: 0; right: 0;
	padding       : 10px 20px 16px;
	background    : linear-gradient(to top, rgba(0,0,0,.72), transparent);
	color         : #fff;
	font-size     : 14px;
	line-height   : 1.5;
	text-align    : center;
	pointer-events: none;
}
.pswp__counter {
	background   : rgba(0,0,0,.45);
	border-radius: 50px;
	padding      : 3px 12px;
	font-size    : 13px;
	font-weight  : 600;
}

/* ══════════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
	/* Masonry */
	.epgm-layout-masonry .epgm-item,
	.epgm-layout-masonry .epgm-masonry-sizer {
		width: calc( (100% - (var(--epgm-cols-t) - 1) * var(--epgm-gap)) / var(--epgm-cols-t) ) !important;
	}

	/* Featured — normal items */
	.epgm-layout-featured .epgm-item,
	.epgm-layout-featured .epgm-masonry-sizer {
		width: calc( (100% - (var(--epgm-cols-t) - 1) * var(--epgm-gap)) / var(--epgm-cols-t) ) !important;
	}
	/* Featured hero */
	.epgm-layout-featured .epgm-item--featured {
		width: calc(
			(100% - (var(--epgm-cols-t) - 1) * var(--epgm-gap))
			/ var(--epgm-cols-t) * 2 + var(--epgm-gap)
		) !important;
	}

	/* Grid */
	.epgm-layout-grid {
		grid-template-columns: repeat(var(--epgm-cols-t), 1fr) !important;
	}
}

@media (max-width: 640px) {
	/* Masonry — single column */
	.epgm-layout-masonry .epgm-item,
	.epgm-layout-masonry .epgm-masonry-sizer {
		width: calc( (100% - (var(--epgm-cols-m) - 1) * var(--epgm-gap)) / var(--epgm-cols-m) ) !important;
	}

	/* Featured — all full width on mobile */
	.epgm-layout-featured .epgm-item,
	.epgm-layout-featured .epgm-item--featured,
	.epgm-layout-featured .epgm-masonry-sizer {
		width: 100% !important;
	}

	/* Grid */
	.epgm-layout-grid {
		grid-template-columns: repeat(var(--epgm-cols-m), 1fr) !important;
	}
}