/*
 * Online catalog viewer.
 *
 * Kept as its own stylesheet rather than folded into all.css: the viewer is one
 * page of the site, and the global bundle is already large enough that adding
 * flipbook layout to every request is a poor trade.
 */

.catalog-viewer {
    max-width: 1800px;
    margin: 0 auto;
    padding: 4px 16px 24px;
}

.catalog-preview-banner {
    background: #fff4d6;
    border: 1px solid #e6c65c;
    color: #6b5200;
    padding: 10px 14px;
    border-radius: 6px;
    margin-bottom: 16px;
    font-weight: 600;
}

/* Every row of chrome above or below the book comes straight out of the
 * reading area, because the book is bounded by height, not width. Title and
 * navigation therefore share one slight row beneath the pages, and nothing at
 * all sits above them. */
.catalog-footbar {
    /* Three columns so the navigation is centred in the row rather than pushed
     * to the right edge, where the site's fixed chat widget sits and was
     * clipping the last button. The third column is intentionally empty. */
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 16px;
    margin-top: 8px;
}

.catalog-viewer__title { font-size: .95rem; margin: 0; font-weight: 600; color: #333; }

/* Below the book: still read, still indexed, but not costing page size. */
.catalog-viewer__desc { color: #555; margin: 18px auto 0; max-width: 70ch; text-align: center; }

.catalog-stage {
    display: flex;
    justify-content: center;
}

/* Before the script takes over, the book is a plain vertical list of pages.
   That is the no-JS experience, and it is a usable one. */
.catalog-book {
    width: 100%;
    max-width: 1200px;
}

.catalog-page {
    position: relative;
    background: #fff;
    margin: 0 auto 16px;
    max-width: 700px;
}

.catalog-page__img {
    display: block;
    width: 100%;
    height: auto;
}

/* Hotspots are transparent until hovered: the artwork already communicates
   what is clickable, and a grid of boxes over a catalog page looks broken. */
.catalog-hotspot {
    position: absolute;
    display: block;
    background: transparent;
    border-radius: 2px;
    transition: background-color .15s ease, box-shadow .15s ease;
}

.catalog-hotspot:hover,
.catalog-hotspot:focus {
    background: rgba(0, 132, 137, .18);
    box-shadow: 0 0 0 2px rgba(0, 132, 137, .55);
    outline: none;
}

/* Visually hidden, still read by crawlers and screen readers. Not display:none,
   which would take it out of the accessibility tree too. */
.catalog-page__text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.catalog-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}

.catalog-btn {
    display: inline-block;
    padding: 4px 11px;
    border: 1px solid #008489;
    border-radius: 3px;
    background: #fff;
    color: #008489;
    font-size: .8rem;
    line-height: 1.5;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
}

.catalog-btn:hover { background: #008489; color: #fff; text-decoration: none; }
.catalog-btn[aria-disabled="true"] { opacity: .4; pointer-events: none; }

.catalog-counter { font-size: .8rem; color: #555; white-space: nowrap; }

.catalog-thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-top: 20px;
    padding: 16px;
    background: #f7f7f7;
    border-radius: 6px;
}

.catalog-thumbs button {
    border: 2px solid transparent;
    background: none;
    padding: 0;
    cursor: pointer;
    line-height: 0;
}

.catalog-thumbs button[aria-current="true"] { border-color: #008489; }
.catalog-thumbs img { width: 70px; height: auto; display: block; }

.catalog-zoom-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(0, 0, 0, .92);
    overflow: auto;
    text-align: center;
    padding: 40px 0;
}

.catalog-zoom-overlay img { max-width: none; width: 160%; height: auto; }

.catalog-zoom-close {
    position: fixed;
    top: 16px;
    right: 24px;
    font-size: 2.5rem;
    line-height: 1;
    color: #fff;
    background: none;
    border: 0;
    cursor: pointer;
}

/* The flipbook itself only exists once the script has initialised. */
.catalog-viewer--interactive .catalog-book { max-width: none; }

/* The cover, and usually the back page, are shown alone in one half of the
 * spread. Shifting the book half a page centres them, so the catalog opens
 * looking like a closed book rather than a misaligned one. */
.catalog-viewer--interactive .catalog-book { transition: transform .25s ease; }
.catalog-viewer--single .catalog-book { transform: translateX(-25%); }
.catalog-viewer--single-last .catalog-book { transform: translateX(25%); }

/* Clip the turning page to the book. StPageFlip draws the folding page with a
 * perspective transform that projects roughly 85px above and 65px below the
 * book box, which reads as the catalog shifting up and down on every turn. */
.catalog-viewer--interactive .catalog-stage {
    overflow: hidden;
    min-height: 0;
}

/* Every page has to occupy exactly the book's page box.
 *
 * StPageFlip sizes the book once, from the first page. Left at their natural
 * size, pages with a different aspect ratio then render taller or shorter than
 * that box: a 0.250-ratio fold-out among 0.773 letter pages rendered 1869px
 * tall inside a 604px box. That overflow grew the document by ~320px mid-flip
 * and made the catalog appear to bounce as each page turned.
 *
 * object-fit keeps the artwork's own proportions and letterboxes anything that
 * does not match, so the page box — and therefore the book — never changes
 * size. For a catalog whose pages are all one size, which is the normal case,
 * this is a no-op. */
.catalog-viewer--interactive .catalog-page {
    margin: 0;
    max-width: none;
    overflow: hidden;
}

.catalog-viewer--interactive .catalog-page__img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

@media (max-width: 640px) {
    .catalog-viewer { padding: 12px 8px 32px; }
    .catalog-viewer__title { font-size: 1.35rem; }
    .catalog-zoom-overlay img { width: 240%; }

    /* Title above the navigation rather than beside it; a phone is bounded by
     * width, not height, so the extra line costs no reading area. */
    .catalog-footbar { grid-template-columns: 1fr; justify-items: center; gap: 6px; }
    .catalog-viewer__title { text-align: center; }

    /* Keep the navigation to a single row. A second row wrapped straight into
     * the site's fixed chat widget in the bottom-right corner, which covered
     * whichever control landed there. */
    .catalog-controls { gap: 6px; flex-wrap: nowrap; }
    .catalog-btn { padding: 4px 9px; font-size: .75rem; }

    /* Full screen goes: iOS Safari does not implement the Fullscreen API for
     * anything but video, so the button is dead weight on most phones, and it
     * is what pushed the row onto a second line. */
    #catalog-fullscreen { display: none; }
}

/* Full screen.
 *
 * The site header alone is a fixed 148px, and with the toolbar the page can
 * only ever give the book about two thirds of the viewport. Full screen is the
 * one way to hand the whole display to the catalog, which is what a reader
 * actually wants from a flipbook. */
.catalog-viewer:fullscreen {
    max-width: none;
    width: 100vw;
    height: 100vh;
    padding: 10px 16px;
    background: #1b1b1b;
    overflow: hidden;
}

.catalog-viewer:fullscreen .catalog-viewer__title { color: #d8d8d8; }
.catalog-viewer:fullscreen .catalog-counter { color: #d8d8d8; }
.catalog-viewer:fullscreen .catalog-btn { background: transparent; color: #7fd4d8; border-color: #7fd4d8; }
.catalog-viewer:fullscreen .catalog-btn:hover { background: #7fd4d8; color: #1b1b1b; }
.catalog-viewer:fullscreen .catalog-viewer__desc { display: none; }
.catalog-viewer:fullscreen .catalog-thumbs { background: #262626; }