/**
 * Vordonia Athenolia - Photo Gallery Page
 * @package Vordonia
 * @since 1.0.0
 */

/* ═══ HERO ═══ */
.gallery-hero { position: relative; min-height: 40vh; display: flex; align-items: center; justify-content: center; background-color: var(--vordonia-primary); padding-top: var(--header-height); text-align: center; overflow: hidden; }
.gallery-hero__overlay { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(143,13,18,0.9), rgba(107,10,14,0.95)); }
.gallery-hero__container { position: relative; z-index: 2; max-width: 700px; margin: 0 auto; padding: 4rem 2rem; }
.gallery-hero__title { font-family: var(--font-heading); font-size: clamp(2.5rem, 5vw, 4rem); font-weight: 700; font-style: italic; color: var(--vordonia-white); margin-bottom: 1rem; }
.gallery-hero__desc { font-size: 1.1rem; color: rgba(255,255,255,0.85); line-height: 1.7; }

/* ═══ GALLERY MAIN ═══ */
.gallery-main { padding: var(--section-padding) 2rem; background-color: var(--vordonia-cream); }
.gallery-main__container { max-width: var(--max-width); margin: 0 auto; }

/* ═══ FILTER ═══ */
.gallery-filter { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; margin-bottom: 3rem; }
.gallery-filter__btn { font-family: var(--font-heading); font-size: 0.95rem; font-weight: 600; padding: 0.6rem 1.5rem; border-radius: 50px; border: 2px solid var(--vordonia-primary); background: transparent; color: var(--vordonia-primary); cursor: pointer; transition: all 0.3s ease; }
.gallery-filter__btn:hover,
.gallery-filter__btn.is-active { background: var(--vordonia-primary); color: var(--vordonia-white); }

/* ═══ GRID ═══ */
.gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.gallery-grid__item { border-radius: 8px; overflow: hidden; aspect-ratio: 1; transition: opacity 0.4s ease, transform 0.4s ease; }
.gallery-grid__item.is-hidden { display: none; }
.gallery-grid__link { display: block; position: relative; width: 100%; height: 100%; }
.gallery-grid__link img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.gallery-grid__overlay { position: absolute; inset: 0; background: rgba(143,13,18,0.6); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s ease; }
.gallery-grid__link:hover .gallery-grid__overlay { opacity: 1; }
.gallery-grid__link:hover img { transform: scale(1.08); }
.gallery-grid__zoom { color: var(--vordonia-white); }
.gallery-empty { text-align: center; font-size: 1.1rem; color: #666; padding: 4rem 0; }

/* ═══ LIGHTBOX ═══ */
.vordonia-lightbox { position: fixed; inset: 0; z-index: 10000; background: rgba(0,0,0,0.92); display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; }
.vordonia-lightbox.is-open { opacity: 1; visibility: visible; }
.vordonia-lightbox__content { max-width: 90vw; max-height: 90vh; text-align: center; }
.vordonia-lightbox__img { max-width: 100%; max-height: 80vh; object-fit: contain; border-radius: 4px; }
.vordonia-lightbox__caption { color: rgba(255,255,255,0.8); font-size: 0.95rem; margin-top: 1rem; }
.vordonia-lightbox__close { position: absolute; top: 1.5rem; right: 2rem; background: none; border: none; color: var(--vordonia-white); font-size: 2.5rem; cursor: pointer; z-index: 10; line-height: 1; }
.vordonia-lightbox__prev,
.vordonia-lightbox__next { position: absolute; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--vordonia-white); font-size: 2.5rem; cursor: pointer; padding: 1rem; z-index: 10; }
.vordonia-lightbox__prev { left: 1rem; }
.vordonia-lightbox__next { right: 1rem; }

/* ═══ RESPONSIVE ═══ */
@media (max-width: 1024px) { .gallery-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) {
    .gallery-grid { grid-template-columns: 1fr; }
    .vordonia-lightbox__prev,
    .vordonia-lightbox__next { font-size: 1.8rem; }
}