/* ============================================
   WATPLUS — Responsive overrides
   Only applies < 1024px. Desktop untouched.
   ============================================ */

/* Small-desktop / tablet landscape */
@media (max-width: 1024px) {
  .container { padding: 0 24px; }
  :root { --section-pad: calc(80px * var(--density)); }

  /* Hero grid: stack */
  #top > div.container {
    grid-template-columns: 1fr !important;
    gap: 48px !important;
  }

  /* Features: 2 cols */
  #features [style*="grid-template-columns: repeat(3, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Pricing: keep 3 cols but tighter */
  #pricing [style*="grid-template-columns: repeat(3, 1fr)"] {
    gap: 14px !important;
  }

  /* FAQ grid: stack */
  #faq > div.container {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }

  /* Footer: 2 cols */
  footer > div.container:first-of-type {
    grid-template-columns: 2fr 1fr 1fr !important;
  }
}

/* Tablet portrait / large phone */
@media (max-width: 768px) {
  :root { --section-pad: calc(64px * var(--density)); }
  .container { padding: 0 20px; }

  /* Nav: hide inner links, stack lang + CTA */
  header nav { display: none !important; }
  header .container { padding: 12px 20px !important; }
  header .container > div:last-child { gap: 8px !important; }
  header .container > div:last-child a.btn-ghost { display: none !important; }

  /* Hero h1 inline override — desktop had fontSize 58px inline */
  #top h1 {
    font-size: 44px !important;
    line-height: 1.05 !important;
  }
  #top .t-lead { font-size: 16px !important; }
  #top .pill { font-size: 10px !important; }

  /* Demo inbox: collapse sidebar + make list compact */
  #top [style*="grid-template-columns: 180px 1fr"] {
    grid-template-columns: 1fr !important;
  }
  #top [style*="grid-template-columns: 180px 1fr"] > div:first-child {
    display: none !important;
  }
  #top [style*="grid-template-columns: 1.1fr 1.2fr"] {
    grid-template-columns: 1fr !important;
  }
  #top [style*="grid-template-columns: 1.1fr 1.2fr"] > div:first-child {
    display: none !important;
  }

  /* Floating decorations on demo: hide (save space) */
  #top > div.container > div:nth-child(2) > div[style*="top: -20px"],
  #top > div.container > div:nth-child(2) > div[style*="bottom: -18px"] {
    display: none !important;
  }

  /* Demo section (app.wat.plus builder): stack phone below */
  #demo [style*="grid-template-columns: 1fr 360px"] {
    grid-template-columns: 1fr !important;
  }

  /* Features: 1 col */
  #features [style*="grid-template-columns: repeat(3, 1fr)"] {
    grid-template-columns: 1fr !important;
  }

  /* Pricing: 1 col */
  #pricing [style*="grid-template-columns: repeat(3, 1fr)"] {
    grid-template-columns: 1fr !important;
  }

  /* CTA strip */
  section[style*="background:var(--fg)"] > div.container,
  section[style*="background: var(--fg)"] > div.container {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  /* Footer: stack to 1 col */
  footer > div.container:first-of-type {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
  footer > div.container:last-of-type {
    flex-direction: column !important;
    gap: 8px !important;
    text-align: center !important;
  }

  /* Section headings can wrap/go smaller */
  .t-h2 { font-size: 32px !important; }
  .t-h3 { font-size: 22px !important; }

  /* Features header row: stack */
  #features > div.container > div:first-child,
  #pricing > div.container > div:first-child,
  #demo > div.container > div:first-child { text-align: left !important; }

  /* Pricing card: smaller */
  #pricing [style*="border-radius:var(--radius-lg)"] { padding: 24px !important; }

  /* FAQ question font */
  #faq button { font-size: 16px !important; padding: 18px 0 !important; }
}

/* Small phones */
@media (max-width: 480px) {
  .container { padding: 0 16px; }
  #top { padding: 56px 0 24px !important; }
  #top h1 { font-size: 36px !important; }

  /* Buttons: full width, stack */
  #top > div.container > div:first-child > div[style*="flexWrap"] {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  #top > div.container > div:first-child > div[style*="flexWrap"] a {
    justify-content: center !important;
  }

  /* Nav lang pill: shrink */
  header button { width: 32px !important; height: 32px !important; }
  header .btn-primary { padding: 10px 14px !important; font-size: 13px !important; }

  /* Section pad */
  :root { --section-pad: 48px; }

  /* Demo inbox: hide secondary column too — show just one card */
  #top [style*="min-height: 420px"] { min-height: 320px !important; }

  /* Demo campaign builder (app.wat.plus/broadcasts): smaller */
  #demo [style*="padding: 28px"] { padding: 20px !important; }

  /* Phone mockup in demo section: scale */
  #demo [style*="width: 240px"] { width: 200px !important; }

  /* Pricing card stack */
  #pricing [style*="aspectRatio"] { aspect-ratio: auto !important; }
}