/*
 * ACEwithCrystal — Responsive Styles
 * css/responsive.css
 *
 * All media query overrides.
 * Breakpoints: 1024px (tablet), 768px (mobile), 480px (small mobile)
 * Depends on: variables.css, base.css, components.css
 */

/* ══════════════════════════════════════════════════════════
   1024px — Tablet / Small Laptop
══════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {

  /* Grids */
  .pathway-grid           { grid-template-columns: repeat(2, 1fr); }
  .tier-grid              { grid-template-columns: repeat(2, 1fr); }
  .card-grid-3,
  .grid-3                 { grid-template-columns: repeat(2, 1fr); }
  .testi-grid             { grid-template-columns: repeat(2, 1fr); }
  .footer-inner           { grid-template-columns: 1fr 1fr; gap: 32px; }
  .readiness-areas        { grid-template-columns: repeat(3, 1fr); }
  .flow-bar               { grid-template-columns: repeat(2, 1fr); }
  .flow-step              { border-right: none; border-bottom: 1px solid var(--border); }
  .flow-step:nth-child(odd)  { border-right: 1px solid var(--border); }
  .flow-step:last-child,
  .flow-step:nth-last-child(2) { border-bottom: none; }

  /* Hero two-col collapses */
  .hero-two-col {
    grid-template-columns: 1fr;
  }
  .hero-stats {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .stat-card { min-width: 140px; }

  /* About hero */
  .about-hero-inner {
    grid-template-columns: 1fr;
  }
  .about-photo-card {
    max-width: 440px;
  }

  /* START·BUILD·SCALE */
  .sbs-grid {
    grid-template-columns: 1fr;
  }
  .sbs-col {
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
  .sbs-col:last-child { border-bottom: none; }

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

  /* Nav compact */
  .nav-links a {
    padding: 7px 10px;
    font-size: 11px;
  }
}

/* ══════════════════════════════════════════════════════════
   768px — Mobile
══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* Wrapper padding */
  .wrap { padding: 0 20px; }

  /* Nav: hide desktop links, show hamburger */
  .nav-links, .nav-cta { display: none; }
  .nav-mobile-btn     { display: block; }

  /* Section spacing */
  section            { padding: 48px 0; }
  :root { --section-v: 48px; }

  /* Collapse all grids to single column */
  .pathway-grid,
  .tier-grid,
  .card-grid-3,
  .card-grid-2,
  .grid-3,
  .grid-2,
  .grid-4,
  .testi-grid,
  .who-grid,
  .pain-list,
  .flow-bar,
  .two-col-grid,
  .sbs-grid,
  .contact-grid {
    grid-template-columns: 1fr;
  }

  /* Footer */
  .footer-inner {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  /* Newsletter */
  .nl-inner {
    flex-direction: column;
    align-items: flex-start;
  }
  .nl-form { flex-direction: column; }
  .nl-form input { min-width: unset; width: 100%; }

  /* Guide CTA */
  .guide-cta {
    flex-direction: column;
    align-items: flex-start;
    padding: 28px 24px;
  }

  /* About hero */
  .about-hero-inner { grid-template-columns: 1fr; }
  .about-photo-card { margin-top: 32px; }

  /* Hero */
  .hero-two-col     { grid-template-columns: 1fr; }
  .hero-stats       { flex-direction: row; flex-wrap: wrap; gap: 10px; }
  .stat-card        { flex: 1; min-width: 120px; }

  /* Readiness areas */
  .readiness-areas  { grid-template-columns: repeat(2, 1fr); }

  /* SBS */
  .sbs-col { border-right: none; border-bottom: 1px solid var(--border); }
  .sbs-col:last-child { border-bottom: none; }

  /* Problem strip */
  .problem-strip-inner { gap: 8px; }

  /* Services 2-col */
  .services-two-col { grid-template-columns: 1fr !important; }
  .svc-features     { grid-template-columns: 1fr !important; }

  /* Tier card full-width CTA */
  .wwm-tier         { margin-bottom: 16px; }

  /* ACESBA hero */
  .acesba-hero      { padding: 60px 0; }

  /* Typography scale-down */
  h1 { font-size: clamp(28px, 7vw, 42px); }
  h2 { font-size: clamp(22px, 5vw, 32px); }

  /* Pathway hero */
  .pathway-hero     { padding: 48px 0; }

  /* Flow bar fix */
  .flow-step            { border-right: none !important; border-bottom: 1px solid var(--border); }
  .flow-step:last-child { border-bottom: none; }
}

/* ══════════════════════════════════════════════════════════
   480px — Small Mobile
══════════════════════════════════════════════════════════ */
@media (max-width: 480px) {

  /* Deeper grid collapse */
  .readiness-areas  { grid-template-columns: 1fr; }
  .footer-inner     { grid-template-columns: 1fr; }
  .hero-btns        { flex-direction: column; }
  .hero-stats       { flex-direction: column; }
  .nl-form          { flex-direction: column; }
  .stat-card        { min-width: unset; width: 100%; }

  /* Nav wordmark */
  .nav-wordmark     { font-size: 16px; }

  /* Form */
  .contact-form     { padding: 24px 16px; }

  /* Guide CTA */
  .guide-cta        { padding: 24px 16px; }

  /* Testi card */
  .testi-quote      { font-size: 15px; }

  /* Section head */
  .sec-head         { margin-bottom: 32px; }

  /* Footer bottom */
  .footer-links     { flex-wrap: wrap; gap: 12px; }
}

/* ══════════════════════════════════════════════════════════
   Print
══════════════════════════════════════════════════════════ */
@media print {
  nav, footer, .nl-strip, .hero-btns .btn-outline-white { display: none; }
  body { background: #fff; color: #000; }
  .page { display: block !important; }
  section { break-inside: avoid; }
}