/* ============================================
   S&Y TREE SERVICES - RESPONSIVE STYLES
   Mobile-First Breakpoints
   ============================================ */

/* ---- Tablet: 1024px and below ---- */
@media (max-width: 1024px) {
  .header-nav { display: none; }
  .header-cta { display: none; }
  .mobile-toggle { display: flex; }
  .about-grid { grid-template-columns: 1fr; gap: var(--space-10); }
  .about-image { order: -1; }
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .why-grid { grid-template-columns: repeat(2, 1fr); }
  .gallery-grid { grid-template-columns: repeat(3, 1fr); }
  .testimonials-grid { grid-template-columns: repeat(2, 1fr); }
  .contact-content { grid-template-columns: 1fr; }
  .area-content { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---- Mobile: 768px and below ---- */
@media (max-width: 768px) {
  :root { --section-padding: clamp(3rem, 2rem + 5vw, 5rem); }
  .hero h1 { font-size: var(--fs-3xl); }
  .hero-mini-form .form-row { flex-direction: column; }
  .hero-trust { flex-direction: column; gap: var(--space-3); }
  .services-grid { grid-template-columns: 1fr; }
  .why-grid { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .videos-grid { grid-template-columns: 1fr; }
  .testimonials-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: var(--space-8); }
  .footer-bottom { flex-direction: column; text-align: center; gap: var(--space-3); }
  .emergency-content { flex-direction: column; text-align: center; }
  .emergency-actions { width: 100%; }
  .emergency-actions .btn { flex: 1; }
  .sticky-cta { display: block; }
  .floating-buttons { bottom: 80px; }
  .back-to-top { bottom: 80px; left: var(--space-4); }
  .lightbox-prev, .lightbox-next { width: 40px; height: 40px; font-size: 1.2rem; }
  .lightbox-prev { left: var(--space-3); }
  .lightbox-next { right: var(--space-3); }
  .modal { margin: var(--space-4); max-width: calc(100% - 2rem); }
  .modal-header { padding: var(--space-6) var(--space-6) var(--space-3); }
  .modal-body { padding: 0 var(--space-6) var(--space-6); }
}

/* ---- Small Mobile: 480px and below ---- */
@media (max-width: 480px) {
  .hero { min-height: auto; padding-top: 120px; padding-bottom: var(--space-10); }
  .hero h1 { font-size: var(--fs-2xl); }
  .gallery-grid { grid-template-columns: 1fr; }
  .city-list { grid-template-columns: 1fr; }
  .about-stats { grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
  .about-features { grid-template-columns: 1fr; }
  .contact-form-wrapper, .contact-info-card { padding: var(--space-5); }
}

/* ---- Desktop: 1280px and above ---- */
@media (min-width: 1280px) {
  .container { max-width: var(--container-wide); }
}