/* TributePoint — programme booklet viewer
 *
 * Presents a rasterised programme PDF as a booklet: one page at a time, a
 * thumbnail strip to jump around, zoom, and a fullscreen reader.
 *
 * Progressive enhancement. Without JavaScript the markup is a plain stack of
 * page images and stays perfectly readable — programme-viewer.js adds the
 * `is-ready` class, and every rule that hides or repositions anything is gated
 * behind it. A JS failure therefore degrades to the scrollable stack, never to
 * a blank card.
 *
 * Colours are inherited (currentColor / transparent) so the viewer sits inside
 * a light theme or a dark one without either needing to know about it.
 */

/* assets/css/program-builder.css caps `.prg-scroll` at 380px — right for a long
 * timeline list, wrong for full programme pages, which it cropped to their top
 * third. The viewer owns this override rather than the widget's inline <style>,
 * so everything that styles the viewer lives in one file.
 *
 * Specificity 0,3,0 deliberately beats both `.prg-scroll` (0,1,0) and
 * `.mem-programme-card .prg-scroll` (0,2,0) in includes/memorial_page.php. */
.prg-widget .prg-scroll.prg-scroll--pages {
    max-height: none;
    overflow-y: visible;
    overscroll-behavior: auto;
}

/* The viewer is a document surface, not part of the theme's furniture: a white
 * panel, centred, with the pages sitting on it like paper. That reads the same
 * whether the surrounding theme is near-black (theme 1, 8) or pale (theme 7).
 *
 * `color` is set EXPLICITLY rather than inherited. Every control below uses
 * currentColor, and a dark theme's light text would otherwise be invisible the
 * moment the surface turned white. The fullscreen reader is appended to <body>,
 * outside this surface, so it keeps its own dark palette. */
.pv {
    position: relative;
    /* `width` is needed as well as `max-width`: .prg-scroll is a column flexbox,
     * and `margin:0 auto` there makes the item shrink-wrap. The stage's slides are
     * absolutely positioned so it has no intrinsic width, and the panel collapsed
     * to the width of the thumbnail strip (322px on a 1440px screen). */
    width: 100%;
    max-width: 620px;
    margin: 0 auto;
    box-sizing: border-box;
    padding: 14px 14px 6px;
    border-radius: 14px;
    background: #ffffff;
    color: #1f1f22;
    box-shadow: 0 2px 18px rgba(0, 0, 0, .18);
}

/* Keep the download line with the surface rather than stranded full-width. */
.prg-pdf-foot { max-width: 620px; margin-left: auto; margin-right: auto; }

@media (max-width: 640px) {
    .pv { padding: 10px 10px 4px; border-radius: 12px; }
}

/* ── Stage ─────────────────────────────────────────────────────────────── */

.pv-stage {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.pv-page {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 10px;
    border: 1px solid rgba(127, 127, 127, .22);
    box-shadow: 0 2px 12px rgba(0, 0, 0, .10);
    background: #fff;
}

/* Once enhanced, the stage becomes a fixed-ratio booklet and the pages stack
 * inside it so one can physically turn over another. The ratio is set from the
 * first page's real dimensions by the script, so a portrait A4 programme and a
 * square one both sit correctly. */
.pv.is-ready .pv-stage {
    display: block;
    position: relative;
    perspective: 2200px;
    perspective-origin: 0 50%;
}
.pv.is-ready .pv-slide {
    position: absolute;
    inset: 0;
    display: none;
    transform-style: preserve-3d;
    backface-visibility: hidden;
}
.pv.is-ready .pv-slide.is-current { display: block; z-index: 1; }
.pv.is-ready .pv-slide.is-turning { display: block; z-index: 3; }
.pv.is-ready .pv-slide.is-under    { display: block; z-index: 2; }

.pv.is-ready .pv-page {
    width: 100%;
    height: 100%;
    object-fit: contain;
    cursor: zoom-in;
    /* The slide is preserve-3d, so each child paints its own back face. Without
     * this the turning sheet showed as a blank white rectangle once it passed
     * 90° — the reverse of the <img> and its white background — instead of
     * revealing the page underneath. */
    backface-visibility: hidden;
}

.pv-slide { position: relative; }

/* The turning page carries a soft gradient that sweeps as it lifts — that
 * shading is most of what sells the illusion of paper. */
.pv-shade {
    position: absolute;
    inset: 0;
    border-radius: 10px;
    pointer-events: none;
    opacity: 0;
    backface-visibility: hidden;
    background: linear-gradient(100deg, rgba(0,0,0,.34) 0%, rgba(0,0,0,.06) 38%, rgba(0,0,0,0) 62%);
}

/* Forward: the page lifts from its left edge and turns away, revealing the
 * next page underneath. Backward runs the same motion in reverse. */
@keyframes pvTurnFwd {
    from { transform: rotateY(0deg); }
    to   { transform: rotateY(-172deg); }
}
@keyframes pvTurnBack {
    from { transform: rotateY(-172deg); }
    to   { transform: rotateY(0deg); }
}
@keyframes pvShade {
    0%   { opacity: 0; }
    45%  { opacity: 1; }
    100% { opacity: 0; }
}

.pv.is-ready .pv-slide.is-turning {
    transform-origin: left center;
    animation: pvTurnFwd .62s cubic-bezier(.36, .12, .28, 1) forwards;
    box-shadow: 0 12px 34px rgba(0, 0, 0, .30);
    border-radius: 10px;
}
.pv.is-ready .pv-slide.is-turning.is-back {
    transform-origin: left center;
    animation-name: pvTurnBack;
}
.pv.is-ready .pv-slide.is-turning .pv-shade {
    animation: pvShade .62s ease-in-out forwards;
}

/* Honour the system preference: no turn, just a clean swap. */
@media (prefers-reduced-motion: reduce) {
    .pv.is-ready .pv-slide.is-turning,
    .pv.is-ready .pv-slide.is-turning .pv-shade { animation: none; }
    .pv.is-ready .pv-slide.is-turning { display: none; }
}

/* ── Controls ──────────────────────────────────────────────────────────── */

.pv-bar {
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 12px;
    flex-wrap: wrap;
}
.pv.is-ready .pv-bar { display: flex; }

.pv-nav { display: inline-flex; align-items: center; gap: 8px; }

.pv-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid rgba(127, 127, 127, .38);
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: .84rem;
    font-weight: 700;
    cursor: pointer;
    line-height: 1;
    transition: background .15s ease, border-color .15s ease, opacity .15s ease;
}
.pv-btn:hover:not(:disabled) { background: rgba(127, 127, 127, .14); }
.pv-btn:disabled { opacity: .35; cursor: default; }
.pv-btn:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.pv-btn svg { width: 17px; height: 17px; flex: none; }

.pv-count {
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .04em;
    font-variant-numeric: tabular-nums;
    opacity: .78;
    min-width: 62px;
    text-align: center;
}

/* ── Thumbnail strip ───────────────────────────────────────────────────── */

.pv-thumbs {
    display: none;
    gap: 8px;
    margin-top: 12px;
    padding-bottom: 4px;
    overflow-x: auto;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}
.pv.is-ready .pv-thumbs { display: flex; }
.pv-thumbs::-webkit-scrollbar { height: 4px; }
.pv-thumbs::-webkit-scrollbar-thumb { background: rgba(127, 127, 127, .35); border-radius: 2px; }

.pv-thumb {
    flex: 0 0 auto;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 7px;
    background: none;
    cursor: pointer;
    line-height: 0;
    opacity: .62;
    transition: opacity .15s ease, border-color .15s ease;
}
.pv-thumb img { width: 58px; height: auto; border-radius: 5px; display: block; }
.pv-thumb:hover { opacity: 1; }
.pv-thumb.is-current { opacity: 1; border-color: currentColor; }
.pv-thumb:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* ── Fullscreen reader ─────────────────────────────────────────────────── */

.pv-full {
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    display: none;
    background: rgba(8, 8, 12, .96);
    color: #fff;
    /* Let the browser handle pinch-zoom inside the reader. */
    touch-action: pinch-zoom;
}
.pv-full.is-open { display: flex; flex-direction: column; }
body.pv-locked { overflow: hidden; }

.pv-full-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 14px;
    flex: none;
}
.pv-full-head .pv-btn { border-color: rgba(255, 255, 255, .42); color: #fff; }
.pv-full-head .pv-btn:hover:not(:disabled) { background: rgba(255, 255, 255, .16); }
.pv-full-count { font-size: .84rem; font-weight: 700; opacity: .85; font-variant-numeric: tabular-nums; }

.pv-full-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 0 12px 16px;
    -webkit-overflow-scrolling: touch;
}
.pv-full-img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 6px 26px rgba(0, 0, 0, .5);
}
/* Zoomed: overflow the viewport and let the container scroll. */
.pv-full-body.is-zoomed { align-items: flex-start; justify-content: flex-start; }
.pv-full-body.is-zoomed .pv-full-img { max-width: none; width: 180%; cursor: zoom-out; }

@media (min-width: 900px) {
    .pv-full-body.is-zoomed .pv-full-img { width: 140%; }
}

/* ── Small screens ─────────────────────────────────────────────────────── */

@media (max-width: 640px) {
    .pv-bar { justify-content: center; }
    .pv-btn { height: 42px; }        /* comfortable touch target */
    .pv-thumb img { width: 46px; }
}

@media (prefers-reduced-motion: reduce) {
    .pv-btn { transition: none; }
    .pv-thumb { transition: none; }
}
