/* =====================================================================
   tablet.css — tablet-only overrides (iPad mini / iPad / iPad Air / iPad Pro,
   Galaxy Tab, Surface Pro, Android tablets, etc.)

   Load order:  style.css  ->  site.css  ->  tablet.css   (this file LAST)

   Ranges used
   ---------------------------------------------------------------------
   A.  601px – 900px    small tablets + portrait tablets
   B.  901px – 1100px   large portrait tablets + small landscape tablets
   C.  touch landscape  tablets held sideways, 821px – 1400px
   HERO (end of file)   portrait tablets 601–1100px use the mobile photo;
                        landscape tablets keep the desktop hero.
   Phones (<= 600px) and desktops are NOT touched by anything below.
   ===================================================================== */


/* =====================================================================
   A. 601px – 900px  (small + portrait tablets)
   ===================================================================== */
@media (min-width:601px) and (max-width:900px){

    /* ---------- HOME ---------- */
    .page-home .founder .wrap{gap:36px;}

    .page-home .why-book{padding:84px 0;}
    .page-home .why-head{margin-bottom:44px;}
    .page-home .why-grid{grid-template-columns:repeat(2,1fr);gap:22px;}
    .page-home .why-card{padding:32px 28px 34px;}
    .page-home .why-cta{margin-top:44px;}

    .page-home .intro{padding:90px 0;}
    .page-home .intro-photo{max-width:440px;}
    .page-home .intro-text{margin-top:44px;}
    .page-home .intro-text p{max-width:56ch;}

    .page-home .books{padding:84px 0;}
    .page-home .books-head{flex-direction:row;align-items:flex-end;margin-bottom:44px;}
    .page-home .books-head p{max-width:38ch;}
    .page-home .books-track{grid-auto-columns:minmax(250px,40%);gap:22px;}

    .page-home .latest-book{padding:80px 0;}
    .page-home .latest-book .wrap{gap:44px;}
    .page-home .latest-book-cover img{max-width:340px;}

    .page-home .final-cta{padding:90px 0;}
    .page-home .final-cta-grid{gap:56px;}
    .page-home .fc-media{max-width:300px;}

    .page-home .book{padding:80px 0!important;}
    .page-home .book .wrap{gap:44px;}
    .page-home .book-cover{max-width:300px;}

    .page-home .articles{padding:84px 0;}
    .page-home .articles-head{margin-bottom:48px;}
    .page-home .articles-grid{grid-template-columns:repeat(2,1fr);gap:26px;}

    .page-home .magazines{padding:84px 0;}
    .page-home .magazines-head{margin-bottom:44px;}
    .page-home .magazines-grid{grid-template-columns:repeat(2,1fr);gap:24px;}
    /* odd last card sits centred instead of leaving a gap */
    .page-home .magazines-grid > .magazine-card:last-child:nth-child(odd){
        grid-column:1 / -1;
        width:calc(50% - 12px);
        justify-self:center;
    }

    .page-home .we-home{padding:90px 0;}
    .page-home .we-home-top{gap:56px;}
    .page-home .we-home-media{max-width:300px;}
    .page-home .we-home-badge{right:-22px;}
    .page-home .we-home-stat strong{font-size:42px;}
    .page-home .we-home-stat span{font-size:11px;letter-spacing:.1em;}

    .page-home .gallery{padding:90px 0;}
    .page-home .gallery-head{margin-bottom:44px;}
    .page-home .gallery-grid{gap:14px;}

    .page-home .reviews{padding:84px 0;}
    .page-home .reviews-head{flex-direction:row;align-items:flex-end;margin-bottom:44px;}
    .page-home .reviews-track{grid-auto-columns:minmax(280px,46%);gap:36px;}

    /* ---------- ABOUT ---------- */
    .about-hero{padding:48px 0;}
    .about-hero-photo{max-width:380px;}
    .lede{padding:90px 0 30px;}
    .story{padding:90px 0;}
    .story-photo{max-width:520px;}
    .path{padding:100px 0;}
    .values{padding:100px 0;}
    .story-hook{padding:90px 0;}
    .fun-facts{padding:100px 0;}
    .official-bio{padding:90px 0 100px;}
    .about-cta{padding:170px 0;}

    /* ---------- BOOKS (list) ---------- */
    .books-hero{padding:34px 0 22px;}
    .page-books .cat-nav .wrap{gap:8px 28px;padding:12px 32px;}
    :is(.page-books,.page-books-detail) .book-section{padding:70px 0;}
    :is(.page-books,.page-books-detail) .book-section-head{margin-bottom:48px;}
    :is(.page-books,.page-books-detail) .book-grid{
        grid-template-columns:repeat(2,1fr);
        max-width:none;
        margin:0;
        gap:44px 32px;
    }
    :is(.page-books,.page-books-detail) .book-grid.fiction{
        grid-template-columns:repeat(2,1fr);
        max-width:720px;
        margin:0 auto;
    }
    #books-catalog.all-view{
        grid-template-columns:repeat(2,1fr);
        max-width:none;
        gap:48px 28px;
        padding:80px 32px 50px;
    }
    .page-books .books-note{padding:70px 0 80px;}
    .books-note-grid{gap:48px;}
    .books-note-media{max-width:340px;}

    /* ---------- WRITING & EDITING ---------- */
    .we-section{padding:84px 0;}
    .we-head{margin-bottom:48px;}
    .we-hero{padding:48px 0 72px;}
    .we-hero-frame{max-width:300px;}
    .role-row{grid-template-columns:190px 1fr;gap:12px 28px;padding:28px 0;}
    .role-heading h3{font-size:24px;}
    .role-link{grid-column:2;align-self:start;}
    .we-split{gap:44px;}
    .we-photo{max-width:520px;}
    .edit-work-grid{grid-template-columns:repeat(3,1fr);max-width:640px;gap:28px;}
    .beyond-grid{gap:44px;}
    .we-cta{padding:84px 0;}
    .we-cta-covers{gap:20px;}
    .we-cta-covers .cover{width:30%;max-width:240px;}

    /* ---------- ARTICLES (index) ---------- */
    .art-section{padding:70px 0;}
    .page-articles .cat-nav .wrap{gap:8px 24px;padding:12px 28px;}
    .page-articles .art-grid,
    .page-articles .src-grid{padding:0 32px;gap:26px;}
    .page-articles .art-body{padding:24px 26px 28px;}
    .law-grid{gap:48px;}

    /* ---------- ARTICLE (detail) ---------- */
    .post-cover{padding-top:36px;}
    .post-layout{padding:50px 0 20px;}
    .post-body p{font-size:18px;}
    .post-author{margin-top:48px;}
    .page-articles-detail .art-grid{grid-template-columns:repeat(2,1fr);gap:24px;}
    .page-articles-detail .art-grid > .art-card:last-child:nth-child(odd){
        grid-column:1 / -1;
        width:calc(50% - 12px);
        justify-self:center;
    }

    /* ---------- LEGAL ---------- */
    .legal-hero{padding:80px 0 40px;}
    .legal-card{padding:44px 40px;}

    /* ---------- CHECKOUT ---------- */
    .checkout-grid{gap:32px;}
}

/* 768px – 900px: three-column value blocks fit, so use them */
@media (min-width:768px) and (max-width:900px){
    .page-about .values-grid{grid-template-columns:repeat(3,1fr);gap:28px;}
    .page-about .value-item h3{font-size:22px;}
    .page-writing .values-grid{grid-template-columns:repeat(3,1fr);gap:28px;max-width:none;}
    .page-writing .value-item h3{font-size:22px;}
}


/* =====================================================================
   BOOK DETAIL — keep cover + text side by side on tablets, 601px – 820px
   ===================================================================== */
@media (min-width:601px) and (max-width:820px){
    .book-detail{padding:120px 0 70px;}
    .book-detail .wrap{grid-template-columns:minmax(210px,290px) 1fr;gap:36px;}
    .book-detail .cover{max-width:none;}
}


/* =====================================================================
   CONTACT — 601px – 980px (layout is stacked, so use the width)
   ===================================================================== */
@media (min-width:601px) and (max-width:980px){
    .contact-hero{padding:70px 0 44px;}
    .form-card{padding:44px 40px;}
    .contact-side{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start;}
    .contact-side > * + *{margin-top:0;}
    .side-card.sage{margin-top:0;}
    .contact-side > :last-child:nth-child(odd){grid-column:1 / -1;}
}


/* =====================================================================
   B. 901px – 1100px  (large portrait tablets / small landscape tablets)
   ===================================================================== */
@media (min-width:901px) and (max-width:1100px){

    /* ---------- HOME ---------- */
    .page-home .why-grid{grid-template-columns:repeat(2,1fr);gap:24px;}

    .page-home .intro{padding:110px 0;}
    .page-home .intro-text{padding-left:56px;}

    .page-home .books-track{grid-auto-columns:calc((100% - 48px) / 3);gap:24px;}

    .page-home .latest-book .wrap{gap:40px;}
    .page-home .latest-book-cover img{max-width:340px;}

    .page-home .final-cta-grid{gap:56px;}
    .page-home .fc-copy h2{font-size:clamp(40px,5vw,56px);}

    .page-home .book .wrap{gap:56px;}

    .page-home .articles-grid{grid-template-columns:repeat(2,1fr);gap:28px;}

    .page-home .magazines-grid{grid-template-columns:repeat(3,1fr);gap:22px;}

    .page-home .we-home-top{gap:56px;}

    .page-home .gallery{padding:110px 0;}

    .page-home .reviews-track{grid-auto-columns:calc((100% - 72px) / 3);gap:36px;}

    /* ---------- ABOUT ---------- */
    .about-hero .wrap{gap:44px;}
    .story .wrap,
    .story.reverse .wrap{gap:50px;}
    .page-about .values-grid{gap:36px;}

    /* ---------- BOOKS (list) ---------- */
    :is(.page-books,.page-books-detail) .book-grid{
        grid-template-columns:repeat(3,1fr);
        gap:44px 32px;
    }
    #books-catalog.all-view{
        grid-template-columns:repeat(3,1fr);
        gap:52px 24px;
        padding:84px 32px 50px;
    }
    .books-note-grid{gap:56px;}

    /* ---------- WRITING & EDITING ---------- */
    .we-hero-body{gap:48px;}
    .role-row{grid-template-columns:200px 1fr 170px;gap:28px;}
    .we-split{gap:50px;}
    .beyond-grid{gap:48px;}
    .page-writing .values-grid{gap:36px;}
    .we-cta-covers .cover{width:240px;}

    /* ---------- ARTICLES ---------- */
    .law-grid{gap:44px;}
    .post-grid{grid-template-columns:1fr 200px;gap:44px;}

    /* ---------- CHECKOUT / CONTACT ---------- */
    .checkout-grid{grid-template-columns:1fr 300px;gap:32px;}
    .contact-layout{gap:30px;}
}

/* Book detail, 821px – 1100px */
@media (min-width:821px) and (max-width:1100px){
    .book-detail{padding:130px 0 80px;}
    .book-detail .wrap{grid-template-columns:minmax(240px,340px) 1fr;gap:44px;}
}

/* Contact, 981px – 1100px */
@media (min-width:981px) and (max-width:1100px){
    .form-card{padding:40px 34px;}
}


/* =====================================================================
   C. TOUCH TABLETS HELD SIDEWAYS (landscape), 821px – 1400px
      Limited to touch screens so laptops/desktops are not affected.
      (Landscape keeps the DESKTOP hero image; these only tune the text.)
   ===================================================================== */
@media (min-width:821px) and (max-width:1400px) and (orientation:landscape) and (hover:none) and (pointer:coarse){
    .page-home .hero{padding-right:6vw;}
    .page-home .hero-content{max-width:560px;}
    .page-home .hero-content h1{font-size:clamp(38px,4.6vw,58px);}
    .page-home .hero-content p{font-size:17px;margin-top:20px;}
    .page-home .hero-content .btn{margin-top:28px;}
}


/* =====================================================================
   D. NO-HOVER (touch) DEVICES — stop "stuck" hover effects after a tap
   ===================================================================== */
@media (hover:none) and (min-width:601px) and (max-width:1400px){
    .page-home .why-card:hover{transform:none;box-shadow:0 18px 34px -24px rgba(75,64,56,.3);}
    .page-home .book-card:hover .book-card-cover img,
    .page-home .article-card:hover .article-card-image img,
    .page-home .magazine-card:hover .magazine-card-image img,
    .page-home .gallery-grid a:hover img{transform:none;}
    .page-home .books-nav button:hover,
    .page-home .reviews-nav button:hover{background:var(--cream);color:var(--ink);border-color:var(--line);}
}


/* =====================================================================
   HERO (home) — PORTRAIT tablets, 601px – 1100px
   Mobile photo on top, text on the green fade below, paragraph visible.
   Landscape tablets are NOT in this query: they keep the desktop hero.
   Keep this block near the END of the file.
   ===================================================================== */
@media (min-width:601px) and (max-width:1100px) and (orientation:portrait){

    .page-home .hero{
        min-height:100vh;
        min-height:100svh;
        display:flex;
        align-items:flex-end;
        justify-content:center;
        text-align:center;
        padding:0 0 clamp(48px,6vh,80px) !important;
    }

    .page-home .hero-bg{
        background-image:
            linear-gradient(180deg,rgba(60,48,42,0) 0%,rgba(60,48,42,0) 45%,rgba(40,52,24,.78) 76%,rgba(40,52,24,.92) 100%),
            url('/assets/uploads/hero/1791902240_c89cbb1952151c98daa0.jpg') !important;
        background-size:cover !important;
        background-repeat:no-repeat !important;
        background-position:center top !important;
    }

    .page-home .hero-content{
        max-width:720px;
        width:100%;
        margin:0 auto;
        padding:0 40px;
        text-align:center;
    }
    .page-home .hero-content h1{
        margin:10px auto 0;
        max-width:20ch;
        font-size:clamp(38px,5.6vw,58px);
        line-height:1.12;
    }
    .page-home .hero-content p{
        display:block !important;
        max-width:54ch;
        margin:16px auto 0;
        font-size:clamp(15px,2vw,18px);
        line-height:1.6;
        color:rgba(255,255,255,.92);
    }
    .page-home .hero-content .btn,
    .page-home .hero-content h1 + .btn,
    .page-home .hero-content p + .btn{
        display:inline-block;
        width:auto;
        min-width:220px;
        max-width:none;
        padding:14px 28px;
        font-size:12px;
        margin:24px 8px 0;
        text-align:center;
    }
    .page-home .scroll-cue{display:none;}
}


/* =====================================================================
   HEADER LOGO — stop it being squeezed between the nav links, 821–1100px
   ===================================================================== */
@media (min-width:821px) and (max-width:1100px){
    header a:has(> img[alt="Cheryl K. Smith"]),
    header img[alt="Cheryl K. Smith"]{
        flex:0 0 auto !important;
        width:auto !important;
        min-width:170px;
        max-width:none !important;
        object-fit:contain;
    }
    .nav-side{gap:14px !important;}
    .nav-side a{font-size:10.5px !important;letter-spacing:.1em !important;}
}


/* =====================================================================
   FOOTER — tablets 601px – 1100px
   ===================================================================== */
@media (min-width:601px) and (max-width:1100px){
    /* restores the side space that .footer-inner's padding shorthand removed */
    .footer-inner.wrap{
        padding-left:clamp(32px,5vw,56px);
        padding-right:clamp(32px,5vw,56px);
    }
    .footer-bottom .socials{flex-wrap:wrap;gap:8px 18px;}
}

/* 601–900px: brand block on top, three link columns underneath */
@media (min-width:601px) and (max-width:900px){
    .footer-cols{grid-template-columns:repeat(3,1fr);gap:40px 28px;}
    .footer-cols > div:first-child{grid-column:1 / -1;}
    .footer-cols .tagline{max-width:60ch !important;}
}

/* 901–1100px: four columns, a bit tighter, bottom row kept clear of the chat buttons */
@media (min-width:901px) and (max-width:1100px){
    .footer-cols{grid-template-columns:1.5fr 1fr 1fr 1fr;gap:32px 24px;}
    .footer-bottom{gap:12px 28px;padding-right:80px;}
}


/* =====================================================================
   HEADER LOGO — never squeeze it, 821px – 1100px
   ===================================================================== */
@media (min-width:821px) and (max-width:1100px){
    header .wrap{gap:20px;padding:0 24px;}
    .brand-logo{flex:none;}
    .brand-logo img{
        max-width:none !important;
        width:auto !important;
        height:44px !important;
    }
    header.scrolled .brand-logo img{height:38px !important;}
    .nav-side{gap:16px;}
    .nav-side a{font-size:11px;letter-spacing:.12em;}
    .nav-actions{gap:18px;}
}