/* =========================================================
   JUPITER BLUE — BROCHURE / DIGITAL READING ROOM
   Page-specific styles for brochure.php.

   Loaded AFTER brand.css + Nav.css + footer.css + pages.css.
   Uses tokens from brand.css only — no hardcoded #fff / near-blacks
   on themed surfaces. Honours customer (light) + trade (dark).

   Design intent inherits pages.css:
   - Editorial spec-sheet. Hairlines, not boxes.
   - Tiny ALL-CAPS wide-tracked micro-labels. Tabular numerals.
   - Orange (--jb-accent) ONLY on the Download control.
   - Blue (--jb-blue) restrained: progress rail, active chapter,
     focus rings.
   - 180ms UI transitions; the page-turn is the one big motion.
   - prefers-reduced-motion fully honoured (flip degrades to a swap).
   ========================================================= */


/* ---------------------------------------------------------
   HERO ACTIONS — sits under the .page-hero lede.
   Two controls + a tiny tabular meta line.
   --------------------------------------------------------- */
.brochure-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 32px;
}
.brochure-hero__meta {
    margin-top: 24px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    font-size: 0.62rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    color: var(--ink-3);
    font-variant-numeric: tabular-nums slashed-zero;
}
.brochure-hero__meta span { position: relative; }
.brochure-hero__meta span + span::before {
    content: '';
    position: absolute;
    left: -10px;
    top: 50%;
    width: 1px;
    height: 10px;
    background: var(--line);
    transform: translateY(-50%);
}


/* =========================================================
   THE READER — the centrepiece.
   A "book" stage with a single portrait A4 page and a true
   3D page-turn. Sits on --paper-2 so the white pages lift off
   the surface in either theme; on trade it reads like a lightbox.
   ========================================================= */
.brochure-reader {
    background: var(--paper-2);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    padding: 48px 40px 56px;
    scroll-margin-top: 80px;   /* clears the sticky topbar on jump — match your nav height */
}
.brochure-reader__inner {
    max-width: 1080px;
    margin: 0 auto;
}

/* ---- Toolbar ---------------------------------------------------- */
.reader-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 28px;
    flex-wrap: wrap;
}
.reader-toolbar__group {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Page counter — matrix spec-value treatment, scaled down. */
.reader-counter {
    font-variant-numeric: tabular-nums slashed-zero;
    letter-spacing: var(--tracking-tight);
    color: var(--ink-3);
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
}
.reader-counter [data-reader="current"] {
    color: var(--ink);
    font-size: 1.05rem;
    letter-spacing: var(--tracking-tighter);
}
.reader-counter__sep { color: var(--ink-3); }

/* The reader buttons reuse pages.css .btn-ghost / .btn-primary.
   We only add a compact icon affordance via the arrow glyphs in markup. */
.reader-toolbar .btn-ghost,
.reader-toolbar .btn-primary { padding: 9px 14px; }


/* =========================================================
   STAGE + BOOK
   ========================================================= */
.reader-stage {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    /* perspective gives the page-turn its depth */
    perspective: 2400px;
    padding: 8px 0;
}

/* The book holds the static page, the underlay (page being revealed),
   and the transient flipper. A4 portrait ratio, sized by height so it
   never overflows the viewport on tall monitors. */
.reader-book {
    position: relative;
    aspect-ratio: 1 / 1.414;            /* A4 portrait */
    width: auto;
    height: min(74vh, 760px);
    max-width: 100%;
    transform-style: preserve-3d;
    border-radius: var(--radius-data);
    /* soft floor shadow — depth without a box */
    filter: drop-shadow(0 24px 40px rgba(0, 0, 0, 0.22));
    background: var(--warm-neutral);    /* shows briefly before first render */
}

/* Every page layer fills the book and contains a portrait page. */
.reader-page,
.reader-underlay,
.reader-flip__face {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #ffffff;                /* the pages are physically white paper */
    border-radius: var(--radius-data);
    display: block;
}
.reader-underlay { z-index: 1; }
.reader-page     { z-index: 2; }

/* ---- The flipper: a single rotating leaf with two faces -------- */
.reader-flip {
    position: absolute;
    inset: 0;
    z-index: 3;
    transform-style: preserve-3d;
    transform-origin: left center;      /* hinge on the spine */
    will-change: transform;
}
.reader-flip__face {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    overflow: hidden;
    box-shadow: 0 0 24px rgba(0, 0, 0, 0.10);
}
.reader-flip__back { transform: rotateY(180deg); }

/* A gradient that sweeps across the turning leaf to fake the page
   catching the light. Opacity is driven by JS during the turn. */
.reader-flip__sheen {
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    border-radius: var(--radius-data);
    background: linear-gradient(105deg,
        rgba(0, 0, 0, 0.28) 0%,
        rgba(0, 0, 0, 0.05) 38%,
        rgba(255, 255, 255, 0.10) 60%,
        rgba(0, 0, 0, 0.0) 100%);
    opacity: 0;
}

/* ---- Edge hit-zones: click the left/right third to leaf through - */
.reader-edge {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 22%;
    border: none;
    background: transparent;
    cursor: pointer;
    z-index: 5;
    -webkit-tap-highlight-color: transparent;
}
.reader-edge--prev { left: 0;  }
.reader-edge--next { right: 0; }
.reader-edge:focus-visible {
    outline: 1px solid var(--jb-blue);
    outline-offset: -3px;
}
/* a whisper of a chevron on hover so the affordance is discoverable */
.reader-edge::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 14px;
    height: 14px;
    border-top: 2px solid var(--ink-2);
    border-right: 2px solid var(--ink-2);
    opacity: 0;
    transition: opacity 180ms ease;
}
.reader-edge--prev::after { left: 20px;  transform: translateY(-50%) rotate(-135deg); }
.reader-edge--next::after { right: 20px; transform: translateY(-50%) rotate(45deg);   }
.reader-stage:hover .reader-edge::after { opacity: 0.45; }
.reader-edge:disabled { cursor: default; }
.reader-edge:disabled::after { opacity: 0 !important; }

/* ---- Loading + fallback overlays ------------------------------- */
.reader-loading,
.reader-fallback {
    position: absolute;
    inset: 0;
    z-index: 6;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    border-radius: var(--radius-data);
    text-align: center;
    padding: 32px;
}
.reader-loading {
    color: var(--ink-3);
    font-size: 0.62rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    background: var(--warm-neutral);
}
.reader-spinner {
    width: 22px;
    height: 22px;
    border: 2px solid var(--line);
    border-top-color: var(--jb-blue);
    border-radius: 50%;
    animation: reader-spin 720ms linear infinite;
}
@keyframes reader-spin { to { transform: rotate(360deg); } }

.reader-fallback {
    background: var(--paper);
    color: var(--ink-2);
    line-height: 1.6;
    font-size: 0.92rem;
}
/* The fallback is opt-in via the [hidden] attribute. This selector
   (specificity 0,2,0) overrides the display:flex above (0,1,0) so the
   `hidden` attribute genuinely hides it — otherwise it sits on top of
   the rendered pages permanently. */
.reader-fallback[hidden] { display: none; }
.reader-fallback strong { color: var(--ink); }


/* =========================================================
   PROGRESS RAIL — a single blue hairline that fills as you read.
   ========================================================= */
.reader-progress {
    height: 2px;
    background: var(--line);
    margin: 28px auto 0;
    max-width: 480px;
    border-radius: 999px;
    overflow: hidden;
}
.reader-progress span {
    display: block;
    height: 100%;
    width: 0;
    background: var(--jb-blue);
    transition: width 320ms var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1));
}


/* =========================================================
   CHAPTER INDEX — reuses .icon-grid / .icon-card from pages.css.
   Cards are buttons that jump the reader. We add a tabular page
   reference and an active state on the spine.
   ========================================================= */
.chapter-card {
    text-align: left;
    border: none;
    font-family: inherit;
    cursor: pointer;
    width: 100%;
}
.chapter-card .chapter-card__no {
    font-size: 0.62rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
    margin-bottom: 18px;
    display: block;
}
.chapter-card .chapter-card__page {
    margin-top: auto;
    padding-top: 14px;
    font-size: 0.66rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    color: var(--ink-3);
    font-variant-numeric: tabular-nums slashed-zero;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: color 180ms ease;
}
.chapter-card:hover .chapter-card__page { color: var(--jb-blue); }
.chapter-card[aria-current="true"] {
    box-shadow: inset 3px 0 0 var(--jb-blue);
    background: var(--warm-neutral);
}
.chapter-card[aria-current="true"] .chapter-card__page { color: var(--jb-blue); }
.chapter-card:focus-visible {
    outline: 1px solid var(--jb-blue);
    outline-offset: -1px;
}


/* =========================================================
   BY THE NUMBERS — hairline-gridded stat strip.
   Same DNA as .icon-grid: 1px gaps on a --line bed.
   Figures in ink (tabular), labels in micro-uppercase ink-3.
   No orange — these are facts, not actions.
   ========================================================= */
.stat-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    margin: 0 0 24px;
}
.stat-cell {
    background: var(--paper);
    padding: 32px 28px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.stat-cell__figure {
    font-size: clamp(1.9rem, 3.4vw, 2.6rem);
    font-weight: 800;
    letter-spacing: var(--tracking-tighter);
    color: var(--ink);
    line-height: 1;
    font-variant-numeric: tabular-nums slashed-zero;
}
.stat-cell__figure .unit {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--ink-3);
    letter-spacing: var(--tracking-tight);
}
.stat-cell__label {
    font-size: 0.62rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    color: var(--ink-3);
    line-height: 1.4;
}


/* =========================================================
   FULLSCREEN — when the stage is the fullscreen element.
   ========================================================= */
.reader-stage:fullscreen {
    background: var(--night);
    padding: 32px;
    perspective: 3000px;
}
.reader-stage:fullscreen .reader-book {
    height: min(92vh, 1100px);
}


/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 900px) {
    .brochure-reader { padding: 36px 20px 44px; }
    .reader-book { height: min(64vh, 620px); }
    .reader-toolbar { gap: 12px; }
}
@media (max-width: 560px) {
    .reader-book { height: min(58vh, 520px); }
    .reader-toolbar { justify-content: center; }
    .reader-counter { order: -1; flex-basis: 100%; justify-content: center; }
    .brochure-hero__actions .btn-primary,
    .brochure-hero__actions .btn-ghost { flex: 1 1 auto; justify-content: center; }
}


/* =========================================================
   REDUCED MOTION — the page-turn collapses to an instant swap.
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
    .reader-flip { display: none !important; }
    .reader-progress span { transition: none; }
    .reader-spinner { animation-duration: 1600ms; }
}