/**
 * Gallery page CSS — extracted from gallery.html mockup.
 * Loaded only on pages using the page-gallery.php template.
 */

body.page-template-page-gallery { background: var(--paper-light); color: var(--text-dark); }

/* Shared interior-page hero banner */
.hero-banner {
	position: relative;
	width: 100%;
	margin-top: 72px;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.hero-olive {
	width: 100%;
	height: 50px;
	background-color: rgba(90,107,51,0.06);
	opacity: 0.4;
	pointer-events: none;
}
.hero-banner-content {
	text-align: center;
	padding: 2.5rem 2rem 1.5rem;
}
.hero-banner-content h1 {
	font-family: var(--font-display);
	font-size: clamp(2.8rem, 6vw, 4.2rem);
	font-weight: 400;
	color: var(--text-dark);
	letter-spacing: 0.15em;
	text-transform: uppercase;
	margin-bottom: 0;
}
.hero-subtitle {
	font-family: var(--font-display);
	font-style: italic;
	color: var(--olive-green);
	margin-top: 0.5rem;
	font-size: 1.1rem;
}

/* GALLERY */
.gallery-page { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem 3rem; }

/* Filter tabs */
.gallery-filters { display: flex; justify-content: center; gap: 0.5rem; padding: 1.5rem 0 2.5rem; flex-wrap: wrap; }
.filter-btn { background: none; border: 1px solid transparent; border-radius: 0; color: var(--text-light); font-family: var(--font-display); font-size: 1.1rem; font-weight: 500; padding: 0.4rem 1.3rem; cursor: pointer; transition: all 0.3s ease; text-transform: uppercase; letter-spacing: 0.15em; }
.filter-btn:hover { color: var(--text-dark); }
.filter-btn.active { color: var(--olive-green); border-bottom: 1px solid var(--olive-green); }
.filter-btn:focus-visible { outline: 2px solid var(--olive-green); outline-offset: 4px; }

/* Grid */
.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 280px; grid-auto-flow: dense; gap: 0.6rem; }
.gallery-item { position: relative; overflow: hidden; border: 1px solid var(--rule); cursor: pointer; margin: 0; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease, opacity 0.3s ease; }
.gallery-item:hover img { transform: scale(1.03); }
.gallery-item .caption { position: absolute; bottom: 0; left: 0; right: 0; padding: 0.8rem 1rem; background: linear-gradient(transparent, rgba(26,26,30,0.75)); opacity: 0; transition: opacity 0.3s ease; }
.gallery-item:hover .caption { opacity: 1; }
.gallery-item:focus-visible { outline: 2px solid var(--gold-warm); outline-offset: 4px; }
.gallery-item:focus-within .caption { opacity: 1; }
/* Touch screens have no hover: keep captions visible */
@media (hover: none) { .gallery-item .caption { opacity: 1; } }

.caption span { font-family: var(--font-display); font-size: 0.9rem; font-weight: 400; color: var(--cream); letter-spacing: 0.05em; }

/* Hide filtered items */
.gallery-item.hidden { display: none; }

/* Tall items span 2 rows */
.gallery-item.tall { grid-row: span 2; }

/* Lightbox */
.lightbox { display: none; position: fixed; inset: 0; z-index: 500; background: rgba(26,26,30,0.92); backdrop-filter: blur(8px); align-items: center; justify-content: center; }
.lightbox.open { display: flex; }
.lightbox img { max-width: 90vw; max-height: 85vh; object-fit: contain; border: 1px solid rgba(201,169,110,0.2); }
.lightbox-close { position: absolute; top: 1.5rem; right: 1.5rem; background: none; border: none; color: var(--cream); font-size: 2rem; cursor: pointer; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; transition: color 0.3s; }
.lightbox-close:hover { color: var(--gold-warm); }
.lightbox-caption { position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); font-family: var(--font-display); font-size: 1.1rem; color: var(--cream); letter-spacing: 0.08em; text-align: center; }

/* MOBILE */
@media (max-width: 768px) {

.hero-banner { margin-top: 64px; }
.gallery-grid { grid-template-columns: 1fr 1fr; grid-auto-rows: 220px; }
.gallery-item.tall { grid-row: span 2; }
}
@media (max-width: 480px) {

.hero-banner { margin-top: 56px; }
.gallery-grid { grid-template-columns: 1fr 1fr; grid-auto-rows: 170px; gap: 0.4rem; }
.gallery-item .caption { padding: 0.5rem 0.6rem; }
.caption span { font-size: 0.8rem; }
.gallery-item.tall { grid-row: span 2; }
.gallery-filters { gap: 0.3rem; }
.filter-btn { font-size: 0.95rem; padding: 0.3rem 0.8rem; }
}