/* ==========================================================================
   Responsive overrides — large desktop down to mobile
   ========================================================================== */

/* ---- Desktop / laptop (below 1200) ---- */
@media (max-width: 1200px) {
  .vehicle-grid {
    grid-template-columns: repeat(2, 1fr);
  }

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

  .category-grid {
    grid-auto-rows: 200px;
  }
}

/* ---- Tablet (below 960) ---- */
@media (max-width: 960px) {
  .navbar__links,
  .navbar__cta {
    display: none;
  }

  .navbar__toggle {
    display: flex;
  }

  .why-grid,
  .about-grid,
  .location-grid,
  .contact-grid {
    grid-template-columns: 1fr;
  }

  .why-grid__media {
    order: -1;
    aspect-ratio: 16 / 9;
  }

  .about-collage {
    height: 380px;
  }

  .search-widget__form {
    grid-template-columns: 1fr 1fr;
  }
  .search-widget__form .btn {
    grid-column: 1 / -1;
  }

  .timeline {
    grid-template-columns: repeat(2, 1fr);
    row-gap: var(--space-2xl);
  }
  .timeline::before {
    display: none;
  }

  .category-grid {
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 180px;
  }
  .category-tile:nth-child(1) { grid-column: span 4; grid-row: span 1; }
  .category-tile:nth-child(2) { grid-column: span 2; grid-row: span 1; }
  .category-tile:nth-child(3) { grid-column: span 2; grid-row: span 1; }
  .category-tile:nth-child(4) { grid-column: span 2; grid-row: span 1; }
  .category-tile:nth-child(5) { grid-column: span 2; grid-row: span 1; }
  .category-tile:nth-child(6) { grid-column: span 4; grid-row: span 1; }

  .footer__grid {
    grid-template-columns: 1fr 1fr;
    row-gap: var(--space-xl);
  }

  .modal__form,
  .contact-form {
    grid-template-columns: 1fr;
  }
}

/* ---- Mobile (below 640) ---- */
@media (max-width: 640px) {
  .container {
    padding-inline: var(--container-pad);
  }

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

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

  .hero__actions .btn,
  .final-cta__actions .btn {
    width: 100%;
  }

  .hero__strip {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-md);
  }

  .hero__pillars {
    gap: var(--space-md);
    flex-wrap: wrap;
  }

  .search-widget-wrap {
    /* The hero strip stacks taller on mobile (wrapped pillars + scroll
       indicator below), so the desktop's negative overlap would collide
       with it. Drop the overlap and give the widget its own breathing room. */
    margin-top: var(--space-lg);
  }

  .search-widget__form {
    grid-template-columns: 1fr;
  }

  .category-grid {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    /* Rows must size to the tile's own height (below), not inherit the
       180px auto-row track from the tablet breakpoint above. */
    grid-auto-rows: auto;
  }
  .category-tile {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
    height: 220px;
  }
  .category-tile__content {
    transform: translateY(0);
  }
  .category-tile__desc {
    opacity: 1;
    max-height: 60px;
  }

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

  .footer__grid {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  .footer__bottom {
    flex-direction: column;
    align-items: flex-start;
  }

  .filter-bar {
    flex-direction: column;
    align-items: stretch;
  }
  .filter-bar__field {
    flex: none;
  }
  .filter-bar__reset {
    width: 100%;
  }

  .modal__price-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .modal__actions {
    flex-direction: column;
  }
  .modal__actions .btn {
    width: 100%;
  }

  .location-actions {
    flex-direction: column;
  }
  .location-actions .btn {
    width: 100%;
  }

  .toast-stack {
    left: var(--space-md);
    right: var(--space-md);
    bottom: var(--space-md);
    max-width: none;
  }

  .back-to-top {
    left: var(--space-md);
    bottom: var(--space-md);
  }

  .vehicle-card__actions {
    flex-direction: column;
    width: 100%;
  }
  .vehicle-card__footer {
    flex-direction: column;
    align-items: stretch;
  }
}

@media (max-width: 400px) {
  .preloader__word {
    letter-spacing: 0.18em;
  }
}