/**
 * RESPONSIVE.CSS
 * El sitio se construye mobile-first (global.css / components.css).
 * Este archivo agrega mejoras progresivas para pantallas mayores.
 */

/* ---- ~480px: teléfonos grandes ---- */
@media (min-width: 480px) {
  .filters-grid {
    grid-template-columns: repeat(3, 1fr);
  }

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

  .admin-image-upload__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ---- 640px ---- */
@media (min-width: 640px) {
  .footer__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .quick-specs {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ---- 768px: tablet ---- */
@media (min-width: 768px) {
  .header__inner {
    height: var(--header-height);
  }

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

  .agency-stats {
    grid-template-columns: repeat(4, 1fr);
  }

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

  .category-card {
    min-height: 420px;
  }

  .split-panel {
    grid-template-columns: 1fr 1fr;
  }
  .split-panel--reverse {
    direction: rtl;
  }
  .split-panel--reverse > * {
    direction: ltr;
  }

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

  .stats-grid {
    grid-template-columns: repeat(5, 1fr);
  }

  .hero__actions .btn {
    min-width: 220px;
  }

  .hero__scroll-cue {
    display: flex;
  }

  .vehicle-detail__cta {
    position: static;
    box-shadow: none;
    border: none;
    padding: 0;
    background: transparent;
  }
}

/* ---- 1024px: desktop ---- */
@media (min-width: 1024px) {
  .vehicle-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .form-with-aside {
    grid-template-columns: 1.6fr 1fr;
  }

  .form-aside {
    position: sticky;
    top: calc(var(--header-height) + var(--space-6));
  }

  .header__nav {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    white-space: nowrap;
  }

  .header__nav a {
    position: relative;
    padding-block: var(--space-2);
    color: var(--color-text-muted-on-dark);
    transition: color var(--t-fast);
  }
  .header__nav a:hover,
  .header__nav a.is-active {
    color: var(--color-text-on-dark);
  }
  .header__nav a.is-active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -3px;
    height: 2px;
    background: var(--color-accent);
  }

  .header__cta {
    display: inline-flex;
  }

  .header__menu-btn {
    display: none;
  }

  .footer__grid {
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
  }

  .vehicle-detail__layout {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: var(--space-9);
    align-items: start;
  }

  .vehicle-detail__gallery,
  .vehicle-detail__info {
    display: block;
  }

  .vehicle-detail__info {
    position: sticky;
    top: calc(var(--header-height) + var(--space-6));
  }

  .quick-specs {
    grid-template-columns: repeat(4, 1fr);
  }

  .gallery__thumbs {
    grid-template-columns: repeat(6, 1fr);
  }

  .section {
    padding-block: var(--space-12);
  }
}

/* ---- 1280px+: pantallas grandes ---- */
@media (min-width: 1280px) {
  .hero__title {
    max-width: 22ch;
  }
}