/* Simple Photo Gallery - Frontend Styles */

:root {
	--pmm-primary: #2271b1;
	--pmm-primary-hover: #135e96;
	--pmm-text: #1d2327;
	--pmm-border: #dcdcde;
	--pmm-bg: #ffffff;
}

.pmm-all-galleries-wrap {
	display: flex;
	flex-direction: column;
	gap: 32px;
	width: 100%;
}

.pmm-all-galleries-wrap .pmm-gallery-wrap {
	margin: 0;
}

.pmm-gallery-wrap {
	box-sizing: border-box;
	width: 100%;
	margin: 24px 0;
	--pmm-cols: 4;
}

.pmm-gallery-wrap *,
.pmm-gallery-wrap *::before,
.pmm-gallery-wrap *::after {
	box-sizing: border-box;
}

/* ------------------------------------------------------------------
 * Photo Grid
 * ---------------------------------------------------------------- */
.pmm-gallery-grid {
	display: grid !important;
	/* Inline style (set by PHP) takes precedence; this is the fallback */
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
	width: 100%;
	transition: opacity 0.25s ease;
}

/* Explicit per-column fallback classes (set on .pmm-gallery-grid by PHP) */
.pmm-gallery-grid.pmm-grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.pmm-gallery-grid.pmm-grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.pmm-gallery-grid.pmm-grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }

/* Neutralise any <p> or <br> that wpautop injects inside the grid */
.pmm-gallery-grid > p { display: contents !important; margin: 0 !important; padding: 0 !important; }
.pmm-gallery-grid > br { display: none !important; }

.pmm-gallery-grid.is-loading {
	opacity: 0.35;
	pointer-events: none;
}

.pmm-gallery-item {
	position: relative;
	overflow: hidden;
	border-radius: 4px;
	background: #f0f0f1;
	/* Prevent theme CSS from forcing items to span all columns */
	grid-column: auto !important;
	grid-row: auto !important;
	min-width: 0 !important;
	max-width: 100% !important;
	float: none !important;
	clear: none !important;
}

.pmm-photo-link {
	display: block;
	width: 100%;
	height: 100%;
	overflow: hidden;
	text-decoration: none;
	cursor: zoom-in;
	aspect-ratio: var(--pmm-aspect-ratio, auto);
}

.pmm-photo-link[aria-disabled="true"] {
	cursor: default;
	pointer-events: none;
}

.pmm-gallery-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.35s cubic-bezier(0.2, 0, 0, 1);
	border: 0;
	vertical-align: middle;
}

.pmm-photo-link:hover .pmm-gallery-img {
	transform: scale(1.04);
}

/* ------------------------------------------------------------------
 * Responsive Breakpoints
 * Desktop (>1024px): uses configured column count (inline style + class)
 * Tablet (641px – 1024px): 2 columns
 * Mobile (≤640px):  1 column
 * ---------------------------------------------------------------- */
@media screen and (max-width: 1024px) {
	.pmm-gallery-grid,
	.pmm-gallery-grid.pmm-grid-cols-2,
	.pmm-gallery-grid.pmm-grid-cols-3,
	.pmm-gallery-grid.pmm-grid-cols-4 {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 14px;
	}
}

@media screen and (max-width: 640px) {
	.pmm-gallery-grid,
	.pmm-gallery-grid.pmm-grid-cols-2,
	.pmm-gallery-grid.pmm-grid-cols-3,
	.pmm-gallery-grid.pmm-grid-cols-4 {
		grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
		gap: 10px;
	}
}

/* ------------------------------------------------------------------
 * Pagination (Section 7)
 * ---------------------------------------------------------------- */
.pmm-pagination-container {
	margin-top: 28px;
}

.pmm-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	align-items: center;
	justify-content: center;
}

.pmm-page-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	border: 1px solid var(--pmm-border);
	border-radius: 4px;
	background: var(--pmm-bg);
	color: var(--pmm-text);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	line-height: 1;
	transition: background 0.15s, border-color 0.15s, color 0.15s;
}

a.pmm-page-link:hover {
	border-color: var(--pmm-primary);
	color: var(--pmm-primary);
	background: #f6f7f7;
}

.pmm-page-link.is-current {
	background: var(--pmm-primary);
	border-color: var(--pmm-primary);
	color: #fff;
	cursor: default;
}

.pmm-page-gap {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 30px;
	height: 40px;
	color: #8c8f94;
	font-size: 14px;
	user-select: none;
}

.pmm-page-prev,
.pmm-page-next {
	font-weight: 600;
	padding: 0 16px;
}

/* ------------------------------------------------------------------
 * Lightbox Modal (Section 6)
 * ---------------------------------------------------------------- */
html.pmm-lock,
body.pmm-lock {
	overflow: hidden !important;
	touch-action: none;
}

.pmm-lb {
	position: fixed;
	inset: 0;
	z-index: 9999999;
	display: flex;
	flex-direction: column;
	background: rgba(10, 10, 12, 0.94);
	color: #fff;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	user-select: none;
	-webkit-user-select: none;
}

.pmm-lb[hidden] {
	display: none !important;
}

.pmm-lb__toolbar {
	position: relative;
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 18px;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 100%);
}

.pmm-lb__counter {
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.5px;
	color: rgba(255, 255, 255, 0.85);
}

.pmm-lb__actions {
	display: flex;
	align-items: center;
	gap: 8px;
}

.pmm-lb__btn,
.pmm-lb__nav {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.12);
	color: #ffffff;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	transition: background 0.15s, transform 0.15s;
}

.pmm-lb__btn:hover,
.pmm-lb__nav:hover {
	background: rgba(255, 255, 255, 0.28);
	transform: scale(1.05);
}

.pmm-lb__btn:focus-visible,
.pmm-lb__nav:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: 2px;
}

.pmm-lb__btn--close {
	font-size: 28px;
	background: rgba(255, 255, 255, 0.18);
}

.pmm-lb__stage {
	position: relative;
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	touch-action: none;
}

.pmm-lb__image {
	max-width: 95vw;
	max-height: 90vh;
	object-fit: contain;
	transform-origin: center center;
	transition: transform 0.12s ease-out, opacity 0.2s ease;
	cursor: zoom-in;
	will-change: transform;
	border-radius: 2px;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.pmm-lb__stage.is-zoomed .pmm-lb__image {
	cursor: grab;
	transition: none;
}

.pmm-lb__stage.is-zoomed:active .pmm-lb__image {
	cursor: grabbing;
}

.pmm-lb.is-loading .pmm-lb__image {
	opacity: 0.3;
}

.pmm-lb__spinner {
	display: none;
	position: absolute;
	width: 44px;
	height: 44px;
	border: 4px solid rgba(255, 255, 255, 0.2);
	border-top-color: #ffffff;
	border-radius: 50%;
	animation: pmm-spin 0.8s linear infinite;
	z-index: 5;
}

.pmm-lb.is-loading .pmm-lb__spinner {
	display: block;
}

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

.pmm-lb__nav {
	position: absolute;
	top: 50%;
	z-index: 10;
	margin-top: -24px;
	width: 48px;
	height: 48px;
	font-size: 36px;
	font-weight: 300;
	background: rgba(0, 0, 0, 0.4);
	border: 1px solid rgba(255, 255, 255, 0.15);
}

.pmm-lb__prev {
	left: 16px;
}

.pmm-lb__next {
	right: 16px;
}

.pmm-lb--single .pmm-lb__nav,
.pmm-lb--single .pmm-lb__counter {
	display: none !important;
}

@media (max-width: 640px) {
	.pmm-lb__nav {
		width: 40px;
		height: 40px;
		font-size: 28px;
	}
	.pmm-lb__prev {
		left: 8px;
	}
	.pmm-lb__next {
		right: 8px;
	}
	.pmm-lb__btn {
		width: 38px;
		height: 38px;
		font-size: 18px;
	}
	.pmm-lb__toolbar {
		padding: 8px 12px;
	}
}

/* ================================================================
 * Album-Based Gallery Grid (photo_gallery_all)
 * ================================================================ */
.pmm-album-root {
	width: 100%;
	box-sizing: border-box;
	margin: 0 0 30px 0;
}

.pmm-album-root *,
.pmm-album-root *::before,
.pmm-album-root *::after {
	box-sizing: border-box;
}

.pmm-album-cards-view {
	width: 100%;
}

.pmm-album-cards-view[hidden],
.pmm-album-photo-view[hidden] {
	display: none !important;
}

/* Responsive Album Grid */
.pmm-album-grid {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	gap: 24px !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.pmm-album-grid.pmm-grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }
.pmm-album-grid.pmm-grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.pmm-album-grid.pmm-grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.pmm-album-grid.pmm-grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
.pmm-album-grid.pmm-grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
.pmm-album-grid.pmm-grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }

@media screen and (max-width: 1024px) {
	.pmm-album-grid,
	.pmm-album-grid.pmm-grid-cols-1,
	.pmm-album-grid.pmm-grid-cols-2,
	.pmm-album-grid.pmm-grid-cols-3,
	.pmm-album-grid.pmm-grid-cols-4,
	.pmm-album-grid.pmm-grid-cols-5,
	.pmm-album-grid.pmm-grid-cols-6 {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 18px !important;
	}
}

@media screen and (max-width: 640px) {
	.pmm-album-grid,
	.pmm-album-grid.pmm-grid-cols-1,
	.pmm-album-grid.pmm-grid-cols-2,
	.pmm-album-grid.pmm-grid-cols-3,
	.pmm-album-grid.pmm-grid-cols-4,
	.pmm-album-grid.pmm-grid-cols-5,
	.pmm-album-grid.pmm-grid-cols-6 {
		grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
		gap: 16px !important;
	}
}

/* Album Card Component */
.pmm-album-card {
	display: flex !important;
	flex-direction: column !important;
	background: #ffffff !important;
	border: 1px solid #e2e8f0 !important;
	border-radius: 12px !important;
	overflow: hidden !important;
	cursor: pointer !important;
	padding: 0 !important;
	margin: 0 !important;
	text-align: left !important;
	font-family: inherit !important;
	text-decoration: none !important;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05) !important;
	transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s !important;
	width: 100% !important;
	position: relative !important;
}

.pmm-album-card:hover,
.pmm-album-card:focus-visible {
	transform: translateY(-4px) !important;
	box-shadow: 0 16px 28px -6px rgba(0, 0, 0, 0.12), 0 6px 12px -4px rgba(0, 0, 0, 0.06) !important;
	border-color: #cbd5e1 !important;
	outline: none !important;
}

.pmm-album-card:focus-visible {
	box-shadow: 0 0 0 3px rgba(34, 113, 177, 0.35), 0 16px 28px -6px rgba(0, 0, 0, 0.12) !important;
}

/* Album Cover Image */
.pmm-album-cover {
	position: relative !important;
	width: 100% !important;
	aspect-ratio: 4 / 3 !important;
	overflow: hidden !important;
	background: #f1f5f9 !important;
	display: block !important;
}

.pmm-album-cover img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	display: block !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.pmm-album-card:hover .pmm-album-cover img {
	transform: scale(1.05) !important;
}

.pmm-album-cover-placeholder {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 100% !important;
	height: 100% !important;
	background: #f1f5f9 !important;
	color: #94a3b8 !important;
}

.pmm-album-cover-placeholder .dashicons {
	font-size: 44px !important;
	width: 44px !important;
	height: 44px !important;
}

/* Album Meta Details */
.pmm-album-info {
	padding: 14px 16px 16px !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 4px !important;
	background: #ffffff !important;
	flex-grow: 1 !important;
}

.pmm-album-title {
	font-size: 16px !important;
	font-weight: 600 !important;
	color: #0f172a !important;
	line-height: 1.35 !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	white-space: nowrap !important;
	display: block !important;
}

.pmm-album-count {
	font-size: 13px !important;
	color: #64748b !important;
	font-weight: 500 !important;
	display: block !important;
}

/* ================================================================
 * Opened Album View & Header
 * ================================================================ */
.pmm-album-photo-view {
	width: 100% !important;
}

.pmm-album-photo-header {
	display: flex !important;
	align-items: center !important;
	gap: 16px !important;
	margin-bottom: 22px !important;
	padding-bottom: 14px !important;
	border-bottom: 1px solid #e2e8f0 !important;
	flex-wrap: wrap !important;
}

.pmm-album-photo-title {
	font-size: 22px !important;
	font-weight: 700 !important;
	color: #0f172a !important;
	margin: 0 !important;
	padding: 0 !important;
	line-height: 1.25 !important;
	letter-spacing: -0.01em !important;
}

/* Back Button */
.pmm-back-btn {
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
	padding: 8px 16px !important;
	border: 1px solid #cbd5e1 !important;
	border-radius: 8px !important;
	background: #ffffff !important;
	color: #1e293b !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	cursor: pointer !important;
	transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
	white-space: nowrap !important;
	flex-shrink: 0 !important;
	text-decoration: none !important;
	line-height: 1.4 !important;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}

.pmm-back-btn:hover {
	background: #f8fafc !important;
	border-color: #94a3b8 !important;
	color: #0f172a !important;
	transform: translateX(-2px) !important;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08) !important;
}

.pmm-back-btn:focus-visible {
	outline: 2px solid #2563eb !important;
	outline-offset: 2px !important;
}

.pmm-back-btn__arrow {
	font-size: 16px !important;
	line-height: 1 !important;
	display: inline-block !important;
	transition: transform 0.2s ease !important;
}

.pmm-back-btn:hover .pmm-back-btn__arrow {
	transform: translateX(-3px) !important;
}

/* Album Loading & Error States */
.pmm-album-loading {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-height: 240px !important;
	width: 100% !important;
}

.pmm-album-spinner {
	display: inline-block !important;
	width: 40px !important;
	height: 40px !important;
	border: 3px solid rgba(0, 0, 0, 0.1) !important;
	border-radius: 50% !important;
	border-top-color: #2563eb !important;
	animation: pmm-spin 0.8s linear infinite !important;
}

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

.pmm-album-error {
	padding: 24px !important;
	background: #fef2f2 !important;
	border: 1px solid #fecaca !important;
	border-radius: 8px !important;
	color: #991b1b !important;
	text-align: center !important;
	margin: 20px 0 !important;
}