/* static/landing_2/css/search-page.css
   The landing_2 search results page (templates/landing_2/search.html): a hero with the search card
   beside the search title/headline (and destination photo on wide screens), then the result-group
   tiles. Each tile's date rows reuse .deal-row from deal-route.css and expand in place under the
   tile on mobile, or in the sticky right-hand .sr-detail column on desktop (js/search-page.js
   moves the open panel between the two). */

/* ===== Hero: search card | title + headline | destination photo ===== */
.sr-hero{ display:flex; flex-wrap:wrap; gap:20px; align-items:center; }
.sr-hero__form{ flex:1 1 340px; max-width:560px; }
.sr-hero__intro{ flex:1 1 300px; min-width:260px; }
.sr-hero__title{ margin:0 0 4px; font-size:32px; }
.sr-hero__sub{ margin:0 0 14px; color:var(--muted); }
.search-page__headline{ margin:0; font-size:22px; max-width:44ch; }

/* Destination photo carousel: third hero column on wide screens, full-width row when wrapped */
.sr-hero__media{
  flex:1 1 280px; max-width:560px;
  border-radius:var(--radius); border:1px solid var(--border); box-shadow:var(--shadow);
  overflow:hidden;
}

/* ===== Carousel media (hero + result tiles) - same chrome as the deal-tile carousels,
   driven by js/deal-tile.js (data-carousel on the parent, this element as the frame) ===== */
.sr-media{ position:relative; aspect-ratio:4/2; background:#000; overflow:hidden; }
.sr-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.sr-media .carousel__nav{
  position:absolute; right:8px; bottom:8px; z-index:4;
  display:flex; gap:10px; align-items:center; padding:4px 6px;
  background:rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.22); border-radius:10px;
  backdrop-filter:blur(2px);
}
.sr-media .carousel__nav[hidden]{ display:none; }
.sr-media .carousel__btn{
  appearance:none; border:none; background:transparent; color:#fff; font-size:24px; line-height:1;
  padding:2px 4px; cursor:pointer; font-weight:900;
  text-shadow:0 1px 2px rgba(0,0,0,.6);
}
.sr-media .carousel__btn:focus-visible{ outline:2px solid #fff; outline-offset:2px; }
.sr-media .carousel__dots{ position:absolute; left:50%; transform:translateX(-50%); bottom:6px; display:flex; gap:6px; z-index:3; }
.sr-media .carousel__dot{ width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.45); }
.sr-media .carousel__dot.is-active{ background:#fff; }

/* ===== Results: group tiles (left) + selected group's dates (right on desktop) ===== */
.sr-list .section__title{ margin:22px 0 10px; }
.sr-list .section__title:first-child{ margin-top:0; }
.sr-none{ color:var(--muted); margin:0; }

.sr-group{ margin:0 0 10px; }
/* A role=button div (the carousel arrows inside are real buttons), photo on top, info row below */
.sr-tile{
  width:100%; cursor:pointer; overflow:hidden; user-select:none;
  background:var(--panel); border:1px solid var(--border); border-radius:12px;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.sr-tile:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; }
.sr-tile__row{ display:flex; align-items:center; gap:12px; padding:14px 16px; }
.sr-tile:hover{ transform:translateY(-2px); box-shadow:var(--shadow); border-color:rgba(0,166,237,.5); }
.sr-tile.is-selected{
  border-color:var(--theme-yellow);
  /* ring doubles the border weight without shifting the layout */
  box-shadow:0 0 0 1px var(--theme-yellow), 0 12px 30px rgba(0,0,0,.16);
  transform:translateY(-2px);
}
.sr-tile__route{ font-weight:800; }
.sr-tile__price{
  margin-left:auto; font-weight:800; color:var(--brand);
  white-space:nowrap; font-variant-numeric:tabular-nums;
}
.sr-tile__chevron{ transition:transform .15s ease; }
.sr-tile[aria-expanded="true"] .sr-tile__chevron{ transform:rotate(180deg); }

.sr-panel{ margin:10px 0 2px; }
.sr-panel .deal-route__list{ margin-top:0; max-width:none; }

/* Stopover-count tag on the merged Multi-destination tiles */
.sr-tile__tag{
  flex-shrink:0; padding:2px 8px; border-radius:999px; white-space:nowrap;
  font-size:12px; font-weight:700; color:var(--muted);
  background:transparent; border:1px solid var(--border);
}

/* 1-stop/2-stop filter tags above the Multi-destination tiles (behaviour in js/search-page.js) */
.sr-filter{ display:flex; gap:8px; margin:0 0 10px; }
.sr-filter__tag{
  appearance:none; cursor:pointer; padding:4px 12px; border-radius:999px;
  font-size:13px; font-weight:700; color:var(--muted);
  background:var(--panel); border:1px solid var(--border);
  transition:border-color .15s ease, color .15s ease;
}
.sr-filter__tag:hover{ border-color:rgba(0,166,237,.5); }
.sr-filter__tag.is-active{ color:var(--brand); border-color:var(--brand); }

@media (min-width:901px){
  .sr-results{
    display:grid; grid-template-columns:minmax(0,2fr) minmax(0,3fr);
    column-gap:20px; align-items:start;
  }
  .sr-detail{ position:sticky; top:14px; max-height:calc(100vh - 28px); overflow:auto; }
  .sr-detail .sr-panel{ margin:0; }
  /* Selection state shows on the tile itself; dates open beside it, not below */
  .sr-tile__chevron{ display:none; }
}

/* ===== No results / footnotes ===== */
.search-page__moredates{ color:var(--muted); font-size:13px; }
.search-page__noresults{ color:var(--muted); max-width:80ch; }
.search-page__link{ color:var(--brand); font-weight:700; text-decoration:underline; }