/* ============================================
   JLP PHOTO - Responsive Breakpoints
   responsive.css
   ============================================ */

/* ---- Tablet (768px - 1024px) ---- */
@media (max-width: 1024px) {
  .services-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .process-steps {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---- Mobile (<=768px) ---- */
@media (max-width: 768px) {
  .services-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .services-grid .service-card {
    padding: 24px 16px;
  }
  .services-grid .service-card .icon-wrap {
    width: 48px;
    height: 48px;
    font-size: 1.3rem;
  }
  .services-grid .service-card h3 {
    font-size: 0.95rem;
  }
  .services-grid .service-card p {
    font-size: 0.78rem;
  }

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

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

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

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

  .process-steps {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }

  .cta-banner {
    padding: 40px 20px;
  }
  .cta-banner h2 {
    font-size: 1.4rem;
  }
}

/* ---- Small Mobile (<=480px) ---- */
@media (max-width: 480px) {
  .services-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .services-grid .service-card {
    padding: 18px 12px;
  }
  .services-grid .service-card .icon-wrap {
    width: 40px;
    height: 40px;
    font-size: 1.1rem;
    margin-bottom: 10px;
  }
  .services-grid .service-card h3 {
    font-size: 0.85rem;
  }

  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

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

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

  .process-steps {
    grid-template-columns: 1fr;
  }

  .footer-inner {
    grid-template-columns: 1fr;
  }
}