/* PaxHelios — Book detail (W3) */

.book-page {
  padding-bottom: 80px;
  /* Book palette custom props are set inline from book.palette */
}

/* ============================================== HERO — cinematic */
.book-hero {
  position: relative;
  padding: 32px 0 80px;
  overflow: hidden;
}
/* Ambient wash — uses book palette via custom properties */
.book-hero::before {
  content: "";
  position: absolute;
  inset: -10% -10% 30%;
  background:
    radial-gradient(ellipse at 25% 30%, color-mix(in srgb, var(--book-bg, var(--accent)) 35%, transparent), transparent 55%),
    radial-gradient(ellipse at 75% 60%, color-mix(in srgb, var(--book-arc, var(--accent-soft)) 28%, transparent), transparent 60%);
  pointer-events: none;
  z-index: 0;
  animation: hero-drift 24s ease-in-out infinite alternate;
}
@keyframes hero-drift {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(-3%, 2%) scale(1.04); }
}
.book-hero > .wrap-wide { position: relative; z-index: 1; }

.book-hero-grid {
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: 96px;
  align-items: start;
}
@media (max-width: 1000px) {
  .book-hero-grid { grid-template-columns: 1fr; gap: 48px; }
  .book-cover-col { max-width: 320px; margin: 0 auto; }
}

.book-cover-col {
  position: sticky;
  top: 88px;
}
.book-cover-frame {
  position: relative;
}
/* Soft glow behind cover */
.book-cover-frame::before {
  content: "";
  position: absolute;
  inset: -40px;
  background: radial-gradient(circle, color-mix(in srgb, var(--book-sun, var(--accent)) 42%, transparent) 0%, transparent 65%);
  border-radius: 50%;
  z-index: 0;
  filter: blur(8px);
  pointer-events: none;
}
.book-hero-cover {
  width: 100%;
  position: relative;
  z-index: 1;
  animation: cover-breath 6s ease-in-out infinite;
  transform-origin: center 80%;
}
@keyframes cover-breath {
  0%, 100% { transform: rotate(-0.3deg) translateY(0); }
  50%      { transform: rotate(0.3deg) translateY(-6px); }
}
.book-hero-cover .cover {
  box-shadow:
    0 60px 100px -30px color-mix(in srgb, var(--book-ink, #000) 50%, rgba(0,0,0,.4)),
    0 20px 40px -10px rgba(27,22,16,.35);
}

/* Floating chips around cover */
.cover-floater {
  position: absolute;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: var(--shadow-md);
  font-family: var(--font-display);
  font-size: 13px;
  color: var(--ink);
  white-space: nowrap;
  animation: floater-bob 6s ease-in-out infinite;
}
.cover-floater svg { color: var(--accent); }
.cover-floater.f1 { top: 8%;  left: -10%; animation-delay: -2s; }
.cover-floater.f2 { top: 50%; right: -16%; animation-delay: -4s; }
.cover-floater.f3 { bottom: 16%; left: -12%; }
@media (max-width: 1000px) { .cover-floater { display: none; } }
@keyframes floater-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

.cover-actions {
  display: flex; justify-content: center; gap: 24px;
  margin-top: 32px;
  position: relative;
  z-index: 1;
}
.link-btn {
  font-size: 12px; color: var(--ink-3);
  display: inline-flex; align-items: center; gap: 6px;
}
.link-btn:hover { color: var(--ink); }

/* Right column — bigger, more editorial */
.book-info-col .eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px;
}
.book-info-col .dot-accent {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent); display: inline-block;
}
.book-info-col h1.display {
  font-size: clamp(48px, 7vw, 96px) !important;
  letter-spacing: -0.02em;
  line-height: 1;
  margin-top: 18px;
}

.book-meta-row {
  display: flex; align-items: center; gap: 18px;
  margin-top: 28px;
  flex-wrap: wrap;
  padding: 18px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.meta-cell {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13.5px; color: var(--ink-2);
}
.meta-cell strong { color: var(--ink); font-weight: 500; }
.meta-divider {
  width: 1px; height: 16px;
  background: var(--line-2);
}

/* Format toggle — subtle refresh */
.format-toggle {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 8px; margin-top: 32px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 6px;
  max-width: 620px;
}
.fmt-btn {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 4px;
  padding: 14px 16px;
  border-radius: 10px;
  transition: all var(--dur-fast) var(--ease);
  text-align: left;
  position: relative;
}
.fmt-btn:hover { background: var(--bg-2); }
.fmt-btn.is-active {
  background: var(--ink);
  color: var(--bg);
  box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--ink) 60%, transparent);
}
.fmt-btn.is-active .fmt-price { color: var(--accent-soft); }
.fmt-icon { color: currentColor; opacity: .8; }
.fmt-label { font-size: 13.5px; font-weight: 500; }
.fmt-price { font-family: var(--font-display); font-size: 18px; color: var(--ink); }
.fmt-btn.is-active .fmt-price { color: var(--bg); }

/* ============================================== BODY */
.book-body { padding-top: 40px; }
.body-grid {
  display: grid; grid-template-columns: 1fr 320px;
  gap: 40px;
  align-items: start;
}
@media (max-width: 1100px) { .body-grid { grid-template-columns: 1fr; } }

.body-main { display: flex; flex-direction: column; gap: 24px; }
.body-side  { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 88px; }
@media (max-width: 1100px) { .body-side { position: static; } }

.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 32px;
}
.panel-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 16px;
  margin-bottom: 24px;
}
.panel-head-meta {
  display: flex; gap: 24px;
  font-size: 13px; color: var(--ink-3);
}
.panel-head-meta strong { color: var(--ink); font-weight: 600; }

/* Chapters list */
.chapters { list-style: none; padding: 0; margin: 0; }
.chapter {
  display: grid;
  grid-template-columns: 48px 1fr 40px;
  gap: 16px;
  align-items: center;
  padding: 14px 0;
  border-top: 1px solid var(--line);
}
.chapter:first-child { border-top: 0; }
.chap-n {
  font-family: var(--font-display);
  font-size: 20px; color: var(--ink-3);
  text-align: center;
}
.chap-title { font-family: var(--font-serif); font-size: 16px; color: var(--ink); font-weight: 500; }
.chap-meta { display: flex; align-items: center; gap: 10px; margin-top: 4px; font-size: 12.5px; }
.chap-meta .chip { padding: 2px 8px; height: 22px; }
.chap-play {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--bg-2);
  color: var(--ink);
  display: grid; place-items: center;
  transition: all var(--dur-fast) var(--ease);
}
.chap-play:hover { background: var(--accent); color: var(--accent-ink); transform: scale(1.05); }
a.chap-play { text-decoration: none; }

/* Audiobook credits rows (opening / closing) shown in the audio table of contents */
.chapter-credit .chap-title { font-style: italic; font-weight: 400; color: var(--ink-2); }
.chapter-credit .chap-n { color: var(--accent); }

/* Author card */
.author-card {
  display: grid; grid-template-columns: 96px 1fr;
  gap: 24px; align-items: start;
  margin-top: 8px;
}
.author-portrait {
  width: 96px; height: 96px; border-radius: 50%;
  overflow: hidden;
  display: grid; place-items: center;
}

/* Reviews */
.rating-summary {
  display: grid; grid-template-columns: 200px 1fr;
  gap: 32px;
  padding: 24px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin-bottom: 24px;
}
.big-rating { text-align: center; }
.big-num {
  font-family: var(--font-display);
  font-size: 72px; line-height: 1;
  color: var(--ink); margin-bottom: 12px;
}
.bar-list { display: flex; flex-direction: column; gap: 6px; }
.bar-row {
  display: grid; grid-template-columns: 16px 1fr 40px;
  gap: 12px; align-items: center;
  font-size: 13px;
}
.bar { height: 6px; border-radius: 999px; background: var(--line); overflow: hidden; }
.bar-fill { height: 100%; background: var(--ink); }

.reviews { list-style: none; padding: 0; margin: 0; }
.review {
  padding: 20px 0;
  border-top: 1px solid var(--line);
}
.review:first-child { border-top: 0; padding-top: 0; }
.review-head { display: flex; align-items: center; gap: 12px; }
.avatar {
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  color: white; font-weight: 600;
  font-family: var(--font-display); font-size: 18px;
}

/* Detail list */
.detail-list { margin: 16px 0 0; padding: 0; }
.detail-row {
  display: grid; grid-template-columns: 1fr 1.4fr;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
  font-size: 13px;
}
.detail-row:first-child { border-top: 0; padding-top: 0; }
.detail-row dt { color: var(--ink-3); margin: 0; }
.detail-row dd { margin: 0; color: var(--ink-2); text-align: right; }

.ribbon-panel {
  background: var(--bg-2);
  border-color: var(--line-2);
  text-align: center;
}
.ribbon-icon {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--surface);
  display: grid; place-items: center;
  margin: 0 auto;
  color: var(--accent);
}

/* Related */
.related { background: var(--bg-2); padding-top: 60px; padding-bottom: 60px; margin-top: 40px; }

/* ============================================== PLAYER */
.player-backdrop {
  position: fixed; inset: 0; z-index: 200;
  background: color-mix(in srgb, var(--ink) 70%, transparent);
  backdrop-filter: blur(10px);
  display: grid; place-items: center;
  padding: 24px;
  animation: fade-in .25s var(--ease);
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.player-sheet {
  position: relative;
  background: var(--surface);
  border-radius: var(--r-xl);
  display: grid;
  grid-template-columns: 280px 1fr;
  width: min(820px, 100%);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  animation: sheet-in .35s var(--ease-out);
}
@keyframes sheet-in {
  from { opacity: 0; transform: translateY(20px) scale(.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.player-close {
  position: absolute; top: 14px; right: 14px;
  z-index: 2;
}
.player-cover {
  padding: 32px;
  display: grid; place-items: center;
  background: var(--bg-2);
}
.player-cover .cover { width: 220px; }
.player-body { padding: 36px 36px 28px; }

.scrub-wrap { margin: 24px 0 16px; }
.wave {
  display: flex; align-items: center; gap: 3px;
  height: 48px; cursor: pointer;
  position: relative;
}
.wave > span {
  flex: 1; background: var(--ink-3);
  min-width: 2px; border-radius: 999px;
  transition: opacity .15s, background .15s;
}
.wave.is-playing > span { background: var(--ink); }
.wave-cursor {
  position: absolute; top: -4px; bottom: -4px;
  width: 2px; background: var(--accent);
  pointer-events: none;
  transition: left .2s linear;
}
.time-row { display: flex; justify-content: space-between; font-size: 12px; color: var(--ink-3); margin-top: 6px; font-variant-numeric: tabular-nums; }

.controls {
  display: flex; align-items: center; justify-content: center;
  gap: 24px; margin-top: 8px;
}
.ctl {
  width: 44px; height: 44px; border-radius: 50%;
  color: var(--ink-2);
  display: grid; place-items: center;
  transition: all var(--dur-fast) var(--ease);
}
.ctl:hover { background: var(--bg-2); color: var(--ink); }
.ctl-main {
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--ink); color: var(--bg);
  display: grid; place-items: center;
  box-shadow: var(--shadow-md);
  transition: all var(--dur) var(--ease);
}
.ctl-main:hover { transform: scale(1.05); }

.controls-secondary {
  display: flex; align-items: center; justify-content: center; gap: 20px;
  margin-top: 14px;
}
.controls-secondary .link-btn {
  font-size: 12px;
  padding: 6px 10px;
  border-radius: var(--r-pill);
}
.controls-secondary .link-btn:hover { background: var(--bg-2); }

.player-cta {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

@media (max-width: 720px) {
  .player-sheet { grid-template-columns: 1fr; }
  .player-cover { padding: 24px; }
  .player-cover .cover { width: 160px; }
  .player-body { padding: 24px; }
}