/*
  Pictures slideshow — replaces the SimpleThumbview/slideshowBoxEmbedCanvas
  <canvas> widget. Built to be driven entirely by pictures-slideshow.js.

  Stage height is reserved by this file (min(70vh, 720px)) before any image
  loads, which is the whole reason there is zero layout shift regardless of
  aspect ratio — the server has no pixel dimensions to hand us. Real media
  queries only below; the body.sm / body.md jRespond classes the old widget
  depended on are not used here.
*/

/*
  The widget is a flex column so the stage can absorb whatever vertical space
  is left after the strip and chrome have taken theirs. On the pictures topic
  page the parent (.wrapper-land) is a bounded flex column, so the stage
  shrinks from the height below to fit; everywhere the parent height is auto
  (mobile, where jRespond drops .wrapper-land to height: auto) there is nothing
  to shrink against and the stage keeps that height outright. That is what
  lets one rule serve both without branching on the body.sm / body.md classes.
*/
.ps-root {
    width: 100%;
    box-sizing: border-box;
    margin: 24px 0;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

.ps-stage {
    position: relative;
    /* Acts as the flex basis, so it is both the preferred height and the cap. */
    height: min(70vh, 720px);
    flex: 1 1 auto;
    /* Floor, so a short viewport degrades to a small stage rather than a
       collapsed one. */
    min-height: 180px;
    display: grid;
    place-items: center;
    background: transparent;
}

/* Both stage layers occupy the same grid cell so the crossfade happens in
   place rather than one layer being laid out below the other. */
.ps-stage-img {
    grid-column: 1;
    grid-row: 1;
    max-width: 100%;
    max-height: 100%;
    /* Grid items default to min-height/min-width: auto, which for a replaced
       element is its intrinsic size — so a tall portrait would refuse to shrink
       and max-height: 100% would never bind, letting it overrun the stage.
       Roughly half these images are portrait, so this is the common case. */
    min-height: 0;
    min-width: 0;
    object-fit: contain;
    box-sizing: border-box;
    border: 6px solid #fff;
    opacity: 0;
    transition: opacity 0.5s ease;
    /* The staged image links to the picture's page. */
    cursor: pointer;
}

.ps-stage-img:focus-visible {
    outline: 3px solid #f8941d;
    outline-offset: 2px;
}

.ps-stage-img.ps-active {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    /* Swap instantly after decode rather than crossfading. */
    .ps-stage-img {
        transition: none;
    }
}

.ps-stage-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    padding: 0;
    padding-bottom: 5px;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    font-family: inherit;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}

.ps-stage-arrow-prev {
    left: 12px;
}

.ps-stage-arrow-next {
    right: 12px;
}

.ps-stage-arrow:hover {
    background: rgba(0, 0, 0, 0.7);
}

.ps-stage-arrow:disabled {
    /* Disabled state has to look deliberate — Spanish (12 pictures) still has
       two directions to disable a stage arrow at, and this is not rare. */
    opacity: 0.35;
    cursor: default;
}

.ps-stage-arrow:focus-visible {
    outline: 3px solid #358ccc;
    outline-offset: 2px;
}

.ps-chrome {
    margin-top: 16px;
    text-align: center;
}

.ps-title {
    font-family: "omnes-pro", Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 20px;
    font-weight: 600;
    color: #222;
    margin-bottom: 8px;
    word-break: break-word;
}

.ps-meta {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 16px;
}

.ps-counter {
    font-family: "omnes-pro", Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    color: #666;
}

/* Play/pause is the ONLY way back once autoplay is paused (pause is
   permanent, no idle auto-resume), so it needs a real, high-contrast button
   rather than a subtle icon. */
.ps-play-pause {
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    padding: 5px 13px;
    border: 2px solid #f8941d;
    border-radius: 20px;
    background: #f8941d;
    color: #fff;
    cursor: pointer;
    /* inline-flex + gap keeps real spacing between the SVG icon and the
       label; box-sizing: border-box lets the JS-measured min-width (pinned
       to the wider of the play/pause states) map 1:1 onto the rendered
       width so the button never shifts when toggling. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-sizing: border-box;
}

.ps-play-pause svg {
    width: 13px;
    height: 15px;
    flex-shrink: 0;
    fill: currentColor;
}

.ps-play-pause:disabled {
    opacity: 0.35;
    cursor: default;
}

.ps-play-pause:focus-visible {
    outline: 3px solid #222;
    outline-offset: 2px;
}

.ps-more-link {
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    padding: 8px 20px;
    font-family: "omnes-pro", Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    border: 2px solid #f8941d;
    border-radius: 20px;
    color: #fff;
    cursor: pointer;
}

.ps-more-link:focus-visible {
    outline: 3px solid #358ccc;
    outline-offset: 2px;
}

.ps-strip {
    display: flex;
    align-items: stretch;
    gap: 8px;
    margin-top: 20px;
}

.ps-strip-arrow {
    flex: 0 0 auto;
    width: 32px;
    border: none;
    border-radius: 4px;
    background: #eee;
    color: #333;
    font-family: inherit;
    font-size: 20px;
    cursor: pointer;
}

.ps-strip-arrow:hover {
    background: #ddd;
}

.ps-strip-arrow:disabled {
    /* Spanish (12 pictures) is usually a single page, so both arrows disabled
       at once is the common case here, not an edge case — must read as
       deliberate, not broken. */
    opacity: 0.35;
    cursor: default;
    background: #eee;
}

.ps-strip-arrow:focus-visible {
    outline: 3px solid #358ccc;
    outline-offset: 2px;
}

/* Only the current page's thumbs are ever in the DOM. THUMB_SLOT_PX (96) in
   pictures-slideshow.js assumes each slot below is exactly 96px wide —
   changing this box's width requires updating that constant too. */
.ps-strip-track {
    display: flex;
    justify-content: center;
    overflow: hidden;
    flex: 1 1 auto;
    min-width: 0;
}

.ps-thumb {
    flex: 0 0 96px;
    width: 96px;
    height: 96px;
    box-sizing: border-box;
    padding: 4px;
    border: 2px solid transparent;
    background: none;
    cursor: pointer;
    overflow: hidden;
}

.ps-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.ps-thumb.ps-active {
    border-color: #358ccc;
}

.ps-thumb:focus-visible {
    outline: 3px solid #358ccc;
    outline-offset: 2px;
}

@media (max-width: 480px) {
    .ps-stage-arrow {
        width: 36px;
        height: 36px;
        font-size: 20px;
    }

    .ps-stage-arrow-prev {
        left: 6px;
    }

    .ps-stage-arrow-next {
        right: 6px;
    }

    .ps-title {
        font-size: 17px;
    }

    .ps-meta {
        gap: 10px;
    }
}