/* ============================================================
   RESULTS PAGE
   ============================================================ */

/* Navbar search bar */
.navbar-search {
  flex: 1; max-width: 480px; margin: 0 var(--space-4);
  display: flex; align-items: center;
  background: var(--color-surface);
  border: none;
  border-radius: var(--radius-lg);
  overflow: hidden;
  height: 42px; box-shadow: var(--shadow-sm);}
.ns-field {
  flex: 1; display: flex; align-items: center; gap: var(--space-2);
  padding: 0 var(--space-3);
  color: var(--color-text-faint);}
.ns-field:first-child { border-right: 1px solid var(--color-border);}
.ns-input {
  background: none; border: none; outline: none; width: 100%;
  font-size: var(--text-sm); color: var(--color-text);}
.ns-input::placeholder { color: var(--color-text-faint); font-size: var(--text-sm);}
.ns-btn { border-radius: 0; height: 100%; padding: 0 var(--space-5); flex-shrink: 0;}

/* Results layout: 3-column */
.results-layout {
  display: grid;
  grid-template-columns: 260px 1fr 380px;
  grid-template-rows: 1fr;
  height: calc(100vh - 65px);
  overflow: hidden;}

/* FILTER PANEL */
.filter-panel {
  overflow-y: auto;
  padding: var(--space-6);
  border-right: 1px solid var(--color-border);
  background: var(--color-surface);
  display: flex; flex-direction: column; gap: var(--space-1);}
.filter-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: var(--space-4);}
.filter-title { font-size: var(--text-base); font-weight: 700;}
.filter-clear { font-size: var(--text-xs); color: var(--color-primary-text); font-weight: 600;}
.filter-clear:hover { text-decoration: underline;}
.filter-section { margin-bottom: var(--space-5);}
.filter-section-title {
  font-size: var(--text-xs); font-weight: 700;
  letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);}
.filter-pills { display: flex; flex-wrap: wrap; gap: var(--space-2);}
.filter-pill {
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--text-xs); font-weight: 500;
  border: none;
  color: var(--color-text-muted); background: var(--color-field);}
.filter-pill:hover { border-color: var(--color-primary-text); color: var(--color-primary-text);}
.filter-pill.active { background: var(--color-primary-light); border-color: var(--color-primary-text); color: var(--color-primary-text); font-weight: 600;}
.filter-checks { display: flex; flex-direction: column; gap: var(--space-3);}
.filter-check {
  display: flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-sm); color: var(--color-text); cursor: pointer;}
.filter-check input { accent-color: var(--color-primary-text); width: 15px; height: 15px;}

/* RESULTS LIST */
.results-list {
  overflow-y: auto;
  padding: var(--space-5) var(--space-6);
  background: var(--color-bg);}
.results-header {
  display: flex; justify-content: space-between; align-items: flex-start;
  margin-bottom: var(--space-6); gap: var(--space-4);}
.results-count { font-size: var(--text-base); font-weight: 400; color: var(--color-text);}
.results-count strong { font-weight: 800;}
.results-sub { font-size: var(--text-xs); color: var(--color-text-muted); margin-top: var(--space-1);}
.results-sort { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0;}
.sort-label { font-size: var(--text-sm); color: var(--color-text-muted);}
.sort-select {
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-md);
  border: none; 
  font-size: var(--text-sm); color: var(--color-text); cursor: pointer; background: var(--color-field);}
.results-items { display: flex; flex-direction: column; gap: var(--space-5);}

/* Result Item */
.result-item {
  background: var(--color-surface);
  border: none;
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  display: flex; flex-direction: column; gap: var(--space-4);
  position: relative;
  transition: all var(--transition-interactive); box-shadow: var(--shadow-sm);}
.result-item:hover {
  border-color: var(--color-primary-mid);
  box-shadow: var(--shadow-md);}
.result-item.featured { border-color: var(--color-primary-mid);}
.featured-badge {
  display: inline-flex; align-items: center; gap: var(--space-1);
  font-size: var(--text-xs); font-weight: 700;
  color: var(--color-accent);
  background: var(--color-accent-light);
  padding: 3px var(--space-3); border-radius: var(--radius-full);
  width: fit-content;}
.result-main { display: flex; gap: var(--space-4); align-items: flex-start;}
.result-avatar {
  width: 44px; height: 44px; border-radius: var(--radius-lg);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: var(--text-lg); flex-shrink: 0;}
.result-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-2);}
.result-name-row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;}
.result-name { font-size: var(--text-base); font-weight: 700; color: var(--color-text);}
.result-certs { display: flex; gap: var(--space-2);}
.cert-badge {
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs); font-weight: 700;
  background: var(--color-primary-light); color: var(--color-primary-text);
  border: 1px solid var(--color-primary-mid);}
.cert-badge.pcab { background: var(--color-primary-light); color: var(--color-primary-text); border-color: var(--color-primary-mid);}
.result-rating-row { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; font-size: var(--text-sm);}
.stars-inline { color: var(--color-accent); letter-spacing: 1px;}
.dot-sep { color: var(--color-text-faint);}
.result-tags { display: flex; flex-wrap: wrap; gap: var(--space-2);}
.result-snippet { font-size: var(--text-xs); color: var(--color-text-muted); line-height: 1.6; font-style: italic; margin-top: var(--space-1);}
.result-aside {
  display: flex; flex-direction: column; gap: var(--space-1);
  padding-top: var(--space-3); border-top: 1px solid var(--color-divider);
  font-size: var(--text-xs); color: var(--color-text-muted);}
.result-address, .result-phone, .result-hours { font-size: var(--text-xs); color: var(--color-text-muted);}
.result-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2);}
.result-actions .btn-primary, .result-actions .btn-ghost { padding: var(--space-2) var(--space-4); font-size: var(--text-xs); white-space: nowrap;}

/* Pagination */
.pagination {
  display: flex; justify-content: center; align-items: center; gap: var(--space-2);
  margin-top: var(--space-8); padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);}
.page-btn {
  width: 36px; height: 36px;
  border-radius: var(--radius-md);
  border: none;
  font-size: var(--text-sm); font-weight: 600;
  color: var(--color-text-muted); background: var(--color-field);}
.page-btn:hover, .page-btn.active { background: var(--color-primary); border-color: var(--color-primary-text); color: var(--color-text-inverse);}
.page-ellipsis { font-size: var(--text-sm); color: var(--color-text-faint);}
.page-next { padding: 0 var(--space-4); height: 36px; border-radius: var(--radius-md); border: none; font-size: var(--text-sm); font-weight: 600; color: var(--color-text-muted); background: var(--color-field);}
.page-next:hover { background: var(--color-surface); color: var(--color-text);}

/* MAP PANEL */
.map-panel {
  position: relative;
  overflow: hidden;
  border-left: 1px solid var(--color-border);}
.map-container { width: 100%; height: 100%; position: relative; overflow: hidden;}
/* Both the (empty) real-map div and the placeholder mock overlay the panel, so the
   empty #map can't push the mock out of the clipped container (blank right pane). */
.map-container > #map { position: absolute; inset: 0;}
.map-mock {
  background: var(--color-surface-2);
  position: absolute; inset: 0; overflow: hidden;}
.map-bg {
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(0deg, transparent, transparent 59px, var(--color-divider) 59px, var(--color-divider) 60px),
    repeating-linear-gradient(90deg, transparent, transparent 59px, var(--color-divider) 59px, var(--color-divider) 60px);
  opacity: 0.4;}
.map-streets { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.7;}

/* Map Pins */
.map-pin {
  position: absolute; transform: translate(-50%, -100%);
  display: flex; flex-direction: column; align-items: center;
  cursor: pointer;
  transition: transform var(--transition-fast);
  z-index: 2;}
.map-pin:hover { transform: translate(-50%, -110%); z-index: 10;}
.pin-bubble {
  background: var(--color-surface);
  border: 2px solid var(--color-primary);
  color: var(--color-text);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--text-xs); font-weight: 700;
  display: flex; align-items: center; gap: 3px;
  box-shadow: var(--shadow-md);
  white-space: nowrap;}
.pin-bubble.primary { background: var(--color-primary); color: var(--color-text-inverse); border-color: var(--color-primary-text);}
.pin-tail {
  width: 0; height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid var(--color-primary);}
.map-pin.active .pin-bubble { background: var(--color-primary); color: var(--color-text-inverse);}

/* User dot */
.user-pin {
  position: absolute; transform: translate(-50%, -50%);
  z-index: 3;}
.user-dot {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--color-primary);
  border: 2.5px solid white;
  box-shadow: 0 0 0 3px oklch(from var(--color-primary) l c h / 0.25);}
.user-pulse {
  position: absolute; inset: -10px;
  border-radius: 50%;
  background: oklch(from var(--color-primary) l c h / 0.15);
  animation: pulse-map 2s ease-out infinite;}
@keyframes pulse-map {
  0% { transform: scale(0.5); opacity: 1;}
  100% { transform: scale(1.5); opacity: 0;}
}

/* Map controls */
.map-controls {
  position: absolute; right: var(--space-4); top: var(--space-4);
  display: flex; flex-direction: column; gap: 2px;
  z-index: 5;}
.map-ctrl {
  width: 32px; height: 32px;
  background: var(--color-bg);
  border: none;
  border-radius: var(--radius-md);
  font-size: var(--text-base); font-weight: 700;
  color: var(--color-text);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-sm);}
.map-ctrl:hover { background: var(--color-surface); border-color: var(--color-primary-text);}
.map-view-toggle {
  position: absolute; bottom: var(--space-4); left: 50%;
  transform: translateX(-50%);
  display: flex;
  background: var(--color-bg);
  border: none;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  z-index: 5;}
.map-toggle-btn {
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-xs); font-weight: 600;
  color: var(--color-text-muted);}
.map-toggle-btn.active { background: var(--color-primary); color: var(--color-text-inverse);}
.map-toggle-btn:hover:not(.active) { background: var(--color-surface);}

/* Mobile filter bar (injected by main.js) */
.mobile-filter-bar { display: none; margin-bottom: var(--space-4);}
.mobile-filter-btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  border: none;
  font-size: var(--text-sm); font-weight: 600;
  color: var(--color-text);
  background: var(--color-surface); box-shadow: var(--shadow-sm);}
.mobile-filter-btn[aria-expanded='true'] {
  background: var(--color-primary-light);
  border-color: var(--color-primary-text);
  color: var(--color-primary-text);}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1100px) {
  .results-layout { grid-template-columns: 220px 1fr 300px;}
}
@media (max-width: 900px) {
  .results-layout { grid-template-columns: 1fr; grid-template-rows: auto; height: auto;}
  .filter-panel { display: none;}
  .filter-panel.open { display: flex; border-right: none; border-bottom: 1px solid var(--color-border);}
  .mobile-filter-bar { display: block;}
  .map-panel { height: 300px; border-left: none; border-top: 1px solid var(--color-border);}
  .results-list { overflow-y: visible;}
  .navbar-search { display: none;}
}

/* Facet counts on filter checkboxes */
.filter-check { justify-content: flex-start;}
.facet-count { margin-left: auto; font-size: var(--text-xs); color: var(--color-text-faint); font-variant-numeric: tabular-nums;}
.result-actions a { text-decoration: none;}

/* Rate mode: guidance banner + clickable pharmacy name */
.rate-banner {
  background: var(--color-accent-light); color: var(--color-text);
  border-radius: var(--radius-lg); padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-5); font-size: var(--text-sm); line-height: 1.6;}
.result-name-link { color: var(--color-primary-text); text-decoration: none;}
.result-name-link:hover { text-decoration: underline;}

.facet-note { font-size: var(--text-xs); color: var(--color-text-faint); margin-top: var(--space-2); line-height: 1.5;}

/* Search bar on top of the search (results) page */
.results-search { background: var(--color-surface-2); padding: var(--space-4) var(--space-6);}
.results-search-inner { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap;}
.rs-field { flex: 1; min-width: 200px; display: flex; align-items: center; gap: var(--space-2); background: var(--color-surface); border-radius: var(--radius-md); padding: 0 var(--space-3); box-shadow: var(--shadow-xs);}
.rs-field svg { color: var(--color-text-faint); flex-shrink: 0;}
.rs-field input { flex: 1; min-width: 0; font: inherit; color: var(--color-text); background: transparent; border: none; outline: none; padding: var(--space-3) 0;}
.rs-field input::placeholder { color: var(--color-text-faint); font-size: var(--text-sm);}
.rs-field input:focus-visible, .filter-statesearch:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px;}
@media (min-width: 901px) { .results-search-inner { flex-wrap: nowrap;} .rs-field { min-width: 0;} }
#rs-go { font-size: var(--text-sm); padding: var(--space-3) var(--space-7);}
/* Persistent toolbar (count + view toggle + sort) — lives ABOVE the grid so the
   view toggle never disappears when Map view hides the results list. */
.results-toolbar {
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-4);
  min-height: 56px; padding: var(--space-3) var(--space-6); flex-wrap: nowrap;
  background: var(--color-surface); border-bottom: 1px solid var(--color-border);
}
/* Left meta can shrink/truncate; it must never push the controls around. */
.results-toolbar .results-meta { flex: 1 1 auto; min-width: 0; }
.results-toolbar .results-count,
.results-toolbar .results-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Control group is pinned to the right, on one line, and never wraps or moves. */
.results-toolbar .results-sort { flex: 0 0 auto; flex-wrap: nowrap; white-space: nowrap; }

/* the layout sits below the navbar (65px) + search bar (~72px) + toolbar (~57px) */
.results-layout { height: calc(100vh - 194px);}
@media (max-width: 900px) {
  .results-layout { height: auto;}
  .results-search-inner { flex-wrap: wrap;} #rs-go { width: 100%;}
  /* Keep the toolbar on one line; free up room by dropping the sub-line + "Sort:" label. */
  .results-toolbar { flex-wrap: nowrap; gap: var(--space-2); padding: var(--space-3) var(--space-4);}
  .results-toolbar .results-sub { display: none;}
  .results-toolbar .sort-label { display: none;}
}
/* Phones: the count + controls can't share one line without truncating the count
   to "6…". Stack them — count on its own row, controls on one line below. This is a
   static layout, so the controls still never shift when toggling views. */
@media (max-width: 560px) {
  .results-toolbar { flex-wrap: wrap; row-gap: var(--space-2);}
  .results-toolbar .results-meta { flex: 1 1 100%;}
  .results-toolbar .results-count { white-space: normal; overflow: visible; text-overflow: clip;}
  .results-toolbar .results-sort { flex: 1 1 100%; justify-content: flex-start;}
}
.filter-pill-wide { width: 100%; margin-bottom: var(--space-1);}

/* Collapsible filter sections (details/summary) */
details.filter-section { margin-bottom: var(--space-4);}
summary.filter-section-title { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; user-select: none; margin-bottom: var(--space-3);}
summary.filter-section-title::-webkit-details-marker { display: none;}
summary.filter-section-title::after { content: ''; width: 8px; height: 8px; border-right: 2px solid var(--color-text-faint); border-bottom: 2px solid var(--color-text-faint); transform: rotate(45deg); transition: transform var(--transition-fast); margin-bottom: 3px;}
details[open] > summary.filter-section-title::after { transform: rotate(-135deg); margin-bottom: -3px;}

/* Scrollable multi-select state list + its search box */
.filter-statesearch { width: 100%; font: inherit; font-size: var(--text-sm); color: var(--color-text); background: var(--color-field); border: none; border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); outline: none; margin-bottom: var(--space-3);}
.filter-statesearch::placeholder { color: var(--color-text-faint);}
.filter-checks-scroll { max-height: 240px; overflow-y: auto; padding-right: var(--space-2);}

/* View toggle: List / Hybrid / Map */
.view-toggle { display: inline-flex; background: var(--color-field); border-radius: var(--radius-md); padding: 3px; flex-shrink: 0;}
.view-toggle button { font-size: var(--text-sm); font-weight: 600; color: var(--color-text-muted); padding: var(--space-2) var(--space-4); border-radius: var(--radius-sm); border: none; background: none; cursor: pointer;}
.view-toggle button.active { background: var(--color-surface); color: var(--color-text); box-shadow: var(--shadow-xs);}
.results-layout[data-view="list"] .map-panel,
.results-layout[data-view="map"] .results-list { display: none;}
.results-layout[data-view="list"], .results-layout[data-view="map"] { grid-template-columns: 260px 1fr;}
@media (max-width: 1100px) {
  .results-layout[data-view="list"], .results-layout[data-view="map"] { grid-template-columns: 220px 1fr;}
}
@media (max-width: 900px) { .view-toggle button { padding: var(--space-2) var(--space-3);} }

/* Filter hint (honest placeholder copy for not-yet-live controls) */
.filter-hint { font-size: var(--text-xs); color: var(--color-text-subtle); margin-top: var(--space-2); line-height: 1.5; }
/* Decorative (aria-hidden) map placeholder controls are not interactive */
.map-controls[aria-hidden] .map-ctrl, .map-view-toggle[aria-hidden] .map-toggle-btn { cursor: default; }

/* ── Drug-fallback note + constructive empty state with patient lead capture ── */
.results-note { background: var(--color-primary-light); border: 1px solid var(--color-primary-mid);
  color: var(--color-text); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm); line-height: 1.5; margin-bottom: var(--space-4); }
.results-empty { text-align: center; max-width: 560px; margin: 0 auto; padding: var(--space-8) var(--space-4); }
.re-icon { font-size: var(--text-3xl); margin-bottom: var(--space-2); }
.re-title { font-size: var(--text-lg); font-weight: 800; color: var(--color-text); margin: 0 0 var(--space-2); }
.re-body { font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.6; margin: 0 0 var(--space-4); }
.re-actions { display: flex; gap: var(--space-2); justify-content: center; flex-wrap: wrap; margin-bottom: var(--space-6); }
.re-lead { text-align: left; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-5); }
.re-lead-title { font-weight: 700; color: var(--color-text); margin: 0 0 var(--space-3); font-size: var(--text-sm); }
.re-lead-row { display: flex; gap: var(--space-2); margin-bottom: var(--space-2); }
.re-lead input { width: 100%; box-sizing: border-box; padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-field);
  color: var(--color-text); font-size: var(--text-base); }
.re-lead input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-light); }
.re-lead .btn-primary-lg { width: 100%; margin-top: var(--space-2); justify-content: center; }
.re-lead-note { margin: var(--space-2) 0 0; font-size: var(--text-sm); font-weight: 600; }
.re-lead-note.ok { color: var(--color-primary-text); }
.re-lead-note.err { color: var(--color-error); }
.re-lead-fine { font-size: var(--text-xs); color: var(--color-text-subtle); margin: var(--space-3) 0 0; line-height: 1.5; }
.re-lead-fine a { color: var(--color-primary-text); }
@media (max-width: 480px) { .re-lead-row { flex-direction: column; } }

/* Honest "map coming soon" placeholder (replaces the decorative mock map) */
.map-soon { position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; gap: var(--space-2);
  padding: var(--space-8); background: var(--color-surface-offset); }
.map-soon-icon { color: var(--color-primary); opacity: 0.7; }
.map-soon-title { font-weight: 700; color: var(--color-text); margin: 0; }
.map-soon-body { font-size: var(--text-sm); color: var(--color-text-muted); max-width: 34ch; line-height: 1.5; margin: 0; }

/* Sponsored banner on the results page */
.results-ad-band { padding: var(--space-4) var(--space-6) 0; }

/* Map pin-count badge (so the map never silently hides results) */
.map-count { position: absolute; left: var(--space-3); bottom: var(--space-3); z-index: 500;
  background: var(--color-surface); color: var(--color-text); font-size: var(--text-xs); font-weight: 600;
  padding: var(--space-1) var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-full);
  box-shadow: var(--shadow-sm); }

/* ============================================================
   LAYOUT CORRECTNESS  (added — results page sizing/responsive)
   ============================================================ */

/* 1. Responsive collapse. Below 900px the filter + map columns are hidden, so
   the list is the only grid child. The [data-view] attribute selectors below
   out-specify the generic `.results-layout { 1fr }` mobile rule, which would
   otherwise strand the list in a 220px column (cards squashed to ~190px).
   Re-assert full width for every view at tablet/phone sizes. */
@media (max-width: 900px) {
  .results-layout,
  .results-layout[data-view="list"],
  .results-layout[data-view="map"] { grid-template-columns: 1fr; height: auto; }
}

/* 2. List view flows with the document. The sponsor band above the grid makes a
   fixed 100vh split overflow the viewport (double scrollbar, list pushed below
   the fold). Only Hybrid/Map keep the fixed map viewport; List scrolls the page
   and pins the filter rail while the results scroll past it. */
.results-layout { --nav-h: 74px; }   /* sticky rails must clear the fixed navbar */
.results-layout[data-view="list"] { height: auto; overflow: visible; }
.results-layout[data-view="list"] .results-list { overflow: visible; }
/* Line the filter rail's top up with the first result — same vertical padding as
   the list — so the two columns start on the same line, not a few px apart. */
.results-layout[data-view="list"] .filter-panel,
.results-layout[data-view="hybrid"] .filter-panel { padding-top: var(--space-5); }
@media (min-width: 901px) {
  .results-layout[data-view="list"] .filter-panel {
    position: sticky; top: calc(var(--nav-h) + var(--space-3)); align-self: start;
    max-height: calc(100vh - var(--nav-h) - var(--space-5)); overflow-y: auto;
  }
}

/* 3. Compact the sponsor band so results stay near the top of the page. The
   default infeed creative is a ~320px billboard; trim its padding and gaps. */
.results-ad-band .ad-peakera.ad-infeed { padding: var(--space-5) var(--space-6); gap: var(--space-5); }
.results-ad-band .ad-infeed .ad-peakera-h { font-size: var(--text-base); margin-bottom: var(--space-1); }
.results-ad-band .ad-peakera-p { margin-bottom: var(--space-2); }
.results-ad-band .ad-peakera-feat { gap: var(--space-1); margin-bottom: 0; }
.results-ad-band .ad-peakera-ruo { margin-top: var(--space-2); }

/* 4. On phones the stacked sponsor creative runs ~500px before the first result.
   Drop the feature checklist and clamp the body to keep it near ~300px; the
   headline, CTA and the (legally required) research-use-only line stay. */
@media (max-width: 640px) {
  .results-ad-band .ad-infeed .ad-peakera-feat { display: none; }
  .results-ad-band .ad-infeed .ad-peakera-p {
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  }
}

/* 5. Hybrid view (list + map) also flows with the page so the sponsor band can
   sit above it without stealing map height. The map (and filter rail) are sticky,
   staying in view while the results list scrolls past — the Yelp pattern. */
.results-layout[data-view="hybrid"] { height: auto; overflow: visible; }
.results-layout[data-view="hybrid"] .results-list { overflow: visible; }
@media (min-width: 901px) {
  .results-layout[data-view="hybrid"] .filter-panel,
  .results-layout[data-view="hybrid"] .map-panel {
    position: sticky; top: calc(var(--nav-h) + var(--space-3)); align-self: start;
  }
  .results-layout[data-view="hybrid"] .filter-panel { max-height: calc(100vh - var(--nav-h) - var(--space-5)); overflow-y: auto; }
  .results-layout[data-view="hybrid"] .map-panel { height: calc(100vh - var(--nav-h) - var(--space-5)); }
}