/* ═══════════════════════════════════════════════════════════════════════════
   PDF VIEWER

   Two pieces: a cover that sits in the page, and a full-screen reader that
   opens over it. Replaces flipbook.css, which dressed a two-leaf bound
   document — a spread, a curled corner, a thumbnail strip and a search panel.

   Loaded only on an area page that actually has a portfolio document; see the
   {% block extra_css %} in public/shared/area.html.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── The cover, in the page ───────────────────────────────────────────────── */

.pv-card { text-align: center; }

.pv-cover {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: .875rem;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  max-width: 100%;
}

.pv-cover-sheet {
  display: block;
  border-radius: var(--r-sm);
  overflow: hidden;
  box-shadow: var(--sh-card);
  transition: transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s ease;
  max-width: 100%;
}
.pv-cover-sheet canvas {
  display: block;
  max-width: 100%;
  height: auto;
}
.pv-cover:hover .pv-cover-sheet { transform: translateY(-4px); box-shadow: var(--sh-hover); }
.pv-cover:focus-visible { outline: 2.5px solid var(--c-accent); outline-offset: 6px; border-radius: var(--r-sm); }

.pv-cover-meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .2rem;
}
.pv-cover-open {
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: var(--f-body); font-weight: 600;
  font-size: .9375rem;
  color: var(--c-accent);
}
.pv-cover-pages { font-size: .8125rem; color: var(--c-muted); }

/* The server's Open / Download pair. It is the whole component until the
   script runs, and stays underneath as the way out to the file itself. */
.pv-fallback {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
  justify-content: center;
  margin-top: var(--gap);
}
/* Once the cover is painted, the two buttons are a secondary route — the
   cover is the primary one, so they stop competing with it. */
.pv-ready .pv-fallback { margin-top: 1.25rem; }
.pv-ready .pv-fallback .pub-btn.primary {
  background: none;
  border-color: var(--c-border);
  color: var(--c-ink);
}

/* ── The reader, over everything ──────────────────────────────────────────── */

.pv-overlay {
  position: fixed; inset: 0; z-index: 2300;
  display: grid;
  /* Bar, page, controls. The page takes whatever is left, which is what makes
     the canvas fit the viewport rather than the other way round. */
  grid-template-rows: auto 1fr auto;
  background: #0B2C25;
  color: #fff;
}

.pv-bar,
.pv-foot {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .5rem .75rem;
  background: rgba(0, 0, 0, .28);
}
.pv-bar { justify-content: space-between; }
.pv-foot { justify-content: center; gap: 1.5rem; }

.pv-title {
  flex: 1; min-width: 0;
  text-align: center;
  font-family: var(--f-body); font-weight: 600;
  font-size: .875rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: rgba(255, 255, 255, .9);
}

.pv-btn {
  flex: none;
  display: grid; place-items: center;
  /* px, not rem: a tap target does not shrink because the type did. */
  min-width: 44px; min-height: 44px;
  border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  color: #fff;
  font-size: 1.125rem;
  cursor: pointer;
  text-decoration: none;
  transition: background .2s ease;
}
.pv-btn:hover { background: rgba(255, 255, 255, .22); }
.pv-btn:focus-visible { outline: 2.5px solid var(--c-gold); outline-offset: 2px; }
.pv-btn:disabled { opacity: .3; cursor: default; }
.pv-btn:disabled:hover { background: rgba(255, 255, 255, .1); }

.pv-count {
  font-family: var(--f-body);
  font-size: .875rem; font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, .85);
  min-width: 5rem;
  text-align: center;
}

.pv-stage {
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: .5rem;
  /* The swipe is horizontal; letting the browser own vertical panning keeps a
     pinch-zoomed page usable. */
  touch-action: pan-y pinch-zoom;
}
.pv-stage canvas {
  display: block;
  max-width: 100%;
  max-height: 100%;
  /* renderPage fits the page inside the stage, so neither cap should ever
     engage. If one does — a rounding edge, or a rotation landing between the
     measure and the paint — `contain` keeps the drawing proportional inside
     whatever box it is given rather than stretching it to fill. */
  object-fit: contain;
  box-shadow: 0 12px 48px rgba(0, 0, 0, .5);
  background: #fff;
}

@media (min-width: 769px) {
  .pv-bar, .pv-foot { padding: .75rem 1.25rem; }
  .pv-title { font-size: 1rem; }
  .pv-stage { padding: 1rem; }
}

/* ── Short and wide ──────────────────────────────────────────────────────────
   A phone on its side is about 390px tall, and the bar and the controls were
   taking 88px of it before the page got any — a page then painted to roughly
   300px of height, which is smaller than it was in portrait despite the screen
   having turned to give it more width.

   So on a short viewport the chrome collapses onto the page rather than
   bracketing it: the bar floats over the top corners, the controls over the
   bottom ones, and the stage takes the whole overlay. Keyed on height, not
   orientation — a desktop window dragged short has exactly the same problem. */
@media (max-height: 500px) {
  .pv-overlay { grid-template-rows: 1fr; }

  .pv-bar, .pv-foot {
    position: absolute;
    inset-inline: 0;
    z-index: 2;
    background: none;
    padding: .375rem .5rem;
    pointer-events: none;
  }
  .pv-bar { top: 0; }
  .pv-foot { bottom: 0; gap: 1rem; }
  .pv-bar > *, .pv-foot > * { pointer-events: auto; }

  /* Floating over the page, the controls need their own ground to stay
     legible against a white sheet. */
  .pv-btn { background: rgba(11, 44, 37, .72); }
  .pv-btn:hover { background: rgba(11, 44, 37, .9); }
  .pv-btn:disabled:hover { background: rgba(11, 44, 37, .72); }
  .pv-count {
    padding: .25rem .625rem;
    border-radius: var(--r-pill);
    background: rgba(11, 44, 37, .72);
    font-size: .75rem;
    min-width: 0;
  }
  /* The filename is the first thing to go: it is the one piece of chrome the
     reader can do without while looking at the document itself. */
  .pv-title { display: none; }

  .pv-stage { grid-row: 1; padding: 2.75rem .5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .pv-cover-sheet { transition: none; }
  .pv-cover:hover .pv-cover-sheet { transform: none; }
}