/* responsive.css — container queries on each direction root.
   Lets the artboards reflow desktop → tablet → mobile when their width
   changes (controlled by the Viewport tweak in app.jsx).
   We override inline-style grids with !important since the JSX uses
   inline `gridTemplateColumns: '...'`. Targeted, not blanket.            */

.dir-a, .dir-b, .dir-c {
  container-type: inline-size;
  container-name: page;
}

/* ───── TABLET ─ container width ≤ 960px ───────────────────────────── */
@container page (max-width: 960px) {
  /* Section padding */
  .dir-a > header, .dir-b > header, .dir-c > header,
  .dir-a > section, .dir-b > section, .dir-c > section,
  .dir-a > footer, .dir-b > footer, .dir-c > footer {
    padding-left: 32px !important;
    padding-right: 32px !important;
  }
  .dir-a > section, .dir-b > section, .dir-c > section {
    padding-top: 64px !important;
    padding-bottom: 64px !important;
  }

  /* Collapse top nav links — show hamburger placeholder */
  .dir-a > header > nav, .dir-b > header nav, .dir-c > header > nav { display: none !important; }

  /* Hero h1 sizes */
  .dir-a section h1, .dir-b section h1, .dir-c section h1 { font-size: 56px !important; line-height: 1.05 !important; }
  .dir-a section h2, .dir-b section h2, .dir-c section h2 { font-size: 36px !important; line-height: 1.15 !important; }

  /* Any direct 2-col grid inside a section/footer collapses to 1 col */
  .dir-a section > div[style*="grid-template-columns"],
  .dir-b section > div[style*="grid-template-columns"],
  .dir-c section > div[style*="grid-template-columns"],
  .dir-a footer > div[style*="grid-template-columns"],
  .dir-b footer > div[style*="grid-template-columns"],
  .dir-c footer > div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }

  /* Feature grids (3-col) → 2-col on tablet */
  .dir-a section > div > div[style*="grid-template-columns: repeat(3"],
  .dir-b section > div > div[style*="grid-template-columns: repeat(3"],
  .dir-c section > div > div[style*="grid-template-columns: repeat(3"],
  .dir-b div[style*="grid-template-columns: repeat(4"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* KPI strip: 4-col → 2-col */
  .dir-b section[style*="padding: 72px"] > div { grid-template-columns: repeat(2, 1fr) !important; }

  /* Voice grid (4-col) → 2-col */
  .dir-a section > div[style*="repeat(4"] { grid-template-columns: repeat(2, 1fr) !important; }

  /* Footer 5-col → 2-col */
  footer > div[style*="grid-template-columns: 1.4fr"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 32px !important;
  }
  footer > div[style*="grid-template-columns: 1.4fr"] > div:first-child {
    grid-column: 1 / -1;
  }

  /* Logo band (label + marquee) → stack */
  section[style*="grid-template-columns: 220px"] > div { grid-template-columns: 1fr !important; }

  /* Hero hides the side decorative column to keep the page upright */
  .dir-a .hero-floats, .dir-c .hero-wash > div > div:nth-child(2) { min-height: 0 !important; }

  /* Floating annotation cards — reposition or hide */
  .float-y { display: none !important; }
  .glow-teal::after { display: none !important; }

  /* Anatomy annotations on desktop overflow at narrow widths — hide labels but keep phone */
  .dir-b section[style*="background: rgb(255, 255, 255)"] div[style*="position: absolute"][style*="border: 1px solid"] {
    display: none !important;
  }

  /* Admin panel mock collapses sidebar */
  .dir-b div[style*="grid-template-columns: 180px 1fr"] { grid-template-columns: 1fr !important; }
  .dir-b div[style*="grid-template-columns: 180px 1fr"] > div:first-child { display: none !important; }

  /* Day-in-the-life timeline — keep 60/40/1fr but tighten */
  .dir-c div[style*="grid-template-columns: 60px 40px 1fr"] {
    grid-template-columns: 50px 32px 1fr !important;
    gap: 12px !important;
  }
}

/* ───── MOBILE ─ container width ≤ 560px ───────────────────────────── */
@container page (max-width: 560px) {
  .dir-a > header, .dir-b > header, .dir-c > header,
  .dir-a > section, .dir-b > section, .dir-c > section,
  .dir-a > footer, .dir-b > footer, .dir-c > footer {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  .dir-a > header, .dir-b > header, .dir-c > header {
    padding-top: 16px !important;
    padding-bottom: 16px !important;
  }
  .dir-a > section, .dir-b > section, .dir-c > section {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }
  .dir-a > footer, .dir-b > footer, .dir-c > footer {
    padding-top: 48px !important;
    padding-bottom: 32px !important;
  }

  /* Display sizes — fit one-handed read */
  .dir-a section h1, .dir-b section h1, .dir-c section h1 { font-size: 40px !important; line-height: 1.05 !important; }
  .dir-a section h2, .dir-b section h2, .dir-c section h2 { font-size: 28px !important; line-height: 1.15 !important; }
  .dir-a section p, .dir-b section p, .dir-c section p { font-size: 16px !important; }

  /* Aggressively collapse all multi-col grids in sections to 1-col */
  .dir-a div[style*="grid-template-columns"],
  .dir-b div[style*="grid-template-columns"],
  .dir-c div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  /* Footer can still keep 2-col for link lists */
  footer > div[style*="grid-template-columns: 1.4fr"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 24px !important;
  }
  footer > div[style*="grid-template-columns: 1.4fr"] > div:first-child {
    grid-column: 1 / -1 !important;
  }
  /* Footer bottom row stacks */
  footer > div:last-child {
    flex-direction: column !important;
    gap: 8px;
    align-items: flex-start !important;
    text-align: left !important;
  }

  /* Hero phone shrinks; kill min-heights */
  .phone-shell { width: 240px !important; }
  .dir-a section > div[style*="grid-template-columns"] > div:last-child,
  .dir-b section > div > div:last-child,
  .dir-c section > div[style*="grid-template-columns"] > div:last-child {
    min-height: 0 !important;
    height: auto !important;
  }

  /* Hide nav menu, decorative bits */
  .dir-a > header > nav, .dir-b > header nav, .dir-c > header > nav { display: none !important; }
  /* In B's nav, also hide the large "Talk to sales" button to save space */
  .dir-b > header div[style*="display: flex"] button.btn-ghost { display: none !important; }
  .dir-c > header > div:last-child > a { display: none !important; }

  /* CTA buttons: full width, stack */
  .dir-a section button.btn, .dir-a section a.btn,
  .dir-b section button.btn, .dir-b section a.btn,
  .dir-c section button.btn, .dir-c section a.btn {
    width: 100% !important;
  }
  .dir-a section > div > div[style*="display: flex"][style*="gap"][style*="align-items"],
  .dir-b section > div > div[style*="display: flex"][style*="gap: 14"],
  .dir-c section > div > div[style*="display: flex"][style*="gap"] {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  /* Logo strip animation slows */
  .marquee { animation-duration: 28s !important; }

  /* Inline-stat rows stack */
  .dir-a section > div > div[style*="display: flex"][style*="gap: 36"] {
    flex-direction: column !important;
    gap: 16px !important;
  }

  /* Anatomy showpiece: hide annotations + container chrome */
  .dir-b section > div > div[style*="border: 1px solid"][style*="border-radius: 24"] {
    padding: 32px 0 !important;
  }

  /* Testimonial B: image + quote stack */
  .dir-b section > div[style*="grid-template-columns: 1fr 1.4fr"] {
    grid-template-columns: 1fr !important;
  }

  /* Day timeline gets very tight */
  .dir-c div[style*="grid-template-columns: 60px 40px 1fr"] {
    grid-template-columns: 44px 28px 1fr !important;
    gap: 8px !important;
  }
  .dir-c div[style*="grid-template-columns: 60px 40px 1fr"] > div:first-child {
    font-size: 16px !important;
  }

  /* Quotation marks scale */
  .display { letter-spacing: -0.012em !important; }
}

/* Hamburger pill that we render in CSS-only above 960 collapse — small chip */
@container page (max-width: 960px) {
  .dir-a > header::after, .dir-b > header::after, .dir-c > header::after {
    content: "Menu";
    font-size: 13px; font-weight: 600; color: var(--fg-default);
    padding: 8px 14px; border: 1px solid var(--border-subtle);
    border-radius: 999px; background: #fff;
  }
  /* But hide it again when the nav inner already stretches */
}