/* Shared gallery styles.
   Layout switches by photo count via :has() — partial only ships markup.
   Counts supported in grid (desktop): 1, 2, 3, 4, 5+. Mobile is always a carousel. */

/* ─── DESKTOP GRID ─── */
.gallery-grid {
    position: relative;
    display: grid;
    gap: 8px;
    height: 460px;
    border-radius: var(--radius-md);
    overflow: hidden;
    margin-bottom: 40px;
}
.gallery-grid .photo-cell {
    background: var(--color-divider);
    overflow: hidden;
}
.gallery-grid .photo-cell img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    cursor: zoom-in;
    transition: opacity 0.2s ease;
}
.gallery-grid .photo-cell img:hover { opacity: 0.92; }

/* The grid always ends with a .gallery-show-all <button>, so the LAST .photo-cell
   is :nth-last-child(2). Use that to pin "exactly N photos" cases. */

/* 1 photo — full width */
.gallery-grid:has(.photo-cell:nth-child(1):nth-last-child(2)) {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
}

/* 2 photos — 50/50 split */
.gallery-grid:has(.photo-cell:nth-child(2):nth-last-child(2)) {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
}

/* 3 OR 4 photos — 1 big left (2fr, spans both rows) + 2 small stacked right.
   For 4 photos, the 4th cell is hidden from the grid but stays in the DOM for
   the lightbox to pick up via the "Show all" button. */
.gallery-grid:has(.photo-cell:nth-child(3):nth-last-child(2)),
.gallery-grid:has(.photo-cell:nth-child(4):nth-last-child(2)) {
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 1fr 1fr;
}
.gallery-grid:has(.photo-cell:nth-child(3):nth-last-child(2)) > .photo-cell:nth-child(1),
.gallery-grid:has(.photo-cell:nth-child(4):nth-last-child(2)) > .photo-cell:nth-child(1) {
    grid-row: 1 / 3;
}
.gallery-grid:has(.photo-cell:nth-child(4):nth-last-child(2)) > .photo-cell:nth-child(4) {
    display: none;
}

/* 5+ photos — Airbnb-style 1 main + 4 thumbs (2x2). Anything past 5 stays in
   DOM for the lightbox but is hidden from the grid. */
.gallery-grid:has(.photo-cell:nth-child(5)) {
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
}
.gallery-grid:has(.photo-cell:nth-child(5)) > .photo-cell:nth-child(1) {
    grid-row: 1 / 3;
}
.gallery-grid:has(.photo-cell:nth-child(6)) > .photo-cell:nth-child(n+6) {
    display: none;
}

/* "Show all" button — only when at least one photo is hidden from the grid
   (i.e. 4+ photos). */
.gallery-grid .gallery-show-all { display: none; }
.gallery-grid:has(.photo-cell:nth-child(4)) .gallery-show-all {
    position: absolute;
    right: 18px;
    bottom: 18px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: var(--color-surface-alt);
    border: none;
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text);
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
    transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.gallery-grid .gallery-show-all:hover {
    background-color: var(--color-bg);
    transform: scale(1.03);
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.22);
}
.gallery-grid .gallery-show-all svg { width: 14px; height: 14px; stroke-width: 2; }

/* ─── VIEWPORT 2 (744–949): cap the grid at 3 photos ───
   Tablet-ish widths are too narrow for the 5-cell Airbnb layout to read well,
   so we fall back to "big left + 2 stacked right" — same shape as the 3/4-photo
   case. Extra photos stay in the DOM for the lightbox. */
@media (min-width: 744px) and (max-width: 949px) {
    .gallery-grid:has(.photo-cell:nth-child(5)) {
        grid-template-columns: 2fr 1fr;
        grid-template-rows: 1fr 1fr;
    }
    .gallery-grid:has(.photo-cell:nth-child(5)) > .photo-cell:nth-child(1) {
        grid-row: 1 / 3;
    }
    .gallery-grid:has(.photo-cell:nth-child(5)) > .photo-cell:nth-child(n+4) {
        display: none;
    }
}

/* ─── MOBILE CAROUSEL ─── */
.gallery-carousel { display: none; } /* hidden on desktop */

@media (max-width: 743px) {
    .gallery-grid { display: none; }

    .gallery-carousel {
        display: block;
        position: relative;
        width: 100vw;
        margin-left: calc(50% - 50vw);
        height: auto;
        aspect-ratio: 4 / 3;
        overflow: hidden;
        margin-bottom: 24px;
        /* Left/right slivers = 36px each (matches chevron button width).
           Center photo fills the remaining (100vw - 72px). */
        --slot-w: calc(100vw - 72px);
    }
    .carousel-track {
        display: flex;
        height: 100%;
        will-change: transform;
    }
    .carousel-track.animated { transition: transform 0.4s ease; }
    .carousel-slot {
        flex: 0 0 var(--slot-w);
        height: 100%;
        padding: 0 4px;
        box-sizing: border-box;
    }
    .carousel-slot img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: var(--radius-sm);
        display: block;
        cursor: zoom-in;
        transition: opacity 0.2s ease;
    }
    .carousel-slot.photo-cell img:hover { opacity: 0.92; }
    .carousel-slot.is-clone img {
        cursor: default;
        pointer-events: none;
    }

    .carousel-nav {
        position: absolute;
        /* Full-height tap zone over the peeking side photo: tapping any part of
           the adjacent-photo sliver advances. Width = visible side-photo width
           (sliver minus the slot's 4px padding) so it lines up with the image edge. */
        top: 0;
        bottom: 0;
        width: calc((100vw - var(--slot-w)) / 2 - 4px);
        background: none;
        border: none;
        padding: 0;
        color: var(--color-bg);
        cursor: pointer;
        opacity: 0.7;
        transition: opacity 0.2s ease, transform 0.2s ease;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.45));
    }
    .carousel-nav:hover {
        opacity: 1;
        transform: scale(1.05);
    }
    .carousel-prev { left: 0; }
    .carousel-next { right: 0; }
    .carousel-nav svg { width: 36px; height: 72px; display: block; stroke-width: 2; }

    /* Hide nav buttons when only one real photo */
    .gallery-carousel:has(.carousel-slot.photo-cell:nth-child(2):last-of-type) .carousel-nav,
    .gallery-carousel:not(:has(.carousel-slot.photo-cell:nth-child(3))) .carousel-nav { }

    .gallery-carousel .gallery-show-all {
        position: absolute;
        right: calc((100vw - var(--slot-w)) / 2 + 12px);
        bottom: 12px;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 8px 14px;
        background: var(--color-surface-alt);
        border: none;
        border-radius: var(--radius-sm);
        font-family: inherit;
        font-size: 13px;
        font-weight: 500;
        color: var(--color-text);
        cursor: pointer;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
        transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
        z-index: 2;
    }
    .gallery-carousel .gallery-show-all:hover {
        background-color: var(--color-bg);
        transform: scale(1.03);
        box-shadow: 0 1px 5px rgba(0, 0, 0, 0.22);
    }
    .gallery-carousel .gallery-show-all svg { width: 14px; height: 14px; stroke-width: 2; }
}