/* pardee-gallery-modal — the 2026 photo-gallery lightbox on MLS listing detail
   pages. Markup is built by
   assets/js/pardee-gallery-modal.js from the JSON payload srDetailsGallery
   prints (simply-rets-api-helper.php). The overlay aesthetic mirrors the
   shared video modal (.pardee-vmodal in the pardee-properties-bb-modules
   module folders): ink overlay, cream chrome, clay focus ring, r-md frame,
   no motion on open. Enqueued only when sr-listings = sr-single. */

/* ── the grid cells are now real <button>s (keyboard + AT); the locked theme
      CSS styles .pardee-gallery__cell itself, this only strips UA button chrome ── */
button.pardee-gallery__cell {
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    padding: 0;
    margin: 0;
    font: inherit;
    text-align: inherit;
    color: inherit;
    display: block;
    width: 100%;
}
button.pardee-gallery__cell:focus-visible {
    outline: 3px solid var(--pp-clay-mid, #8f6336);
    outline-offset: -3px;
}

/* ── "View all N photos" pill: sized to FIT inside the bottom-right tile.

      The theme positions .pardee-gallery__more absolutely at right 14px /
      bottom 14px inside .pardee-gallery__cell (position:relative +
      overflow:hidden), so the tile is both the pill's containing block and its
      clipping box. At the design's size — 38px tall, 11.5px uppercase, .12em
      tracking, 16px side padding — "View all 49 photos" measures 189px, while a
      phone tile is ~157–192px (two columns) and even a 768–920px tablet tile is
      only ~179–210px. Wider than its own tile, the label is cut off.

      The pill must read inside ONE thumbnail, so the tile stays the containing block
      (theme default — no override here) and the pill is shrunk below 992px: shorter
      label ("All 49 photos"), 10.5px/.05em type, 10px side padding, 32px tall. 14px
      inset and the tap target are kept, desktop (≥992px, where the tile has room for
      the design's pill) is untouched. ── */
.pardee-gallery .pardee-gallery__more {
    z-index: 2;
    max-width: calc(100% - 28px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* One label visible at a time. The display switch between the two labels is
   printed inline with the page that carries them, alongside this file, so the
   pair always travels with the markup; the rules here size the pill only.
   display:none keeps the hidden label out of the accessibility tree, and the
   cell button's aria-label is what assistive tech announces. */
.pardee-gallery__more-full,
.pardee-gallery__more-short {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 991px) {
    .pardee-gallery .pardee-gallery__more {
        height: 32px;
        min-height: 32px;
        padding: 0 10px;
        font-size: 10.5px;
        letter-spacing: .05em;
        gap: 6px;
    }
}

/* ── overlay ─────────────────────────────────────────────── */
.pardee-gmodal {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    flex-direction: column;
    /* Solid ink (same hue family as the video modal's rgba(0,12,19,…) overlay):
       a full-screen surface you page 60+ photos on reads better with the page
       fully quieted — translucency left the listing page half-visible. */
    background: #000C13;
    color: var(--pp-cream, #fff6f0);
    font-family: var(--font-body, "Gotham", "Helvetica Neue", Arial, sans-serif);
}

/* ── top bar: address · counter · close ──────────────────── */
.pardee-gmodal__bar {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 14px 16px 14px 24px;
    min-height: 64px;
}
.pardee-gmodal__title {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    font-family: var(--font-display, "bodoni-pt-variable", "Bodoni 72", Georgia, serif);
    font-weight: var(--font-display-weight, 400);
    font-size: 22px;
    line-height: 1.2;
    letter-spacing: .01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pardee-gmodal__count {
    flex: 0 0 auto;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: .14em;
    text-transform: uppercase;
    font-variant-numeric: tabular-nums;
    color: rgba(255, 246, 240, .72);
}
.pardee-gmodal__close {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--pp-cream, #fff6f0);
    font-family: inherit;
    font-size: 30px;
    line-height: 1;
    cursor: pointer;
}
.pardee-gmodal__close:hover { background: rgba(255, 246, 240, .16); }

/* ── stage: arrows + photo ───────────────────────────────── */
.pardee-gmodal__stage {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 88px 28px;
    /* touch-action pans stay vertical so the horizontal swipe reaches us */
    touch-action: pan-y;
}
.pardee-gmodal__frame {
    margin: 0;
    max-width: 100%;
    max-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pardee-gmodal__img {
    max-width: 100%;
    max-height: calc(100vh - 120px);
    width: auto;
    height: auto;
    display: block;
    border-radius: var(--r-md, 8px);
    background: var(--pp-ink, #001621);
    box-shadow: 0 24px 64px rgba(0, 0, 0, .5);
    user-select: none;
    -webkit-user-drag: none;
}

.pardee-gmodal__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 52px;
    height: 52px;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 246, 240, .28);
    border-radius: 50%;
    background: rgba(0, 18, 28, .45);
    color: var(--pp-cream, #fff6f0);
    cursor: pointer;
}
.pardee-gmodal__nav:hover { background: rgba(255, 246, 240, .16); }
.pardee-gmodal__nav svg { display: block; width: 22px; height: 22px; }
.pardee-gmodal__nav--prev { left: 20px; }
.pardee-gmodal__nav--next { right: 20px; }

.pardee-gmodal__close:focus-visible,
.pardee-gmodal__nav:focus-visible {
    outline: 3px solid var(--pp-clay-mid, #8f6336);
    outline-offset: 2px;
}

/* one-photo listing: nothing to page through */
.pardee-gmodal--single .pardee-gmodal__nav,
.pardee-gmodal--single .pardee-gmodal__count { display: none; }

/* ── small screens: near-full-width photo, arrows tucked in ── */
@media (max-width: 768px) {
    .pardee-gmodal__bar { padding: 10px 8px 10px 16px; min-height: 56px; gap: 12px; }
    .pardee-gmodal__title { font-size: 17px; }
    .pardee-gmodal__count { font-size: 11px; }
    .pardee-gmodal__stage { padding: 0 8px 76px; }
    .pardee-gmodal__img { max-height: calc(100vh - 150px); border-radius: var(--r-sm, 4px); }
    .pardee-gmodal__nav { top: auto; bottom: 14px; transform: none; width: 48px; height: 48px; }
    .pardee-gmodal__nav--prev { left: calc(50% - 60px); }
    .pardee-gmodal__nav--next { right: calc(50% - 60px); }
}