/* ============================================================================
   SMARTBOOKING — /events DISCOVERY PAGE
   ============================================================================

   Scoped entirely under .discover and drawn from site.css tokens, so the page
   inherits both themes and changes nothing elsewhere. Two deliberate choices:

   1. The hero band commits to the brand's night ink in BOTH themes — literal
      colours, not theme tokens — because it is a stage, not a surface. The
      discovery floor below it stays tokenised and theme-aware.

   2. The signature is the ticket: the hero tears off along a perforated edge,
      every card's price row is a stub behind a perforation with punched side
      notches, and the date badge is a miniature stub. Nothing else decorates.

   The display faces are the ones the landing pages already self-host (fonts/
   bricolage-grotesque-var.woff2, instrument-serif-italic.woff2) — no external
   request, no new font. Declared again here because site.css deliberately
   carries no @font-face and this page must not make the whole site download
   the files. The browser dedupes the face against welcome-v3.css by name+src.
   ========================================================================= */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/fonts/bricolage-grotesque-var.woff2") format("woff2");
  font-weight: 300 800;
  font-stretch: 75% 100%;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Instrument Serif";
  src: url("/fonts/instrument-serif-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

.discover {
  --d-display: "Bricolage Grotesque", "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
  --d-serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;

  /* The hero's committed night palette (identical in light and dark themes). */
  --d-night: #14102a;
  --d-night-2: #1d1738;
  --d-lav: #efe9fc;
  --d-lav-soft: rgba(239, 233, 252, 0.72);
  --d-foil: #e9c87f;
}

/* ── ACT 1 · THE HERO ─────────────────────────────────────────────────────── */

/* Compact by requirement: discovery is the page's job, so the header spends
   roughly a quarter of the viewport and the first card row is visible unscrolled. */
.discover .d-hero {
  background:
    radial-gradient(90rem 40rem at 85% -30%, rgba(108, 43, 217, 0.35), transparent 60%),
    radial-gradient(50rem 30rem at -10% 110%, rgba(46, 124, 246, 0.18), transparent 55%),
    linear-gradient(170deg, var(--d-night-2), var(--d-night) 65%);
  color: var(--d-lav);
  padding-top: var(--s-5);
}

.discover .d-hero-inner {
  display: grid;
  justify-items: start;
  gap: var(--s-3);
  padding-bottom: var(--s-5);
}

.discover .d-eyebrow {
  margin: 0;
  font-family: var(--d-display);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--d-lav-soft);
}

.discover .d-h1 {
  margin: 0;
  font-family: var(--d-display);
  font-weight: 700;
  font-stretch: 85%;
  font-size: clamp(1.7rem, 1.2rem + 2.2vw, 2.7rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: #fff;
}

.discover .d-h1 em {
  font-family: var(--d-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--d-foil);
}

.discover .d-sub {
  margin: 0;
  max-width: 44ch;
  font-size: var(--t-md);
  line-height: 1.55;
  color: var(--d-lav-soft);
}

/* The search dock: the page's one bright object; the dropdown anchors to its wrap. */
.discover .d-searchwrap {
  position: relative;
  width: min(100%, 620px);
  margin-top: var(--s-1);
}

.discover .d-search {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  width: 100%;
  padding: 0.3rem 0.3rem 0.3rem 1rem;
  background: var(--surface-0);
  border-radius: var(--r-full);
  box-shadow: var(--shadow-xl), 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.discover .d-search > svg {
  flex: none;
  width: 1.2rem;
  height: 1.2rem;
  color: var(--ink-500);
}

.discover .d-search input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  outline: 0;
  background: none;
  font: inherit;
  font-size: var(--t-base);
  color: var(--ink-900);
  padding-block: 0.5rem;
}

/* ── The search dropdown: mini event cards, not a text list ── */

.discover .d-sugg {
  position: absolute;
  z-index: 45;
  top: calc(100% + 0.45rem);
  left: 0;
  right: 0;
  display: grid;
  gap: 0.15rem;
  padding: 0.4rem;
  background: var(--surface-0);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-xl);
  max-height: min(56vh, 430px);
  overflow-y: auto;
}

.discover .d-sugg[hidden] { display: none; }

.discover .d-sugg-head {
  padding: 0.35rem 0.6rem 0.2rem;
  font-family: var(--d-display);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-400);
}

.discover .d-sugg-item {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 0.75rem;
  align-items: center;
  width: 100%;
  padding: 0.45rem 0.6rem;
  border: 0;
  border-radius: var(--r-md);
  background: none;
  text-align: left;
  font: inherit;
  color: var(--ink);
  cursor: pointer;
  transition: background-color var(--dur-fast);
}

.discover .d-sugg-item:hover,
.discover .d-sugg-item.is-sel { background: var(--surface-2); }

.discover .d-sugg-thumb {
  width: 56px;
  height: 56px;
  border-radius: var(--r-sm);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--d-display);
  font-weight: 800;
  font-size: 1.1rem;
  color: #fff;
  background: linear-gradient(150deg, var(--brand-400), var(--brand-700));
}

.discover .d-sugg-item:hover .d-sugg-thumb img { transform: scale(1.05); }

.discover .d-sugg-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur) var(--ease-out);
}

.discover .d-sugg-txt { display: grid; gap: 0.1rem; min-width: 0; }

.discover .d-sugg-txt b {
  font-family: var(--d-display);
  font-size: var(--t-sm);
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.discover .d-sugg-txt small {
  font-size: var(--t-xs);
  color: var(--ink-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.discover .d-sugg-none {
  padding: 0.6rem;
  font-size: var(--t-sm);
  color: var(--ink-3);
}

.discover .d-search input::placeholder { color: var(--ink-400); }

.discover .d-search-go {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.9rem;
  height: 2.9rem;
  border: 0;
  border-radius: 50%;
  background: var(--grad-brand);
  color: #fff;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}

.discover .d-search-go svg { width: 1.15rem; height: 1.15rem; }
.discover .d-search-go:hover { transform: scale(1.05); box-shadow: var(--shadow-brand); }
.discover .d-search:focus-within { box-shadow: var(--shadow-xl), var(--ring); }

/* Quick chips: quiet pills on the night ground; the active one turns solid. */
.discover .d-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-top: var(--s-2);
}

.discover .d-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.42rem 0.95rem;
  border: 1px solid rgba(239, 233, 252, 0.28);
  border-radius: var(--r-full);
  font-family: var(--d-display);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--d-lav);
  text-decoration: none;
  transition: background-color var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast);
}

.discover .d-chip:hover { border-color: rgba(239, 233, 252, 0.6); }

.discover .d-chip.is-on {
  background: var(--d-lav);
  border-color: var(--d-lav);
  color: var(--d-night);
}

.discover .d-chip.is-on::before {
  content: "✓";
  margin-right: 0.45em;
  font-weight: 700;
}

/* The tear: the hero ends the way a ticket does — a scalloped perforation
   punched in the page surface below. */
.discover .d-perf {
  height: 14px;
  background:
    radial-gradient(circle at 12px -3px, transparent 9px, var(--page) 10px) repeat-x;
  background-size: 28px 14px;
}

/* ── ACT 2 · THE DISCOVERY FLOOR ─────────────────────────────────────────── */

.discover .d-body { background: var(--page); }

.discover .d-grid {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: var(--s-8);
  padding-block: var(--s-6) var(--s-11);
}

/* ── The facet rail ── */

/* No internal scrollbar by requirement: the rail is compact enough to stand in
   the page's own flow, and a scroll area inside a scroll area hides filters. */
.discover .d-side {
  align-self: start;
  position: sticky;
  top: calc(var(--nav-h) + var(--s-4));
}

.discover .d-active { margin-bottom: var(--s-4); }

.discover .d-active-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  padding-bottom: var(--s-2);
  font-family: var(--d-display);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* The chosen row must read as chosen at a glance, not only by its dot. */
.discover .d-row:has(input:checked) {
  background: var(--accent-soft);
  color: var(--accent-deep);
  font-weight: 600;
}

.discover .d-side-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--s-4);
}

.discover .d-side-head h2 {
  margin: 0;
  font-family: var(--d-display);
  font-size: var(--t-lg);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.discover .d-drawer-close {
  display: none;
  border: 0;
  background: none;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--ink-3);
  cursor: pointer;
}

.discover .d-facet {
  margin: 0 0 var(--s-5);
  padding: 0;
  border: 0;
}

.discover .d-facet legend {
  width: 100%;
  padding-bottom: var(--s-2);
  margin-bottom: var(--s-2);
  border-bottom: 1px solid var(--rule);
  font-family: var(--d-display);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.discover .d-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.34rem 0.4rem;
  border-radius: var(--r-sm);
  font-size: var(--t-sm);
  color: var(--ink-2);
  cursor: pointer;
  transition: background-color var(--dur-fast);
}

.discover .d-row:hover { background: var(--wash); color: var(--ink); }

.discover .d-row input {
  accent-color: var(--brand-600);
  width: 1rem;
  height: 1rem;
  flex: none;
  margin: 0;
}

.discover .d-row span { flex: 1 1 auto; min-width: 0; }

.discover .d-n {
  flex: none;
  font-family: var(--d-display);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.1rem 0.5rem;
  border-radius: var(--r-full);
  background: var(--accent-soft);
  color: var(--accent-deep);
}

.discover .d-more { margin-top: var(--s-1); }

.discover .d-more summary {
  cursor: pointer;
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--accent);
  padding: 0.3rem 0;
  list-style: none;
}

.discover .d-more summary::-webkit-details-marker { display: none; }
.discover .d-more summary::after { content: " ↓"; font-size: 0.8em; }
.discover .d-more[open] summary::after { content: " ↑"; }

.discover .d-dates {
  display: grid;
  gap: var(--s-2);
  padding-top: var(--s-2);
}

.discover .d-dates label {
  display: grid;
  gap: 0.2rem;
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--ink-3);
}

.discover .d-dates input {
  font: inherit;
  font-size: var(--t-sm);
  color: var(--ink);
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-sm);
  background: var(--surface);
}

.discover .d-side-foot {
  display: grid;
  gap: var(--s-3);
  padding-top: var(--s-2);
}

.discover .d-clear {
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--ink-3);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.discover .d-clear:hover { color: var(--ink); }

/* ── The results ── */

.discover .d-results { min-width: 0; }

.discover .d-mobilebar { display: none; }

.discover .d-results-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  margin-bottom: var(--s-4);
}

.discover .d-count-block { display: grid; gap: 0.15rem; }

.discover .d-count {
  margin: 0;
  font-family: var(--d-display);
  font-size: var(--t-xl);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.discover .d-crumb {
  margin: 0;
  font-size: var(--t-xs);
  color: var(--ink-3);
}

.discover .d-count [data-count-word] {
  font-weight: 400;
  color: var(--ink-3);
}

.discover .d-sort {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--t-sm);
  color: var(--ink-3);
}

.discover .d-sort select {
  font: inherit;
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--ink);
  border: 0;
  border-bottom: 1px solid var(--rule-strong);
  background: none;
  padding: 0.25rem 0.1rem;
  cursor: pointer;
}

/* The native option list draws its own chrome; without an explicit ground the
   dark theme got light-on-white options. Tokens keep it right in both themes. */
.discover .d-sort select option {
  background: var(--surface);
  color: var(--ink);
}

.discover .d-pills {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  margin-bottom: var(--s-4);
}

.discover .d-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  padding: 0.32rem 0.8rem;
  border-radius: var(--r-full);
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--accent-deep);
  text-decoration: none;
  transition: background-color var(--dur-fast);
}

.discover .d-pill:hover { background: var(--brand-200); }

/* ── The cards ── */

.discover .d-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(224px, 1fr));
  gap: var(--s-4);
}

.discover .d-slot[hidden] { display: none; }

/* The premium card: the shared partial restyled in place. The slot owns the
   hover lift so the shadow and the image zoom move together. */
.discover .event-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out);
}

.discover .d-slot:hover .event-card,
.discover .d-slot:focus-within .event-card {
  transform: translateY(-4px);
  border-color: var(--accent-line);
  box-shadow: var(--shadow-lg);
}

.discover .event-banner {
  position: relative;
  aspect-ratio: 16 / 10;
  height: auto;
  overflow: hidden;
}

.discover .event-banner svg { width: 100%; height: 100%; }

.discover .event-banner-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}

.discover .d-slot:hover .event-banner-img { transform: scale(1.03); }

/* A quiet ink fade so the date stub always sits on something readable. */
.discover .event-banner::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 55%;
  background: linear-gradient(180deg, transparent, rgba(20, 16, 42, 0.38));
  pointer-events: none;
}

/* The date stub: a miniature ticket, punched hole included. */
.discover .event-date-chip {
  position: absolute;
  left: var(--s-3);
  bottom: var(--s-3);
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 0;
  min-width: 3.2rem;
  padding: 0.4rem 0.55rem 0.35rem 0.9rem;
  background: var(--surface-0);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-md);
}

.discover .event-date-chip::before {
  content: "";
  position: absolute;
  left: 0.3rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.32rem;
  height: 0.32rem;
  border-radius: 50%;
  background: var(--surface-3);
  box-shadow: inset 0 0 0 1px var(--border-strong);
}

/* THE WEEKDAY, IN THE MONTH'S TREATMENT BUT NOT ITS COLOUR. Same face, size, weight and
   letter-spacing as .m below, so the stub reads as one stack — but muted rather than brand,
   so the accent stays on the month and the eye still lands on the day number between them.
   The stub is a grid, so this simply becomes its first row; min-width 3.2rem already holds
   three letterspaced characters. */
.discover .event-date-chip .w {
  font-family: var(--d-display);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-500);
}

.discover .event-date-chip .d {
  font-family: var(--d-display);
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1.05;
  color: var(--ink-900);
}

.discover .event-date-chip .m {
  font-family: var(--d-display);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand-600);
}

.discover .event-card-body {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  flex: 1 1 auto;
  padding: var(--s-3) var(--s-4);
}

.discover .event-card-title {
  margin: 0;
  font-family: var(--d-display);
  font-size: var(--t-md);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

.discover .event-card-title a { color: var(--ink); text-decoration: none; }
.discover .event-card-title a:hover { color: var(--accent); }

.discover .event-org {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink-3);
}

/* The stub: the price row tears off behind a perforation with punched side
   notches — the card is a ticket, quietly. */
.discover .event-card-foot {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  margin: auto calc(var(--s-4) * -1) calc(var(--s-4) * -1);
  padding: var(--s-3) var(--s-4);
  border-top: 1px dashed var(--border-strong);
}

.discover .event-card-foot::before,
.discover .event-card-foot::after {
  content: "";
  position: absolute;
  top: -8px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--page);
  border: 1px solid var(--rule);
}

.discover .event-card-foot::before { left: -9px; }
.discover .event-card-foot::after { right: -9px; }

.discover .event-card-foot .price {
  font-family: var(--d-display);
  font-weight: 700;
  color: var(--ink);
}

.discover .event-card-foot .price small {
  font-weight: 500;
  color: var(--ink-3);
  margin-left: 0.3em;
}

/* ── The mobile drawer ── */

.discover .d-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(20, 16, 42, 0.5);
  backdrop-filter: blur(2px);
}

@media (max-width: 960px) {
  .discover .d-grid {
    grid-template-columns: 1fr;
    gap: var(--s-5);
    padding-block: var(--s-5) var(--s-9);
  }

  .discover .d-mobilebar {
    position: sticky;
    top: var(--nav-h);
    z-index: 20;
    display: flex;
    gap: var(--s-3);
    margin-bottom: var(--s-3);
    padding-block: var(--s-2);
    background: var(--page);
  }

  .discover .d-mbtn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 1.1rem;
    border: 1px solid var(--rule-strong);
    border-radius: var(--r-full);
    background: var(--surface);
    font: inherit;
    font-size: var(--t-sm);
    font-weight: 600;
    color: var(--ink);
    cursor: pointer;
  }

  .discover .d-mbtn svg { width: 1rem; height: 1rem; }

  /* The rail becomes a bottom sheet: off-canvas until opened. The sheet is the
     one place the filters may scroll — a fixed panel has nowhere else to grow. */
  .discover .d-side {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 70;
    max-height: min(86vh, 640px);
    overflow-y: auto;
    background: var(--surface);
    border-radius: var(--r-2xl) var(--r-2xl) 0 0;
    box-shadow: var(--shadow-xl);
    padding: var(--s-5) var(--s-5) var(--s-4);
    transform: translateY(105%);
    visibility: hidden;
    transition: transform var(--dur-slow) var(--ease-out), visibility 0s var(--dur-slow);
  }

  .discover .d-side.is-open {
    transform: translateY(0);
    visibility: visible;
    transition: transform var(--dur-slow) var(--ease-out);
  }

  .discover .d-drawer-close { display: block; }

  /* The drawer's CTA stays reachable while the facets scroll behind it. */
  .discover .d-side-foot {
    position: sticky;
    bottom: 0;
    background: var(--surface);
    border-top: 1px solid var(--rule);
    padding-block: var(--s-3);
    margin-top: var(--s-2);
  }

  .discover .d-search { width: 100%; }
  .discover .d-results-head { flex-wrap: wrap; }
}

@media (min-width: 961px) {
  .discover .d-overlay { display: none !important; }
}

/* Script present: desktop facets apply instantly, so the submit button hides
   there; on mobile it becomes the drawer's "Show N events" CTA. */
@media (min-width: 961px) {
  .discover.js-on .d-apply { display: none; }
}

/* ── The event drawer: preview + booking cockpit beside the grid ─────────────
   Fixed to the right on desktop (the grid stays visible AND interactive — no
   backdrop there, so clicking another card switches the content in place);
   a bottom sheet with an overlay on mobile. The interior reuses the event
   page's own classes (.tier, .summary-total, badges), so site.css does most
   of the styling and the rules here are layout only. */

.d-drawerpanel {
  position: fixed;
  inset: 0 0 0 auto;
  z-index: 65;
  /* Wide by owner direction (9 Sep): up to the filter rail's edge — the rail and a
     card column stay visible at the left, and the width buys a two-column interior
     that shows the whole event with little or no scrolling. */
  width: min(75vw, calc(100vw - 21rem));
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-left: 1px solid var(--rule);
  box-shadow: var(--shadow-xl);
  transform: translateX(105%);
  transition: transform 240ms var(--ease-out);
}

.d-drawerpanel[hidden] { display: none; }
.d-drawerpanel.is-open { transform: none; }

.d-drawer-x {
  position: absolute;
  top: var(--s-3);
  right: var(--s-3);
  /* Above the fragment's sticky top bar (z-index 2), or the bar paints over it. */
  z-index: 3;
  width: 2.4rem;
  height: 2.4rem;
  border: 1px solid var(--rule-strong);
  border-radius: 50%;
  background: var(--surface-0);
  color: var(--ink);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
}

.d-drawerpanel-body {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.d-drawerpanel-body.is-loading::before {
  content: "Loading…";
  display: block;
  padding: var(--s-8) var(--s-5);
  color: var(--ink-3);
}

/* The fragment's own layout: the full-page link rides a bar at the top, then two
   columns — the story left, the booking right. */
.d-dw-top {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  padding: var(--s-3) var(--s-5);
  padding-right: 4rem; /* room for the shell's close button */
  background: var(--surface);
  border-bottom: 1px solid var(--rule);
}

/* Its own style on purpose: everything else in the drawer is a fact or a booking
   control, and this is the one navigation — the brand's foil marks it apart. */
.d-dw-fullbtn {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.5rem 1.1rem;
  border: 1px solid var(--gold-500);
  border-radius: var(--r-full);
  background: var(--gold-soft);
  font-family: var(--d-display);
  font-size: var(--t-sm);
  font-weight: 700;
  color: var(--gold-700);
  text-decoration: none;
  transition: background-color var(--dur-fast), color var(--dur-fast);
}

.d-dw-fullbtn:hover { background: var(--gold-200); }
.d-dw-fullbtn svg { width: 1em; height: 1em; }

.d-dw-cols {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: var(--s-5);
  padding: var(--s-3) var(--s-5) var(--s-4);
}

.d-dw-main { min-width: 0; }
.d-dw-aside { min-width: 0; }

/* Flatter than the cards' 16:10: the image identifies the event; the drawer's
   height budget belongs to the facts and the tickets. */
.d-dw-media {
  position: relative;
  aspect-ratio: 21 / 9;
  overflow: hidden;
  border-radius: var(--r-lg);
  margin-bottom: var(--s-3);
}

.d-dw-media svg { width: 100%; height: 100%; }
.d-dw-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.d-dw-block { margin-top: var(--s-3); }

/* A very long description scrolls in its own well rather than pushing the booking
   column out of reach — the drawer's job is the glance, the full page has the room. */
.d-dw-desc {
  max-height: 10rem;
  overflow-y: auto;
  font-size: var(--t-sm);
  line-height: 1.55;
  color: var(--ink-2);
  padding-right: var(--s-2);
}

/* The share strip: one line, label inline, compact actions. */
.d-dw-sharebar {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: var(--s-1);
  margin-top: var(--s-3);
  padding-top: var(--s-3);
  border-top: 1px dashed var(--border-strong);
  overflow: hidden;
}

.d-dw-sec.is-inline {
  margin: 0 var(--s-2) 0 0;
  padding: 0;
  border: 0;
}

.d-dw-sharebar .btn { padding: 0.3rem 0.55rem; font-size: var(--t-xs); white-space: nowrap; }
.d-dw-sharebar .btn svg { width: 0.95rem; height: 0.95rem; }

/* Tight drawers keep every action by dropping the words — the icons carry
   title tooltips and the labels stay for assistive tech via the titles. */
@media (max-width: 1280px) {
  .d-dw-sharetxt { display: none; }
}

.d-dw-head { display: grid; gap: var(--s-1); margin-bottom: var(--s-2); }
.d-dw-kicker { margin: 0; display: flex; flex-wrap: wrap; gap: var(--s-2); }

.d-dw-title {
  margin: 0;
  font-family: var(--d-display);
  font-size: var(--t-xl);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--ink);
  outline: none;
}

.d-dw-meta {
  margin: 0;
  display: grid;
  gap: 0.3rem;
  font-size: var(--t-sm);
  color: var(--ink-2);
}

.d-dw-meta span { display: inline-flex; align-items: center; gap: 0.5em; }
.d-dw-meta svg { width: 1em; height: 1em; flex: none; }

.d-dw-org { margin: 0; font-size: var(--t-xs); color: var(--ink-3); }
.d-dw-org b { font-weight: 600; color: var(--ink-2); }

.d-dw-from {
  margin: 0;
  font-family: var(--d-display);
  font-size: var(--t-lg);
  font-weight: 700;
  color: var(--ink);
}

.d-dw-blurb { margin: 0; font-size: var(--t-sm); line-height: 1.55; color: var(--ink-2); }

.d-dw-sec {
  margin: 0 0 var(--s-2);
  padding-top: var(--s-3);
  border-top: 1px dashed var(--border-strong);
  font-family: var(--d-display);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.d-dw-tiers .tier {
  display: flex;
  gap: var(--s-3);
  padding-block: var(--s-2);
  border-bottom: 1px solid var(--rule);
}

/* Compact rails: the per-order hint and GST note stay, at caption size. */
.d-dw-tiers .tier-buy .hint,
.d-dw-tiers .tier-gst { font-size: 0.68rem; }
.d-dw-tiers .tier-buy { gap: 0.15rem; }

/* The whole card is the way in when the drawer script runs. */
.discover.js-on .d-slot { cursor: pointer; }

.d-dw-tiers .tier-name { font-weight: 600; color: var(--ink); font-size: var(--t-sm); }
.d-dw-tiers .tier-desc { font-size: var(--t-xs); color: var(--ink-3); }
.d-dw-tiers .grow { flex: 1 1 auto; min-width: 0; display: grid; gap: 0.25rem; justify-items: start; }
.d-dw-tiers .tier-buy { flex: none; display: grid; gap: 0.3rem; justify-items: end; }

/* The booking foot stays reachable while the tiers scroll. */
.d-dw-foot {
  position: sticky;
  bottom: 0;
  z-index: 1;
  display: grid;
  gap: var(--s-2);
  padding: var(--s-3) 0 calc(var(--s-3) + env(safe-area-inset-bottom, 0px));
  background: var(--surface);
  border-top: 1px solid var(--rule);
}

.d-dw-foot .hint { margin: 0; text-align: center; }

.d-dw-share { display: flex; flex-wrap: wrap; gap: var(--s-2); }

/* The card being previewed: chosen, quietly. */
.discover .d-slot.is-viewing .event-card {
  border-color: var(--brand-400);
  box-shadow: var(--shadow-md), 0 0 0 1px var(--brand-400);
}

/* Desktop keeps the grid interactive: no backdrop there. */
.d-overlay-ev { z-index: 60; }
@media (min-width: 961px) {
  .d-overlay-ev { display: none !important; }
}

@media (max-width: 960px) {
  /* The drawer becomes a bottom sheet, and the columns stack back into one story. */
  .d-drawerpanel {
    inset: auto 0 0 0;
    width: auto;
    max-height: 92vh;
    border-left: 0;
    border-top: 1px solid var(--rule);
    border-radius: var(--r-2xl) var(--r-2xl) 0 0;
    transform: translateY(105%);
  }

  .d-dw-cols { grid-template-columns: 1fr; gap: var(--s-4); }
  .d-dw-desc { max-height: none; overflow: visible; }
}

@media (prefers-reduced-motion: reduce) {
  .d-drawerpanel { transition: none; }
}

/* ── Quality floor ── */

.discover :focus-visible {
  outline: none;
  box-shadow: var(--ring);
  border-radius: var(--r-xs);
}

@media (prefers-reduced-motion: reduce) {
  .discover .event-card,
  .discover .event-banner-img,
  .discover .d-search-go,
  .discover .d-side {
    transition: none;
  }

  .discover .d-slot:hover .event-banner-img { transform: none; }
  .discover .d-slot:hover .event-card { transform: none; }
}

@media print {
  .discover .d-hero { background: none; color: var(--ink); }
  .discover .d-side, .discover .d-mobilebar, .discover .d-sort { display: none; }
  .discover .d-grid { grid-template-columns: 1fr; }
}