/* ==========================================================================
   Pages — home, search, car, gallery, warranty, errors.
   ========================================================================== */

/* ===== Home =============================================================== */
.hero { position: relative; padding-block: calc(var(--header-h) + var(--space-8)) var(--section-y); overflow: hidden; }
.hero__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.35; }
.hero__grid {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-8);
  grid-template-areas: 'intro' 'search' 'cars';
}
.hero__intro { grid-area: intro; }
.quick-search { grid-area: search; }
.hero-cars { grid-area: cars; }
/* Without JavaScript the header is not laid over the hero on phones (see layout.css), so no room is kept for it. */
@media (max-width: 63.99rem) { .no-js .hero { padding-top: var(--space-8); } }
.hero__title { font-size: var(--fs-hero); line-height: var(--lh-tight); max-width: var(--measure-headline); }
.hero__lead { max-width: var(--measure-lead); margin-top: var(--space-4); font-size: var(--fs-lead); color: var(--muted-on-dark); }

/* Search: row 1 brand / model / fuel; row 2 the km and year ranges with the button at the end. */
.quick-search { display: grid; gap: var(--space-4); }
.quick-search__row { display: grid; gap: var(--space-3); }
.quick-search__row--ranges { gap: var(--space-4); }
.quick-search__all { font-size: var(--fs-small); }
.quick-search__all a { color: var(--text-on-dark); }
.quick-search .select__control { padding-right: var(--space-8); }
@media (min-width: 48rem) {
  .quick-search__row--main { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .quick-search__row--ranges { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; }
  .quick-search__submit { grid-column: 1 / -1; justify-self: end; min-width: var(--submit-min-w); }
}
@media (min-width: 64rem) {
  .quick-search__row--ranges { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }
  .quick-search__submit { grid-column: auto; }
}

/* Real cars: a user-scrolled strip on phones, six equal tiles (3 × 2) from 64rem. No autoplay. */
.hero-cars {
  display: flex; gap: var(--space-3); margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter);
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none;
}
.hero-cars::-webkit-scrollbar { display: none; }
.hero-cars__item { flex: 0 0 78%; scroll-snap-align: start; }
.hero-car { position: relative; display: block; overflow: hidden; border-radius: var(--radius); background: var(--ink-900); text-decoration: none; }
.hero-car__image { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: scale var(--duration-state) var(--ease); }
.hero-car__caption {
  position: absolute; inset-inline: 0; bottom: 0; display: flex; flex-direction: column; gap: var(--space-1);
  padding: var(--space-8) var(--space-4) var(--space-3); background: var(--caption-gradient); color: var(--text-on-dark);
}
/* Brand + model wraps to a second line in narrow tiles rather than being cut. */
.hero-car__title { font-size: var(--fs-small); font-weight: var(--weight-semibold); line-height: var(--lh-snug); text-wrap: balance; }
.hero-car__price { font-family: var(--font-display); font-weight: var(--weight-bold); font-variant-numeric: tabular-nums; }
@media (hover: hover) { .hero-car:hover .hero-car__image { scale: var(--hover-scale); } }

@media (min-width: 48rem) {
  .hero-cars__item { flex-basis: 42%; }
}
@media (min-width: 64rem) {
  /* Headline beside the tiles; the search panel spans the full width below both. */
  .hero__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--space-10); row-gap: var(--space-8);
    grid-template-areas: 'intro cars' 'search search'; align-items: center;
  }
  .hero__grid--single { grid-template-areas: 'intro intro' 'search search'; }
  .hero-cars {
    display: grid; margin: 0; padding: 0; overflow: visible;
    grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3);
  }
}

.stats { padding-block: var(--space-8); border-bottom: var(--hairline) solid var(--line); }
.stats__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
.stats__item { display: flex; flex-direction: column-reverse; gap: var(--space-1); }
.stats__value { font-family: var(--font-display); font-size: var(--fs-stat); font-weight: var(--weight-bold); line-height: 1; letter-spacing: var(--tracking-display); font-variant-numeric: tabular-nums; }
.stats__label { font-size: var(--fs-label); font-weight: var(--weight-semibold); color: var(--text-muted); }
@media (min-width: 48rem) {
  .stats__list { display: flex; gap: 0; }
  .stats__item { flex: 1; padding-inline: var(--space-8); border-left: var(--hairline) solid var(--line); }
  .stats__item:first-child { padding-left: 0; border-left: 0; }
}

.timeline { position: relative; display: grid; gap: var(--space-8); }
.timeline__step { position: relative; display: grid; grid-template-columns: var(--timeline-dot) minmax(0, 1fr); column-gap: var(--space-4); }
.timeline__step:not(:last-child)::before {
  content: ''; position: absolute; left: calc(var(--timeline-dot) / 2); top: var(--timeline-dot); bottom: calc(-1 * var(--space-8));
  width: var(--hairline); background: var(--line-strong);
}
.timeline__number {
  grid-row: 1 / span 2; display: inline-grid; place-items: center; width: var(--timeline-dot); height: var(--timeline-dot);
  border: var(--border-strong) solid var(--text); border-radius: var(--radius-pill); background: var(--paper);
  font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--fs-small);
}
.timeline__title { font-size: var(--fs-h3); font-weight: var(--weight-semibold); padding-top: var(--space-1); }
.timeline__text { margin-top: var(--space-2); color: var(--text-muted); max-width: var(--measure); }

.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.tiles__item:first-child { grid-column: 1 / -1; }
.tiles__link { display: block; height: 100%; overflow: hidden; border-radius: var(--radius); text-decoration: none; }
.tiles__link img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: scale var(--duration-state) var(--ease); }
.tiles__link--more {
  display: flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 100%; aspect-ratio: 4 / 3;
  border: var(--hairline) solid var(--line-strong); font-weight: var(--weight-semibold);
}
.tiles__link--more:hover { border-color: var(--text); }
@media (hover: hover) { .tiles__link:hover img { scale: var(--hover-scale); } }
@media (min-width: 64rem) {
  .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tiles__item:first-child { grid-column: span 2; grid-row: span 2; }
}

/* ===== Search ============================================================= */
.filters__form { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-5); border: var(--hairline) solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-1); }
.filters__title { display: flex; align-items: center; gap: var(--space-2); font-size: var(--fs-h3); font-weight: var(--weight-semibold); }
.filters__primary, .filters__more { display: flex; flex-direction: column; gap: var(--space-4); }
.filters__toggle { display: none; }
.filters__actions { position: sticky; bottom: 0; padding-top: var(--space-2); background: var(--surface); }
.js .filters__toggle { display: inline-flex; }
.js .filters__more:not(.is-open) { display: none; }
@media (min-width: 64rem) {
  .filters { position: sticky; top: calc(var(--header-h) + var(--space-6)); max-height: calc(100dvh - var(--header-h) - var(--space-12)); overflow-y: auto; border-radius: var(--radius); }
  .js .filters__toggle { display: none; }
  .js .filters__more:not(.is-open) { display: flex; }
}

.results__toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-4); margin-bottom: var(--space-5); }
.results__toolbar .chips--scroll { flex: 1 1 100%; min-width: 0; }
@media (min-width: 64rem) { .results__toolbar .chips--scroll { flex: 1 1 0; flex-wrap: wrap; overflow: visible; } }
.sort { display: flex; align-items: center; gap: var(--space-2); margin-left: auto; }
.sort__label { font-size: var(--fs-label); font-weight: var(--weight-semibold); color: var(--text-muted); white-space: nowrap; }
.js .sort__apply { display: none; }

/* ===== Car page =========================================================== */
.back-link { margin-bottom: var(--space-4); font-size: var(--fs-small); }
.back-link a { display: inline-flex; align-items: center; gap: var(--space-1); font-weight: var(--weight-semibold); text-decoration: none; }
.back-link a:hover { text-decoration: underline; }
.back-link .icon { width: var(--icon-small); height: var(--icon-small); }

.car-head { display: grid; gap: var(--space-3); justify-items: start; margin-bottom: var(--space-6); }
.spec-pills { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.spec-pill { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-3); border: var(--hairline) solid var(--line-strong); border-radius: var(--radius-pill); font-size: var(--fs-small); font-weight: var(--weight-medium); }
.spec-pill .icon { width: var(--icon-small); height: var(--icon-small); color: var(--text-muted); }

/* Gallery: full-bleed on phones, framed from 48rem */
.car-gallery { margin-inline: calc(-1 * var(--gutter)); }
.carousel { position: relative; overflow: hidden; background: var(--ink-950); touch-action: pan-y; }
.carousel__image { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; cursor: zoom-in; }
.carousel__image--placeholder { object-fit: contain; padding: var(--space-12); background: var(--paper-deep); cursor: default; }
.carousel__arrow, .carousel__fullscreen {
  position: absolute; display: inline-grid; place-items: center; width: var(--control-h); height: var(--control-h);
  border: 0; border-radius: var(--radius); background: var(--scrim); color: var(--text-on-dark); cursor: pointer;
}
.carousel__arrow { top: 50%; translate: 0 -50%; }
.carousel__arrow--prev { left: var(--space-3); }
.carousel__arrow--next { right: var(--space-3); }
.carousel__fullscreen { top: var(--space-3); right: var(--space-3); }
.carousel__counter { position: absolute; bottom: var(--space-3); right: var(--space-3); }
.carousel__sold { position: absolute; top: var(--space-3); left: var(--space-3); }
.carousel__no-photo { position: absolute; bottom: var(--space-3); left: var(--space-3); }
.thumbs { display: flex; gap: var(--space-2); margin-top: var(--space-2); padding-inline: var(--gutter); overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: thin; }
.thumbs__item { display: block; flex: none; width: var(--thumb-w); overflow: hidden; border: 2px solid transparent; border-radius: var(--radius); scroll-snap-align: start; opacity: 0.7; }
.thumbs__item.is-current, .thumbs__item:hover { border-color: var(--text); opacity: 1; }
.thumbs__item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
@media (min-width: 48rem) {
  .car-gallery { margin-inline: 0; }
  .carousel { border-radius: var(--radius); }
  .thumbs { padding-inline: 0; }
}

.price-panel { display: grid; gap: var(--space-5); }
.price-box { display: grid; gap: var(--space-2); }
.price-panel__label { font-size: var(--fs-label); font-weight: var(--weight-semibold); color: var(--muted-on-dark); }
.price--hero { font-size: var(--fs-price-lg); color: var(--accent); }
.price-panel__note { font-size: var(--fs-label); color: var(--muted-on-dark); }
.price-panel__included-title { margin-top: var(--space-3); padding-top: var(--space-4); border-top: var(--hairline) solid var(--on-dark-hairline); font-size: var(--fs-label); font-weight: var(--weight-semibold); color: var(--muted-on-dark); }
.price-panel .checklist .icon { color: var(--muted-on-dark); }
.actions { display: grid; gap: var(--space-2); }

.sold-panel { display: grid; gap: var(--space-3); justify-items: start; }
.sold-panel__title { font-size: var(--fs-h2); }

.car-details { display: grid; gap: var(--space-10); }
.detail-section__title { margin-bottom: var(--space-5); font-size: var(--fs-h3); font-weight: var(--weight-semibold); }
.spec-list { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: var(--space-8); border-top: var(--hairline) solid var(--line); }
.spec-list__row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--space-4); padding-block: var(--space-3); border-bottom: var(--hairline) solid var(--line); }
.spec-list dt { font-size: var(--fs-label); font-weight: var(--weight-semibold); color: var(--text-muted); align-self: center; }
.spec-list dd { font-weight: var(--weight-medium); }
@media (min-width: 48rem) { .spec-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.option-group + .option-group { margin-top: var(--space-5); }
.option-group__title { margin-bottom: var(--space-2); font-family: var(--font-body); font-size: var(--fs-label); font-weight: var(--weight-semibold); letter-spacing: 0; color: var(--text-muted); }
.option-chip { display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-1) var(--space-3); border: var(--hairline) solid var(--line); border-radius: var(--radius-pill); background: var(--surface); font-size: var(--fs-small); }
.option-chip .icon { color: var(--text-muted); }
.option-group--priority .option-chip { border-color: var(--text); font-weight: var(--weight-semibold); }
.option-group--priority .option-chip .icon { color: var(--text); }

.car-related .section-title { margin-bottom: var(--space-6); }
@media (max-width: 47.99rem) {
  .card-grid--related { display: flex; gap: var(--space-3); margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); }
  .card-grid--related > li { flex: 0 0 82%; scroll-snap-align: start; }
}

/* Phone action bar: active cars only, hidden while the fullscreen viewer is open. */
.action-bar {
  position: fixed; inset-inline: 0; bottom: 0; z-index: var(--z-action-bar);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  min-height: var(--action-bar-h); padding: var(--space-3) var(--gutter) calc(var(--space-3) + env(safe-area-inset-bottom));
  color: var(--text-on-dark); background: var(--ink-950); border-top: var(--hairline) solid var(--on-dark-hairline);
}
.action-bar__price { display: grid; gap: var(--space-1); }
.action-bar .price { color: var(--accent); }
.action-bar__note { font-size: var(--fs-label); color: var(--muted-on-dark); }
.page--has-action-bar { padding-bottom: calc(var(--section-y) + var(--action-bar-h)); }
body.lightbox-open .action-bar { display: none; }
@media (min-width: 48rem) {
  .action-bar { display: none; }
  .page--has-action-bar { padding-bottom: var(--section-y); }
}

/* ===== Gallery ============================================================ */
.gallery-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.gallery-grid__item { display: block; overflow: hidden; border-radius: var(--radius); }
.gallery-grid__item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: scale var(--duration-state) var(--ease); }
@media (hover: hover) { .gallery-grid__item:hover img { scale: var(--hover-scale); } }
@media (min-width: 48rem) { .gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); } }
@media (min-width: 90rem) { .gallery-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ===== Warranty =========================================================== */
.warranty { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-12); }
.warranty__title { margin-bottom: var(--space-6); font-size: var(--fs-h3); font-weight: var(--weight-semibold); padding-bottom: var(--space-3); border-bottom: var(--hairline) solid var(--line); }
@media (min-width: 64rem) { .warranty { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-16); } }
.closing { display: grid; gap: var(--space-5); justify-items: start; margin-top: var(--section-y); }
.closing__text { max-width: var(--measure); font-size: var(--fs-lead); }
@media (min-width: 48rem) { .closing { grid-template-columns: minmax(0, 1fr) auto; align-items: center; } }

/* ===== Errors ============================================================= */
.error-block { padding-block: var(--section-y); }
.error-block__inner { display: grid; gap: var(--space-4); justify-items: start; }
.error-block__text { color: var(--muted-on-dark); }
.error-block__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-4); }