/*
 * ============================================================
 * BOOK DETAIL PAGE (book.html)
 * Reuses resources.css's shared pieces (.resources-state, the book look:
 * [data-tone], .book-level-pill, .book-3d) plus the site-wide
 * .section-heading / .badge / .btn-cta — this page is a "drill into one
 * resource" view of the same system resources.html already renders, not a
 * separate design. [data-tone] sits on #bookDetail (js/pages/book.js), so
 * the book keeps the level color its card had in the grid.
 * ============================================================ */

.book-page-wrap {
    width: 100%;
    max-width: 1040px;
    margin: 0 auto;
    padding: 130px 24px 10vh;
    position: relative;
    z-index: 20;
}

.book-back-link { margin-bottom: 22px; }

/* ---- Hero: cover + info on a panel tinted by the cover itself ------------ */
.book-hero {
    position: relative;
    display: flex;
    align-items: center;
    gap: 52px;
    padding: 48px 52px;
    margin-bottom: 56px;
    border-radius: var(--radius-lg);
    background-color: var(--glass-bg);
    border: 1px solid var(--neutral-border);
    box-shadow: var(--glass-shadow);
    overflow: hidden;
    isolation: isolate;
}
/* A heavily blurred copy of the cover — one static raster, not a
   backdrop-filter (see css/header.css for why those are avoided here). */
.book-hero-backdrop {
    position: absolute;
    inset: -20%;
    z-index: -2;
    background-size: cover;
    background-position: center;
    filter: blur(70px) saturate(1.5);
    opacity: 0.6;
}
/* Wash over the blur so the text side stays calm and readable. */
.book-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(270deg, transparent 5%, color-mix(in srgb, var(--glass-bg) 88%, transparent) 70%),
        radial-gradient(60% 90% at 85% 50%, color-mix(in srgb, var(--book-tone) 16%, transparent), transparent 70%);
}
[data-theme="dark"] .book-hero-backdrop { opacity: 0.35; }

.book-hero-cover {
    flex: 0 0 300px;
    position: relative;
    padding-bottom: 14px;
}
.book-hero-cover::after {
    content: "";
    position: absolute;
    left: 10%;
    right: 10%;
    bottom: -4px;
    height: 22px;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(15, 23, 42, 0.35), transparent);
    z-index: -1;
}
.book-3d--lg {
    transform: perspective(1400px) rotateY(-10deg) rotate(1deg);
    transform-origin: left center;
    box-shadow:
        2px 1px 0 #FFFFFF,
        4px 2px 0 #E4E0D8,
        6px 3px 0 #FFFFFF,
        8px 4px 0 #D6D1C7,
        10px 5px 0 #FFFFFF,
        12px 6px 0 #CBC5BA,
        0 34px 44px -18px rgba(15, 23, 42, 0.6);
}
[data-theme="dark"] .book-3d--lg {
    box-shadow:
        2px 1px 0 #CBD5E1,
        4px 2px 0 #64748B,
        6px 3px 0 #CBD5E1,
        8px 4px 0 #475569,
        10px 5px 0 #CBD5E1,
        12px 6px 0 #334155,
        0 34px 44px -18px rgba(0, 0, 0, 0.85);
}
.book-hero-cover:hover .book-3d--lg { transform: perspective(1400px) rotateY(0deg) rotate(0deg) translateY(-6px); }
.book-hero-cover:hover .book-3d::after { background-position: -30% 0; }

.book-detail-info { flex: 1 1 auto; min-width: 0; }
.book-hero-kicker {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}
.book-hero-kind {
    font-family: var(--font-body);
    font-size: 12.5px;
    font-weight: 700;
    color: var(--ink-soft);
}
.book-detail-info h1 {
    font-family: var(--font-body);
    font-size: 38px;
    font-weight: 800;
    color: var(--primary-navy);
    margin: 0 0 10px;
    line-height: 1.15;
    text-align: right;
}
.book-detail-desc {
    font-family: var(--font-body);
    font-size: 14.5px;
    line-height: 2;
    color: var(--ink-soft);
    margin: 0;
    max-width: 480px;
}

/* File summary: three small stat tiles. */
.book-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 24px 0 26px;
    padding: 0;
    list-style: none;
}
.book-stat {
    display: flex;
    align-items: baseline;
    gap: 7px;
    padding: 10px 16px;
    border-radius: var(--radius-sm);
    background-color: var(--color-surface);
    border: 1px solid var(--neutral-border);
}
.book-stat-num {
    font-family: var(--font-body);
    font-size: 22px;
    font-weight: 600;
    line-height: 1;
    color: var(--book-tone);
}
.book-stat-label { font-size: 12px; font-weight: 600; color: var(--ink-soft); }

.book-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.book-hero-primary { gap: 8px; padding: 12px 26px; font-size: 14px; }
.book-hero-primary svg { width: 17px; height: 17px; }
.book-hero-secondary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 11px 22px;
    border-radius: 30px;
    font-family: var(--font-body);
    font-size: 13.5px;
    font-weight: 700;
    color: var(--primary-navy);
    background-color: var(--btn-outline-bg);
    border: 1px solid var(--neutral-border);
    transition: var(--transition-fast);
}
.book-hero-secondary svg { width: 15px; height: 15px; transition: transform 0.3s ease; }
.book-hero-secondary:hover { color: var(--book-tone); border-color: var(--book-tone); }
.book-hero-secondary:hover svg { transform: translateY(2px); }
.book-hero-note {
    margin: 14px 0 0;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink-muted);
}

/* ---- Downloadable files ----------------------------------------------------- */
.book-files-section { scroll-margin-top: 110px; }
/* Focus target of the "همه فایل‌ها" link (js/pages/book.js) — not a control, no ring. */
.book-files-section:focus { outline: none; }
.book-files-section .section-heading { margin-bottom: 26px; }

.book-file-group {
    padding: 22px 24px;
    margin-bottom: 18px;
    border-radius: var(--radius-md);
    background-color: var(--glass-bg);
    border: 1px solid var(--neutral-border);
    box-shadow: var(--glass-shadow);
}
.book-file-group:last-child { margin-bottom: 0; }
.book-file-group-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}
.book-file-group-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 12px;
    background-color: color-mix(in srgb, var(--book-tone) 12%, transparent);
    color: var(--book-tone);
}
.book-file-group-icon svg { width: 20px; height: 20px; }
.book-file-group-title {
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 800;
    color: var(--primary-navy);
    margin: 0;
}
.book-file-group-count {
    margin-inline-start: auto;
    min-width: 28px;
    padding: 2px 10px;
    border-radius: var(--radius-pill);
    background-color: var(--neutral-soft-bg);
    font-size: 12px;
    font-weight: 700;
    text-align: center;
    color: var(--ink-soft);
}

.book-file-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.book-file-item.is-empty {
    grid-column: 1 / -1;
    padding: 20px;
    border-radius: var(--radius-sm);
    border: 1px dashed var(--neutral-border);
    text-align: center;
    font-size: 12.5px;
    color: var(--ink-muted);
}
.book-file-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: var(--radius-sm);
    background-color: var(--neutral-soft-bg);
    border: 1px solid transparent;
    color: var(--ink);
    transition: var(--transition-fast);
}
.book-file-link:hover,
.book-file-link:focus-visible {
    border-color: color-mix(in srgb, var(--book-tone) 40%, transparent);
    background-color: var(--color-surface);
    box-shadow: var(--shadow-sm);
    transform: translateY(-2px);
}
.book-file-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border-radius: 10px;
    background-color: var(--color-surface);
    color: var(--book-tone);
    box-shadow: var(--shadow-sm);
}
.book-file-icon svg { width: 18px; height: 18px; }
.book-file-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.book-file-name {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--primary-navy);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: start;
}
.book-file-type { font-size: 11.5px; font-weight: 600; color: var(--ink-muted); }
.book-file-dl {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: 50%;
    color: var(--book-tone);
    background-color: color-mix(in srgb, var(--book-tone) 10%, transparent);
    transition: var(--transition-fast);
}
.book-file-dl svg { width: 16px; height: 16px; }
.book-file-link:hover .book-file-dl,
.book-file-link:focus-visible .book-file-dl { background-color: var(--book-tone); color: #fff; }

@media (prefers-reduced-motion: reduce) {
    .book-3d--lg, .book-hero-cover:hover .book-3d--lg { transform: none; }
    .book-file-link:hover, .book-file-link:focus-visible { transform: none; }
}

/* Stacks well before the side-by-side layout gets cramped. */
@media (max-width: 860px) {
    .book-hero {
        flex-direction: column;
        text-align: center;
        gap: 30px;
        padding: 40px 28px 34px;
    }
    .book-hero::before {
        background:
            linear-gradient(180deg, transparent 0%, var(--glass-bg) 55%),
            radial-gradient(80% 50% at 50% 20%, color-mix(in srgb, var(--book-tone) 16%, transparent), transparent 70%);
    }
    .book-hero-cover { flex: 0 0 auto; width: min(250px, 62vw); }
    .book-3d--lg { transform: none; }
    .book-hero-kicker, .book-stats, .book-hero-actions { justify-content: center; }
    .book-detail-info h1 { text-align: center; font-size: 34px; }
    .book-detail-desc { max-width: 420px; margin: 0 auto; }
}

@media (max-width: 640px) {
    .book-page-wrap { padding: 110px 16px 8vh; }
    .book-hero { padding: 32px 18px 26px; border-radius: var(--radius-md); margin-bottom: 40px; }
    .book-hero-cover { width: min(210px, 60vw); }
    .book-detail-info h1 { font-size: 28px; }
    .book-stats { gap: 8px; }
    .book-stat { padding: 8px 12px; }
    .book-stat-num { font-size: 18px; }
    .book-hero-actions { flex-direction: column; align-items: stretch; }
    .book-hero-primary, .book-hero-secondary { justify-content: center; }
    .book-file-group { padding: 18px 14px; }
    .book-file-list { grid-template-columns: 1fr; }
}