/* ==============================================================
 * lazarjovovic.com — book.css
 * Styles for the dedicated Book page. Loaded after site.css + page.css.
 * ============================================================== */

.book-page{padding:170px 0 60px}

/* ——— Hero ——— */
.book-hero{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(34px,6vw,80px);align-items:center;margin-bottom:clamp(60px,9vw,120px)}
.book-hero-text .kicker{margin-bottom:20px}
.book-hero-text h1{font-family:var(--display);font-weight:500;font-size:clamp(2.3rem,4.8vw,3.8rem);letter-spacing:-.025em;line-height:1.04;margin-bottom:18px}
.book-subtitle{font-family:var(--display);font-style:italic;font-size:clamp(1.1rem,2vw,1.4rem);color:var(--accent);margin-bottom:26px;line-height:1.3}
.book-pitch{color:var(--ink-soft);font-size:1.08rem;max-width:54ch;margin-bottom:32px}
.book-hero-actions{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.book-meta-line{font-family:var(--mono);font-size:.76rem;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-soft)}

.book-hero-cover{display:flex;justify-content:center}
.book-hero-cover img{width:100%;max-width:330px;aspect-ratio:5/7;object-fit:cover;border-radius:3px;box-shadow:0 34px 60px -22px rgba(26,23,18,.5),0 10px 22px -10px rgba(26,23,18,.32);transition:transform .4s cubic-bezier(.16,1,.3,1)}
.book-hero-cover img:hover{transform:translateY(-6px)}
/* faux cover fallback (reuses landing styles defined in site.css) */
.book-hero-cover .book-cover{max-width:330px}

/* ——— Sections ——— */
.book-section{padding:clamp(50px,7vw,90px) 0;border-top:1px solid var(--line)}
.book-section-head{margin-bottom:46px}
.book-section-head .kicker-sm{font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:16px}
.book-section-head h2{font-family:var(--display);font-weight:500;font-size:clamp(1.8rem,3.6vw,2.8rem);letter-spacing:-.02em;line-height:1.05;max-width:22ch}

.book-prose{max-width:68ch}
.book-prose p{color:var(--ink-soft);font-size:1.08rem;line-height:1.65;margin-bottom:20px}

/* ——— What it covers ——— */
.covers-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line)}
.cover-item{background:var(--paper);padding:clamp(26px,3vw,40px);display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:start;transition:background .4s ease}
.cover-item:hover{background:var(--paper-2)}
.cover-item .ix{font-family:var(--mono);font-size:.8rem;color:var(--accent);padding-top:6px}
.cover-item h3{font-family:var(--display);font-size:1.3rem;font-weight:500;letter-spacing:-.01em;margin-bottom:8px}
.cover-item p{color:var(--ink-soft);font-size:.98rem}

/* ——— Audience ——— */
.audience-list{list-style:none;columns:2;column-gap:60px;max-width:900px}
.audience-list li{break-inside:avoid;padding:14px 0 14px 28px;position:relative;border-bottom:1px solid var(--line);color:var(--ink);font-size:1rem}
.audience-list li::before{content:"→";position:absolute;left:0;color:var(--accent);font-family:var(--mono);font-size:.9rem}

/* ——— Companion ——— */
.book-companion{margin-top:clamp(50px,7vw,90px);padding:clamp(28px,4vw,44px);background:var(--paper-2);border-radius:6px;border-left:3px solid var(--accent)}
.book-companion .kicker-sm{font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:12px}
.book-companion p{color:var(--ink);font-size:1.02rem;max-width:70ch;line-height:1.6}

/* ——— CTA ——— */
.book-cta{text-align:center;padding:clamp(70px,10vw,130px) 0 40px;border-top:1px solid var(--line);margin-top:clamp(50px,7vw,90px)}
.book-cta h2{font-family:var(--display);font-weight:500;font-size:clamp(2rem,4.6vw,3.4rem);letter-spacing:-.02em;line-height:1.05;margin-bottom:30px;max-width:20ch;margin-inline:auto}
.book-cta h2 em{font-style:italic;color:var(--accent)}

/* ——— Mobile ——— */
@media(max-width:880px){
    .book-page{padding:130px 0 40px}
    .book-hero{grid-template-columns:1fr;gap:46px}
    .book-hero-cover{order:-1;max-width:260px;margin:0 auto}
    .covers-grid{grid-template-columns:1fr}
    .audience-list{columns:1}
}