/* ============================================
   responsive.css — Caarzoo
   Breakpoint overrides. Mobile-first adjustments.
   Breakpoints:
     xl: 1200px
     lg: 1024px
     md:  900px
     sm:  640px
     xs:  480px
============================================ */

/* ── TABLET & SMALL DESKTOP (≤ 1024px) ── */
@media (max-width: 1024px) {
  .features-grid {
    grid-template-columns: repeat(2, 1fr);
  }

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

/* ── TABLET (≤ 900px) ── */
@media (max-width: 900px) {

  /* Nav */
  .nav__links  { display: none; }
  .nav__right  { display: none; }
  .nav__hamburger { display: flex; }

  /* Hero */
  .hero {
    padding-top: 48px;
  }

  .hero__inner {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .hero__right {
    order: -1; /* show dashboard above text on tablet */
  }

  /* Layouts */
  .problem__grid,
  .solution-strip__inner,
  .doc-layout,
  .billing-layout,
  .manage-grid,
  .faq-layout {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  /* Workflow */
  .workflow-steps {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }

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

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

  .stat-item {
    border-right: none;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    padding-bottom: 20px;
  }

  .stat-item:nth-child(3),
  .stat-item:last-child {
    border-bottom: none;
  }

  /* Testimonials */
  .testi-grid {
    grid-template-columns: 1fr;
  }

  /* Pricing */
  .pricing-grid {
    grid-template-columns: 1fr;
    max-width: 440px;
  }

  /* FAQ */
  .faq-layout {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  /* Footer */
  .footer__top {
    grid-template-columns: 1fr 1fr;
  }
}

/* ── MOBILE (≤ 640px) ── */
@media (max-width: 640px) {

  :root {
    --section-padding: 64px 0;
  }

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

  /* Docs */
  .doc-cards-grid {
    grid-template-columns: 1fr;
  }

  /* Solution strip */
  .solution-strip__cards {
    grid-template-columns: 1fr;
  }

  /* Hero heading */
  .hero__heading {
    letter-spacing: -1.5px;
  }

  /* Hero btns */
  .hero__btns {
    flex-direction: column;
  }

  /* Hero proof */
  .hero__proof {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  /* CTA btns */
  .cta-section__btns {
    flex-direction: column;
    align-items: center;
  }

  /* Footer */
  .footer__top {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .footer__bottom {
    flex-direction: column;
    align-items: flex-start;
  }

  /* Workflow: 1 column on mobile */
  .workflow-steps {
    grid-template-columns: 1fr;
  }

  /* Dashboard mock: hide on very small screens to keep hero clean */
  .dash-table th:nth-child(3),
  .dash-table td:nth-child(3),
  .dash-table th:nth-child(4),
  .dash-table td:nth-child(4) {
    display: none;
  }

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

/* ── SMALL MOBILE (≤ 400px) ── */
@media (max-width: 400px) {
  .logos-strip__items {
    gap: 20px;
  }

  .hero__btns .btn {
    width: 100%;
    justify-content: center;
  }
}