/* =========================================
   RESPONSIVE — SBZSolar
   Mobile-first breakpoints
   ========================================= */

/* xs: 0–479px handled by defaults */

/* sm: 480px+ */
@media (min-width: 480px) {
  .hero-benefits {
    grid-template-columns: 1fr 1fr;
  }
}

/* md: 768px+ */
@media (min-width: 768px) {
  .floating-cta {
    display: flex;
  }

  .menu-toggle {
    display: none !important;
  }

  .primary-nav { display: flex; }
  .mobile-menu { display: none !important; }

  .form-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* lg: 1024px+ */
@media (min-width: 1024px) {
  .stats-band-inner {
    grid-template-columns: repeat(4, 1fr);
  }

  .process-steps {
    grid-template-columns: repeat(6, 1fr);
  }

  .process-steps::before {
    display: block;
  }
}

/* ============ MOBILE (max 767px) ============ */
@media (max-width: 767px) {
  /* Nav */
  .primary-nav    { display: none; }
  .nav-phone      { display: none; }
  .nav-actions .btn { display: none; }
  .menu-toggle    { display: flex; }

  .floating-cta { display: flex; }

  /* Layout */
  .split {
    grid-template-columns: 1fr;
  }

  .split.reverse > *:first-child { order: unset; }
  .split.reverse > *:last-child  { order: unset; }

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

  /* Stats */
  .stats-band-inner {
    grid-template-columns: repeat(2, 1fr);
  }

  .stat-item-band:nth-child(2) { border-right: none; }
  .stat-item-band:nth-child(3) { border-top: 1px solid rgba(255,255,255,0.08); }

  /* Process */
  .process-steps {
    grid-template-columns: 1fr;
    padding-left: var(--space-12);
    position: relative;
  }

  .process-steps::before {
    display: none;
  }

  .process-step {
    align-items: flex-start;
    text-align: left;
    flex-direction: row;
    gap: var(--space-5);
  }

  .process-step p { margin-inline: 0; }

  /* Footer */
  .footer-grid {
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }

  .footer-bottom {
    flex-direction: column;
    gap: var(--space-4);
    text-align: center;
  }

  /* Contact */
  .contact-layout {
    grid-template-columns: 1fr;
  }

  .contact-info-block {
    position: static;
  }

  /* Financing */
  .financing-options {
    grid-template-columns: 1fr;
  }

  /* Values */
  .values-grid {
    grid-template-columns: 1fr;
  }

  /* Battery */
  .battery-benefits {
    grid-template-columns: 1fr;
  }

  /* Calculator */
  .calc-results {
    grid-template-columns: 1fr;
  }

  .calculator-wrap {
    padding: var(--space-8) var(--space-6);
  }

  /* Cards */
  .residential-features {
    grid-template-columns: 1fr;
  }

  /* CTA group */
  .cta-group {
    flex-direction: column;
    align-items: flex-start;
  }

  /* Hero */
  .home-hero h1 {
    font-size: clamp(2rem, 8vw, 2.75rem);
  }

  /* Hero benefits */
  .hero-benefits {
    grid-template-columns: 1fr;
  }

  /* Trust badges */
  .trust-badges {
    gap: var(--space-4);
  }

  /* Testimonial */
  .testimonial-card {
    padding: var(--space-8);
  }

  .testimonial-card::before {
    font-size: 60px;
  }

  /* Section header */
  .section-header h2 {
    font-size: var(--text-3xl);
  }

  /* Page hero */
  .page-hero {
    padding: calc(var(--header-height) + var(--space-16)) 0 var(--space-16);
  }
}

/* ============ TABLET (768–1023px) ============ */
@media (min-width: 768px) and (max-width: 1023px) {
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-10);
  }

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

  .contact-layout {
    grid-template-columns: 1fr;
  }

  .contact-info-block { position: static; }

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

/* ============ LARGE (1280px+) ============ */
@media (min-width: 1280px) {
  :root {
    --gutter: 2rem;
  }

  .grid-auto-sm { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
}

/* ============ EXTRA LARGE (1536px+) ============ */
@media (min-width: 1536px) {
  :root {
    --gutter: 3rem;
  }
}

/* ============ PRINT ============ */
@media print {
  .site-header,
  .floating-cta,
  .mobile-menu {
    display: none !important;
  }

  main { padding-top: 0; }

  .hero-section { margin-top: 0; }

  body {
    font-size: 12pt;
    color: black;
  }
}