/* ==========================================================================
   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);
}

/* Desktop: give ONLY the Listing Results content extra width. The header/menu
   uses the separate .site-header__inner container, so it stays at 1200px. */
@media (min-width: 980px) {
  body.results-page .marketplace-container { max-width: 1560px; }
}
@media (min-width: 980px) {
  .results-layout { grid-template-columns: 280px minmax(0, 1fr); align-items: start; }
  .results-layout .filters {
    position: static;
  }
  /* Scroll-chrome pages let the header scroll away naturally, so the sidebar
     only needs a small viewport gap. */
  body.scroll-chrome .results-layout .filters { top: auto; }
  /* Legacy class kept harmless for any already-loaded page state. */
  body.scroll-chrome.nav-hidden .results-layout .filters { top: auto; }
}

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

@media (max-width: 979px) {
  .results-page .toolbar {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-3);
    padding: 6px 0 12px;   /* tighter top gap so the filter/sort bar sits closer to the nav */
  }
  .results-page .toolbar__count {
    order: 2;
    font-size: var(--fs-xs);
  }
  .results-page .toolbar__actions {
    order: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2);
    width: 100%;
  }
  .filter-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    width: 100%;
    min-height: 44px;
    border-radius: var(--radius-sm);
    border-color: var(--color-primary);
    background: var(--color-primary);
    color: var(--color-text-on-primary);
    font-weight: var(--fw-medium);
  }
  .filter-trigger:hover {
    background: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
    color: var(--color-text-on-primary);
  }
  .sort-trigger {
    width: 100%;
    min-height: 44px;
    justify-content: center;
    border-radius: var(--radius-sm);
    border-color: var(--color-primary);
    background: var(--color-bg);
    color: var(--color-primary);
    font-weight: var(--fw-medium);
  }
  .sort-trigger:hover {
    background: rgba(47, 83, 155, 0.05);
    color: var(--color-primary);
  }
  .results-page .toolbar__actions .icon {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
  }

  .filters {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    max-height: 86vh;
    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);
    /* Flex column: pinned header, scrollable body, pinned footer — so the
       header sits flush at the top edge and the footer at the bottom edge
       (no content peeking into panel padding above/below them). */
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0;
  }
  .filters.is-open { transform: translateY(0); }
  .filters__body {
    flex: 1 1 auto;
    min-height: 0; /* allow the body to actually scroll inside the flex column */
    overflow-y: auto;
    padding: var(--space-5);
    -webkit-overflow-scrolling: touch;
  }

  .filters__sheet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 0 0 auto;
    padding: var(--space-4) var(--space-5);
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-gray-light);
  }
  /* Header chrome matches the Home "More Filters" popup: Clear all link + ✕. */
  .filters__head-actions { display: flex; align-items: center; gap: var(--space-3); }
  .filters__clear {
    color: var(--color-primary);
    font-weight: var(--fw-medium);
    font-size: var(--fs-sm);
    background: none; border: 0; padding: 0; cursor: pointer;
  }
  .filters__x {
    display: grid; place-items: center;
    width: 34px; height: 34px;
    border: 0; background: transparent;
    color: var(--color-text-muted);
    border-radius: var(--radius);
    cursor: pointer;
  }
  .filters__x:hover { background: var(--color-gray-soft); color: var(--color-text); }
  /* Footer matches Home: Cancel (left, auto width) + Apply Filters (wide). */
  .filters__foot-cancel { flex: 0 0 auto; }
  .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; }
}

/* Mobile/tablet: filter sheet covers the full screen (all the way to the top) */
@media (max-width: 979px) {
  .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: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    width: 100%;
    text-align: start;
    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);
  }
  /* Selection circle on the far (trailing) end of each row. */
  .sort-sheet__opt::after {
    content: "";
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid var(--color-gray-light);
    background: transparent;
    transition: border-color var(--transition), background var(--transition);
  }
  .sort-sheet__opt:last-child { border-bottom: 0; }
  /* Current sort: bold primary label + filled check circle. */
  .sort-sheet__opt.is-selected { color: var(--color-primary); font-weight: var(--fw-medium); }
  .sort-sheet__opt.is-selected::after {
    border-color: var(--color-primary);
    /* Filled centre dot (radio style) rather than a checkmark. */
    background: radial-gradient(circle, var(--color-primary) 0 5px, transparent 5.5px);
  }
}

/* ---- Listing details: card stack → two-column on desktop ------------ */
/* Mobile DOM order = visual order: gallery, title, seller, specs, desc
   (seller sits high, like the reference). On desktop the seller becomes a
   sticky right rail while the rest stacks in the left column. */
@media (min-width: 980px) {
  /* The scroll-spy tab strip is a mobile aid; on desktop the two-column
     layout with the sticky seller rail makes it redundant. */
  .ld-tabs { display: none; }
  /* Desktop uses the text breadcrumb back; drop the on-image circular back. */
  .ld-icon-btn--back { display: none; }
  .ld-layout {
    grid-template-columns: minmax(0, 1fr) 360px;
    align-items: start;
    column-gap: var(--space-6);
  }
  .ld-gallery, .ld-title, .ld-specs, .ld-desc { grid-column: 1; }
  /* Span the left column's rows so the sticky aside has full height to stick
     within. `span 4` = max left cards (gallery, title, specs, description);
     bounded so it never generates runaway implicit row tracks. */
  .ld-aside {
    grid-column: 2;
    grid-row: 1 / span 4;
    position: sticky;
    top: calc(var(--results-header-h, var(--header-h)) + 60px); /* clear sticky header + tab strip */
  }
  /* Scroll-chrome pages let the header scroll away naturally. */
  body.scroll-chrome .ld-aside { top: 60px; }
  /* Legacy class kept harmless for any already-loaded page state. */
  body.scroll-chrome.nav-hidden .ld-aside { top: 60px; }
}

/* Mobile uses the circular on-image back button, so drop the text breadcrumb. */
@media (max-width: 979px) {
  .ld-topbar { display: none; }
}

@media (max-width: 880px) {
  /* Mobile contact lives only in the sticky bottom bar, so the seller card's
     own Call/WhatsApp are hidden here (kept on desktop, which has no bar). */
  .ld-aside .seller-card__actions { display: none; }
  .page-listing { padding-bottom: 88px; } /* room for sticky contact bar */
  /* On mobile the hero shows dot indicators instead of the thumbnail strip. */
  .ld-dots { display: flex; }
  .ld-gallery__inner .gallery__thumbs { display: none; }

  /* Hero sits flush under the site header — drop the layout's top padding. */
  .ld-layout { padding-top: 0; }

  /* Full-bleed hero gallery (edge-to-edge image with floating round controls),
     like the reference. Breaks out of the container's side padding. */
  .ld-gallery__inner {
    width: 100vw;
    position: relative;
    /* Symmetric offsets so the full-bleed works in both LTR and RTL
       (LTR uses left/margin-left; RTL uses right/margin-right). */
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
  }
  .ld-gallery__inner .gallery__stage {
    border-radius: 0;
    aspect-ratio: 4 / 3;   /* taller, more immersive hero */
  }
  /* Dots overlay the bottom of the photo instead of sitting below it. */
  .ld-gallery__inner .ld-dots {
    position: absolute;
    left: 0; right: 0; bottom: var(--space-3);
    margin-top: 0;
    z-index: 2;
  }
  .ld-gallery__inner .ld-dot { box-shadow: 0 0 3px rgba(0,0,0,.45); }
}

/* Overview spec grid: 2 columns on mobile → 3 on tablet/desktop. */
@media (min-width: 700px) {
  .ld-spec-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ---- 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; }
}