/* ============================================================
   RESPONSIVE.CSS — Chedders Domain Services
   Mobile-first · 320px → 575px → 768px → 992px → 1400px
   V3: footer 4-col CSS Grid locked across all viewports
   ============================================================ */

/* ============================================================
   320px minimum
   ============================================================ */
@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 */

  .domain-mockup { max-width: 100%; }
}

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

  .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 above copy on mobile */
  .hero-section .row        { display: flex; flex-direction: column; }
  .hero-section__visual     { order: -1; justify-content: center; margin-bottom: 28px; }
  .domain-mockup            { max-width: 100%; }

  .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 */
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .ecosystem-tags-grid       { grid-template-columns: repeat(2, 1fr); }

  /* CTA */
  .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; }

  .btn-chedders-primary,
  .btn-chedders-secondary { min-height: 48px; padding: 13px 22px; }

  /* API */
  .api-highlight-box { padding: 18px; }

  /* Why */
  .why-card { padding: 16px 0; }

  /* Founder */
  .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 .row    { display: flex; flex-direction: column; }
  .hero-section__visual { order: -1; justify-content: center; margin-bottom: 24px; }
  .domain-mockup        { max-width: 440px; }

  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .ecosystem-tags-grid { 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-section__headline { font-size: 30px; }
  .hero-section__visual   { justify-content: center; }
  .domain-mockup          { max-width: 460px; }

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

  /* Footer — full 4 from 768 */
  .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+
   ============================================================ */
@media (min-width: 992px) {
  .hero-section .row    { display: flex; flex-direction: row; align-items: center; }
  .hero-section__visual { order: 0; justify-content: flex-end; }

  .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-grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 32px; }
}

/* ============================================================
   WIDE — 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; }
}