/* ============================================================
   css/responsive.css — Breakpoints & Mobile Styles
   ============================================================ */

/* ── TABLET (≤ 1024px) ── */
@media (max-width: 1024px) {
  .about-grid          { grid-template-columns: 1fr; gap: 3rem; }
  .why-grid            { grid-template-columns: 1fr; gap: 3rem; }
  .services-grid       { grid-template-columns: repeat(2, 1fr); }
  .team-grid           { grid-template-columns: repeat(2, 1fr); }
  .footer-grid         { grid-template-columns: 1fr 1fr; }
  .blog-grid           { grid-template-columns: repeat(2, 1fr); }

  .counters-grid       { grid-template-columns: repeat(2, 1fr); }
  .counter-item:nth-child(2) { border-right: none; }

  .process-steps       { grid-template-columns: repeat(2, 1fr); gap: 3rem; }
  .process-steps::before { display: none; }

  .why-stat-strip      { left: 0; }
}

/* ── MOBILE (≤ 768px) ── */
@media (max-width: 768px) {
  /* Nav */
  .nav-links,
  .btn-nav             { display: none; }
  .hamburger           { display: flex; }

  /* Hero */
  .hero-title          { font-size: clamp(3rem, 12vw, 5rem); }
  .hero-stats          { gap: 1.5rem; }

  /* About */
  .about-stats         { grid-template-columns: 1fr 1fr; }
  .mission-vision      { grid-template-columns: 1fr; }
  .about-badge         { bottom: -1rem; right: 0; }

  /* Services */
  .services-grid       { grid-template-columns: 1fr; }

  /* Portfolio */
  .portfolio-grid      { grid-template-columns: repeat(2, 1fr); }

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

  /* Team */
  .team-grid           { grid-template-columns: repeat(2, 1fr); }

  /* Testimonials */
  .testi-card          { padding: 0 1rem; }

  /* Blog */
  .blog-grid           { grid-template-columns: 1fr; }

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

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

/* ── SMALL MOBILE (≤ 480px) ── */
@media (max-width: 480px) {
  :root { --container-pad: 1.25rem; }

  .portfolio-grid      { grid-template-columns: 1fr; }
  .team-grid           { grid-template-columns: 1fr; }

  .counters-grid       { grid-template-columns: 1fr; }
  .counter-item        { border-right: none; border-bottom: 1px solid rgba(0,0,0,0.1); }
  .counter-item:last-child { border-bottom: none; }

  .filter-tabs         { gap: 0.25rem; }
  .filter-btn          { padding: 0.4rem 0.9rem; font-size: 0.72rem; }

  .hero-cta            { flex-direction: column; }
  .btn-primary,
  .btn-outline         { text-align: center; justify-content: center; }
}