/* bookbask — search / results page.
   Assumes css/bookbask.css and css/home.css (nav + footer) are loaded.

   Geometry here is taken from the owner's reference results screen: 1140px
   column, 232px rail beside a 1fr list at 32px, and listing rows that are
   bordered cards (264px photo, 208px tall) rather than hairline-separated
   rows. The card border is the one place this page departs from the "hairlines
   not boxes" default -- on a results list the card edge is what separates one
   venue from the next when the photos are all different colors. */

.res { padding: 24px 24px 64px; }

/* ---------- crumbs, title, sort ---------- */

.res-crumbs {
  font: var(--bb-w-regular) 12px/1.4 var(--bb-font);
  color: var(--bb-ink-soft);
  margin-bottom: 18px;
}
.res-crumbs a { color: var(--bb-primary); }

.res-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}

.res-title {
  font: var(--bb-w-semibold) 26.5px/1.15 var(--bb-font);
  letter-spacing: -0.8px;
  margin: 0;
}

.res-head__count {
  font: var(--bb-w-regular) 13px/1.4 var(--bb-font);
  color: var(--bb-ink-soft);
}

.res-sort {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: var(--bb-w-regular) 12.5px/1.4 var(--bb-font);
  color: var(--bb-ink);
  white-space: nowrap;
}
/* Native select stripped back to the reference's "Traveler favorites ▾" — a
   real select, so it stays keyboard-operable and needs no popup of our own. */
.res-sort select {
  font: var(--bb-w-semibold) 12.5px/1.4 var(--bb-font);
  color: var(--bb-ink);
  background: transparent;
  border: 0;
  padding: 2px 18px 2px 2px;
  margin: 0;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%231C1A17' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 2px center;
  background-size: 9px 5px;
}
.res-sort select:focus-visible { outline: 2px solid var(--bb-primary); outline-offset: 2px; }

/* ---------- area chips ----------
   Built from the venues actually loaded, never a hardcoded neighbourhood list:
   the areas differ per city and the product is not one city. */

.res-areas {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}

.res-area {
  background: var(--bb-surface);
  border: 1px solid var(--bb-hairline);
  border-radius: var(--bb-r-chip);
  padding: 8px 16px;
  font: var(--bb-w-regular) 12px/1.3 var(--bb-font);
  color: var(--bb-ink);
  cursor: pointer;
  transition: border-color .15s ease-out;
}
.res-area:hover { border-color: var(--bb-primary); }
.res-area[aria-pressed="true"] {
  background: var(--bb-primary);
  border-color: var(--bb-primary);
  color: var(--bb-on-navy-ink);
  font-weight: var(--bb-w-semibold);
}

/* ---------- grid + filter rail ---------- */

.res-grid {
  display: grid;
  grid-template-columns: 232px 1fr;
  gap: 32px;
  align-items: start;
}

.res-rail {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-top: 7px;
  position: sticky;
  top: 24px;
}

.res-filter + .res-filter {
  border-top: 1px solid var(--bb-hairline);
  padding-top: 22px;
}

.res-filter__h {
  font: var(--bb-w-semibold) 12.5px/1.3 var(--bb-font);
  margin: 0 0 10px;
}

.res-opts { display: flex; flex-direction: column; gap: 8px; }

.res-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  font: var(--bb-w-regular) 12.5px/1.4 var(--bb-font);
  cursor: pointer;
}
.res-opt input {
  accent-color: var(--bb-primary);
  width: 14px;
  height: 14px;
  margin: 0;
  flex: none;
}

.res-prices { display: flex; gap: 8px; }
.res-price {
  border: 1px solid var(--bb-hairline);
  border-radius: var(--bb-r-chip);
  background: var(--bb-surface);
  color: var(--bb-ink);
  padding: 7px 16px;
  font: var(--bb-w-regular) 12.5px/1.3 var(--bb-font);
  cursor: pointer;
}
.res-price[aria-pressed="true"] {
  background: var(--bb-primary);
  border-color: var(--bb-primary);
  color: var(--bb-on-navy-ink);
  font-weight: var(--bb-w-semibold);
}

/* Green words go in the ink green, not the fill green — --bb-trust at 12.5px
   on paper is under AA. */
.res-opt--trust span { color: var(--bb-trust-ink); font-weight: var(--bb-w-semibold); }

.res-clear { width: 100%; }

/* ---------- the list ---------- */

.res-list { display: flex; flex-direction: column; gap: 18px; }

/* The reference results screen carries no search field — it arrives from the
   home hero. This page is also its own URL with ?q=, so the query has to be
   visible and editable here or a shared link is uneditable. Same pill as the
   hero, quieter. */
.res-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--bb-surface);
  border: 1px solid var(--bb-hairline);
  border-radius: var(--bb-r-field);
  padding: 4px 22px;
}
.res-bar input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  font: var(--bb-w-regular) 13.5px/1.4 var(--bb-font);
  color: var(--bb-ink);
  padding: 13px 0;
}

.res-card {
  position: relative;
  display: grid;
  grid-template-columns: var(--bb-row-photo) 1fr;
  background: var(--bb-surface);
  border: 1px solid var(--bb-hairline);
  border-radius: var(--bb-r-card);
  overflow: hidden;
  transition: box-shadow .18s ease-out;
}
.res-card:hover { box-shadow: var(--bb-shadow-hover); }

.res-card__shot {
  position: relative;
  min-height: 208px;
  background: var(--bb-tint-blue);
}
.res-card__shot img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.res-card__body {
  padding: 18px 22px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.res-card__top {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.res-card__name { font: var(--bb-w-semibold) 16px/1.25 var(--bb-font); margin: 0; }
.res-card__name a { color: var(--bb-ink); }
.res-card__name a:hover { color: var(--bb-primary); }

/* Stretched link: the name anchor covers the whole card, so anywhere on the
   row opens the venue page. Footer links sit above it (z-index below) or the
   time chips would lose their own ?t= deep links. */
.res-card__name a::after { content: ''; position: absolute; inset: 0; }
.res-card__foot a { position: relative; z-index: 1; }

/* The shared .bb-rating, with nothing added: the export sets the results row
   and the grid card to the same component, and the only reason this class
   still exists is so search.js has a hook if the row ever needs one. */
.res-rating { flex-wrap: wrap; }

/* The pinned quote is a review title — free text up to 150 characters (022's
   reviews_title_bounded), owner-chosen, and the search row is the widest
   surface it lands on. Capped and clamped like the other two places the same
   quote renders: 62ch is .res-card__blurb's measure right below it, and the
   two-line clamp is .home-card__quote's and .venue-relcard__quote's. Short
   quotes are untouched — a max-width reserves nothing and the clamp only bites
   at three lines. */
.res-card__quote {
  font: italic var(--bb-w-regular) 12.5px/1.5 var(--bb-font);
  color: var(--bb-ink);
  margin: 0;
  max-width: 62ch;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.res-card__quote span { color: var(--bb-ink-soft); font-style: normal; }

.res-card__blurb {
  font: var(--bb-w-regular) 12.5px/1.55 var(--bb-font);
  color: var(--bb-ink);
  margin: 2px 0 0;
  max-width: 62ch;
}

.res-card__svc { font: var(--bb-w-regular) 11.5px/1.45 var(--bb-font); color: var(--bb-ink-soft); }
.res-card__svc > .res-card__dist:not(:first-child):not([hidden])::before { content: " · "; }

.res-card__foot {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 9px;
}
.res-card__today { font: var(--bb-w-regular) 11.5px/1.4 var(--bb-font); color: var(--bb-ink-soft); }
.res-card__times { display: flex; gap: 8px; flex-wrap: wrap; }
/* The chip's own padding is the export's (6px/13px); nothing to add here. */

.res-card__price {
  margin-left: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font: var(--bb-w-regular) 13.5px/1.3 var(--bb-font);
  font-variant-numeric: tabular-nums;
}
.res-card__price b { font-weight: var(--bb-w-semibold); font-size: 15px; }
.res-card__price small { font-size: 11.5px; color: var(--bb-ink-soft); }
.res-card__fx { font-size: 11px; color: var(--bb-ink-soft); }

/* ---------- tip panel, pagination, empty ---------- */

/* Paper with a hairline, not a tinted fill. The export writes the local tip on
   the same surface as the rows it sits among, with only the navy dot and the
   navy text marking it as an aside — a filled blue panel in the middle of a
   results list reads as an ad slot. */
.res-tip {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--bb-surface);
  border: 1px solid var(--bb-hairline);
  border-radius: var(--bb-r-card);
  padding: 18px 24px;
}
.res-tip__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--bb-primary);
  flex: none;
}
.res-tip__text {
  font: var(--bb-w-regular) 12.5px/1.55 var(--bb-font);
  color: var(--bb-primary);
  margin: 0;
}
.res-tip__text b { font-weight: var(--bb-w-semibold); }

.res-more { text-align: center; padding-top: 8px; }

.res-empty {
  font: var(--bb-w-regular) 13.5px/1.6 var(--bb-font);
  color: var(--bb-ink-soft);
  padding: 45px 0;
  max-width: 46ch;
}

/* ---------- responsive ---------- */

@media (max-width: 900px) {
  .res-grid { grid-template-columns: 1fr; gap: 26px; }
  .res-rail { position: static; padding-top: 0; }
  .res-title { font-size: 23.5px; }
  .res-sort { margin-left: 0; }
}

@media (max-width: 620px) {
  .res-card { grid-template-columns: 1fr; }
  .res-card__shot { min-height: 190px; }
  .res-card__price { margin-left: 0; }
}