/* ==========================================================================
   opencode-pilot landing — responsive layer
   Breakpoints (mobile-first overrides apply where convenient,
   then desktop-first overrides for larger components):

     >= 1100px  desktop  (defaults)
     <= 1100px  small desktop / large tablet
     <=  900px  tablet
     <=  720px  large mobile
     <=  520px  mobile
     <=  380px  small mobile
   ========================================================================== */

/* ---------- <= 1100px — small desktop / large tablet --------------------- */
@media (max-width: 1100px) {
  :root {
    --pad-x: 24px;
    --section-pad: 72px;
    --hero-pad-top: 64px;
    --hero-pad-bot: 48px;
  }

  .hero-grid { gap: 32px; }

  .dash { grid-template-columns: 200px 1fr 220px; }
  .tab-panel { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- <= 900px — tablet ------------------------------------------- */
@media (max-width: 900px) {
  :root {
    --section-pad: 64px;
    --hero-pad-top: 56px;
    --hero-pad-bot: 40px;
  }

  /* Hero stacks */
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  /* Dashboard collapses to single column */
  .dash {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .dash .sidebar,
  .dash .info { display: none; }

  /* Two-col stacks */
  .two-col { grid-template-columns: 1fr; gap: 24px; }

  /* Phone section stacks */
  .phone-section { grid-template-columns: 1fr; gap: 40px; }

  /* Steps and features collapse */
  .steps { grid-template-columns: 1fr 1fr; }
  .tab-panel { grid-template-columns: 1fr 1fr; }
  .doc-grid  { grid-template-columns: 1fr 1fr; }
}

/* ---------- <= 720px — large mobile ------------------------------------- */
@media (max-width: 720px) {
  :root {
    --pad-x: 18px;
    --section-pad: 56px;
    --hero-pad-top: 48px;
    --hero-pad-bot: 32px;
  }

  body { font-size: 13px; }

  /* Show mobile menu button, hide inline links by default */
  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; }

  nav.top .links {
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    background: var(--bg-1);
    border-bottom: 1px solid var(--line);
    padding: 12px 18px;
    gap: 0;
    overflow: hidden;
    max-height: 0;
    transition: max-height 200ms ease, padding 200ms ease;
    margin: 0;
  }
  nav.top .links.open {
    max-height: 80vh;
    padding: 12px 18px;
  }
  nav.top .links a {
    display: block;
    padding: 12px 0;
    border-bottom: 1px dashed var(--line);
    font-size: 14px;
  }
  nav.top .links a:last-child { border-bottom: none; }

  .theme-toggle { padding: 8px 10px; }

  /* Tag wraps cleanly */
  .tag { font-size: 10px; padding: 4px 8px; }

  /* Sub copy tighter */
  .hero-sub { margin-bottom: 28px; }

  /* CTAs full width on mobile */
  .hero-ctas { flex-direction: column; align-items: stretch; }
  .hero-ctas .btn { justify-content: center; }

  /* Stat row stacks */
  .stat-row {
    flex-direction: column; gap: 10px;
    margin-top: 32px; padding-top: 18px;
  }

  /* Section headings tighter */
  h2.section-title { margin-bottom: 10px; }
  .section-sub { margin-bottom: 28px; }

  /* Single column grids */
  .steps      { grid-template-columns: 1fr; gap: 16px; }
  .tab-panel  { grid-template-columns: 1fr; }
  .doc-grid   { grid-template-columns: 1fr; }

  .step       { padding: 20px; }
  .step::before { font-size: 26px; margin-bottom: 10px; }

  .feat       { padding: 22px 20px; min-height: 0; }

  /* Dashboard mock — tighter */
  .dash-head .url { font-size: 10px; padding: 4px 8px; }
  .dash-head .badge { font-size: 10px; }
  .dash .main-head { padding: 10px 14px; gap: 8px; font-size: 10px; }
  .dash .transcript { padding: 14px; gap: 12px; font-size: 12px; }
  .dash .prompt-bar { padding: 10px 14px; }

  /* Terminal smaller */
  .terminal { font-size: 12px; }
  .term-body { min-height: 280px; padding: 16px; }
  .term-head .title { font-size: 10px; }

  /* Cards padding */
  .kcard { padding: 18px; }

  /* Phone slightly smaller */
  .phone { width: 240px; height: 480px; border-radius: 32px; padding: 10px; }
  .phone .screen { border-radius: 24px; padding: 40px 14px 14px; }
  .qr { width: 170px; height: 170px; }

  /* Footer */
  footer { padding: 64px 0 32px; }
  footer .ff { gap: 16px; margin-top: 40px; flex-direction: column; }
  footer .ff .links-right { margin-left: 0; gap: 16px; }
  footer .install-cmd { padding: 12px 14px; }

  /* Tweaks panel — bottom drawer-like on mobile */
  .tweaks {
    right: 12px; left: 12px; bottom: 12px;
    width: auto;
  }
}

/* ---------- <= 520px — mobile ------------------------------------------- */
@media (max-width: 520px) {
  :root {
    --pad-x: 16px;
    --section-pad: 48px;
  }

  /* Logo trims version on tight screens */
  .logo .ver { display: none; }
  .logo .label { font-size: 13px; }

  /* Smaller hero badge */
  h1.hero-title { margin: 14px 0 16px; }

  /* Tabs even tighter */
  .tab { padding: 12px 14px; font-size: 11px; gap: 8px; }

  /* Feat numbers — push into header to avoid overlap */
  .feat::before { top: 12px; right: 14px; font-size: 9px; }
  .feat { padding: 20px 18px; }
  .feat .glyph { width: 32px; height: 32px; font-size: 14px; }

  /* Step cmd: keep button readable */
  .step .cmd { font-size: 10.5px; padding-right: 56px; }
  .step .cmd .cp { font-size: 9px; padding: 3px 6px; }

  /* env table: hide default column on the smallest screens (it's still in DOM) */
  .env-table th:nth-child(2),
  .env-table td:nth-child(2) { display: none; }
  .env-table table { min-width: 0; }
  .env-table th, .env-table td { padding: 8px 12px; }

  /* Dashboard URL more compact */
  .dash-head { gap: 8px; padding: 8px 12px; }
  .dash-head .url { font-size: 9.5px; }

  /* Phone tap targets */
  .qr-tabs button { padding: 8px; min-height: 36px; }

  /* Footer install row stacks fully */
  footer .install-row { flex-direction: column; align-items: stretch; }
  footer .install-row .btn { justify-content: center; }
  footer .install-cmd { min-width: 0; }
  footer .install-cmd .text { font-size: 13px; }

  /* Section eyebrow smaller */
  .eyebrow { font-size: 10px; gap: 8px; }
  .eyebrow::before { width: 20px; }

  /* kcard rows: stack desc + key when very tight */
  .krow { flex-wrap: wrap; }
}

/* ---------- <= 380px — extra small ------------------------------------- */
@media (max-width: 380px) {
  :root {
    --pad-x: 14px;
  }

  h1.hero-title { font-size: 30px; }

  .btn { padding: 12px 14px; font-size: 12px; }

  .term-body { min-height: 240px; padding: 14px; }

  .phone { width: 220px; height: 440px; }
  .qr { width: 150px; height: 150px; padding: 8px; }
}

/* ---------- Landscape mobile (short height) ----------------------------- */
@media (max-height: 480px) and (orientation: landscape) {
  .hero { padding: 32px 0 24px; }
  .term-body { min-height: 220px; }
  .phone { height: 380px; }
}

/* ---------- Print ------------------------------------------------------- */
@media print {
  body { background: #fff; color: #000; }
  body::before, body::after { display: none; }
  nav.top, .tweaks, .hero-ctas, .nav-toggle { display: none; }
  .terminal, .dash-wrap, .phone { box-shadow: none; }
  section.block { padding: 24px 0; page-break-inside: avoid; }
}