/* ==========================================================================
   MOTIQ — Responsive Breakpoints
   Mobile-first, scaling up
   ========================================================================== */

/* ── Small phones (< 480px) ─────────────────────────────────────────────── */
@media (max-width: 480px) {
  .hero-search {
    grid-template-columns: 1fr;
    max-width: 100%;
  }

  .hero-search__btn {
    padding: var(--space-4);
  }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
  }

  .featured-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
  }

  .moto-card__body {
    padding: var(--space-3) var(--space-4);
  }

  .moto-card__title {
    font-size: var(--text-base);
  }

  .moto-card__subtitle {
    font-size: var(--text-xs);
    margin-bottom: var(--space-2);
  }

  .moto-card__price {
    font-size: var(--text-lg);
  }

  .moto-card__location {
    font-size: 0.7rem;
  }

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

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

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

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

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

  .newsletter-form {
    flex-direction: column;
  }

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

  .section__title {
    font-size: var(--text-3xl);
  }

  .hero__title {
    font-size: var(--text-3xl) !important;
  }

  .financing-layout {
    grid-template-columns: 1fr;
  }

  .sell-cta__content {
    padding: var(--space-8) var(--space-4);
  }
}

/* ── Tablets (481px - 768px) ────────────────────────────────────────────── */
@media (min-width: 481px) and (max-width: 768px) {
  .hero-search {
    grid-template-columns: repeat(2, 1fr);
    max-width: 100%;
  }

  .hero-search__btn {
    grid-column: 1 / -1;
    padding: var(--space-4);
  }

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

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

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

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

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

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

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

/* ── Small laptops (769px - 1024px) ─────────────────────────────────────── */
@media (min-width: 769px) and (max-width: 1024px) {
  .hero-search {
    grid-template-columns: repeat(3, 1fr);
    max-width: 100%;
  }

  .hero-search__btn {
    grid-column: auto;
  }

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

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

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

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

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

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

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

/* ── Desktop (1025px - 1280px) ──────────────────────────────────────────── */
@media (min-width: 1025px) and (max-width: 1280px) {
  .featured-grid {
    grid-template-columns: repeat(3, 1fr);
  }

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

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

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

/* ── Large desktop (1281px+) ────────────────────────────────────────────── */
@media (min-width: 1281px) {
  .featured-grid {
    grid-template-columns: repeat(3, 1fr);
  }

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

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

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

/* ── Ultra-wide (1441px+) ───────────────────────────────────────────────── */
@media (min-width: 1441px) {
  :root {
    --container-padding: 4rem;
  }
}

/* ── Hero responsive ────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .hero {
    min-height: 100svh;
  }

  .hero__cta-group {
    flex-direction: column;
    align-items: stretch;
  }

  .hero__cta-group .btn {
    justify-content: center;
  }

  .financing-layout {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .listing-hero__gallery {
    grid-template-columns: 1fr;
  }

  .sell-wizard__form {
    padding: var(--space-6);
  }

  .progress-steps {
    gap: 0;
  }

  .progress-step__line {
    width: 30px;
  }

  .progress-step__circle {
    width: 32px;
    height: 32px;
    font-size: var(--text-xs);
  }
}

/* ── Touch-friendly targets ─────────────────────────────────────────────── */
@media (pointer: coarse) {
  .btn {
    min-height: 44px;
  }

  .nav__link {
    padding: var(--space-3) var(--space-4);
  }

  .moto-card__action-btn {
    width: 44px;
    height: 44px;
  }

  .moto-card__actions {
    opacity: 1;
    transform: translateX(0);
  }
}