/* ── Landing page responsive overrides ─────────────────────────────────────
   All rules live here to keep artboard.css / site.css untouched.
   Breakpoints: 768px tablet, 480px mobile
   ─────────────────────────────────────────────────────────────────────── */

/* ── Nav: hamburger toggle ─────────────────────────────────────────────── */
.land .nav-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  border-radius: 8px;
  transition: background 150ms;
}
.land .nav-burger:hover { background: var(--hover-bg); }
.land .nav-burger span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: transform 200ms, opacity 200ms;
}

/* Animated X when open */
.land.nav-open .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.land.nav-open .nav-burger span:nth-child(2) { opacity: 0; }
.land.nav-open .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile nav drawer */
.land .nav-drawer {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: var(--bg);
  z-index: 4;
  padding: 80px 28px 28px;
  flex-direction: column;
  gap: 4px;
  overflow-y: auto;
}
.land.nav-open .nav-drawer { display: flex; }
.land .nav-drawer a {
  font-size: 18px;
  font-weight: 500;
  padding: 14px 0;
  border-bottom: 1px solid var(--border-soft);
  color: var(--text);
  text-decoration: none;
}
.land .nav-drawer a:last-child { border-bottom: none; }
.land .nav-drawer .nav-drawer-cta {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ── Tablet / mobile (≤ 768px) ─────────────────────────────────────────── */
@media (max-width: 768px) {

  /* Nav */
  .land .nav-links { display: none; }
  .land .nav-right  { display: none; }
  .land .nav-burger { display: flex; }
  .land .land-nav   { padding: 14px 20px; }

  /* Universal section padding */
  .jb-artboard.land section {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  .jb-artboard.land .j-vignette section {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* Hero headings */
  .jb-artboard.land h1 {
    font-size: 32px !important;
    line-height: 1.15 !important;
    letter-spacing: -0.02em !important;
  }
  .jb-artboard.land h2 {
    font-size: 22px !important;
    line-height: 1.25 !important;
  }

  /* 2-col hero grids → single column */
  .land-2col {
    display: block !important;
  }
  .land-2col > * + * {
    margin-top: 36px;
  }

  /* 3/4-col feature grids → single column */
  .land-3col,
  .land-4col {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* Hide hero illustration / right-side mock on mobile */
  .land-2col .land-hero-art {
    display: none;
  }

  /* CTA button row: wrap */
  .land-cta-row {
    flex-wrap: wrap !important;
    gap: 10px !important;
  }

  /* Pricing cards: stack */
  .land-pricing-grid {
    grid-template-columns: 1fr !important;
    max-width: 420px;
    margin: 0 auto;
  }

  /* Changelog date+content row: stack date above content */
  .land-2col[style*="140px 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 4px !important;
  }

  /* Compare table: allow horizontal scroll */
  .land-compare-table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .land-compare-table table {
    min-width: 560px;
  }

  /* Docs sidebar: hide on mobile */
  .land-docs-layout {
    grid-template-columns: 1fr !important;
  }
  .land-docs-sidebar {
    display: none;
  }

  /* Footer columns: stack */
  .land-footer-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }

  /* j-card padding: reduce */
  .jb-artboard.land .j-card {
    padding: 16px !important;
  }

  /* Code editor: horizontal scroll instead of clipping */
  .jb-artboard.land .j-editor {
    overflow-x: auto;
    max-width: 100%;
  }
}

  /* Verdicts grid: 360px min too wide for mobile */
  .land-verdicts-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ── Small mobile (≤ 480px) ────────────────────────────────────────────── */
@media (max-width: 480px) {
  .jb-artboard.land section {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .jb-artboard.land h1 {
    font-size: 28px !important;
  }
  .jb-artboard.land h2 {
    font-size: 20px !important;
  }
}

/* ── Auth layout (≤ 768px) ──────────────────────────────────────────────── */
@media (max-width: 768px) {
  .jb-auth {
    grid-template-columns: 1fr !important;
  }
  /* Hide the left brand panel — form is all that matters on mobile */
  .jb-auth > div:first-child {
    display: none !important;
  }
  /* Give the form panel proper mobile padding */
  .jb-auth > div:last-child {
    padding: 32px 20px !important;
    align-items: flex-start !important;
  }
}

/* Auth form content: prevent 420px fixed width from overflowing on small screens */
@media (max-width: 460px) {
  .jb-auth [style*="width:420px"] {
    width: 100% !important;
  }
}