/* ==========================================================================
   Deluxe Dry Cleaner - Responsive rules (mobile-first, min-width queries)
   Tested widths: 360, 390, 768, 1024, 1440
   ========================================================================== */

/* Very small phones */
@media (max-width: 374px) {
  :root { --gutter: 1rem; }
  .brand img { height: 44px; }
  .btn-lg { padding-inline: 1.2rem; }
  .mobile-cta { grid-template-columns: 1fr 1.2fr; }
}

/* Large phones */
@media (min-width: 480px) {
  .btn-row .btn-lg { flex: 0 0 auto; }
  .check-list { grid-template-columns: 1fr 1fr; }
  .trust-grid { grid-template-columns: 1fr 1fr; }
}

/* Tablets */
@media (min-width: 640px) {
  .grid-2-4, .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .form-row { grid-template-columns: 1fr 1fr; }
  .form-card { padding: var(--space-6); }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-brand { grid-column: 1 / -1; }
  .footer-bottom-inner { flex-direction: row; justify-content: space-between; align-items: center; }
}

@media (min-width: 768px) {
  :root { --gutter: 2rem; }
  .section { padding-block: 5.5rem; }
  .steps { grid-template-columns: repeat(3, 1fr); }
  .cta-inner { grid-template-columns: 1fr auto; }
  .split { grid-template-columns: 1fr 1fr; align-items: start; }
  .hero { padding-block: var(--space-8); }
}

/* Laptops: desktop navigation */
@media (min-width: 1024px) {
  :root { --header-h: 84px; }
  .header-inner { flex-wrap: nowrap; }
  .brand img { height: 58px; }
  .nav-toggle { display: none !important; }
  .js .site-nav, .site-nav { display: flex !important; align-items: center; justify-content: flex-end; gap: var(--space-6); width: auto; padding: 0; animation: none; }
  .nav-list { flex-direction: row; border: 0; gap: var(--space-1); }
  .nav-list a { border: 0; padding: 0.5rem 0.85rem; border-radius: var(--radius-pill); position: relative; }
  .nav-list a:hover { background: var(--light-blue); }
  .nav-list a[aria-current="page"]::after { content: ""; position: absolute; left: 0.85rem; right: 0.85rem; bottom: 2px; height: 2px; border-radius: 2px; background: var(--cyan-blue); }
  .nav-actions { flex-direction: row; align-items: center; margin: 0; gap: var(--space-4); }

  .mobile-cta { display: none; }
  body:has(.mobile-cta) { padding-bottom: 0; }

  .hero-grid { grid-template-columns: 1.05fr 0.95fr; gap: var(--space-8); }
  .trust-grid { grid-template-columns: repeat(4, 1fr); }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4, .grid-2-4 { grid-template-columns: repeat(4, 1fr); }
  .with-sidebar { grid-template-columns: minmax(0, 1fr) 340px; gap: var(--space-8); }
  .sidebar { position: sticky; top: calc(var(--header-h) + var(--space-5)); }
  .split-form { grid-template-columns: 0.9fr 1.1fr; gap: var(--space-8); }
  .booking-layout { grid-template-columns: minmax(0, 1.5fr) minmax(280px, 0.8fr); }
  .booking-aside { position: sticky; top: calc(var(--header-h) + var(--space-5)); }
  .footer-grid { grid-template-columns: 1.5fr 1fr 1.2fr 1fr 1.3fr; }
  .footer-brand { grid-column: auto; }
}

@media (min-width: 1024px) and (max-width: 1199px) {
  .header-contact { display: none; }
  .nav-list a { padding-inline: 0.65rem; }
}

/* Hover-capable devices only: lift effects */
@media (hover: none) {
  .service-card:hover, .location-card:hover { transform: none; }
}

/* Large desktop */
@media (min-width: 1440px) {
  :root { --container: 1280px; }
}
@media (min-width: 640px) { .area-featured { grid-template-columns: 1fr 1fr; } }
