/* SDG Games: book product pages (tyndale_book, FPtF, WICRBC). Builds on css/product-page.css; a page sets its palette
   by overriding the --pp-* variables, as the game pages do. */

/* ---------- hero: the cover instead of a fan of cards ---------- */
.bk-hero .pp-hero-grid { grid-template-columns: 1.15fr .85fr; }
.bk-hero h1 { font-size: clamp(2.3rem, 5.6vw, 3.9rem); line-height: 1.05; }
.bk-sub { font-size: clamp(1.05rem, 2.2vw, 1.3rem); font-weight: 600; margin: -.1rem 0 .9rem; color: var(--pp-gold); max-width: 34ch; }
.bk-byline { margin: 0 0 1.1rem; opacity: .92; }
.bk-cover { margin: 0 auto; max-width: 330px; width: 100%; perspective: 900px; }
.bk-cover img { display: block; width: 100%; height: auto; border-radius: 4px 8px 8px 4px; transform: rotateY(-8deg) rotate(1.5deg);
  box-shadow: -6px 0 0 rgba(255,255,255,.1), 0 22px 46px rgba(0,0,0,.55); }
.bk-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin: 0 0 .7rem; }
.bk-actions .pp-btn-ghost { background: transparent; color: #fff; border: 2px solid rgba(255,255,255,.65); }

/* ---------- the story and "about this book" ---------- */
.bk-two { display: grid; grid-template-columns: 1.6fr 1fr; gap: 2.5rem; align-items: start; }
.bk-story p { font-size: 1.08rem; line-height: 1.7; }
.bk-pull { border-left: 4px solid var(--pp-accent); margin: 1.4rem 0 0; padding: .3rem 0 .3rem 1.1rem; font-size: 1.2rem; font-weight: 700; color: var(--pp-primary); line-height: 1.45; }
.bk-about { background: var(--pp-surface); border: 1px solid var(--pp-line); border-radius: var(--pp-radius); padding: 1.1rem 1.3rem; }
.bk-about h3 { font-size: 1.1rem; margin: 0 0 .6rem; color: var(--pp-primary); }
.bk-about dl { margin: 0; }
.bk-about dt { font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; color: var(--pp-muted); font-weight: 700; margin-top: .75rem; }
.bk-about dd { margin: .1rem 0 0; font-weight: 600; }

/* ---------- table of contents ---------- */
.bk-chapters { list-style: none; counter-reset: ch; padding: 0; margin: 0 0 1.5rem; display: grid; grid-template-columns: repeat(2, 1fr); gap: .7rem 1.2rem; }
.bk-chapters li { counter-increment: ch; display: grid; grid-template-columns: 2.4rem 1fr; gap: .2rem .8rem; align-items: center; background: var(--pp-bg); border: 1px solid var(--pp-line); border-radius: 12px; padding: .7rem .9rem; }
.bk-chapters li::before { content: counter(ch); grid-row: span 2; width: 2.2rem; height: 2.2rem; border-radius: 50%; display: grid; place-items: center; background: var(--pp-primary); color: #fff; font-weight: 800; }
.bk-chapters b { display: block; line-height: 1.25; }
.bk-chapters small { color: var(--pp-muted); }
.bk-also { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; }
.bk-also li { background: var(--pp-surface); border: 1px solid var(--pp-line); border-radius: 999px; padding: .3rem .9rem; font-size: .95rem; }
.bk-band-note { margin: 0 0 .7rem; font-weight: 700; color: var(--pp-primary); }

/* ---------- the sample chapter, set like a page of the book ---------- */
.bk-read { max-width: 40rem; margin: 0 auto; background: var(--pp-surface); border: 1px solid var(--pp-line); border-radius: var(--pp-radius); padding: 2rem clamp(1.2rem, 4vw, 2.6rem); box-shadow: 0 10px 28px rgba(42,34,51,.1); font-family: Georgia, "Iowan Old Style", "Times New Roman", serif; }
.bk-read h3 { font-size: 1.7rem; margin: 0; color: var(--pp-primary); }
.bk-read .bk-place { margin: .1rem 0 1.3rem; color: var(--pp-muted); font-style: italic; }
.bk-read p { font-size: 1.12rem; line-height: 1.75; margin: 0 0 1rem; }
.bk-read .bk-first::first-letter { font-size: 3.1rem; float: left; line-height: .9; padding: .25rem .5rem 0 0; font-weight: 700; color: var(--pp-accent); }
.bk-read details { margin-top: .4rem; }
.bk-read summary { cursor: pointer; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; font-weight: 700; color: var(--pp-primary); padding: .6rem 0; }
.bk-read summary:hover { color: var(--pp-accent); }
.bk-read .bk-end { text-align: center; color: var(--pp-muted); font-style: italic; margin-top: 1.4rem; }
.bk-read ul { font-size: 1.12rem; line-height: 1.7; }

/* ---------- audiobook ---------- */
.bk-audio { background: var(--pp-bg); border: 1px solid var(--pp-line); border-radius: var(--pp-radius); padding: 1.2rem 1.4rem; max-width: 40rem; }
.bk-audio p { margin: 0 0 .6rem; }
.bk-audio audio { width: 100%; }
.bk-audio .bk-note { margin-top: .6rem; font-size: .92rem; color: var(--pp-muted); }

/* ---------- illustrations ---------- */
.bk-dark { background: #14110d; color: #f3ead9; }
.bk-dark h2 { color: #f3ead9; }
.bk-dark .pp-lede, .bk-dark .bk-ill p { color: #cfc4ae; }
.bk-ill { list-style: none; margin: 0; padding: 0; columns: 3 220px; column-gap: 1.2rem; }
.bk-ill li { break-inside: avoid; margin: 0 0 1.2rem; }
.bk-ill .pp-zoom { border-radius: 8px; overflow: hidden; box-shadow: 0 8px 22px rgba(0,0,0,.3); }
.bk-ill img { display: block; width: 100%; height: auto; transition: transform .25s; }
.bk-ill .pp-zoom:hover img { transform: scale(1.03); }
.bk-ill p { margin: .45rem 0 0; font-size: .9rem; color: var(--pp-muted); text-align: center; }

/* ---------- formats and buy buttons (inside the closing call to action) ---------- */
.bk-formats { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.2rem; margin: 1.6rem 0 0; padding: 0; list-style: none; }
.bk-fmt { background: #fff; color: var(--pp-ink); border-radius: var(--pp-radius); padding: 1.3rem 1.2rem 1.4rem; flex: 1 1 14rem; max-width: 19rem; box-shadow: 0 10px 28px rgba(0,0,0,.3); text-align: center; display: flex; flex-direction: column; }
.bk-fmt h3 { font-size: 1.25rem; margin: 0 0 .2rem; color: var(--pp-primary); }
.bk-price { font-size: 1.1rem; margin: 0 0 .5rem; }
.bk-price strong { font-size: 1.7rem; color: var(--pp-ink); }
.bk-price s { color: var(--pp-muted); margin-right: .3rem; }
.bk-fmt p { color: var(--pp-muted); font-size: .95rem; }
.bk-fmt .bk-price { color: var(--pp-ink); }
.bk-fmt .pp-shopify { margin-top: auto; display: flex; justify-content: center; text-align: left; }
.bk-fmt .pp-shopify, .bk-fmt .pp-shopify > *, .bk-fmt .shopify-buy__product, .bk-fmt .shopify-buy__btn-wrapper { margin-left: 0 !important; margin-right: 0 !important; max-width: none !important; width: auto !important; }
.bk-fmt .shopify-buy__option-select-wrapper, .bk-fmt .shopify-buy__option-select { max-width: 100%; }
.bk-fmt .shopify-buy__btn-wrapper { margin: 0 !important; }
.pp-cta .bk-fmt p:last-of-type { margin-bottom: 1rem; }

@media (max-width: 860px) {
  .bk-hero .pp-hero-grid { grid-template-columns: 1fr; }
  .bk-hero .bk-cover { order: -1; max-width: 240px; }
  .bk-sub { margin-left: auto; margin-right: auto; }
  .bk-actions { justify-content: center; }
  .bk-two { grid-template-columns: 1fr; gap: 1.6rem; }
  .bk-chapters { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .bk-ill img { transition: none; } }

/* ---------- books.html: the list of books ---------- */
.bk-lib-hero .pp-wrap { position: relative; text-align: center; padding-top: 3.4rem; padding-bottom: 3.4rem; }
.bk-lib-hero h1 { font-size: clamp(2.2rem, 6vw, 3.6rem); font-weight: 800; line-height: 1.05; margin: 0 0 .6rem; }
.bk-lib-hero p { font-size: clamp(1.05rem, 2.4vw, 1.35rem); margin: 0 auto; opacity: .95; max-width: 34rem; }
.bk-filter { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; margin: 0 0 1.6rem; }
.bk-filter[hidden] { display: none; }
.bk-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.6rem; }
.bk-grid > li[hidden] { display: none; }
.bk-card { position: relative; display: flex; flex-direction: column; background: var(--pp-surface); border: 1px solid var(--pp-line); border-radius: var(--pp-radius); overflow: hidden; transition: transform .15s, box-shadow .15s; }
.bk-card:hover, .bk-card:focus-within { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(42,34,51,.18); }
.bk-card-cover { position: relative; background: var(--pp-hero); aspect-ratio: 5 / 6; display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; padding: 1.4rem; overflow: hidden; }   /* same height for every cover */
.bk-card-cover img { display: block; max-width: 100%; max-height: 100%; min-height: 0; width: auto; height: auto; border-radius: 3px 6px 6px 3px; box-shadow: 0 10px 24px rgba(0,0,0,.5); }
.bk-badge { position: absolute; top: .7rem; right: .7rem; background: var(--pp-gold); color: var(--pp-gold-ink); font-weight: 800; font-size: .8rem; border-radius: 999px; padding: .2rem .7rem; }
.bk-card-body { padding: 1rem 1.2rem 1.3rem; display: flex; flex-direction: column; flex: 1; }
.bk-tag { margin: 0 0 .25rem; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--pp-accent); }
.bk-card h2 { font-size: 1.3rem; line-height: 1.2; margin: 0 0 .25rem; color: var(--pp-primary); }
.bk-card h2 a { color: inherit; text-decoration: none; }
.bk-card h2 a::after { content: ""; position: absolute; inset: 0; }   /* the whole card is the link */
.bk-card h2 a:focus-visible { outline: none; }
.bk-card:focus-within { outline: 3px solid #86b7fe; outline-offset: 2px; }
.bk-card-sub { margin: 0 0 .5rem; font-weight: 600; color: var(--pp-muted); font-size: .92rem; }
.bk-card-blurb { margin: 0 0 .8rem; color: var(--pp-muted); }
.bk-chips { list-style: none; padding: 0; margin: 0 0 1rem; display: flex; flex-wrap: wrap; gap: .35rem; }
.bk-chips li { border: 1px solid var(--pp-line); border-radius: 999px; padding: .15rem .65rem; font-size: .85rem; background: var(--pp-bg); }
.bk-card-go { margin: auto 0 0; display: flex; justify-content: space-between; align-items: baseline; font-weight: 600; }
.bk-card-go strong { font-size: 1.3rem; }
.bk-card-go > span:last-child { color: var(--pp-accent); }
.bk-nojs { padding-left: 1.2rem; }
@media (prefers-reduced-motion: reduce) { .bk-card { transition: none; } .bk-card:hover { transform: none; } }