/* =====================================================================
   BOOKS PAGES (listing + detail)
   New, additive stylesheet — does not modify style.css / added-sections.css.
   Reuses existing design tokens from style.css :root so it matches the
   rest of the site exactly. Pairs with gallery.css's shared
   .am-pagination-wrap styling (loaded first in the layout).
   ===================================================================== */

.books-section {
    padding: 90px 0 100px;
    background: var(--bg-white);
}

/* ---------------------------------------------------------------------
   LANGUAGE FILTER — All / Hindi / English
--------------------------------------------------------------------- */
.book-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 0 auto 20px;
}

.book-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 12px 26px;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    color: var(--text-primary);
    background: var(--bg-white);
    font-size: 14px;
    font-weight: 600;
    transition: var(--transition-fast);
}

.book-filter-btn i { color: var(--brand-primary); }

.book-filter-btn:hover {
    border-color: var(--border-gold);
    background: var(--bg-gold-light);
}

.book-filter-btn.active {
    background: var(--brand-primary);
    border-color: var(--brand-primary);
    color: var(--text-white);
    box-shadow: var(--shadow-button);
}

.book-filter-btn.active i { color: var(--text-white); }

/* ---------------------------------------------------------------------
   CATEGORY FILTER (secondary, built from real data)
--------------------------------------------------------------------- */
.book-category-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0 auto 44px;
    max-width: 900px;
}

.book-category-chip {
    padding: 7px 18px;
    border-radius: 999px;
    color: var(--text-muted);
    background: var(--bg-light);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.01em;
    transition: var(--transition-fast);
}

.book-category-chip:hover {
    color: var(--brand-primary-dark);
    background: var(--bg-gold-light);
}

.book-category-chip.active {
    background: var(--text-primary);
    color: var(--text-white);
}

/* ---------------------------------------------------------------------
   BOOK CATALOG GRID + CARD
--------------------------------------------------------------------- */
.book-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
    margin-top: 10px;
}

.book-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--bg-white);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: var(--transition-normal);
}

.book-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-gold);
    border-color: var(--border-gold);
}

.book-card-cover {
    position: relative;
    aspect-ratio: 3 / 4;
    background: #fcf9f0;
    overflow: hidden;
}

.book-card-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-normal);
}

.book-card:hover .book-card-cover img {
    transform: scale(1.05);
}

.book-card-lang {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-white);
}

.book-card-lang-hindi { background: var(--brand-primary-dark); }
.book-card-lang-english { background: var(--bg-charcoal); }

.book-card-category {
    position: absolute;
    top: 12px;
    right: 12px;
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    color: var(--text-primary);
    font-size: 11px;
    font-weight: 700;
}

.book-card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 20px 20px 22px;
}

.book-card-body h3 {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--text-primary);
    margin-bottom: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.book-card-author {
    font-size: 13px;
    color: var(--brand-primary-dark);
    font-weight: 600;
    margin-bottom: 10px;
}

.book-card-author i { margin-right: 5px; }

.book-card-excerpt {
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--text-muted);
    margin-bottom: 14px;
}

.book-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid var(--border-light);
    font-size: 12px;
    color: var(--text-muted);
}

.book-card-meta i { margin-right: 4px; color: var(--brand-primary); }

.book-card-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    color: var(--brand-primary-dark);
    font-size: 13.5px;
    font-weight: 700;
    transition: var(--transition-fast);
}

.book-card:hover .book-card-cta {
    gap: 12px;
    color: var(--brand-primary);
}

/* ---------------------------------------------------------------------
   EMPTY STATE
--------------------------------------------------------------------- */
.book-empty-state {
    max-width: 460px;
    margin: 30px auto 0;
    padding: 60px 30px;
    text-align: center;
    border: 1px dashed var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--bg-light);
}

.book-empty-icon {
    width: 72px;
    height: 72px;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-round);
    background: var(--bg-gold-light);
    color: var(--brand-primary);
    font-size: 28px;
}

.book-empty-state h3 {
    font-size: 19px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.book-empty-state p {
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--text-muted);
    margin-bottom: 22px;
}

/* =====================================================================
   BOOK DETAIL PAGE
   ===================================================================== */

.page-hero-book { height: 320px; }

.book-detail-section {
    padding: 70px 0 40px;
    background: var(--bg-white);
}

.book-detail-grid {
    display: grid;
    grid-template-columns: 0.85fr 1.6fr;
    gap: 50px;
    align-items: start;
}

.book-detail-cover-col {
    position: sticky;
    top: 110px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.book-detail-cover {
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-header);
    aspect-ratio: 3 / 3;
    background: #fcf9f0;
}

.book-detail-cover img {
    width: 100%;
    object-fit: cover;
}

.book-detail-read-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 15px 18px;
}

.book-detail-unavailable-block {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 16px;
    border-radius: var(--radius-lg);
    border: 1px dashed var(--border-color);
    background: var(--bg-light);
}

.book-detail-format-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--brand-primary-dark);
}

.book-detail-format-note i { color: var(--brand-primary); }

/* ---------------------------------------------------------------------
   INFO TABS — Description / Details / Author
--------------------------------------------------------------------- */
.book-detail-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 4px;
    margin-bottom: 22px;
    border-radius: 999px;
    background: var(--bg-light);
    width: max-content;
    max-width: 100%;
}

.book-tab-btn {
    padding: 10px 22px;
    border: 0;
    background: transparent;
    border-radius: 999px;
    font-family: var(--font-primary);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    transition: var(--transition-fast);
    white-space: nowrap;
    -webkit-appearance: none;
    appearance: none;
}

.book-tab-btn:hover { color: var(--text-primary); }

.book-tab-btn.is-active {
    background: var(--bg-white);
    color: var(--text-primary);
    box-shadow: var(--shadow-gold);
}

.book-tab-panel p {
    font-size: 15.5px;
    line-height: 1.8;
    color: var(--text-secondary);
    white-space: pre-line;
    max-width: 680px;
    margin-bottom: 0;
}

.book-tab-empty {
    font-style: italic;
    color: var(--text-muted) !important;
}

.book-detail-facts {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px 32px;
    max-width: 560px;
}

.book-detail-facts > div {
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-light);
}

.book-detail-facts dt {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.book-detail-facts dd {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.book-author-block {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    max-width: 600px;
}

.book-author-avatar {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-gold-light);
    color: var(--brand-primary);
    font-size: 18px;
}

.book-author-name {
    font-size: 16.5px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.book-detail-alt-title {
    color: var(--text-muted);
    font-size: 15px;
    font-style: italic;
    margin-bottom: 4px;
}

.book-detail-info h2 {
    font-family: "Playfair Display", serif;
    font-size: clamp(28px, 3vw, 38px);
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
    margin-bottom: 12px;
}

.book-detail-author {
    color: var(--brand-primary-dark);
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 20px;
}

.book-detail-author i { margin-right: 6px; }

.book-detail-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 28px;
}

.book-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 16px;
    border-radius: 999px;
    background: var(--bg-light);
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 600;
}

.book-badge i { color: var(--brand-primary); }

.book-badge-lang-hindi { background: var(--brand-primary-dark); color: var(--text-white); }
.book-badge-lang-hindi i { color: var(--text-white); }
.book-badge-lang-english { background: var(--bg-charcoal); color: var(--text-white); }
.book-badge-lang-english i { color: var(--text-white); }

.book-detail-description {
    max-width: 680px;
    margin-bottom: 34px;
}

.book-detail-description p {
    font-size: 15.5px;
    line-height: 1.8;
    color: var(--text-secondary);
    white-space: pre-line;
}

.book-detail-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px;
    margin-bottom: 28px;
}

.am-hero-btn-outline-dark {
    color: var(--text-primary);
    border-color: var(--border-color);
}
.am-hero-btn-outline-dark:hover {
    background: var(--text-primary);
    color: var(--color-white);
    border-color: var(--text-primary);
}

.book-detail-unavailable {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--text-muted);
    font-size: 14px;
    font-style: italic;
}

/* ---------------------------------------------------------------------
   RELATED BOOKS
--------------------------------------------------------------------- */
.related-books-section {
    padding: 30px 0 90px;
    background: var(--bg-white);
}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media screen and (max-width: 1199px) {
    .book-grid { grid-template-columns: repeat(3, 1fr); }
    .book-detail-grid { grid-template-columns: 0.9fr 1.3fr; gap: 36px; }
}

@media screen and (max-width: 991px) {
    .book-detail-grid { grid-template-columns: 1fr; }
    .book-detail-cover-col { position: static; max-width: 320px; margin: 0 auto 36px; }
    .book-detail-tabs { width: 100%; justify-content: center; }
    .book-tab-btn { flex: 1; text-align: center; }
    .book-card-cover { aspect-ratio: 3 / 3.6; }
    .book-card-cover img { object-fit: contain; padding: 4px; }
}

@media screen and (max-width: 767px) {
    .books-section { padding: 60px 0 70px; }
    .book-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
    .book-filters { justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; }
    .book-filter-btn { white-space: nowrap; padding: 10px 18px; font-size: 13px; }
    .book-category-filters { justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 6px; margin-bottom: 34px; }
    .book-category-chip { flex: 0 0 auto; white-space: nowrap; }
    .book-detail-section { padding: 50px 0 20px; }
    .page-hero-book { height: 260px; }
    /* Cover art on cards varies wildly (portrait book scans vs. landscape
       photo covers) — a tall 3/4 crop chops the sides off landscape covers
       on small screens. Shorten the box and switch to `contain` so the
       whole image is always visible instead of cropped. */
    .book-card-cover {
        aspect-ratio: 3 / 3.4;
        background: #fcf9f0;
    }
    .book-card-cover img {
        object-fit: contain;
        padding: 6px;
    }
}

@media screen and (max-width: 480px) {
    .book-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
    .book-card-body { padding: 14px 14px 16px; }
    .book-card-cover { aspect-ratio: 3 / 3.1; }
    .book-detail-actions { flex-direction: column; align-items: stretch; }
    .book-detail-actions .btn-primary,
    .book-detail-actions .am-hero-btn-outline-dark { justify-content: center; }
    .book-detail-facts { grid-template-columns: 1fr; }
    .book-detail-tabs {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        width: 100%;
    }
    .book-tab-btn { flex: 0 0 auto; }
}

a.btn-primary.book-detail-read-btn {
    margin-bottom: 20px;
}

/* Breathing room between the "Back to All Books" action and the PDF
   reader box that follows it — they were sitting flush against each
   other on mobile where the grid collapses to a single column. */
.book-detail-reader,
.related-books-section .am-section-heading {
    margin-top: 32px;
}

/* ---------------------------------------------------------------------
   TAB BUTTONS — explicit reset so no mobile browser/UA button chrome
   (default border/background) can leak through the pill styling.
--------------------------------------------------------------------- */
.book-tab-btn {
    outline: none;
    box-shadow: none;
    -webkit-tap-highlight-color: transparent;
}
.book-tab-btn:focus-visible {
    box-shadow: 0 0 0 3px rgba(176, 141, 60, 0.25);
}
/* ---------------------------------------------------------------------
   DEFAULT COVER (no uploaded image) — theme green/gold placeholder.
   Fills the whole cover box on every breakpoint (the mobile rules above
   use object-fit: contain + padding for uploaded art, which would leave
   a cream border around the placeholder).
--------------------------------------------------------------------- */
.book-card-cover img.is-default-cover,
.book-detail-cover img.is-default-cover {
    object-fit: cover !important;
    padding: 0 !important;
    background: #0F3A28;
}