/* ---------- Split wrapper: toolbar + content grid ---------- */

.uli-search-split {
  display: grid;
  grid-template-rows: auto 1fr;  /* toolbar row + content row */
  row-gap: 10px;
  margin-bottom: 80px;
}

/* Toolbar */
.uli-search-toolbar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
}

/* Toolbar button */
.uli-search-toolbar .uli-map-toggle-btn {
  appearance: none;
  border: 1px solid rgba(0,0,0,0.12);
  background: #fff;
  border-radius: 9999px;
  padding: 6px 12px;
  font: inherit;
  cursor: pointer;
  transition: box-shadow .15s ease, border-color .15s ease, background-color .15s ease;
}
.uli-search-toolbar .uli-map-toggle-btn:hover { box-shadow: 0 2px 6px rgba(0,0,0,0.10); }
.uli-search-toolbar .uli-map-toggle-btn:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

/* Content row: 50/50 cards + map (wide default) */
.uli-search-split .uli-split-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
}

/* Columns */
.uli-search-split .cards-col,
.uli-search-split .map-col { min-width: 0; }

/* Map sizing (base) */
.uli-search-split .map-col .uli-map { min-height: 420px; }

/* Collapsed: hide map, cards full width */
.uli-search-split.is-map-collapsed .uli-split-row { grid-template-columns: 1fr 0; }
.uli-search-split.is-map-collapsed .map-col { display: none; }

/* ---------- Card grid (per-row equal heights) ---------- */

.uli-search-split .cards-col .view-content {
  display: grid;
  gap: 16px;
  align-items: stretch; /* each item fills row height (tallest in row) */
}
.uli-search-split .cards-col .view-content > * { height: 100%; }

/* The card itself fills and uses vertical flex */
.js-apt-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Desktop & wide sticky map + grid rules (>=1024px) */
@media (min-width: 1024px) {
  /* Make the MAP column sticky and sized to the viewport */
  .uli-search-split .map-col {
    position: sticky;
    top: var(--uli-top, 0px);                    /* JS sets --uli-top */
    align-self: start;
    height: calc(100vh - var(--uli-top, 0px) - 10px); /* 10px = row gap */
  }
  /* Let the map fill its column height */
  .uli-search-split .map-col .uli-map {
    height: 100%;
    min-height: 420px;
  }
  /* Ensure cards are NOT independently scrollable */
  .uli-search-split .cards-col { overflow: visible; }
}

/* ====== Mid range: 1024px–1199.98px ======
   - 33/66 cards/map
   - Cards single-column
*/
@media (min-width: 1024px) and (max-width: 1199.98px) {
  .uli-search-split .uli-split-row { grid-template-columns: 1fr 2fr; } /* ~33/66 */
  .uli-search-split .uli-split-row .cards-col .view-content {
    grid-template-columns: 1fr; /* single column cards */
  }
}

/* ====== Wide: >=1200px ======
   - 50/50 cards/map
   - Cards two columns
*/
@media (min-width: 1200px) {
  .uli-search-split .uli-split-row .cards-col .view-content {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* When map is hidden on >=1024px → 4 columns of cards */
@media (min-width: 1024px) {
  .uli-search-split.is-map-collapsed .uli-split-row .cards-col .view-content {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ====== Narrow: <1024px ======
   - Map above cards, full width
   - Map sticky at top, ~30% viewport height
   - Cards TWO columns (overridden to 1 col below 576px)
*/
@media (max-width: 1023.98px) {
  /* Stack map above cards */
  .uli-search-split .uli-split-row { grid-template-columns: 1fr; }
  .uli-search-split .map-col { order: -1; }

  /* Map sticky but only 30% of viewport height */
  .uli-search-split .map-col {
    position: sticky;
    /* top: var(--uli-top, 0px); */
    top: 0px;
    align-self: start;
    height: 100%;
    min-height: 420px;
    z-index: 1;
    padding: 20px 0px;
    background-color: #ffffff;
  }
  .uli-search-split .map-col .uli-map {
    height: 100%;
    min-height: 0; /* allow 30vh to control height */
  }

  /* Cards → two columns under the map (until 576px) */
  .uli-search-split .cards-col .view-content {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Extra-narrow: <=576px → cards go to ONE column */
@media (max-width: 575.98px) {
  .uli-search-split .cards-col .view-content {
    grid-template-columns: 1fr;
  }
}

/* ---------- Card internals: keep CTAs pinned to bottom ---------- */

.js-apt-card .image-slider { flex: 0 0 auto; }

.js-apt-card .inner.apartment-card-details {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0; /* prevent overflow issues */
}

.js-apt-card .apartment-details { margin-bottom: 12px; }

.js-apt-card .cta-buttons {
  margin-top: auto;          /* pin to bottom of card */
  padding-top: 12px;         /* small separation */
}