/* ============================================================
   Wunderlust — filter bar, result cards, detail sheet,
   monetization slots
   ============================================================ */

/* --- Filter bar ------------------------------------------- */
.filters {
  position: sticky; top: 66px; z-index: 15;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(180%) blur(20px);
  border-block: 1px solid var(--line);
  padding-block: var(--gap-3);
}
.filters-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap-2); }

/* One height across every control in the row — search, sort, layout
   toggle, Filters and the progress pill — so nothing reads as thinner
   than its neighbour. box-sizing keeps borders from adding to it. */
.filters-row > .search,
.filters-row > .sel,
.filters-row > .seg,
.filters-row > .filters-btn,
.filters-row > .progress-host > .progress-pill {
  box-sizing: border-box;
  min-height: 38px;
}

/* A class that sets display beats the UA stylesheet's
   [hidden] { display: none }, so the more-filters panel would render
   despite carrying the attribute. Restore the attribute's meaning.
   The bar itself takes the attribute too, on the Trips tab. */
.filters-row[hidden], .filters[hidden] { display: none; }

.search {
  display: flex; align-items: center; gap: 8px;
  flex: 1 1 220px; min-width: 190px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-pill); padding: 7px 14px;
}
.search .ms { font-size: 18px; color: var(--text-3); }
.search input {
  flex: 1; min-width: 0; border: 0; background: transparent;
  color: var(--text); font: var(--fs-body) var(--font-ui);
}
.search input::placeholder { color: var(--text-3); }
.search input:focus { outline: none; }

/* Filter chips are .p (assets/pills.css); this only adds the
   filter-bar-specific concern the primitive should not know about. */
.chip { font-size: var(--fs-sm); }

/* The one control that stands in for 21 chips, so it reads as a
   control rather than a chip, and carries its own count. */
.filters-btn { font-weight: 600; }
.fcount {
  min-width: 18px; padding: 0 5px; border-radius: var(--r-pill);
  background: var(--accent-fill); color: var(--on-accent);
  font-size: var(--fs-xs); font-variant-numeric: tabular-nums; text-align: center;
}
.fcount[hidden] { display: none; }


.sel {
  appearance: none;
  padding: 7px 30px 7px 13px;
  background: var(--surface) no-repeat right 11px center;
  background-image: linear-gradient(45deg, transparent 49%, var(--text-3) 50%), linear-gradient(-45deg, transparent 49%, var(--text-3) 50%);
  background-size: 5px 5px, 5px 5px;
  background-position: right 15px center, right 11px center;
  color: var(--text); border: 1px solid var(--line);
  border-radius: var(--r-pill); font: var(--fs-sm) var(--font-ui);
  cursor: pointer;
}

/* One line under the bar: the total, then every applied filter as a
   token you can drop without reopening the menu. */
.tokens {
  margin-top: var(--gap-2);
  font-size: var(--fs-sm); color: var(--text-3);
}
.token-n { font-variant-numeric: tabular-nums; white-space: nowrap; }
.token-list { display: contents; }
.token {
  background: var(--surface-2); border-color: var(--line);
  font-size: var(--fs-xs); gap: 5px;
}
.token .ms { font-size: 14px; color: var(--text-3); }
.token:hover { background: var(--accent-fill); color: var(--on-accent); border-color: transparent; }
.token:hover .ms { color: inherit; }
.link-btn {
  background: none; border: 0; padding: 0;
  color: var(--accent); font-size: var(--fs-sm); cursor: pointer;
  text-decoration: underline; text-underline-offset: 2px;
}

/* --- Results ---------------------------------------------- */
.results { padding-block: var(--gap-4) var(--gap-7); }

.grid {
  display: grid; gap: var(--gap-4);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 288px), 1fr));
}

.card {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: var(--gap-4);
  text-align: left; cursor: pointer;
  box-shadow: var(--shadow-1);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
  /* Reserve the full sticky stack (topbar 96px + filter bar) above, and
     the fixed sitebar below, so scrolled-in cards clear both. */
  scroll-margin-top: 162px;
  scroll-margin-bottom: 96px;
}
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }

.card-top { display: flex; align-items: flex-start; gap: var(--gap-3); }
.card-glyph {
  flex: 0 0 auto; width: 40px; height: 40px;
  border-radius: 12px; display: grid; place-items: center; color: #fff;
}
.card-glyph .ms { font-size: 22px; }
.card-glyph .glyph-svg { width: 24px; height: 24px; fill: #fff; }

.card-title { font: 600 var(--fs-h3)/1.3 var(--font-display); letter-spacing: -.012em; }
.card-where { font-size: var(--fs-sm); color: var(--text-3); margin-top: 1px; }

/* .fav floats absolutely over the top-right corner; a long title has
   no way to know that and runs its text straight under the heart.
   Reserve the button's own footprint (32px + the card's inline
   padding it sits inside) as padding on the title column, so the
   text wraps clear of it instead of colliding. */
.card-top > div { flex: 1 1 auto; min-width: 0; padding-right: 36px; }

.fav {
  position: absolute; top: 12px; right: 12px;
  width: 32px; height: 32px; padding: 0;
  display: grid; place-items: center;
  background: transparent; border: 0; border-radius: var(--r-pill);
  color: var(--text-3); cursor: pointer;
  /* Its own scroll target, so it needs its own clearance — the
     card's scroll-margin does not cover a descendant that gets
     scrolled into view on its own (tab focus, for one). */
  scroll-margin-top: 122px;
}
.fav:hover { background: var(--surface-2); color: var(--text-2); }
.fav[aria-pressed="true"] { color: var(--accent); }
/* Same UA-button font trap as .icon-btn — size the glyph explicitly. */
.fav .ms { font-size: 21px; }
.fav[aria-pressed="true"] .ms { font-variation-settings: "FILL" 1; }

.card-blurb {
  margin: var(--gap-3) 0 0;
  font-size: var(--fs-sm); color: var(--text-2);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

.card-foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap-2);
  margin-top: auto; padding-top: var(--gap-3);
  border-top: 1px solid var(--line);
  font-size: var(--fs-xs); color: var(--text-3);
}
/* margin-top:auto anchors the pill row + separator to the card bottom (feet align across a row); foot badges are .p .p-sm .p-static (pills.css). */

/* --- Sponsored (dormant until the flag is flipped) -------- */
.card[data-sponsored="true"] { border-color: color-mix(in srgb, var(--butter) 70%, var(--line)); }
.sponsor-tag { align-self: flex-start; margin-bottom: var(--gap-2); color: var(--text-3); }

.promo {
  grid-column: 1 / -1;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap-4);
  padding: var(--gap-5);
  border: 1px solid color-mix(in srgb, var(--blossom) 34%, var(--line));
  border-radius: var(--r-lg);
  background: linear-gradient(120deg,
    color-mix(in srgb, var(--blossom) 10%, var(--surface)),
    var(--surface) 62%);
}
.promo h3 { font: 600 var(--fs-h3) var(--font-display); }
.promo p { margin: 4px 0 0; font-size: var(--fs-sm); color: var(--text-2); max-width: 52ch; }
.btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 18px; border: 0; border-radius: var(--r-pill);
  background: var(--accent-fill); color: var(--on-accent);
  font: 600 var(--fs-sm) var(--font-ui); cursor: pointer; text-decoration: none;
  box-shadow: var(--shadow-1);
  transition: transform .16s var(--ease), box-shadow .16s var(--ease);
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-2); }
.btn-ghost { background: transparent; color: var(--text); border: 1px solid var(--line); box-shadow: none; }

.empty { padding: var(--gap-7) var(--gap-4); text-align: center; color: var(--text-3); }
.empty .ms { font-size: 40px; opacity: .45; }
.empty h3 { margin-top: var(--gap-3); font: 600 var(--fs-h3) var(--font-display); color: var(--text); }