/* ============================================================
   RESPONSIVE.CSS — Chedders AI
   Mobile-first · 320px → 575px → 768px → 992px → 1400px
   V3: footer 4-col CSS Grid locked at all breakpoints
   ============================================================ */

/* ============================================================
   320px — minimum supported width
   ============================================================ */
@media (max-width: 359px) {
  .container, .container-xl {
    padding-left: 16px;
    padding-right: 16px;
  }

  .hero-section__headline  { font-size: 22px !important; }
  h1                        { font-size: 22px; }
  h2                        { font-size: 18px; }

  /* Footer grid — 4 cols locked per DNA §7.7, gap only shrinks */
  .footer-grid {
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 8px;
  }

  .footer-links a    { font-size: 10px; }
  .footer-col-title  { font-size: 9px; }
  .footer-chedders__tagline { display: none; } /* logo mark only at ≤320px per DNA §7.7 */
}

/* ============================================================
   MOBILE — up to 575px
   ============================================================ */
@media (max-width: 575px) {
  .container, .container-xl {
    padding-left: 20px;
    padding-right: 20px;
  }

  /* Sections */
  .section-padding    { padding-top: 56px; padding-bottom: 56px; }
  .section-padding-sm { padding-top: 40px; padding-bottom: 40px; }
  .section-padding-lg { padding-top: 72px; padding-bottom: 72px; }
  .section-header     { margin-bottom: 36px; }

  /* Hero */
  .hero-section { padding-top: 52px; padding-bottom: 52px; }
  .hero-section::before { display: none; }

  .hero-section__headline { font-size: 26px; max-width: 100%; }
  .hero-section__sub      { font-size: 14px; max-width: 100%; }

  /* V3 §7.2 — visual stacks ABOVE copy on mobile */
  .hero-section .row        { display: flex; flex-direction: column; }
  .hero-section__visual     { order: -1; justify-content: center; margin-bottom: 28px; }
  .hero-panel               { max-width: 100%; }

  /* CTA row */
  .hero-section__ctas {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }
  .hero-section__ctas .btn-chedders-primary,
  .hero-section__ctas .btn-chedders-secondary {
    width: 100%;
    justify-content: center;
  }

  /* Grids — single col */
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }

  /* Status */
  .status-col-group { grid-template-columns: 1fr; }

  /* CTA box */
  .cta-box { padding: 36px 20px; }
  .cta-access-list { grid-template-columns: 1fr; }

  .form-inline-group {
    flex-direction: column;
    width: 100%;
    max-width: 100%;
  }
  .form-inline-group .btn-chedders-primary {
    width: 100%;
    justify-content: center;
  }

  /* Tap targets */
  .btn-chedders-primary,
  .btn-chedders-secondary,
  .btn-chedders-ghost { min-height: 48px; padding: 13px 22px; }

  /* Built-in-public banner */
  .built-public-banner {
    flex-direction: column;
    padding: 20px;
  }

  /* Founder note */
  .founder-note { padding: 20px 18px; }

  /* Footer — 4 cols locked at mobile per DNA §7.7 */
  .footer-grid {
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 12px;
  }
  .footer-links a    { font-size: 12px; }
  .footer-col-title  { font-size: 11px; margin-bottom: 10px; }
  .footer-chedders__tagline { font-size: 12px; max-width: 100%; }
  .footer-chedders { padding-top: 40px; padding-bottom: 24px; }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}

/* ============================================================
   TABLET — 576px to 767px
   ============================================================ */
@media (min-width: 576px) and (max-width: 767px) {
  .section-padding { padding-top: 72px; padding-bottom: 72px; }

  .hero-section { padding-top: 64px; padding-bottom: 64px; }
  .hero-section__visual { justify-content: center; margin-bottom: 24px; order: -1; }
  .hero-section .row    { display: flex; flex-direction: column; }

  .grid-3, .grid-4  { grid-template-columns: repeat(2, 1fr); }

  /* Footer — 4 cols locked at tablet per DNA §7.7 */
  .footer-grid {
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 20px;
  }
  .footer-links a    { font-size: 13px; }
  .footer-col-title  { font-size: 11px; }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}

/* ============================================================
   TABLET LANDSCAPE — 768px to 991px
   ============================================================ */
@media (min-width: 768px) and (max-width: 991px) {
  .section-padding { padding-top: 80px; padding-bottom: 80px; }

  /* Hero: side-by-side from 768px */
  .hero-section .row    { display: flex; flex-direction: row; align-items: center; }
  .hero-section__visual { order: 0; justify-content: flex-end; margin-bottom: 0; }
  .hero-panel           { max-width: 340px; }

  .hero-section__headline { font-size: 28px; }
  .hero-section__ctas     { flex-direction: row; align-items: center; }
  .hero-section__ctas .btn-chedders-primary,
  .hero-section__ctas .btn-chedders-secondary { width: auto; }

  .grid-4 { grid-template-columns: repeat(2, 1fr); }

  /* Footer — full 4 cols from 768px */
  .footer-grid {
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 20px;
  }
  .footer-links a    { font-size: 13px; }
  .footer-col-title  { font-size: 11px; }
  .footer-chedders__tagline { font-size: 12px; }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
}

/* ============================================================
   DESKTOP — 992px and above
   ============================================================ */
@media (min-width: 992px) {
  /* Bootstrap col-md-6 handles the row — just ensure alignment */
  .hero-section .row    { display: flex; flex-direction: row; align-items: center; }
  .hero-section__visual { order: 0; justify-content: flex-end; margin-bottom: 0; }

  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }

  .navbar-chedders .navbar-collapse { flex-grow: 0; }

  /* Footer — full 4-col grid */
  .footer-grid {
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 32px;
  }
}

/* ============================================================
   WIDE DESKTOP — 1400px+
   ============================================================ */
@media (min-width: 1400px) {
  .container, .container-xl, .container-xxl { max-width: 1320px; }
  .section-padding    { padding-top: 112px; padding-bottom: 112px; }
  .section-padding-lg { padding-top: 136px; padding-bottom: 136px; }

  .footer-grid { gap: 32px; }
}

/* ============================================================
   PRINT
   ============================================================ */
@media print {
  .navbar-chedders,
  .footer-chedders,
  .btn-chedders-primary,
  .btn-chedders-secondary,
  .cta-section { display: none; }
}