/* =====================================================================
   mobile.css — public site mobile/tablet adaptive layer (v1.6)
   Loaded AFTER theme.css. Uses !important sparingly to override inline
   styles where necessary (presence stats grid, compare bar, etc.).
   Breakpoints: 1024 / 760 / 560 / 420
   ===================================================================== */

/* ---------- TABLET (≤ 1024px) ------------------------------------- */
@media (max-width: 1024px) {
  /* tighten container padding */
  .container { padding: 0 24px; }

  /* Compare table — still scrollable, but hint at scroll */
  .compare-scroll { -webkit-overflow-scrolling: touch; }
}

/* ---------- MOBILE LANDSCAPE / SMALL TABLET (≤ 760px) ------------- */
@media (max-width: 760px) {
  /* HERO presence stats band — was hardcoded repeat(N,1fr) inline */
  section[style*="background:var(--ink)"] > .container > div[style*="grid-template-columns:repeat"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 14px !important;
    text-align: center;
  }

  /* Section padding shrinks */
  .section          { padding: 64px 0 !important; }
  .section--tight   { padding: 44px 0 !important; }
  .page-hero        { padding: 70px 0 50px !important; }

  /* Footer columns — already 2 at 1024px; now 1+1 layout */
  .footer-top { grid-template-columns: 1.4fr 1fr !important; gap: 28px !important; }

  /* Section header alignment */
  .sec-head { padding: 0 6px; }

  /* Product card body */
  .prod-card .prod-body { padding: 16px; }
  .prod-card h3 { font-size: 1rem; }

  /* Compare button — always visible on mobile (no hover) */
  .cmp-btn { opacity: 1 !important; font-size: .62rem !important; padding: .35em .7em !important; }

  /* Store-locator cards: single column at this width */
  section .container > div[style*="auto-fill,minmax(360px"] {
    grid-template-columns: 1fr !important;
  }
}

/* ---------- PHONE PORTRAIT (≤ 560px) ------------------------------ */
@media (max-width: 560px) {
  /* Heading scale-down */
  h1 { font-size: clamp(1.9rem, 8vw, 2.4rem) !important; line-height: 1.15 !important; }
  h2 { font-size: clamp(1.4rem, 6.5vw, 1.8rem) !important; }
  .lede { font-size: .95rem !important; }
  .eyebrow { font-size: .66rem !important; letter-spacing: .22em !important; }

  /* Container tighter padding */
  .container { padding: 0 18px !important; }

  /* Hero adjustments */
  .hero { padding: 80px 0 50px !important; }
  .hero-visual { aspect-ratio: 4/3 !important; max-height: 340px !important; }

  /* Footer single column */
  .footer-top { grid-template-columns: 1fr !important; gap: 28px !important; padding-bottom: 36px !important; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 8px; text-align: left; }

  /* Compare floating bar — anchor to edges, allow wrap */
  #cmp-bar {
    left: 12px !important; right: 12px !important;
    transform: none !important;
    bottom: 16px !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 12px 16px !important;
    border-radius: 8px !important;
    font-size: .8rem !important;
  }
  #cmp-bar a, #cmp-bar button { font-size: .72rem !important; padding: .45em 1em !important; }

  /* WhatsApp float — clear above compare bar */
  .wa-float { bottom: 84px !important; right: 14px !important; width: 50px !important; height: 50px !important; }

  /* Cards 1 column */
  .cat-grid, .prod-grid, .testi-grid, .blog-grid, .occasion-grid {
    grid-template-columns: 1fr !important; gap: 18px !important;
  }

  /* Buttons full width, but inline groups still flow naturally */
  .hero-copy .btn { width: 100%; justify-content: center; }
  .btn { padding: .95em 1.6em; font-size: .82rem; }
  .btn--sm { width: auto; padding: .55em 1em; font-size: .72rem; }

  /* Compare page — sticky table header on mobile */
  .compare-scroll table thead th { font-size: .78rem; padding: 12px 10px !important; }
  .compare-scroll table td { font-size: .82rem; padding: 12px 10px !important; }

  /* Page hero (inner pages) */
  .page-hero { padding: 60px 0 40px !important; }
  .page-hero h1 { font-size: clamp(1.7rem, 8vw, 2.2rem) !important; }

  /* Forms */
  .form-grid { grid-template-columns: 1fr !important; gap: 14px !important; }
  .news-form { flex-direction: column !important; gap: 8px !important; }
  .news-form input, .news-form button { width: 100% !important; }

  /* Tables — ensure scroll */
  .compare-scroll, [style*="overflow-x:auto"] {
    margin: 0 -18px;
    padding: 0 18px;
  }
}

/* ---------- TINY PHONE (≤ 420px) ---------------------------------- */
@media (max-width: 420px) {
  /* Stats band — 1 column if 4 cards would be too cramped */
  section[style*="background:var(--ink)"] > .container > div[style*="grid-template-columns:repeat"] {
    grid-template-columns: 1fr !important;
  }
  /* Brand wordmark in nav scales down */
  .brand { font-size: 1.05rem !important; }
  .brand img { height: 32px !important; }
  /* Section padding minimum */
  .section { padding: 48px 0 !important; }
}

/* ---------- TOUCH IMPROVEMENTS ------------------------------------ */
@media (hover: none) and (pointer: coarse) {
  /* All product card hover effects show by default on touch */
  .prod-card { transform: none !important; }
  .prod-card .cmp-btn { opacity: 1 !important; }

  /* Larger tap targets */
  .nav-links a { padding: 10px 0 !important; }
  .footer a { padding: 4px 0 !important; display: inline-block; }
  .icon-btn { padding: 10px !important; }
}

/* ---------- PRINT-SAFE (bonus) ------------------------------------ */
@media print {
  .nav-toggle, .wa-float, #cmp-bar, .site-header, .site-footer { display: none !important; }
  body { color: #000 !important; background: #fff !important; }
}