/* =====================================================================
   UnBox Care — responsive.css
   Breakpoints: 1024 · 768 · 560
   ===================================================================== */

/* ---------- Tablet landscape / small desktop ---------- */
@media (max-width: 1024px) {
    .section { padding: 80px 0; }
    .hero { padding: 80px 0 72px; }

    .hero-grid { gap: 48px; }
    .hero-collage { max-width: 480px; }

    .pillars       { grid-template-columns: repeat(2, 1fr); }
    .steps         { grid-template-columns: repeat(5, 1fr); gap: 12px; }
    .steps::before { display: none; } /* line looks off on narrow */
    .endorse-grid  { grid-template-columns: repeat(2, 1fr); }
    .boxes         { grid-template-columns: 1fr; }

    .contact-grid { grid-template-columns: 1fr; gap: 40px; }

    .footer-inner { grid-template-columns: 1.5fr 1fr 1fr; gap: 40px; }
}

/* ---------- Tablet portrait ---------- */
@media (max-width: 768px) {
    body { font-size: 16px; }

    .section { padding: 64px 0; }
    .hero { padding: 56px 0 64px; }

    /* Any inline-styled two-column grids collapse cleanly on phones.
       !important is deliberate — overrides the inline style="grid-template-columns:..."
       set on these divs in the PHP templates. */
    .about-grid,
    .presence-grid,
    .safety-grid,
    .advisor-detail-grid {
        grid-template-columns: 1fr !important;
        gap: 40px !important;
    }
    /* About: numeric anchor scales down on mobile so it doesn't dwarf the heading */
    .about-num { font-size: 4.5rem !important; top: -8px !important; }
    .about-content { padding-top: 12px; }
    .about-box-frame { transform: rotate(-0.8deg); }
    .advisor-card {
        grid-template-columns: 1fr !important;
    }
    /* Experiences grid keeps 2 across on tablet, 1 on small phone */
    .endorse-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Nav: hide inline nav, show hamburger */
    .site-nav {
        position: fixed;
        top: 0; right: 0; bottom: 0;
        width: min(320px, 85vw);
        background: var(--cream);
        transform: translateX(100%);
        transition: transform var(--dur) var(--ease);
        padding: 100px 32px 32px;
        box-shadow: -8px 0 32px rgba(0,0,0,0.08);
        z-index: 98;
    }
    .site-nav.open { transform: translateX(0); }
    .nav-list { flex-direction: column; align-items: stretch; gap: 4px; }
    .nav-link { font-size: 1.05rem; padding: 14px 18px; border-radius: var(--radius-sm); }

    .btn-nav-cta { display: none; }
    .nav-toggle { display: flex; z-index: 100; }

    /* Hero */
    .hero-grid { grid-template-columns: 1fr; gap: 48px; }
    .hero-content { max-width: none; text-align: center; margin: 0 auto; }
    .hero-actions { justify-content: center; }
    .hero-note { text-align: left; }
    .hero-collage { max-width: 100%; margin: 0 auto; aspect-ratio: 1 / 1; }

    .pillars       { grid-template-columns: 1fr 1fr; gap: 16px; }
    .steps         { grid-template-columns: 1fr 1fr; gap: 40px 20px; }
    .steps::before { display: none; } /* dotted line looks noisy on wrapped grid */
    .endorse-grid  { grid-template-columns: 1fr 1fr; gap: 16px; }
    .endorse-card  { padding: 22px; }

    .advisor-card { grid-template-columns: 1fr; text-align: center; gap: 24px; padding: 32px 24px; }
    .advisor-photo { max-width: 200px; margin: 0 auto; }

    .form-row { grid-template-columns: 1fr; gap: 0; }

    .footer-inner { grid-template-columns: 1fr; gap: 32px; text-align: left; }
}

/* ---------- Small phone ---------- */
@media (max-width: 560px) {
    .container, .container-wide { padding: 0 18px; }
    .section { padding: 56px 0; }

    h1 { font-size: 2rem; }
    h2 { font-size: 1.5rem; }

    .hero-content h1 { font-size: 1.85rem; }
    .hero-content .lead { font-size: 1rem; }
    .hero-actions { flex-direction: column; align-items: stretch; }
    .hero-actions .btn { width: 100%; }

    .pillars       { grid-template-columns: 1fr; }
    .steps         { grid-template-columns: 1fr; }
    .endorse-grid  { grid-template-columns: 1fr !important; }
    .box-card      { flex-direction: column; padding: 26px 22px; gap: 18px; }
    .box-card::before { position: static; align-self: flex-start; }
    .box-body h3   { padding-right: 0; }

    .contact-form,
    .contact-alt   { padding: 26px 22px; }

    .brand-tagline { display: none; }

    .wa-float { width: 48px; height: 48px; bottom: 18px; right: 18px; }
    .wa-float svg { width: 22px; height: 22px; }
}