/* ==========================================================================
   Listing detail — Stitch look, ported onto the current theme (mobile only).
   Scoped to body.page-listing; desktop (≥981px) keeps the existing layout.
   Uses the app's own tokens. Gallery / full-screen viewer untouched (tap the
   image to open); no favorite, no similar cars. Flat single-background page
   (info sections are NOT boxed cards) + a taller Stitch-style hero.
   ========================================================================== */
@media (max-width: 980px) {

  /* Hero sits at the very top: hide the app header (the hero carries its own
     floating back + share), the "back to results" topbar, and the sticky
     contact bar (Call/Chat move into the seller card, Stitch-style). */
  body.page-listing .site-header { display: none; }
  body.page-listing .ld-topbar { display: none; }
  body.page-listing .contact-bar { display: none !important; }
  body.page-listing { padding-bottom: var(--space-6); background: var(--color-bg); }
  body.page-listing .ld-page { padding-top: 0; }

  /* ── Taller, edge-to-edge Stitch hero. Tapping the image opens the
     full-screen gallery (unchanged); the extra "View all photos" button is
     dropped so the page reads flat. ─────────────────────────────────────── */
  body.page-listing .ld-gallery__inner .gallery__stage {
    aspect-ratio: auto;
    height: min(420px, 58vh);
    border-radius: 0;
  }
  body.page-listing .ld-gallery__inner .gallery__track,
  body.page-listing .ld-gallery__inner .gallery__slide { height: 100%; }
  body.page-listing .ld-gallery-btn { display: none; }

  /* ── Flat page: one continuous background, no boxed "sections" ─────────── */
  body.page-listing .ld-layout { gap: 0; padding-top: 0; }
  body.page-listing .ld-title,
  body.page-listing .ld-desc,
  body.page-listing .ld-specs {
    background: transparent;
    border: 0;
    box-shadow: none;
    border-radius: 0;
    padding: var(--space-5) var(--space-4);
    margin: 0;
  }
  /* hairline dividers between the flat sections */
  body.page-listing .ld-desc,
  body.page-listing .ld-specs { border-top: 1px solid var(--color-gray-light, #e8eaee); }

  /* Key facts → Stitch pills (soft-tinted, no icons) */
  body.page-listing .ld-keyfacts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
  body.page-listing .ld-keyfact {
    display: inline-flex; align-items: center;
    background: var(--color-primary-soft); color: var(--color-primary);
    border-radius: var(--radius); padding: 5px 12px;
    font-size: 0.82rem; font-weight: 600; line-height: 1.3;
  }
  body.page-listing .ld-keyfact .ld-spec__icon { display: none; }

  /* Overview → Stitch label / value list with hairline dividers */
  body.page-listing .ld-spec-grid { display: block; }
  body.page-listing .ld-spec {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: var(--space-4); padding: 11px 0;
    border-bottom: 1px solid var(--color-gray-light, #e8eaee);
  }
  body.page-listing .ld-spec:last-child { border-bottom: 0; }
  body.page-listing .ld-spec > div { display: contents; }
  body.page-listing .ld-spec .ld-spec__icon { display: none; }
  body.page-listing .ld-spec dt { color: var(--color-text-muted); font-size: 0.9rem; font-weight: 400; }
  body.page-listing .ld-spec dd { color: var(--color-text); font-weight: 600; font-size: 0.92rem; text-align: end; }

  /* Seller stays a distinct card (Stitch), inset from the flat content, with
     the Call / Chat buttons surfaced inside it. */
  body.page-listing .ld-aside { margin: var(--space-4); }
  body.page-listing .seller-card__actions { display: grid; gap: 10px; margin-top: 14px; }

  /* Safety tip → boxed note */
  body.page-listing .ld-tip {
    margin-top: 14px; padding: 12px 14px;
    background: var(--color-gray-soft); border-radius: var(--radius);
    color: var(--color-text-muted); font-size: 0.85rem; line-height: 1.5;
  }
}

/* ==========================================================================
   DESKTOP (≥981px): image mosaic — one large lead image on the left + a 2×2
   grid of thumbnails on the right, spanning the full content width, with a
   photo-count badge. Details + seller sit below (Autotrader-style). Clicking
   the lead opens the full-screen gallery (unchanged); clicking a thumb swaps
   the lead (existing gallery behaviour). Mobile is untouched.
   ========================================================================== */
@media (min-width: 981px) {
  /* gallery spans both columns at the top; seller card drops below it */
  body.page-listing .ld-gallery { grid-column: 1 / -1; position: relative; }
  body.page-listing .ld-aside { grid-row: 2 / span 3; }

  body.page-listing .ld-gallery__inner {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    grid-auto-flow: row;
    gap: var(--space-2);
    aspect-ratio: 5 / 2;          /* wide mosaic; height derives from width */
  }
  body.page-listing .ld-gallery__inner .gallery__stage {
    aspect-ratio: auto;
    height: 100%;
    margin: 0;
  }
  /* right column: 2×2 grid of the first four thumbnails */
  body.page-listing .ld-gallery__inner .gallery__thumbs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: var(--space-2);
    height: 100%;
    overflow: hidden;
  }
  body.page-listing .ld-gallery__inner .gallery__thumb {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    margin: 0;
    opacity: 1;
    border-radius: var(--radius);
  }
  body.page-listing .ld-gallery__inner .gallery__thumb:nth-child(n+5) { display: none; }
  body.page-listing .ld-gallery__inner .ld-dots { display: none; }

  /* "View all N photos" → count badge over the mosaic's bottom-end corner */
  body.page-listing .ld-gallery-btn {
    position: absolute;
    inset-inline-end: var(--space-3);
    bottom: var(--space-3);
    width: auto;
    margin: 0;
    padding: var(--space-2) var(--space-3);
    background: rgba(26, 35, 48, 0.82);
    color: #fff;
    border: 0;
    box-shadow: var(--shadow-md);
  }
  body.page-listing .ld-gallery-btn svg { color: #fff; }
  body.page-listing .ld-gallery-btn:hover { background: rgba(26, 35, 48, 0.95); color: #fff; border: 0; }
}