/* Event Photo Gallery – Frontend Styles */

/* ── Gallery Grid ────────────────────────────────────────────────────────────── */
.epg-gallery {
	--epg-gap: 12px;
	--epg-cols-desktop: 4;
	--epg-cols-tablet: 3;
	--epg-cols-mobile: 2;
	width: 100%;
}

.epg-gallery__toolbar {
	display: flex;
	justify-content: flex-end;
	margin-bottom: 12px;
	gap: 8px;
}

/* Equal-height columns layout */
.epg-gallery__grid--columns {
	display: grid;
	grid-template-columns: repeat(var(--epg-cols-desktop), 1fr);
	gap: var(--epg-gap);
}

@media (max-width: 1023px) {
	.epg-gallery__grid--columns {
		grid-template-columns: repeat(var(--epg-cols-tablet), 1fr);
	}
}
@media (max-width: 599px) {
	.epg-gallery__grid--columns {
		grid-template-columns: repeat(var(--epg-cols-mobile), 1fr);
	}
}

/* Masonry layout (CSS columns) */
.epg-gallery__grid--masonry {
	columns: var(--epg-cols-desktop);
	column-gap: var(--epg-gap);
}

@media (max-width: 1023px) {
	.epg-gallery__grid--masonry {
		columns: var(--epg-cols-tablet);
	}
}
@media (max-width: 599px) {
	.epg-gallery__grid--masonry {
		columns: var(--epg-cols-mobile);
	}
}

.epg-gallery__grid--masonry .epg-gallery__item {
	break-inside: avoid;
	margin-bottom: var(--epg-gap);
}

/* ── Gallery Item ────────────────────────────────────────────────────────────── */
.epg-gallery__item {
	margin: 0;
	position: relative;
	overflow: hidden;
	border-radius: 4px;
	background: #f0f0f0;
}

.epg-gallery__thumb-wrap {
	position: relative;
	overflow: hidden;
	cursor: pointer;
}

.epg-gallery__img {
	display: block;
	width: 100%;
	height: auto;
	transition: transform .3s ease;
	background: #e8e8e8;
}

.epg-gallery__thumb-wrap:hover .epg-gallery__img {
	transform: scale(1.03);
}

/* Overlay with action buttons */
.epg-gallery__overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: flex-end;
	justify-content: flex-end;
	gap: 6px;
	padding: 8px;
	background: linear-gradient(to top, rgba(0,0,0,.5) 0%, transparent 50%);
	opacity: 0;
	transition: opacity .25s ease;
}

.epg-gallery__thumb-wrap:hover .epg-gallery__overlay,
.epg-gallery__thumb-wrap:focus-within .epg-gallery__overlay {
	opacity: 1;
}

.epg-gallery__caption {
	font-size: .8rem;
	padding: 4px 6px;
	color: #555;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ── Buttons ─────────────────────────────────────────────────────────────────── */
.epg-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 9px 18px;
	border: none;
	border-radius: 4px;
	font-size: .875rem;
	font-weight: 600;
	cursor: pointer;
	text-decoration: none;
	transition: background .2s, box-shadow .2s;
}

.epg-btn--primary {
	background: #2271b1;
	color: #fff;
}
.epg-btn--primary:hover { background: #135e96; }

.epg-btn--secondary {
	background: transparent;
	color: #2271b1;
	border: 1px solid #2271b1;
}
.epg-btn--secondary:hover { background: #f0f6ff; }

.epg-btn--zip {
	background: #1d2327;
	color: #fff;
	font-size: .8rem;
}
.epg-btn--zip:hover { background: #3c434a; }

.epg-btn--icon {
	padding: 6px;
	border-radius: 3px;
	background: rgba(255,255,255,.85);
	color: #1d2327;
	line-height: 1;
}
.epg-btn--icon:hover { background: #fff; }
.epg-btn--icon svg {
	width: 16px;
	height: 16px;
	display: block;
}

.epg-btn:disabled {
	opacity: .6;
	cursor: not-allowed;
}

/* ── Pagination ──────────────────────────────────────────────────────────────── */
.epg-gallery__pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	justify-content: center;
	margin-top: 24px;
}

.epg-page-btn {
	display: inline-block;
	min-width: 32px;
	padding: 5px 10px;
	border: 1px solid #dcdcde;
	border-radius: 3px;
	text-align: center;
	text-decoration: none;
	color: inherit;
	font-size: .875rem;
	cursor: pointer;
	transition: background .15s, border-color .15s;
}

.epg-page-btn:hover { background: #f0f6ff; border-color: #2271b1; }
.epg-page-btn--active { background: #2271b1; color: #fff; border-color: #2271b1; }

.epg-gallery__count {
	text-align: center;
	font-size: .8rem;
	color: #757575;
	margin-top: 12px;
}

/* ── Lightbox ─────────────────────────────────────────────────────────────────── */
.epg-lightbox__backdrop {
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,.85);
	z-index: 9998;
}

.epg-lightbox {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	box-sizing: border-box;
}

.epg-lightbox__content {
	position: relative;
	max-width: 90vw;
	max-height: 90vh;
	display: flex;
	align-items: center;
	justify-content: center;
}

.epg-lightbox__img {
	max-width: 90vw;
	max-height: 85vh;
	object-fit: contain;
	border-radius: 2px;
	box-shadow: 0 0 40px rgba(0,0,0,.5);
}

.epg-lightbox__caption {
	position: absolute;
	bottom: -30px;
	left: 0;
	right: 0;
	text-align: center;
	color: #fff;
	font-size: .875rem;
}

.epg-lightbox__close {
	position: fixed;
	top: 16px;
	right: 20px;
	background: none;
	border: none;
	color: #fff;
	font-size: 2rem;
	cursor: pointer;
	line-height: 1;
	padding: 4px;
	z-index: 10000;
}

.epg-lightbox__nav {
	position: fixed;
	top: 50%;
	transform: translateY(-50%);
	background: rgba(255,255,255,.15);
	border: none;
	color: #fff;
	font-size: 2.5rem;
	cursor: pointer;
	padding: 12px 16px;
	z-index: 10000;
	border-radius: 2px;
	transition: background .2s;
}
.epg-lightbox__nav:hover { background: rgba(255,255,255,.3); }
.epg-lightbox__prev { left: 8px; }
.epg-lightbox__next { right: 8px; }

.epg-lightbox__loader {
	position: absolute;
	width: 40px;
	height: 40px;
	border: 3px solid rgba(255,255,255,.3);
	border-top-color: #fff;
	border-radius: 50%;
	animation: epg-spin .6s linear infinite;
	display: none;
}
.epg-lightbox__loader--visible { display: block; }

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

/* ── Subscribe Modal ──────────────────────────────────────────────────────────── */
.epg-modal__backdrop {
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,.6);
	z-index: 9998;
}

.epg-modal {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
}

.epg-modal__inner {
	background: #fff;
	border-radius: 6px;
	padding: 32px;
	max-width: 440px;
	width: 100%;
	position: relative;
	box-shadow: 0 8px 32px rgba(0,0,0,.2);
}

.epg-modal__close {
	position: absolute;
	top: 12px;
	right: 14px;
	background: none;
	border: none;
	font-size: 1.5rem;
	cursor: pointer;
	color: #757575;
	line-height: 1;
	padding: 4px;
}
.epg-modal__close:hover { color: #1d2327; }

.epg-modal__title { margin: 0 0 8px; font-size: 1.25rem; }
.epg-modal__text  { color: #555; margin: 0 0 20px; }

/* ── Subscribe Form ───────────────────────────────────────────────────────────── */
.epg-subscribe-form .epg-form-group {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin-bottom: 14px;
}

.epg-subscribe-form label {
	font-size: .875rem;
	font-weight: 600;
	color: #ffffff;
}

.epg-subscribe-form input {
	padding: 9px 12px;
	border: 1px solid #8c8f94;
	border-radius: 4px;
	font-size: 1rem;
	width: 100%;
	box-sizing: border-box;
	transition: border-color .15s, box-shadow .15s;
	color:#555;
}

.epg-subscribe-form input:focus {
	border-color: rgb(235 92 54 / var(--tw-border-opacity, 1));
	box-shadow: 0 0 0 2px rgba(34,113,177,.2);
	outline: none;
}

.epg-form-status {
	min-height: 20px;
	font-size: .875rem;
	border-radius: 4px;
	margin-bottom: 14px;
	padding: 0;
}

.epg-form-status:not(:empty) {
	padding: 8px 12px;
}

.epg-form-status--success { background: #edfaef; color: #1a6e1a; border: 1px solid #8bc34a; }
.epg-form-status--error   { background: #fef7f1; color: #d63638; border: 1px solid #d63638; }
.epg-form-status--info    { background: #f0f6ff; color: #2271b1; border: 1px solid #2271b1; }

.epg-subscribe-form .epg-btn {
	width: 100%;
	justify-content: center;
	margin-top: 4px;
}

/* ── Download Gate ────────────────────────────────────────────────────────────── */
.epg-download-gate {
	background: #f6f7f7;
	border: 1px solid #dcdcde;
	border-radius: 6px;
	padding: 24px;
}

.epg-download-gate h3 {
	margin-top: 0;
}

.epg-download-gate .epg-btn {
	margin-top: 12px;
}

/* ── Event List ───────────────────────────────────────────────────────────────── */
.epg-event-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 20px;
}

.epg-event-card__link {
	display: block;
	text-decoration: none;
	color: inherit;
	border: 1px solid #dcdcde;
	border-radius: 6px;
	overflow: hidden;
	transition: box-shadow .2s, border-color .2s;
}

.epg-event-card__link:hover {
	box-shadow: 0 4px 16px rgba(0,0,0,.1);
	border-color: #2271b1;
}

.epg-event-card__cover img {
	width: 100%;
	height: 180px;
	object-fit: cover;
	display: block;
}

.epg-event-card__body {
	padding: 14px;
}

.epg-event-card__title { margin: 0 0 6px; font-size: 1rem; }

.epg-event-card__date {
	display: block;
	font-size: .8rem;
	color: #757575;
	margin-bottom: 6px;
}

.epg-event-card__count {
	font-size: .8rem;
	color: #2271b1;
	font-weight: 600;
}

/* ── Empty state ──────────────────────────────────────────────────────────────── */
.epg-empty {
	text-align: center;
	padding: 40px;
	color: #757575;
}

/* ── Spinner ─────────────────────────────────────────────────────────────────── */
.epg-btn .epg-btn-spinner {
	display: inline-block;
	width: 14px;
	height: 14px;
	border: 2px solid rgba(255,255,255,.4);
	border-top-color: #fff;
	border-radius: 50%;
	animation: epg-spin .6s linear infinite;
}

/* ── Gallery Subscription Gate ────────────────────────────────────────────────── */
.epg-gallery-gate {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 48px 16px;
	min-height: 340px;
}

.epg-gallery-gate__card {
	background: #000;
	border: 1px solid #dcdcde;
	border-radius: 8px;
	padding: 40px 32px;
	max-width: 440px;
	width: 100%;
	text-align: center;
	box-shadow: 0 2px 16px rgba(0,0,0,.07);
}

.epg-gallery-gate__icon {
	width: 52px;
	height: 52px;
	margin: 0 auto 20px;
	color: rgb(235 92 54 / var(--tw-border-opacity, 1));
}

.epg-gallery-gate__icon svg {
	width: 100%;
	height: 100%;
}

.epg-gallery-gate__title {
	margin: 0 0 8px;
	font-size: 1.35rem;
}

.epg-gallery-gate__desc {
	color: #555;
	margin: 0 0 24px;
	font-size: .95rem;
}

.epg-gallery-gate__form {
	text-align: left;
}

.epg-gallery-gate .epg-btn {
	width: 100%;
	justify-content: center;
	margin-top: 4px;
}
.epg-gallery-gate .epg-btn--primary {
	background: rgb(235 92 54 / var(--tw-border-opacity, 1));
	color:#fff;
	border: 1px solid rgb(235 92 54 / var(--tw-border-opacity, 1));
}
.epg-gallery-gate .epg-btn--primary:hover { background: #fff; color:rgb(235 92 54 / var(--tw-border-opacity, 1)); border: 1px solid rgb(235 92 54 / var(--tw-border-opacity, 1)); }
@media (prefers-color-scheme: dark) {
	.epg-gallery-gate__card {
		background: #1d2327;
		border-color: #3c434a;
		box-shadow: 0 2px 16px rgba(0,0,0,.3);
	}
	.epg-gallery-gate__desc { color: #a7aaad; }
}
:root[data-theme="light"] .epg-gallery-gate__card { background: #fff; border-color: #dcdcde; }
:root[data-theme="dark"]  .epg-gallery-gate__card { background: #1d2327; border-color: #3c434a; }

/* ── Reduce motion ────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	.epg-gallery__img,
	.epg-gallery__overlay,
	.epg-btn { transition: none; }
	.epg-lightbox__loader,
	.epg-btn .epg-btn-spinner { animation: none; }
}