/**
 * Single-listing photo carousel + lightbox (Phase C). Styled through --fas-* tokens
 * (depends on fas-lake-tokens). Transitions are gated behind prefers-reduced-motion.
 */

/* ---- Carousel (hero stage + arrows + counter + thumbs) ---- */
.fas-gallery { margin: 0 0 var(--fas-space-4); }

.fas-gallery__stage {
    position: relative;
    border-radius: var(--fas-radius-lg);
    overflow: hidden;
    background: var(--fas-bg-subtle);
}

.fas-gallery__open {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    cursor: zoom-in;
}

.fas-gallery__hero-img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
}

.fas-gallery__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    display: none; /* enhancement-only; revealed under .fas-gallery--js */
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: var(--fas-radius-full);
    background: var(--fas-surface);
    color: var(--fas-text);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    box-shadow: var(--fas-shadow-md);
    opacity: 0.9;
}
.fas-gallery__nav:hover { opacity: 1; }
.fas-gallery__nav--prev { left: var(--fas-space-3); }
.fas-gallery__nav--next { right: var(--fas-space-3); }

.fas-gallery__counter {
    position: absolute;
    bottom: var(--fas-space-3);
    right: var(--fas-space-3);
    padding: 4px 10px;
    border-radius: var(--fas-radius-full);
    background: var(--fas-overlay);
    color: var(--fas-surface);
    font-size: 12px;
    font-weight: 700;
    display: none; /* enhancement-only; revealed under .fas-gallery--js */
}

/* JS-enhanced: reveal the in-place carousel controls. */
.fas-gallery--js .fas-gallery__nav { display: flex; }
.fas-gallery--js .fas-gallery__counter { display: block; }

.fas-gallery__thumbs {
    display: flex;
    gap: var(--fas-space-2);
    overflow-x: auto;
    list-style: none;
    margin: var(--fas-space-2) 0 0;
    padding: 0 0 var(--fas-space-1);
}
.fas-gallery__thumb-item { flex: 0 0 auto; margin: 0; }
.fas-gallery__thumb {
    display: block;
    width: 84px;
    height: 60px;
    padding: 0;
    border: 2px solid transparent;
    border-radius: var(--fas-radius-sm);
    overflow: hidden;
    background: var(--fas-bg-subtle);
    cursor: pointer;
    opacity: 0.7;
}
.fas-gallery__thumb:hover,
.fas-gallery__thumb.is-active { opacity: 1; border-color: var(--fas-primary); }
.fas-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---- Lightbox ---- */
html.fas-lightbox-open { overflow: hidden; } /* lock the page scroll behind the overlay */

.fas-lightbox {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--fas-overlay);
}
.fas-lightbox[hidden] { display: none; }

.fas-lightbox__stage {
    margin: 0;
    max-width: 92vw;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.fas-lightbox__img {
    max-width: 92vw;
    max-height: 80vh;
    object-fit: contain;
    border-radius: var(--fas-radius-md);
}
.fas-lightbox__caption {
    margin-top: var(--fas-space-2);
    color: var(--fas-surface);
    font-size: 0.9em;
    text-align: center;
    opacity: 0.85;
}

.fas-lightbox__close,
.fas-lightbox__nav {
    position: absolute;
    border: 0;
    background: transparent;
    color: var(--fas-surface);
    cursor: pointer;
    line-height: 1;
}
.fas-lightbox__close { top: var(--fas-space-4); right: var(--fas-space-4); font-size: 36px; }
.fas-lightbox__nav { top: 50%; transform: translateY(-50%); font-size: 48px; padding: 0 var(--fas-space-3); }
.fas-lightbox__nav--prev { left: var(--fas-space-2); }
.fas-lightbox__nav--next { right: var(--fas-space-2); }

.fas-lightbox__counter {
    position: absolute;
    bottom: var(--fas-space-4);
    left: 50%;
    transform: translateX(-50%);
    color: var(--fas-surface);
    font-size: 13px;
    font-weight: 700;
    opacity: 0.85;
}

/* Motion only when the visitor allows it. */
@media (prefers-reduced-motion: no-preference) {
    .fas-gallery__hero-img,
    .fas-gallery__nav,
    .fas-gallery__thumb { transition: opacity 0.2s ease, border-color 0.2s ease; }
}

@media (max-width: 600px) {
    .fas-lightbox__nav { font-size: 36px; }
    .fas-lightbox__close { font-size: 30px; }
}