/* ══════════════════════════════════════════════════════════════════
   MOBILE-PUBLIC — site-wide responsive layer for all public pages
   ------------------------------------------------------------------
   Loaded LAST from layouts/footer.blade.php (after unified-hero.css)
   so it wins over every page's inline <style>. Everything here lives
   inside media queries — desktop rendering is untouched.

   Sources of truth used to build this file:
   • Grid inventory of all public views (multi-column layouts below)
   • HIG/Material mobile rules: ≥16px inputs (stops iOS auto-zoom),
     ≥44px touch targets, no horizontal scroll, safe-area insets.
   ══════════════════════════════════════════════════════════════════ */

/* ── 1. Global guards (tablet & below) ───────────────────────────── */
@media (max-width: 920px) {
    html, body { max-width: 100vw; overflow-x: hidden; }

    img, video, canvas, iframe, embed { max-width: 100%; }
    img { height: auto; }
    svg { max-width: 100%; }

    .container {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    /* Faster taps, no double-tap zoom on controls */
    a, button, input, select, textarea, [role="button"] {
        touch-action: manipulation;
    }
}

/* ── 2. Two-column page layouts → single column (≤920px) ─────────── */
@media (max-width: 920px) {
    .bd-layout,          /* book detail: cover | info        */
    .cart-grid,          /* cart: items | summary            */
    .co-layout,          /* checkout: form | summary         */
    .od-grid,            /* order detail: timeline | side    */
    .pf-layout,          /* profile: sidebar | content       */
    .ep-grid,            /* edit profile: nav | form         */
    .contact-layout,     /* contact: form | info             */
    .ab-story {          /* about: text | image              */
        display: grid !important;
        grid-template-columns: 1fr !important;
    }
    /* Order summaries read better right after their forms on mobile */
    .cart-grid > *, .co-layout > *, .od-grid > * { min-width: 0; }

    /* Sticky sidebars shouldn't stick once stacked */
    .cart-summary-card, .co-summary, .od-side, .pf-sidebar, .ep-nav {
        position: static !important;
        top: auto !important;
        max-height: none !important;
    }

    /* Book detail: reviews summary + highlights stack */
    .bd-reviews-summary { grid-template-columns: 1fr !important; }
}

/* ── 3. Multi-column content grids step down (≤768px) ────────────── */
@media (max-width: 768px) {
    .ab-values, .ab-coll   { grid-template-columns: repeat(2, 1fr) !important; }
    .ab-stats, .ab-trust   { grid-template-columns: repeat(2, 1fr) !important; }
    .pf-stats__grid        { grid-template-columns: repeat(2, 1fr) !important; }
    .pf-actions-grid       { grid-template-columns: repeat(2, 1fr) !important; }
    .inv-order-bar         { grid-template-columns: repeat(2, 1fr) !important; }
    .bd-highlights         { grid-template-columns: 1fr !important; }

    /* Long tables (invoice, CMS content) scroll inside their card */
    .inv-table-wrap, .page-content, .cms-body { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ── 4. Form rows & small grids → single column (≤560px) ─────────── */
@media (max-width: 560px) {
    .co-form-row, .co-form-row--3,
    .ct-form-row,
    .ep-form-row, .ep-form-row--3,
    .ab-form-row,
    .inv-meta, .inv-info,
    .dp-card__details {
        grid-template-columns: 1fr !important;
    }
    .ab-values, .ab-coll { grid-template-columns: 1fr !important; }

    /* Auth cards breathe on small phones */
    .auth-card, .auth-panel { padding-left: 18px !important; padding-right: 18px !important; }
}

/* ── 5. Inputs & touch targets (phones) ──────────────────────────── */
@media (max-width: 768px) {
    /* 16px stops iOS Safari's auto-zoom on focus */
    input[type="text"], input[type="email"], input[type="tel"],
    input[type="password"], input[type="number"], input[type="search"],
    input[type="date"], select, textarea {
        font-size: 16px !important;
        min-height: 44px;
    }
    /* Primary interactive controls meet the 44px target */
    .btn, button[type="submit"], .nav-actions a, .mobile-toggle,
    .pf-hero-btn, .orders-hero__btn, .qty-btn, .pagination a, .pagination span {
        min-height: 44px;
        min-width: 44px;
    }
    .btn { display: inline-flex; align-items: center; justify-content: center; }

    /* Quantity steppers & wishlist/cart icon buttons get breathing room */
    .ci__qty button, .wishlist-btn, .cart-remove { padding: 10px !important; }
}

/* ── 6. Typography & spacing rhythm on phones ────────────────────── */
@media (max-width: 640px) {
    /* Section paddings tighten from desktop scale */
    .section { padding-top: 34px !important; padding-bottom: 34px !important; }
    .section__title, h2.section-title { font-size: 1.35rem !important; line-height: 1.25 !important; }

    /* Footer columns stack with comfortable gaps */
    .footer__grid { grid-template-columns: 1fr !important; gap: 26px !important; }
    .footer__bottom { flex-direction: column; gap: 10px; text-align: center; }

    /* Track-order steps compress instead of overflowing */
    .track-steps, .tp-steps { flex-wrap: wrap; justify-content: center; gap: 10px 6px; }
}

/* ── 7. Safe areas (notch phones) & viewport height ──────────────── */
@media (max-width: 920px) {
    .navbar, .announce-bar {
        padding-left: max(0px, env(safe-area-inset-left));
        padding-right: max(0px, env(safe-area-inset-right));
    }
    .footer { padding-bottom: max(24px, env(safe-area-inset-bottom)); }

    /* Full-height sections: prefer dynamic viewport units */
    .mobile-drawer { height: 100dvh; }
}

/* ── 8. Reduced motion ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ══════════════════════════════════════════════════════════════════
   9. TOP NAV — mobile upgrade
   Thumb-sized controls, decluttered action row, polished drawer.
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    /* Every header control meets the 44px touch floor (style.css shrank
       .action-btn to 38px at ≤480 — this file loads later and wins) */
    .nav-actions { gap: 8px !important; }
    .nav-actions .action-btn {
        width: 42px !important;
        height: 42px !important;
        font-size: 1rem;
    }
    .mobile-toggle {
        width: 44px !important;
        height: 44px !important;
        font-size: 1.15rem;
    }

    /* Sacred mantra band: slimmer so content starts sooner */
    .sacred-banner { padding: 5px 0 !important; }
    .sacred-banner__text { font-size: 0.78rem !important; }
}

@media (max-width: 480px) {
    /* The segmented language switch lives in the drawer on small phones —
       hiding the navbar copy frees ~90px for brand + 4 comfortable controls */
    .nav-actions > .lang-switch { display: none !important; }
}

/* Drawer: bigger touch rows, clear active state, safe-area padding */
@media (max-width: 920px) {
    .mobile-drawer {
        display: flex;
        flex-direction: column;
        padding-bottom: max(16px, env(safe-area-inset-bottom));
    }
    .mobile-drawer__nav { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }
    .mobile-drawer__link {
        min-height: 48px !important;
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        font-size: 1rem !important;
        border-radius: 10px;
        margin: 2px 10px;
        padding: 0 14px !important;
    }
    .mobile-drawer__link.active {
        background: rgba(123, 29, 29, 0.08) !important;
        color: var(--c-primary, #7B1D1D) !important;
        font-weight: 700;
    }
    .mobile-drawer__link:active { background: rgba(184, 134, 11, 0.12); }
    .mobile-drawer__close {
        width: 44px !important;
        height: 44px !important;
        display: inline-flex; align-items: center; justify-content: center;
    }
    .mobile-backdrop.active { -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
}

/* ══════════════════════════════════════════════════════════════════
   10. HOME PAGE — mobile design upgrade
   home.css handles most breakpoints; this fixes its gaps and tightens
   the phone experience. Loads after home.css, so these win.
   ══════════════════════════════════════════════════════════════════ */
/* Blog grid never collapsed (the one real gap): 2-col → 1-col */
@media (max-width: 720px) {
    .hblog-grid {
        grid-template-columns: 1fr !important;
        gap: 18px !important;
    }
}

@media (max-width: 640px) {
    /* Editorial hero: tighter band, comfortable search & chips */
    .hero--editorial { padding: 30px 0 34px !important; }
    .hero-ed__title { line-height: 1.16 !important; }
    .hero-search__btn { min-height: 46px; }
    .hero-chip { min-height: 36px; display: inline-flex; align-items: center; }

    /* Rails: soft edge-fade hints that there's more to scroll */
    .cj-rail, .sc-rail {
        -webkit-mask-image: linear-gradient(90deg, #000 92%, transparent);
        mask-image: linear-gradient(90deg, #000 92%, transparent);
        scroll-padding-left: 16px;
    }

    /* New-arrivals horizontal cards: slimmer borders + gap on phones */
    .arrivals-grid { gap: 12px !important; }
    .arrival-card { border-width: 1px !important; }
}

@media (max-width: 400px) {
    /* Crown-jewels cards: one-and-a-peek sizing on the smallest phones */
    .cj-card { flex: 0 0 164px !important; }
    .heritage-stats { margin-left: 0 !important; margin-right: 0 !important; }
}