/* ==========================================================
   Search results page (/cars-for-sale/...)

   Layers on top of carlot-home.css, which already owns the
   cards, the search bar and the filter drawer. Only what is
   specific to a results page lives here: the bar that holds
   the breadcrumb and search, the heading, and the grid that
   replaces the home page's horizontal rail.
   ========================================================== */

.cl-srp__bar {
  position: relative;
  z-index: 10;
  border-bottom: 1px solid var(--v-line, #e7e7e8);
  background: var(--v-surface, #fff);
}

.cl-srp__bar-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 12px 1rem 18px;
}

/* The bar is white, where on the home page this sits over the hero photo. */
.cl-srp .cl-home__search {
  margin: 0;
}

.cl-srp__bar-inner .cl-crumb-row {
  margin-bottom: 12px;
}

/* Drill-down pages drop the search bar — crumbs already are the search. */
.cl-srp--drilled .cl-srp__bar-inner {
  padding-bottom: 12px;
}

.cl-srp--drilled .cl-srp__bar-inner .cl-crumb-row {
  margin-bottom: 0;
}

/* ---------- Heading ---------- */

.cl-srp__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 18px;
}

/* Only route to the filter drawer on a phone; from 768px up the search bar
   carries its own Filters button and this would be a second one. */
.cl-srp__filters {
  flex: none;
}

.cl-srp__title {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--v-ink, #121214);
}

.cl-srp__count {
  margin: 10px 0 0;
  font-size: 0.9rem;
  color: var(--v-subtle, #6f6f73);
}

/* Applied filters — AutoTrader puts make/model in the search bar and
   city / refinements tight under the heading, each chip a link that drops
   only that filter so the previous page of the trail stays intact. */
.cl-srp__applied {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

.cl-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.cl-chip-row--bar {
  display: contents;
}

.cl-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 28px;
  padding: 0 8px 0 10px;
  border: 1px solid var(--v-line, #e7e7e8);
  border-radius: 999px;
  background: var(--v-fill, #f4f4f4);
  color: var(--v-ink, #121214);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
}

.cl-chip i {
  font-size: 11px;
  color: var(--v-muted, #59595b);
}

.cl-home__search-query.has-chips .cl-home__search-field {
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding-left: 2.6rem;
}

@media (min-width: 768px) {
  .cl-home__search-query.has-chips .cl-home__search-field {
    padding: 8px 2.6rem;
  }
}

.cl-home__search-query.has-chips.cl-home__search-query input,
.cl-home__search-query.has-chips.cl-home__search-query input:hover,
.cl-home__search-query.has-chips.cl-home__search-query input:focus,
.cl-home__search-query.has-chips.cl-home__search-query input:focus-visible {
  flex: 1 1 auto;
  width: auto;
  min-width: 5.5rem;
  padding: 0.35rem 0;
}

.cl-srp__clear {
  color: var(--v-accent, #593cfb);
  font-weight: 600;
  text-decoration: none;
}

.cl-srp__clear:hover,
.cl-srp__clear:focus {
  color: var(--v-accent, #593cfb);
  text-decoration: underline;
}

/* ---------- Results grid ---------- */

/* A rail is for browsing a selection; results are a set you scan, so they
   wrap rather than scroll sideways. The card itself is unchanged, but it is
   sized for a rail, so its fixed width has to be released here. */
.cl-srp__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  padding-bottom: 1.5rem;
}

.cl-srp__grid .cl-home__card {
  width: auto;
  min-width: 0;
  flex: none;
  scroll-snap-align: none;
}

.cl-srp .cl-home__empty {
  margin: 0 0 2rem;
}

@media (min-width: 600px) {
  .cl-srp__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 768px) {
  .cl-srp__bar-inner {
    padding: 14px 1.75rem 20px;
  }

  .cl-srp__title {
    font-size: 1.75rem;
  }

  .cl-srp__filters {
    display: none;
  }

  .cl-srp--drilled .cl-srp__filters {
    display: inline-flex;
  }
}

@media (min-width: 1000px) {
  .cl-srp__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
  }
}

@media (min-width: 1100px) {
  .cl-srp__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}