/* ============================================================
   AUTHORSTOREFRONT.COM — Look inside
   The book preview overlay. Loaded on the product page only, and
   only for a title that has a preview file behind /api/preview.
   ============================================================ */

/* ── The cover ribbon ─────────────────────────────────────── */
/* Sits on the jacket, the way it does in a bookshop window. The wrapper
   around the cover image is the positioning context. */
.pv-cover-btn {
  position: absolute;
  /* Clear of the spine gradient .cover-wrap draws down the left edge. */
  left: 14px;
  top: 22px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px 7px 12px;
  border: 0;
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--amber-200);
  color: #2A1B05;
  font-family: 'Source Sans 3', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease;
}
.pv-cover-btn:hover { background: var(--amber-100); transform: translateX(3px); }
.pv-cover-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* The call to action, under the buy button, on the dark hero.

   Deliberately not a third shade of amber. "Secure Your Copy" above it is the
   solid one and has to stay the loudest thing in the box, so this is the same
   amber drawn as an outline: unmistakably a button, clearly the second one. */
.pv-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  max-width: 500px;
  margin-top: 12px;
  padding: 14px 20px;
  background: rgba(239, 159, 39, 0.08);
  border: 1.5px solid var(--amber-200);
  border-radius: var(--radius);
  color: var(--amber-100);
  font-family: 'Source Sans 3', sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.2px;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.pv-cta:hover { background: var(--amber-200); border-color: var(--amber-200); color: #2A1B05; }
.pv-cta:focus-visible { outline: 2px solid var(--amber-100); outline-offset: 2px; }
.pv-cta svg { flex-shrink: 0; }

.pv-cta-note {
  max-width: 500px;
  margin-top: 7px;
  margin-bottom: 4px;
  text-align: center;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.45);
}

/* ── The overlay ──────────────────────────────────────────── */
.pv-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: none;
  padding: 18px;
  background: rgba(12, 10, 6, 0.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  /* Nothing in the overlay scrolls the document behind it. Belt to the body
     lock's braces, and on its own enough to stop iOS pull-to-refresh firing
     from a bounce inside the page box. */
  overscroll-behavior: none;
  /* Kills double-tap-to-zoom everywhere in here, which is what turned an
     impatient run of taps on "Next page" into a zoom and a layout lurch.
     Pinch zoom still works: this only removes the double-tap gesture. */
  touch-action: manipulation;
}
.pv-overlay.is-open { display: flex; align-items: center; justify-content: center; }

/* iOS Safari ignores `overflow: hidden` on the body. Pinning it is the only
   thing that actually holds the page still; preview.js records the scroll
   position first and puts it back on close, because position:fixed loses it.
   The `top` offset is set inline, from the same place. */
body.pv-locked {
  position: fixed;
  width: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

.pv-shell {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 1000px;
  /* 100% first for anything without dvh; dvh second so the iOS address bar
     sliding in and out resizes the shell instead of cutting the footer off. */
  height: 100%;
  height: 100dvh;
  max-height: 940px;
  background: var(--bg-warm);
  border-radius: var(--radius-lg);
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.6);
  overflow: hidden;
}

/* ── Top bar ──────────────────────────────────────────────── */
.pv-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  background: #fff;
  border-bottom: 1px solid var(--border-soft);
  flex-shrink: 0;
}
.pv-bar-title {
  flex: 1;
  min-width: 0;
  font-family: 'Playfair Display', serif;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pv-bar-title span {
  display: block;
  font-family: 'Source Sans 3', sans-serif;
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--text-muted);
}
.pv-count {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
}
.pv-close {
  border: 1px solid var(--border-soft);
  background: transparent;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  line-height: 1;
  font-size: 1.1rem;
  color: var(--text-secondary);
  cursor: pointer;
  flex-shrink: 0;
}
.pv-close:hover { background: var(--amber-50); color: var(--amber-600); }

/* ── Stage ────────────────────────────────────────────────── */
.pv-stage {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: stretch;
  gap: 10px;
  padding: 16px;
}

.pv-arrow {
  flex-shrink: 0;
  width: 46px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.7);
  color: var(--text-secondary);
  font-size: 1.3rem;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.pv-arrow:hover:not(:disabled) { background: var(--amber-50); color: var(--amber-600); }
.pv-arrow:disabled { opacity: 0.25; cursor: default; }

.pv-cover-btn,
.pv-arrow,
.pv-close,
.pv-end-actions .btn {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* The paper. Scrolls if a page runs long, which is the safety valve for
   pagination that was decided server side without knowing this screen. */
.pv-page {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: clamp(24px, 5vw, 56px) clamp(22px, 6vw, 72px);
  background: #FBF8F1;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  box-shadow: inset 0 0 60px rgba(133, 79, 11, 0.05);
}

/* ── The type ─────────────────────────────────────────────── */
.pv-chapter {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.35rem, 3.4vw, 1.9rem);
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  margin: 6px 0 30px;
}
.pv-chapter::after {
  content: '';
  display: block;
  width: 54px;
  height: 2px;
  margin: 16px auto 0;
  background: var(--amber-200);
}
.pv-head {
  font-family: 'Playfair Display', serif;
  font-size: 1.02rem;
  font-weight: 600;
  font-style: italic;
  color: var(--amber-600);
  margin: 26px 0 12px;
}
.pv-body {
  font-family: 'Libre Baskerville', serif;
  font-size: clamp(0.92rem, 1.05vw, 1rem);
  line-height: 1.85;
  color: #26241F;
  margin: 0 0 14px;
  text-indent: 1.6em;
  hyphens: auto;
}
/* First paragraph after a heading, and any paragraph carried over from the
   page before, both start flush. An indent there would read as a new thought. */
.pv-chapter + .pv-body,
.pv-head + .pv-body,
.pv-body.is-cont { text-indent: 0; }

/* ── Foot ─────────────────────────────────────────────────── */
.pv-foot {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 16px 14px;
  border-top: 1px solid var(--border-soft);
  background: #fff;
}
.pv-progress {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: var(--border-soft);
  overflow: hidden;
}
.pv-progress-fill {
  height: 100%;
  width: 0;
  background: var(--amber-200);
  transition: width 0.2s ease;
}
.pv-foot-mid {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 14px;
}
.pv-hint { font-size: 0.72rem; color: var(--text-muted); white-space: nowrap; }

/* The page turn, said in words. The chevrons flanking the page are a nice
   affordance once you have found them; these are the control people look for. */
.pv-nav {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--amber-600);
  background: var(--amber-600);
  color: var(--amber-100);
  border-radius: var(--radius);
  padding: 10px 18px;
  font-size: 0.84rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  touch-action: manipulation;
  transition: background 0.15s ease;
}
.pv-nav:hover:not(:disabled) { background: var(--amber-800); border-color: var(--amber-800); }
.pv-nav:disabled {
  background: transparent;
  border-color: var(--border-soft);
  color: var(--text-muted);
  opacity: 0.55;
  cursor: default;
}
/* One size for everything inside the button, chevron included.

   The label is built from nested spans so " page" can drop out on a narrow
   screen, and anything that sizes a span separately shows the seam between
   the two halves: "Previous" at the button's size next to a visibly larger
   "page". Inheriting all three properties is what keeps that from coming
   back the next time a rule is added here. */
.pv-nav span {
  font-size: inherit;
  line-height: inherit;
  letter-spacing: inherit;
}

/* ── States ───────────────────────────────────────────────── */
.pv-note {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 0.9rem;
  color: var(--text-secondary);
  padding: 40px 20px;
}

/* ── The last page ────────────────────────────────────────── */
.pv-page.is-end { display: flex; align-items: center; justify-content: center; }
.pv-end { text-align: center; padding: clamp(10px, 5vh, 50px) 0; }
.pv-end-mark {
  font-family: 'Playfair Display', serif;
  font-size: 2rem;
  color: var(--amber-200);
  line-height: 1;
}
.pv-end h3 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.3rem, 3.2vw, 1.7rem);
  font-weight: 700;
  margin: 18px 0 10px;
}
.pv-end p {
  font-family: 'Libre Baskerville', serif;
  font-size: 0.92rem;
  line-height: 1.8;
  color: var(--text-secondary);
  max-width: 460px;
  margin: 0 auto 26px;
}
.pv-end-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}
.pv-end-actions .btn { padding: 12px 26px; font-size: 0.9rem; text-decoration: none; }

/* The chevrons beside the page need room to sit beside the page. Below this
   the footer buttons are the only page turn, which is why they are always on. */
@media (max-width: 1000px) {
  .pv-arrow { display: none; }
}

@media (max-width: 720px) {
  .pv-overlay { padding: 0; }
  .pv-shell { max-height: none; border-radius: 0; }
  .pv-stage { padding: 10px; }
  .pv-hint { display: none; }
  .pv-foot { gap: 10px; }
  /* Big targets, because this is the control being tapped over and over. */
  .pv-nav { flex: 1; justify-content: center; padding: 13px 10px; }
}

@media (max-width: 560px) {
  .pv-nav-word { display: none; }
}