/* /books and /books/frustration-fascination -- extends the site's existing
   design system (style.css) with a handful of book-specific components.
   Deliberately uses the same palette, type, and container/card patterns as
   the rest of the site rather than a parallel look: these are Frontier
   Publishing's own catalog pages, not a book-specific microsite the way
   /tuesday is. Loaded only on these pages via header.php's $pageExtraCss
   hook, so it can never affect any other page. */

.books-hero {
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    padding: 60px 0 44px;
}

.books-hero h1 {
    max-width: 700px;
}

.books-hero p {
    color: var(--muted);
    font-size: 1.12rem;
    max-width: 620px;
}

/* Catalog grid -- auto-fills so one book sits at a natural card width today
   and additional titles simply wrap into new rows later, with no markup or
   layout changes needed when the second and third books are added. */
.book-grid {
    display: grid;
    gap: 24px;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.book-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0;
}

.book-card .book-cover {
    background: var(--surface-strong);
    padding: 30px 30px 0;
    text-align: center;
}

.book-card .book-cover img {
    box-shadow: 0 14px 34px rgba(23, 32, 43, .18);
    margin: 0 auto;
    max-width: 160px;
    width: 100%;
}

.book-card-body {
    padding: 22px 28px 28px;
}

.book-card-body h3 {
    margin: 0 0 8px;
}

.book-card-body p {
    color: var(--muted);
}

/* --- Book detail page --- */

.book-hero {
    background: var(--surface);
    border-bottom: 1px solid var(--line);
}

.book-back-link {
    padding: 20px 0 0;
}

.book-back-link .text-link {
    font-size: .92rem;
}

.book-hero-inner {
    align-items: center;
    display: grid;
    gap: 48px;
    grid-template-columns: minmax(200px, 260px) minmax(0, 1fr);
    padding: 64px 0;
}

.book-hero-cover img {
    box-shadow: 0 24px 60px rgba(23, 32, 43, .2);
    width: 100%;
}

.book-hero-copy h1 {
    margin: 10px 0 4px;
}

.book-hero-byline {
    color: var(--muted);
    font-size: 1.05rem;
    margin: 0 0 18px;
}

.book-hero-copy > p {
    font-size: 1.15rem;
    max-width: 520px;
}

.btn-pending {
    background: var(--surface-strong);
    border: 1px dashed var(--line);
    border-radius: 999px;
    color: var(--muted);
    cursor: default;
    display: inline-flex;
    font-weight: 700;
    padding: 13px 22px;
}

.btn-pending small {
    font-weight: 500;
    margin-left: 6px;
}

.book-prose {
    margin: 0 auto;
    max-width: 700px;
}

.book-prose p {
    font-size: 1.08rem;
}

.book-quotes {
    display: grid;
    gap: 20px;
    margin: 0 auto;
    max-width: 760px;
}

.book-quote {
    background: var(--surface-strong);
    border-left: 3px solid var(--copper);
    border-radius: 0 var(--radius) var(--radius) 0;
    font-size: 1.2rem;
    font-style: italic;
    margin: 0;
    padding: 20px 28px;
}

.purchase-note {
    color: var(--muted);
    font-size: .96rem;
    margin: 20px auto 0;
    max-width: 600px;
    text-align: center;
}

@media (max-width: 780px) {
    .book-hero-inner {
        padding: 48px 0;
        grid-template-columns: 1fr;
        text-align: center;
    }

    .book-hero-cover img {
        margin: 0 auto;
        max-width: 220px;
    }

    .book-hero-copy > p {
        margin-left: auto;
        margin-right: auto;
    }

    .book-hero-copy .hero-buttons {
        justify-content: center;
    }
}