/* =========================
   ARC FACILITY PHOTO GALLERY
   Navy + gold, white panel
   (separate file - does not touch facilities.css)
   ========================= */

.gallery-modal,
.gallery-viewer {

    --g-navy: #14294b;
    --g-navy-deep: #0f2140;
    --g-gold: #e3b94f;
    --g-gold-dark: #d2a63a;
    --g-border: #d3e0ec;
    --g-cream: #faf6e8;

    font-family: Arial, Helvetica, sans-serif;

}


/* =========================
   CLICKABLE CARDS
   ========================= */

.facility-card[data-facility] {

    cursor: pointer;

    -webkit-tap-highlight-color: transparent;

}


.facility-card[data-facility]:focus-visible {

    outline: 2px solid #e3b94f;

    outline-offset: 3px;

}


.gallery-hint {

    text-align: center;

    margin: 4px auto 18px;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 12px;

    letter-spacing: 0.5px;

    opacity: 0.75;

}


/* Stop the page scrolling behind the popup */

body.gallery-open {

    overflow: hidden;

}


[hidden] {

    display: none !important;

}


/* =========================
   POPUP (list of photos)
   ========================= */

.gallery-modal {

    position: fixed;

    inset: 0;

    z-index: 1000;

    display: none;

    align-items: center;

    justify-content: center;

    padding: 18px;

    background: rgba(6, 18, 41, 0.78);

    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);

}


.gallery-modal.is-open {

    display: flex;

    animation: galleryFade 0.2s ease;

}


@keyframes galleryFade {

    from { opacity: 0; }
    to   { opacity: 1; }

}


.gallery-panel {

    width: 100%;

    max-width: 940px;

    max-height: 92vh;

    display: flex;

    flex-direction: column;

    background: #ffffff;

    border: 1px solid var(--g-gold-dark);

    border-radius: 18px;

    overflow: hidden;

    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);

}


.gallery-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 12px;

    padding: 16px 22px;

    background: linear-gradient(135deg, var(--g-navy-deep), var(--g-navy));

}


.gallery-kicker {

    display: block;

    color: #c9d6e8;

    font-size: 10px;

    font-weight: bold;

    letter-spacing: 3px;

    margin-bottom: 4px;

}


.gallery-header h3 {

    color: var(--g-gold);

    font-family: Georgia, "Times New Roman", serif;

    font-size: 24px;

    line-height: 1.2;

}


.gallery-close {

    flex-shrink: 0;

    width: 40px;

    height: 40px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: transparent;

    border: 1px solid var(--g-gold);

    border-radius: 50%;

    color: var(--g-gold);

    font-size: 26px;

    line-height: 1;

    cursor: pointer;

    transition: 0.25s;

}


.gallery-close:hover {

    background: var(--g-gold);

    color: var(--g-navy);

}


.gallery-body {

    padding: 20px;

    overflow-y: auto;

    background: #eef2f6;

}


/* =========================
   PHOTO GRID
   ========================= */

.gallery-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 14px;

}


.gallery-thumb {

    display: block;

    padding: 0;

    background: #ffffff;

    border: 1px solid var(--g-border);

    border-radius: 12px;

    overflow: hidden;

    cursor: zoom-in;

    aspect-ratio: 4 / 3;

    box-shadow: 0 3px 10px rgba(20, 41, 75, 0.08);

    transition: 0.25s;

}


.gallery-thumb:hover,
.gallery-thumb:focus-visible {

    border-color: var(--g-gold-dark);

    transform: translateY(-2px);

    box-shadow: 0 8px 18px rgba(20, 41, 75, 0.18);

    outline: none;

}


.gallery-thumb img {

    display: block;

    width: 100%;

    height: 100%;

    object-fit: cover;

}


.gallery-empty {

    padding: 28px 16px;

    text-align: center;

    background: var(--g-cream);

    border-left: 4px solid var(--g-gold-dark);

    border-radius: 4px;

    color: #2b3a52;

    font-size: 14px;

}


/* =========================
   FULL-SIZE VIEWER
   ========================= */

.gallery-viewer {

    position: fixed;

    inset: 0;

    z-index: 1100;

    display: none;

    align-items: center;

    justify-content: center;

    background: rgba(3, 10, 25, 0.95);

}


.gallery-viewer.is-open {

    display: flex;

}


.gallery-viewer img {

    max-width: 88vw;

    max-height: 82vh;

    object-fit: contain;

    border-radius: 8px;

    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);

}


.viewer-close,
.viewer-nav {

    position: absolute;

    display: flex;

    align-items: center;

    justify-content: center;

    background: rgba(20, 41, 75, 0.85);

    border: 1px solid var(--g-gold);

    border-radius: 50%;

    color: var(--g-gold);

    cursor: pointer;

    transition: 0.25s;

}


.viewer-close:hover,
.viewer-nav:hover {

    background: var(--g-gold);

    color: var(--g-navy);

}


.viewer-close {

    top: 16px;

    right: 16px;

    width: 42px;

    height: 42px;

    font-size: 28px;

    line-height: 1;

}


.viewer-nav {

    top: 50%;

    width: 46px;

    height: 46px;

    margin-top: -23px;

    font-size: 32px;

    line-height: 1;

    padding-bottom: 4px;

}


.viewer-prev {

    left: 16px;

}


.viewer-next {

    right: 16px;

}


.viewer-count {

    position: absolute;

    bottom: 18px;

    left: 0;

    right: 0;

    text-align: center;

    color: #c9d6e8;

    font-size: 13px;

    letter-spacing: 1px;

}


/* =========================
   MOBILE
   ========================= */

@media (max-width: 700px) {

    .gallery-modal {

        padding: 10px;

    }

    .gallery-header {

        padding: 13px 16px;

    }

    .gallery-header h3 {

        font-size: 20px;

    }

    .gallery-body {

        padding: 14px;

    }

    .gallery-grid {

        grid-template-columns: repeat(2, 1fr);

        gap: 10px;

    }

    .viewer-nav {

        width: 40px;

        height: 40px;

        margin-top: -20px;

        font-size: 28px;

    }

    .viewer-prev {

        left: 8px;

    }

    .viewer-next {

        right: 8px;

    }

    .gallery-viewer img {

        max-width: 96vw;

    }

}