/* ════════════════════════════════════════════════════════════════
   BRANDZOO MEDIA — MOBILE RESPONSIVE HARDENING
   Loaded LAST. Fixes horizontal overflow + stacks every grid
   correctly on phones without touching desktop styles.
   ════════════════════════════════════════════════════════════════ */

/* ─── 1. Root hardening: kill horizontal overflow at the source ─ */
html, body {
    max-width: 100vw;
    width: 100%;
    overflow-x: clip;        /* clip is safer than hidden for position:sticky */
}
@supports not (overflow-x: clip) {
    html, body { overflow-x: hidden; }
}
*, *::before, *::after { box-sizing: border-box; }

/* Long URLs / unbreakable words inside articles can blow out width */
.article p, .article li, .article a,
.faq-a p, .footer-contact p, .cd-item a,
.hero-sub, .hero-title { overflow-wrap: anywhere; word-break: break-word; }

/* Make every <img>, <svg>, <video>, <iframe> respect its container */
img, svg, video, iframe {
    max-width: 100%;
    height: auto;
}

/* Grid + flex children should be allowed to shrink. Without min-width:0
   a long line of text inside a grid track can force the whole row wider
   than the viewport (classic CSS gotcha). */
.container > *,
.hero-inner > *,
.bento > *,
.engine-grid > *,
.funnel > *,
.command-grid > *,
.cases-grid > *,
.web-card > *,
.contact-grid > *,
.contact-page-grid > *,
.footer-grid > *,
.svc-hero-grid > *,
.svc-two-col > *,
.article-layout > *,
.about-intro > *,
.vmv-panel > *,
.service-detail > *,
.cta-strip > *,
.blog-feature > * { min-width: 0; }

/* ─── 2. Mobile breakpoint: 768px and below ───────────────────── */
@media (max-width: 768px) {
    :root { --pad: 16px; }
    .container { padding-left: 16px; padding-right: 16px; }

    /* Wrap any too-long button/link rows */
    .hero-actions,
    .page-hero .actions,
    .cta-strip .actions { flex-wrap: wrap; gap: 10px; width: 100%; }
    .hero-actions > a,
    .page-hero .actions > a,
    .cta-strip .actions > a { flex: 1 1 auto; justify-content: center; min-width: 0; }

    /* Hero — stacked, full width, no fixed visual height */
    .hero { padding: 60px 0 50px; }
    .hero-inner { grid-template-columns: 1fr !important; gap: 40px; }
    .hero-text, .hero-visual { width: 100%; max-width: 100%; }
    .hero-text { text-align: left; }
    .hero-title { font-size: clamp(1.85rem, 8vw, 2.6rem); }
    .hero-sub { font-size: 1rem; max-width: 100%; }

    /* Dashboard card scales properly; remove min-height that left big gaps */
    .hero-visual { min-height: 0; }
    .dashboard-card { padding: 16px; transform: none !important; animation: none !important; }
    .dashboard-card::after { display: none; }           /* spinning ring */
    .db-head h4 { font-size: 0.9rem; }
    .db-metrics { gap: 8px; }
    .db-metric { padding: 10px; }
    .db-metric .val { font-size: 1.1rem; }
    .db-metric .delta { font-size: 10px; }
    .db-bars { height: 50px; gap: 5px; }
    .db-bar-lbls { font-size: 9px; gap: 5px; }
    .db-row { font-size: 11px; gap: 6px; flex-wrap: wrap; }
    .db-row .badge { font-size: 9px; padding: 2px 6px; }

    /* Floating cards — clip-safe on small viewports */
    .float-card { font-size: 11px; padding: 8px 10px; max-width: 70%; }
    .float-card i { width: 28px; height: 28px; font-size: 12px; }
    .float-card.fc-meta { top: -1%;  left: 0; right: auto; }
    .float-card.fc-ugc  { top: 30%;  right: 0; left: auto; }
    .float-card.fc-ads  { bottom: 18%; left: 0; right: auto; }
    .float-card.fc-seo  { bottom: 0;  right: 0; left: auto; }
    .float-card.fc-lead { display: none; }

    /* Hero KPIs — 2 cols */
    .hero-kpis { grid-template-columns: repeat(2, 1fr) !important; gap: 10px; }
    .kpi-pill { padding: 12px 10px; }
    .kpi-pill strong { font-size: 1.3rem !important; }

    /* Section paddings & titles */
    .section-pad { padding: 56px 0; }
    .section-title { font-size: clamp(1.6rem, 6.5vw, 2.2rem); }
    .section-header-center { margin-bottom: 36px; }
    h1 { font-size: clamp(1.85rem, 8vw, 2.6rem); }
    h2 { font-size: clamp(1.5rem, 6vw, 2.2rem); }
    h3 { font-size: 1.15rem; }
    p { font-size: 0.96rem; }

    /* Bento — single column */
    .bento { grid-template-columns: 1fr !important; gap: 14px; }
    .bento-card,
    .bento-card.wide,
    .bento-card.featured { grid-column: 1 / -1 !important; padding: 20px; }

    /* Growth engine — vertical */
    .engine-grid { grid-template-columns: 1fr !important; gap: 14px; }
    .engine::before, .engine::after { display: none; }    /* huge orbit rings */

    /* Funnel — vertical, no decorative arrows */
    .funnel { grid-template-columns: 1fr !important; gap: 12px; }
    .funnel-step .arrow { display: none !important; }

    /* Command center — single column */
    .command-grid { grid-template-columns: 1fr !important; gap: 14px; }
    .cmd-card,
    .cmd-card.col-4,
    .cmd-card.col-6,
    .cmd-card.col-8 { grid-column: 1 / -1 !important; padding: 18px; }
    .cmd-stat-row { grid-template-columns: repeat(2, 1fr); }

    /* Case studies, blog, portfolio — 1 column */
    .cases-grid,
    .blog-grid,
    .portfolio-grid,
    .related-grid { grid-template-columns: 1fr !important; gap: 16px; }
    .blog-feature { grid-template-columns: 1fr !important; }
    .blog-feature .feat-body { padding: 20px; }

    /* Trust, metrics, footer */
    .trust-grid { grid-template-columns: 1fr !important; gap: 14px; }
    .metrics-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
    .footer-grid { grid-template-columns: 1fr !important; gap: 30px; }
    .footer-bottom .container { flex-direction: column; text-align: center; }

    /* Industries — keep 2 cols min, no smaller */
    .industries-grid { grid-template-columns: repeat(2, 1fr) !important; }

    /* UGC phone grid — 2 cols on phones */
    .ugc-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }

    /* Website portfolio carousel — narrower cards */
    .web-scroll { padding: 6px 0 20px; gap: 14px; }
    .web-card { flex: 0 0 84vw; max-width: 320px; }

    /* SEO + Contact + About + Services + Article — 1 col */
    .seo-grid,
    .ai-opt-grid,
    .about-intro,
    .vmv-panel,
    .service-detail,
    .svc-hero-grid,
    .svc-two-col,
    .article-layout,
    .contact-grid,
    .contact-page-grid,
    .cta-strip { grid-template-columns: 1fr !important; }
    .vmv-panel { padding: 22px; }
    .vmv-icon-card { max-width: 180px; font-size: 50px; }
    .seo-list { grid-template-columns: 1fr !important; }
    .seo-audit, .lead-form, .contact-card { padding: 22px; }
    .audit-grid { grid-template-columns: 1fr; }
    .audit-rings { grid-template-columns: repeat(3, 1fr); padding: 12px; }
    .audit-rings .bz-ring { --size: 70px; --stroke: 6px; }
    .form-row-2 { grid-template-columns: 1fr !important; }

    /* Service-page process steps & feats */
    .svc-process { grid-template-columns: 1fr !important; }
    .service-detail-text .feats { grid-template-columns: 1fr !important; }
    .stats-row { grid-template-columns: repeat(2, 1fr); }
    .ba-wrap { grid-template-columns: 1fr !important; }

    /* Header — leave room for hamburger, kill desktop CTA */
    .main-header { padding: 12px 0; }
    .nav-inner { gap: 12px; }
    .logo { font-size: 18px; }
    .logo-img { width: 28px !important; height: 28px !important; }
    .btn-primary-nav { display: none !important; }     /* moved to mobile bar */
    .top-bar { font-size: 11px; padding: 7px 0; }
    .top-bar-left { gap: 10px; }
    .top-bar-right { width: 100%; }
    .announcement-bar { font-size: 11px; padding: 7px 0; }

    /* Audit popup fits viewport */
    .popup-card { padding: 26px 20px; max-width: 92vw; }

    /* Padding for sticky bottom action bar (already in home.css but reinforce) */
    body { padding-bottom: 76px; }

    /* Stop big background rings/glows that wobble layout */
    .hero::after { filter: blur(40px); opacity: 0.55; }
    .hero-grid-bg { opacity: 0.25; }
    .hero-particles { display: none; }                 /* perf + visual noise */
    .bz-cursor-glow { display: none !important; }

    /* Disable heavy motion that translates X (mouse parallax already
       gated by !isTouch in JS, but defensively reset transforms) */
    .float-card { animation-duration: 6s; }

    /* Footer details */
    .footer-brand p { font-size: 13px; }
    .social-icons a { width: 34px; height: 34px; }

    /* Forms: avoid iOS auto-zoom by ensuring >=16px input font */
    .field input, .field select, .field textarea,
    .lead-form input, .lead-form select, .lead-form textarea { font-size: 16px; }
}

/* ─── 3. Smaller phones (≤480px) ─────────────────────────────── */
@media (max-width: 480px) {
    :root { --pad: 14px; }
    .container { padding-left: 14px; padding-right: 14px; }

    .hero-title { font-size: clamp(1.65rem, 8.5vw, 2.2rem); }
    .hero-sub { font-size: 0.95rem; }
    .hero-eyebrow { font-size: 10.5px; padding: 6px 11px; }
    .hero-actions { gap: 8px; }
    .hero-actions > a { padding: 13px 18px; font-size: 14px; }

    .industries-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .ugc-grid { grid-template-columns: 1fr !important; }
    .metrics-grid { grid-template-columns: 1fr; }
    .stats-row { grid-template-columns: 1fr; }
    .audit-rings { grid-template-columns: 1fr; }

    .float-card.fc-ads, .float-card.fc-seo { display: none; }
    .float-card.fc-meta { max-width: 65%; }
    .float-card.fc-ugc  { max-width: 65%; }

    /* Mobile bottom action bar buttons shrink labels gracefully */
    .mobile-action-bar a { font-size: 12px; padding: 10px 6px; gap: 4px; }

    /* WhatsApp FAB doesn't crowd the right edge */
    .fab-wa { right: 14px; width: 48px; height: 48px; font-size: 19px; }
    .fab-top { right: 14px; width: 44px; height: 44px; }

    /* Reduce dashboard internal density further */
    .db-metrics { grid-template-columns: 1fr 1fr; }
    .db-bars { grid-template-columns: repeat(7, 1fr); }
}

/* ─── 4. Tiny phones (≤360px, e.g. iPhone SE) ────────────────── */
@media (max-width: 360px) {
    .container { padding-left: 12px; padding-right: 12px; }
    .hero-title { font-size: 1.55rem; line-height: 1.1; }
    .hero-actions > a { padding: 12px 14px; font-size: 13px; }
    .kpi-pill strong { font-size: 1.15rem !important; }
}

/* ─── 5. Landscape-only safety: prevent very-short visuals ────── */
@media (max-width: 900px) and (orientation: landscape) {
    .hero { padding: 50px 0 40px; }
    .hero-visual { min-height: 0; }
}

/* ─── 6. Disable expensive animations on mobile for layout safety ─ */
@media (max-width: 768px), (prefers-reduced-motion: reduce) {
    .dashboard-card,
    .float-card,
    .phone-mock,
    .laptop-mock { animation-duration: 6s !important; }
    .hero-grid-bg { animation: none; }
    body::before { height: 2px; }                       /* scroll progress bar */
}