/* One-row carousels for Trip Planner and Browse by Property Type.
   Both sections used to be a four-column grid that a script kept to one row by
   hiding every card past the fourth. That only holds while the script runs: if
   anything above it throws, or the hidden attribute loses to a later rule, all
   forty-odd cards paint and the "carousel" becomes a six-row wall.
   The single row is a scroll track here, so it is true before any JavaScript
   runs — the buttons scroll it, and without them it still swipes. */

.bh-planner .bh-card-grid,
.bh-browse .bh-card-grid {
  --bh-visible: 4;
  --bh-gap: 30px;
  display: grid;
  grid-auto-flow: column;
  /* `none` matters: the base rule sets four explicit columns, and those would
     otherwise be filled first and wrap the rest onto a second row. */
  grid-template-columns: none;
  grid-auto-columns: calc((100% - (var(--bh-visible) - 1) * var(--bh-gap)) / var(--bh-visible));
  gap: var(--bh-gap);
  /* Room for the card lift on hover, which would otherwise be clipped by the
     scroll container. */
  padding-block: 4px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  scrollbar-width: none;
}

.bh-planner .bh-card-grid::-webkit-scrollbar,
.bh-browse .bh-card-grid::-webkit-scrollbar { display: none; }

.bh-planner .bh-card-grid > .bh-property-card,
.bh-browse .bh-card-grid > .bh-property-card { scroll-snap-align: start; }

/* Filtering by tab or by property type still hides the cards that do not
   belong. Declared for both sections and marked important because the base
   grid rules are more specific than the browser's own [hidden] rule. */
.bh-planner .bh-property-card[hidden],
.bh-browse .bh-property-card[hidden] { display: none !important; }

.bh-planner-nav,
.bh-browse .bh-slider-nav {
  margin-top: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
}

.bh-planner-nav > button,
.bh-browse .bh-slider-nav > button {
  /* 44px is the smallest comfortable tap target. */
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid #d3d9e4;
  border-radius: 50%;
  background: #fff;
  color: #07183f;
  font-size: 17px;
  cursor: pointer;
  transition: border-color .18s, color .18s;
}

.bh-planner-nav > button:hover:not(:disabled),
.bh-browse .bh-slider-nav > button:hover:not(:disabled) { border-color: #003b95; color: #003b95; }
.bh-planner-nav > button:disabled,
.bh-browse .bh-slider-nav > button:disabled { opacity: .35; cursor: default; }
.bh-planner-nav > button:focus-visible,
.bh-browse .bh-slider-nav > button:focus-visible { outline: 3px solid #ffc400; outline-offset: 2px; }

.bh-browse .bh-browse-dots { display: flex; align-items: center; gap: 12px; }
.bh-browse .bh-browse-dots button {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #d1d5db;
  cursor: pointer;
}
.bh-browse .bh-browse-dots button.active { background: #003b95; transform: scale(1.15); }

@media (max-width: 900px) {
  .bh-planner .bh-card-grid,
  .bh-browse .bh-card-grid { --bh-visible: 2; --bh-gap: 20px; }
}

@media (max-width: 640px) {
  .bh-planner .bh-card-grid,
  .bh-browse .bh-card-grid {
    --bh-visible: 1;
    --bh-gap: 16px;
    /* One whole card plus a sliver of the next, so it reads as scrollable. */
    grid-auto-columns: 86%;
    scroll-snap-type: x mandatory;
  }
  .bh-planner-nav,
  .bh-browse .bh-slider-nav { margin-top: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .bh-planner .bh-card-grid,
  .bh-browse .bh-card-grid { scroll-behavior: auto; }
}