/* book.css — public product page (/book/{slug}) layout.
 *
 * Deliberately lean, like shop.css: a v1 foundation. It reuses the V2 design
 * tokens (tokens.css) and the shared .bi-btn / .bi-wordmark chrome
 * (landing.css) so it reads on-brand without re-deriving the design system.
 * Palette switches with [data-theme] for free — every color is a --bi-* token.
 */

.bi-book {
  margin: 0;
  background: var(--bi-bg);
  color: var(--bi-ink);
  font-family: var(--bi-font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Top bar moved to the shared session-aware site bar — bink/server/site_bar.py
   + /static/site_bar.css (rendered across all public pages). */

/* ── Product layout ──────────────────────────────────────────────────── */
.book-main {
  max-width: 980px;
  margin: 0 auto;
  padding: clamp(28px, 6vw, 72px) clamp(16px, 4vw, 40px) 96px;
}

.book-product {
  display: grid;
  grid-template-columns: minmax(0, 320px) 1fr;
  gap: clamp(28px, 5vw, 64px);
  align-items: start;
}

/* Single column on narrow screens — cover above the details. */
@media (max-width: 720px) {
  .book-product {
    grid-template-columns: 1fr;
    gap: clamp(24px, 6vw, 36px);
    justify-items: center;
    text-align: center;
  }
}

.book-product__cover {
  width: 100%;
  max-width: 320px;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  border-radius: 8px;
  background: var(--bi-bg-alt);
  box-shadow: 0 6px 28px rgba(20, 12, 6, 0.22);
}

.book-product__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.book-product__detail {
  padding-top: 4px;
}

.book-product__title {
  font-family: var(--bi-font-display);
  font-weight: var(--bi-weight-semibold);
  font-size: clamp(30px, 5vw, var(--bi-size-page-title));
  line-height: 1.06;
  margin: 0 0 8px;
}

.book-product__author {
  font-family: var(--bi-font-display);
  font-style: italic;
  color: var(--bi-ink-soft);
  font-size: var(--bi-size-section-head);
  margin: 0 0 clamp(18px, 3vw, 28px);
}

/* The byline links to the author page — inherits the italic display look,
 * underlines on hover/focus so it reads as a link without shouting. */
.book-product__author a {
  color: inherit;
  text-decoration: none;
}

.book-product__author a:hover,
.book-product__author a:focus-visible {
  color: var(--bi-accent);
  text-decoration: underline;
}

.book-product__blurb {
  color: var(--bi-ink-soft);
  font-size: var(--bi-size-body-ui);
  line-height: 1.5;
  max-width: 52ch;
  margin: 0 0 clamp(22px, 4vw, 32px);
}

/* Price — the active offer's amount, sitting just above the CTA. The amount
 * reads in the display face (it's a headline number); the label trails in soft
 * ink so the price has meaning without shouting. Present only when an offer
 * resolved (no "$0" placeholder). */
.book-product__price {
  font-family: var(--bi-font-display);
  font-size: var(--bi-size-section-head);
  font-weight: var(--bi-weight-semibold);
  color: var(--bi-ink);
  margin: 0 0 clamp(18px, 3vw, 26px);
}

.book-product__price-label {
  font-weight: var(--bi-weight-normal);
  font-style: italic;
  font-size: var(--bi-size-body-small);
  color: var(--bi-ink-soft);
}

.book-product__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 14px;
}

@media (max-width: 720px) {
  .book-product__cta {
    justify-content: center;
  }
}

/* When a price resolved, "Buy — $X" is the ink-filled primary .bi-btn and
 * "Start reading free" drops to the .bi-btn--ghost secondary; with no offer,
 * "Start reading free" stays the primary. Colors come from landing.css's .bi-btn.
 * The Buy control is a <button> (mounts the embedded-checkout overlay), so reset
 * the native button chrome to match the anchor .bi-btn siblings. */
.book-product__buy {
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
}

.book-product__note {
  color: var(--bi-meta);
  font-size: var(--bi-size-body-small);
  margin: 16px 0 0;
}

/* Footer moved to the shared site footer — bink/server/site_footer.py +
   /static/site_footer.css (rendered across all public pages). */