/* Drop — pages.css: page-specific styles for the Prism web-shell redesign
   (index.html, events.html, event.html). Loads AFTER shell.css. Token-only,
   zero raw hexes. Shared component vocabulary (.wsh/.chip/.locchip/.dual/
   .metric/.btn etc.) lives in shell.css — this file only holds the desktop
   layout rules shell.css's mobile media query expects a page to supply
   (e.g. .ed-grid/.search-grid base columns) plus small page-scoped bits.
   ======================================================================== */

/* Signed-out home "Happening in {city}" section — generous breathing room
   under the hero's gradient fade instead of butting flush against it. */
.home-shows { padding-top: 48px; }

/* ===== shared: centered browse heading (index "Happening" row / events top) === */
.browse-head { text-align: center; max-width: 640px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: var(--sp-md); }
.browse-head .field-box { width: 100%; max-width: 440px; }

/* Standalone search field-box (site.css's version is scoped under .sp-field;
   this one is used bare on events.html's centered search row). */
.field-box {
  display: flex; align-items: center; gap: 8px; width: 100%;
  background: rgba(11,13,18,0.5); border: 1px solid var(--border-strong);
  border-radius: var(--r-pill); padding: 12px 18px;
  transition: border-color var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
}
.field-box:focus-within { border-color: var(--brand-cyan); box-shadow: 0 0 0 3px rgba(77,226,255,0.16); }
.field-box .search-icon { color: var(--accent); flex: 0 0 auto; }
.field-box input {
  flex: 1 1 auto; min-width: 0; background: transparent; border: none;
  color: var(--text); font-family: var(--font-body); font-size: var(--fs-md);
}
.field-box input:focus { outline: none; }
.field-box input::placeholder { color: var(--text-muted); }
/* Pager (home + events): Prev / Page X of Y / Next */
.pager { display: flex; align-items: center; justify-content: center; gap: var(--sp-lg); margin-top: var(--sp-xl); }
.pager-label { color: var(--text-secondary); font-size: var(--fs-sm); min-width: 90px; text-align: center; }
.pager .btn-ghost[disabled] { opacity: 0.4; pointer-events: none; }

/* Mobile: full-width, taller tap target; 16px input also stops iOS focus-zoom. */
@media (max-width: 720px) {
  .field-box { padding: 14px 18px; }
  .field-box input { font-size: 16px; }
  #home-search { min-width: 100%; }

  /* compact vertical rhythm — desktop clamp() paddings read as dead space
     on a phone; !important beats events.html's inline .sec padding */
  .browse-head { gap: var(--sp-sm); }
  .section--tight { padding-bottom: var(--sp-lg); }
  .wsh__content > .sec { padding: var(--sp-md) 0 var(--sp-xs) !important; }

  /* consolidated filter card: half the internal air */
  .search-filter { gap: var(--sp-md); padding: var(--sp-md); }
  .search-filter .filt-row, .search-filter .dual, .loc-dist-row { margin-top: 6px; }
}

/* Genre-tile rail ("Pick your night") reused as an in-page filter — button
   variant of site.css's .tile so it can be a <button> instead of an <a>. */
/* No background reset here — the g-* genre class supplies the prism gradient
   (background:none was silently killing every tile's color). color: buttons
   default to black UA text; anchors inherited white. */
.tile-btn { border: 1px solid var(--border); text-align: left; cursor: pointer; font: inherit; color: var(--text); }
.tile-btn.is-active { outline: 2px solid var(--accent); outline-offset: -2px; }

/* ===== events.html: two-column search + filter layout ===== */
.search-grid { display: grid; grid-template-columns: 260px 1fr; gap: var(--sp-xxl); align-items: start; }
.search-filter {
  position: sticky; top: calc(var(--nav-h) + 20px);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: var(--sp-xl) var(--sp-lg); display: flex; flex-direction: column; gap: var(--sp-xl);
}
.search-filter .filt-row, .search-filter .dual { margin-top: 10px; }
/* Merged Location + Distance row: side-by-side when the panel is wide enough
   (mobile full-width filter), wraps to stacked full-width controls in the
   narrow desktop sidebar — flex-basis floors force the wrap, grow fills. */
.loc-dist-row { display: flex; flex-wrap: wrap; gap: var(--sp-sm); margin-top: 10px; }
.loc-dist-row .locchip { flex: 1 1 150px; justify-content: center; white-space: nowrap; }
.loc-dist-row .fb-select { flex: 1 1 120px; width: auto; min-width: 0; }
.search-filter .filt-label {
  font-size: var(--fs-xs); color: var(--text-muted); text-transform: uppercase;
  letter-spacing: var(--tr-wide); display: flex; justify-content: space-between; align-items: baseline;
}
.price-range-label { color: var(--accent); font-variant-numeric: tabular-nums; text-transform: none; }
.filt-row { display: flex; gap: var(--sp-sm); flex-wrap: wrap; }

/* ===== event.html: two-column detail + sticky buy box ===== */
.ed-wrap { max-width: var(--wrap); margin: 0 auto; padding: var(--sp-lg) var(--sp-xl) var(--sp-xxxl); }
/* Guard against an empty flex bar flashing while the event is still loading —
   shell.css's mobile rule forces display:flex !important, so only a higher-
   specificity !important (:empty pseudo-class) can suppress it pre-render. */
.ed-bottombar:empty { display: none !important; }
.ed-grid { display: grid; grid-template-columns: 1fr 360px; gap: var(--sp-xxl); align-items: start; }
.ed-grid > * { min-width: 0; }
.ed-hero { position: relative; display: flex; flex-direction: column; }
.ed-hero__media {
  position: relative; height: 360px; overflow: hidden;
  border: 1px solid var(--border); border-radius: var(--r-xl);
}
.ed-hero__actions { position: absolute; top: var(--sp-lg); right: var(--sp-lg); z-index: 2; display: flex; gap: var(--sp-sm); }
.ed-hero__meta { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-sm); padding: var(--sp-lg) 0 0; }
.ed-hero__meta .genre-pill { position: static; }
.ed-hero__title {
  margin: 0; color: var(--text); overflow-wrap: anywhere;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(28px, 4vw, 44px); letter-spacing: var(--tr-tight); line-height: 1.05;
}
.ed-aside { position: sticky; top: calc(var(--nav-h) + 20px); display: flex; flex-direction: column; gap: var(--sp-md); }
.ed-buybox {
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-lg);
  padding: var(--sp-lg); box-shadow: var(--shadow-card); display: flex; flex-direction: column; gap: var(--sp-md);
}
.ed-facts {
  display: flex; flex-wrap: wrap; gap: var(--sp-xl); margin-top: var(--sp-xl);
  padding: var(--sp-lg); background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--r-lg);
}
.ed-section { min-width: 0; padding: var(--sp-xl) 0; border-bottom: 1px solid var(--border); overflow-wrap: anywhere; }
.ed-section:last-child { border-bottom: none; }
.ed-price-row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-md);
  padding: var(--sp-md) var(--sp-lg); background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--r-md); flex-wrap: wrap;
}
.ed-tools { display: flex; flex-wrap: wrap; gap: var(--sp-sm); padding: var(--sp-xl) 0; border-bottom: 1px solid var(--border); }
.ed-onsale { display: flex; align-items: center; gap: var(--sp-sm); color: var(--text-secondary); font-size: var(--fs-xs); padding-top: var(--sp-md); border-top: 1px solid var(--border); }
.ed-onsale .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--attended); box-shadow: 0 0 8px var(--attended); }
.ed-lineup-dot { width: 20px; height: 20px; border-radius: 50%; background: var(--grad-brand); flex: 0 0 auto; }
.ed-lineup .chip { max-width: 100%; min-width: 0; white-space: normal; overflow-wrap: anywhere; }

@media (max-width: 720px) {
  .ed-wrap { padding-left: var(--sp-md); padding-right: var(--sp-md); }
  .ed-hero__media { height: auto; aspect-ratio: 1 / 1; }
  .ed-hero__actions { top: var(--sp-md); right: var(--sp-md); }
  .ed-hero__title { font-size: clamp(28px, 9vw, 38px); }
  .ed-facts { flex-direction: column; gap: var(--sp-md); }
  .ed-facts .metric { min-width: 0; }
  .ed-facts .metric__value, .ed-facts a { overflow-wrap: anywhere; }
}

/* Login-gated chip/button (Going/Interested/Save/Follow when signed out) —
   same visual language, slightly muted so it doesn't read as "already on". */
.gate { opacity: 0.92; }