/* ==========================================================================
   FindMotos — Responsive
   Base CSS is mobile-first. This file holds tablet/desktop enhancements
   and the mobile filter-sheet behaviour.
   ========================================================================== */

/* ---- Search results: sidebar layout on desktop ---------------------- */
.results-layout {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
  /* Breathing room before the footer on the Search + Traders results pages
     (padding, not margin, so it can't collapse away on full-height pages). */
  padding-bottom: var(--space-8);
}
@media (min-width: 980px) {
  .results-layout { grid-template-columns: 280px 1fr; align-items: start; }
  .results-layout .filters { position: sticky; top: calc(var(--header-h) + var(--space-4)); }
}

/* ---- Mobile: filter becomes a bottom sheet -------------------------- */
.filter-trigger { display: none; }

@media (max-width: 979px) {
  .filter-trigger {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
  }

  .filters {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    max-height: 86vh;
    overflow-y: auto;
    border-radius: var(--radius) var(--radius) 0 0;
    transform: translateY(102%);
    transition: transform 260ms ease;
    z-index: var(--z-sheet);
    box-shadow: var(--shadow-lg);
  }
  .filters.is-open { transform: translateY(0); }

  .filters__sheet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: var(--space-4);
    margin-bottom: var(--space-2);
    position: sticky;
    top: 0;
    background: var(--color-surface);
  }
  .filters__sheet-foot {
    position: sticky;
    bottom: 0;
    background: var(--color-surface);
    padding-top: var(--space-4);
    margin-top: var(--space-4);
    border-top: 1px solid var(--color-gray-light);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2);
  }
}
@media (min-width: 980px) {
  .filters__sheet-head, .filters__sheet-foot { display: none; }
}

/* Phone: filter sheet covers the full screen (all the way to the top) */
@media (max-width: 768px) {
  .filters {
    top: 0;
    max-height: none;
    height: 100dvh;
    border-radius: 0;
  }
}

/* ---- Mobile: sort becomes a slide-up sheet ------------------------- */
.sort-trigger { display: none; }
.sort-sheet { display: none; }

@media (max-width: 979px) {
  .sort-desktop { display: none; }
  .sort-trigger { display: inline-flex; align-items: center; gap: var(--space-2); }

  .sort-sheet {
    display: block;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    background: var(--color-surface);
    border-radius: var(--radius) var(--radius) 0 0;
    padding: var(--space-5);
    transform: translateY(102%);
    transition: transform 260ms ease;
    z-index: var(--z-sheet);
    box-shadow: var(--shadow-lg);
    max-height: 86vh;
    overflow-y: auto;
  }
  .sort-sheet.is-open { transform: translateY(0); }

  .sort-sheet__list { list-style: none; margin: 0; padding: 0; }
  .sort-sheet__opt {
    display: block;
    width: 100%;
    text-align: left;
    padding: var(--space-4) 0;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--color-gray-light);
    font-size: var(--fs-base);
    color: var(--color-text);
    cursor: pointer;
    transition: color var(--transition);
  }
  .sort-sheet__opt:last-child { border-bottom: 0; }
  .sort-sheet__opt.is-selected { color: var(--color-primary); font-weight: var(--fw-medium); }
}

/* ---- Listing details: two-column on desktop ------------------------- */
.listing-layout {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
  /* Breathing room before the footer (matches the results pages). Most
     noticeable on mobile, where the seller card is the last item. */
  padding-bottom: var(--space-8);
}
@media (min-width: 980px) {
  .listing-layout { grid-template-columns: 1fr 360px; align-items: start; }
  .listing-layout__aside {
    position: sticky;
    top: calc(var(--header-h) + var(--space-4));
    display: grid;
    gap: var(--space-4);
  }
}

/* Hide desktop seller actions when sticky bar is active on mobile */
@media (max-width: 880px) {
  .listing-layout__aside .seller-card__actions { display: none; }
  .page-listing { padding-bottom: 88px; } /* room for sticky contact bar */
}

/* ---- Gallery sizing -------------------------------------------------- */
@media (min-width: 980px) {
  .gallery__stage { aspect-ratio: 16 / 9; }
}

/* ---- Typographic scaling -------------------------------------------- */
@media (max-width: 480px) {
  .hero__inner { padding-block: var(--space-7); }
  .car-card__price { font-size: var(--fs-md); }
}

/* ---- Reduced motion -------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---- Print ----------------------------------------------------------- */
@media print {
  .site-header, .site-footer, .contact-bar, .fav-btn, .gallery__nav { display: none; }
}