/* Slideshow lightbox player — companion to /js/slideshow_player.js. */

body.ssp-locked { overflow: hidden; }

.ssp-overlay {
    display: none;
    /* Use explicit position so iOS Safari's `inset` interpretation can't
       interact badly with rubber-band scrolling or the address bar.
       100dvh follows the dynamic viewport on iOS (shrinks when toolbars
       are visible); fallback to 100vh for older browsers. */
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    z-index: 200000;
    background: rgba(0,0,0,0.92);
    flex-direction: column;
    font-family: Arial, Helvetica, sans-serif;
    -webkit-overflow-scrolling: touch;
}
.ssp-overlay.active { display: flex; }

.ssp-topbar {
    flex: 0 0 auto;
    display: flex; align-items: center; gap: 16px;
    padding: 12px 20px; color: #fff;
    background: rgba(0,0,0,0.4);
}
/* Topbar layout: title (left, fixed) — caption (center, flex-grow) — counter
   + close (right, fixed). Both title and caption truncate with ellipsis if
   their natural text exceeds the space they're given so the row never wraps. */
.ssp-title {
    flex: 0 1 auto;
    font-size: 16px; font-weight: 700;
    min-width: 0; max-width: 35%;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ssp-caption {
    flex: 1 1 auto;
    text-align: center;
    font-size: 14px; color: #f5f5f5;
    min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ssp-counter { flex: 0 0 auto; font-size: 13px; color: #ccc; }
.ssp-close {
    background: none; color: #fff; border: 1px solid rgba(255,255,255,0.4);
    width: 36px; height: 36px; border-radius: 50%;
    font-size: 22px; line-height: 1; cursor: pointer; padding: 0;
}
.ssp-close:hover { background: rgba(255,255,255,0.15); }

.ssp-stage {
    flex: 1; min-height: 0;
    display: flex; align-items: center; justify-content: center;
    padding: 16px;
    overflow: hidden;
}
/* width/height 100% + object-fit:contain makes the image fill the full stage
   while preserving aspect ratio (letterboxing whichever axis has slack). With
   the previous max-width/max-height the image was capped at its NATURAL
   pixel size, so landscape iPad and rotated iPhone left huge unused margins. */
.ssp-img {
    width: 100%; height: 100%;
    object-fit: contain;
    box-shadow: 0 4px 30px rgba(0,0,0,0.5);
}

.ssp-arrow {
    position: absolute; top: 50%; transform: translateY(-50%);
    background: rgba(0,0,0,0.5); color: #fff; border: none;
    width: 56px; height: 80px; font-size: 36px; line-height: 1;
    cursor: pointer; padding: 0;
    transition: background 0.12s;
    z-index: 200001;
}
.ssp-arrow:hover { background: rgba(0,0,0,0.85); }
.ssp-prev { left: 16px; border-radius: 4px 0 0 4px; }
.ssp-next { right: 16px; border-radius: 0 4px 4px 0; }

/* (Bottom-bar caption removed — caption now lives in the topbar between
   title and page counter so the image gets the full vertical space.) */

/* Mobile + short-viewport tweaks — minimise chrome and stage padding so the
   image gets the maximum possible pixels. Applies to phones in either
   orientation + iPad in landscape. */
@media (max-width: 900px), (max-height: 600px) {
    .ssp-stage   { padding: 4px; }
    .ssp-arrow   { width: 40px; height: 60px; font-size: 28px; }
    .ssp-prev    { left: 4px; }
    .ssp-next    { right: 4px; }
    .ssp-title   { display: none; }  /* Tight viewports: drop title, give caption full width */
    .ssp-caption { font-size: 12px; text-align: left; }
    .ssp-topbar  { padding: 6px 10px; gap: 8px; }
    .ssp-close   { width: 30px; height: 30px; font-size: 18px; }
    .ssp-counter { font-size: 11px; }
}
/* Landscape phone — anything under 500px tall is essentially "phone rotated
   sideways". Shrink the topbar further so the image gets nearly the whole
   screen. */
@media (max-height: 500px) {
    .ssp-topbar  { padding: 3px 8px; }
    .ssp-caption { font-size: 11px; }
    .ssp-close   { width: 26px; height: 26px; font-size: 16px; }
}