/* Facilities gallery (auto-scroll) + lightbox — standalone add-on.
   Loaded AFTER site.css so it can't be lost when site.css changes. */
.gallery { overflow: hidden; padding: 4px 0 18px; }
.gallery__track {
    display: flex;
    gap: 14px;
    width: max-content;
    animation: gallery-scroll 40s linear infinite;
}
.gallery:hover .gallery__track { animation-play-state: paused; }
@keyframes gallery-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
[dir="rtl"] .gallery__track { animation-name: gallery-scroll-rtl; }
@keyframes gallery-scroll-rtl {
    from { transform: translateX(0); }
    to   { transform: translateX(50%); }
}
.gallery__item {
    flex: 0 0 auto;
    width: 340px;
    aspect-ratio: 4 / 3;
    border-radius: 6px;
    background: #f2eef1 center/cover no-repeat;
    background-image: var(--g-image);
    position: relative;
    overflow: hidden;
    border: 0;
    padding: 0;
    cursor: pointer;
    transition: transform .25s ease, box-shadow .25s ease;
}
.gallery__item:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(0,0,0,.18); }
.gallery__item span {
    position: absolute; inset: auto 0 0 0;
    background: linear-gradient(transparent, rgba(74,24,68,.82));
    color: #fff; padding: 28px 14px 12px; font-size: .82rem;
    opacity: 0; transition: opacity .25s;
}
.gallery__item:hover span { opacity: 1; }

/* Lightbox */
.lightbox {
    position: fixed; inset: 0; z-index: 200;
    display: flex; align-items: center; justify-content: center;
    background: rgba(28,10,26,.88);
    padding: 5vh 5vw;
    opacity: 0; visibility: hidden;
    transition: opacity .3s ease, visibility .3s ease;
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox__img {
    max-width: 100%; max-height: 90vh;
    border-radius: 8px; box-shadow: 0 20px 60px rgba(0,0,0,.5);
    transform: scale(.96); transition: transform .3s ease;
}
.lightbox.is-open .lightbox__img { transform: scale(1); }
.lightbox__close {
    position: absolute; top: 22px; right: 28px;
    background: none; border: 0; color: #fff; font-size: 2.4rem; line-height: 1;
    cursor: pointer; opacity: .85;
}
.lightbox__close:hover { opacity: 1; }

@media (max-width: 900px) { .gallery__item { width: 280px; } }
@media (max-width: 520px) { .gallery__item { width: 78vw; } }