/* ============================================================
   MANTOLA OF MOTORS — RESPONSIVE
   responsive.css
   ============================================================ */

/* ── Tablet (≤ 1024px) ─────────────────────────────────────── */
@media (max-width: 1024px) {
  :root { --section-pad: 72px; --section-pad-sm: 48px; }
  .container, .container-wide { padding: 0 40px; }
  .navbar { padding: 0 40px; }
  .nav-links { display: none; }
  .nav-hamburger { display: flex; }

  /* About */
  .about-preview { grid-template-columns: 1fr; min-height: auto; }
  .about-preview-image { height: 400px; }
  .about-preview-content { padding: 60px 40px; }
  .about-stats-row { flex-wrap: wrap; gap: 28px; }

  /* Pricing grid - 2 columns on tablet */
  .pricing-grid { grid-template-columns: repeat(2, 1fr); }

  /* Projects */
  .projects-grid { grid-template-columns: 1fr; }
  .project-card:first-child { min-height: 400px; }

  /* Stats */
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .stat-item:nth-child(2) { border-right: none; }
  .stat-item:nth-child(3) { border-top: 1px solid rgba(255,255,255,0.1); }
  .stat-item:nth-child(4) { border-top: 1px solid rgba(255,255,255,0.1); border-right: none; }

  /* Gallery */
  .gallery-grid { grid-template-columns: repeat(2,1fr); grid-template-rows: repeat(3, 200px); }
  .gallery-item:nth-child(1) { grid-column: span 1; }

  /* Testimonials */
  .testimonial-slide { padding: 48px 40px; }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
}

/* ── Mobile (≤ 640px) ──────────────────────────────────────── */
@media (max-width: 640px) {
  :root { --section-pad: 56px; --section-pad-sm: 36px; }
  .container, .container-wide { padding: 0 24px; }
  .navbar { padding: 0 24px; height: 64px; }
  .nav-logo-img { height: 30px; }
  .nav-logo-text { font-size: 14px; }
  .section-title { font-size: 32px; }

  .about-preview-content { padding: 48px 24px; }
  .service-block-content { padding: 48px 24px; }
  .service-block-image { height: 260px; }
  .service-block-title { font-size: 36px; }

  /* Pricing grid - 1 column on mobile */
  .pricing-grid { grid-template-columns: 1fr; }
  .price-card { padding: 28px; border-radius: 14px; }

  .projects-grid { grid-template-columns: 1fr; }
  .project-card { aspect-ratio: 4/3; }
  .project-card:first-child { min-height: 280px; }

  .stats-grid { grid-template-columns: 1fr 1fr; }
  .stat-item { padding: 40px 20px; }
  .stat-number { font-size: 36px; }
  .stat-item:nth-child(2) { border-right: none; }
  .stat-item:nth-child(3), .stat-item:nth-child(4) { border-top: 1px solid rgba(255,255,255,0.1); }
  .stat-item:nth-child(4) { border-right: none; }

  .gallery-grid { grid-template-columns: 1fr; grid-template-rows: auto; }
  .gallery-item { height: 220px; }
  .gallery-item:nth-child(1) { grid-column: span 1; }

  .testimonial-slide { padding: 32px 24px; }
  .testimonial-quote { font-size: 16px; }

  .cta-title { font-size: 36px; }
  .cta-buttons { flex-direction: column; align-items: center; }

  .footer { padding: 60px 0 28px; }
  .footer-grid { grid-template-columns: 1fr; gap: 36px; }
  .footer-bottom { flex-direction: column; gap: 16px; text-align: center; }

  .page-hero { min-height: 44vh; padding-bottom: 44px; }
  .page-hero-title { font-size: 40px; }

  .btn { padding: 12px 24px; font-size: 12px; }
}