/* =====================================================
   GALLERIES PAGE (plan 196)
   Scoped by .gallery-page. Square mosaic grid (folders first, then
   images/videos) + blurred-backdrop lightbox. Uses community theme vars.
   ===================================================== */

.gallery-page {
    --gallery-radius: 12px;
    --gallery-gap: 0.75rem;
    color: var(--text-primary, #1f2937);
}

/* ---------- Toolbar / search ---------- */
.gallery-toolbar {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.gallery-search {
    position: relative;
    display: flex;
    align-items: center;
    width: min(320px, 100%);
    margin-left: auto;   /* hug the right edge whether or not the breadcrumb is present */
}

.gallery-search > i {
    position: absolute;
    left: 0.85rem;
    color: var(--text-secondary, #4b5563);
    pointer-events: none;
}

.gallery-search__input {
    width: 100%;
    min-height: 44px;
    padding: 0.5rem 0.9rem 0.5rem 2.4rem;
    border: 1px solid #e1e4e8;
    border-radius: 999px;
    font-size: 0.95rem;
    background: #fff;
    color: var(--text-primary, #1f2937);
}

.gallery-search__input:focus-visible {
    outline: 3px solid var(--community-primary, #6a4a9e);
    outline-offset: 1px;
    border-color: var(--community-primary, #6a4a9e);
}

/* ---------- Breadcrumb ---------- */
.gallery-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 0;   /* spacing owned by .gallery-toolbar row */
    font-size: 0.9rem;
}

.gallery-breadcrumb__crumb {
    background: none;
    border: none;
    padding: 0.25rem 0.4rem;
    color: var(--community-primary, #6a4a9e);
    cursor: pointer;
    border-radius: 6px;
    font: inherit;
}

.gallery-breadcrumb__crumb:hover:not(:disabled) {
    background: rgba(0, 0, 0, 0.04);
    text-decoration: underline;
}

.gallery-breadcrumb__crumb.is-current {
    color: var(--text-primary, #1f2937);
    font-weight: 600;
    cursor: default;
}

.gallery-breadcrumb__crumb:focus-visible {
    outline: 3px solid var(--community-primary, #6a4a9e);
    outline-offset: 1px;
}

.gallery-breadcrumb__sep {
    color: var(--text-secondary, #4b5563);
    opacity: 0.6;
}

/* ---------- Grid + tiles ---------- */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--gallery-gap);
}

.gallery-tile {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: var(--gallery-radius);
    border: none;
    padding: 0;
    cursor: pointer;
    background: #f3f4f6;
    display: block;
    width: 100%;
}

.gallery-tile img,
.gallery-tile video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.gallery-tile:focus-visible {
    outline: 3px solid var(--community-primary, #6a4a9e);
    outline-offset: -3px;
}

/* Back tile */
.gallery-tile--back {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    background: var(--community-primary, #6a4a9e);
    color: #fff;
    font-weight: 600;
}

.gallery-tile--back i {
    font-size: 1.6rem;
}

/* Folder tile: 2x2 mosaic cover + name overlay */
.gallery-folder-tile {
    background: #e5e7eb;
}

.gallery-folder-mosaic {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 2px;
}

.gallery-folder-mosaic img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 1 image → span the whole tile; 3 images → first spans the top row */
.gallery-folder-mosaic img:only-child {
    grid-column: 1 / -1;
    grid-row: 1 / -1;
}

.gallery-folder-mosaic img:first-child:nth-last-child(3) {
    grid-column: 1 / -1;
}

.gallery-folder-name {
    position: absolute;
    inset: auto 0 0 0;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 1.5rem 0.7rem 0.6rem;
    color: #fff;
    font-size: 0.9rem;
    font-weight: 600;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Media tile hover + video badge */
.gallery-media-tile img,
.gallery-media-tile video {
    transition: transform 0.25s ease;
}

.gallery-media-tile:hover img,
.gallery-media-tile:hover video {
    transform: scale(1.05);
}

.gallery-video-badge {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 2rem;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.55);
    pointer-events: none;
}

.gallery-empty {
    padding: 2rem 1rem;
    text-align: center;
    color: var(--text-secondary, #4b5563);
}

.gallery-loading {
    display: flex;
    justify-content: center;
    padding: 3rem 1rem;
}

.gallery-sentinel {
    height: 1px;
}

/* ---------- Lightbox ---------- */
.gallery-lightbox__backdrop {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    flex-direction: column;   /* stack figure + nav cluster, centered */
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    background: rgba(15, 15, 20, 0.6);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.gallery-lightbox__stage {
    position: relative;
    margin: 0;
    max-width: 90vw;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.gallery-lightbox__media {
    max-width: 90vw;
    max-height: 72vh;   /* leave room for caption + nav cluster in the column */
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5);
    background: #000;
}

/* Caption: title always; description revealed on hover/focus or .is-open (touch ⓘ toggle) */
.gallery-lightbox__caption {
    margin-top: 0.75rem;
    max-width: 90vw;
    text-align: center;
    color: #fff;
}

.gallery-lightbox__title {
    font-size: 1rem;
    font-weight: 600;
}

.gallery-lightbox__info {
    margin-left: 0.5rem;
    min-width: 44px;
    min-height: 44px;
    border: none;
    background: none;
    color: #fff;
    cursor: pointer;
    opacity: 0.85;
}

.gallery-lightbox__desc {
    display: block;
    margin-top: 0.4rem;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.85);
    transition: max-height 0.25s ease, opacity 0.25s ease;
}

.gallery-lightbox__caption:hover .gallery-lightbox__desc,
.gallery-lightbox__caption:focus-within .gallery-lightbox__desc,
.gallery-lightbox__caption.is-open .gallery-lightbox__desc {
    max-height: 8rem;
    opacity: 1;
}

/* Nav + close buttons (>= 44px touch targets). Note: NOT absolute — nav buttons flow
   inside .gallery-lightbox__toolbar; only Close is pinned (below). */
.gallery-lightbox__close,
.gallery-lightbox__nav {
    z-index: 1;
    min-width: 48px;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    font-size: 1.25rem;
    cursor: pointer;
}

.gallery-lightbox__close { position: absolute; top: 1rem; right: 1rem; }

/* All nav + counter in one centered cluster under the caption (flows in the backdrop column) */
.gallery-lightbox__toolbar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.gallery-lightbox__close:hover:not(:disabled),
.gallery-lightbox__nav:hover:not(:disabled) {
    background: rgba(0, 0, 0, 0.7);
}

.gallery-lightbox__close:focus-visible,
.gallery-lightbox__nav:focus-visible,
.gallery-lightbox__info:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 2px;
}

.gallery-lightbox__nav:disabled {
    opacity: 0.3;
    cursor: default;
}

.gallery-lightbox__counter {
    min-width: 3.25rem;
    text-align: center;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.85rem;
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    .gallery-page *,
    .gallery-lightbox__backdrop * {
        transition: none !important;
        animation: none !important;
    }
    .gallery-media-tile:hover img,
    .gallery-media-tile:hover video {
        transform: none;
    }
}

/* ---------- Mobile ---------- */
@media (max-width: 600px) {
    .gallery-grid {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    }
}

/* =====================================================
   CAROUSEL GALLERY (plan 198)
   Single horizontal scroll-row variant of .gallery-page.
   Reuses .gallery-tile / .gallery-media-tile for tile visuals.
   ===================================================== */
.gallery-carousel {
    color: var(--text-primary, #1f2937);
}

.gallery-carousel__viewport {
    position: relative;
}

.gallery-carousel__track {
    display: flex;
    gap: var(--gallery-gap, 0.75rem);
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;   /* decision #11 */
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    /* Scrolling stays (arrows + swipe + snap drive it); hide the native scrollbar for a clean strip. */
    scrollbar-width: none;           /* Firefox */
    -ms-overflow-style: none;        /* legacy Edge/IE */
}

.gallery-carousel__track::-webkit-scrollbar {
    display: none;                   /* WebKit / Blink */
}

/* Fixed 180px squares in the flow (decision #3/#4); reuse .gallery-tile visuals. */
.gallery-carousel__tile {
    flex: 0 0 180px;
    width: 180px;
    height: 180px;
    aspect-ratio: auto;              /* override .gallery-tile's 1/1 (we set explicit px) */
    scroll-snap-align: start;
}

.gallery-carousel__sentinel {
    flex: 0 0 1px;
}

/* Floating edge arrows — same circular visual as the lightbox nav (decision #6). */
.gallery-carousel__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    min-width: 48px;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    font-size: 1.25rem;
    cursor: pointer;
}

.gallery-carousel__arrow--prev { left: 0.5rem; }
.gallery-carousel__arrow--next { right: 0.5rem; }

.gallery-carousel__arrow:hover:not(:disabled) { background: rgba(0, 0, 0, 0.7); }

.gallery-carousel__arrow:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 2px;
}

/* Auto-hide at the ends (decision #7). */
.gallery-carousel__arrow.is-hidden { display: none; }

/* Hide arrows on touch / small screens — swipe only (decision #8). */
@media (hover: none), (max-width: 768px) {
    .gallery-carousel__arrow { display: none; }
}

/* Reduced motion: no smooth scroll. */
@media (prefers-reduced-motion: reduce) {
    .gallery-carousel__track { scroll-behavior: auto; }
}