/* venues.css
 *
 * Structure only. Every color, font, radius and size comes from a --ven-* token, so applying a
 * design system means editing the TOKENS block below (or overriding it from the site's own
 * stylesheet). Selectors are single-class and prefixed ven-, so they will not collide with site
 * styles.
 */

/* ============================== TOKENS ==============================
 * Declared with :where() so they have zero specificity: any rule you write, in any order, wins.
 * Point each one at the design system's variable, e.g.
 *   .ven { --ven-surface: var(--color-surface); --ven-accent: var(--color-brand); }
 * If those variables already switch for dark mode, the media query below is moot.
 */
:where(.ven) {
  /* typography */
  --ven-font-body: system-ui, sans-serif;
  --ven-font-heading: Georgia, "Times New Roman", serif;

  /* surfaces and text */
  --ven-surface: #ffffff;         /* card and control background */
  --ven-text: #231f1b;
  --ven-muted: #6f665d;           /* labels, secondary text */
  --ven-border: #e7e0d6;
  --ven-accent: #1f6f78;          /* links, active filter, focus rings */
  --ven-on-accent: #ffffff;       /* text on an accent background */
  --ven-danger: #b3261e;
  --ven-chip-bg: #efe8dc;         /* neutral pill */

  /* shape and layout */
  --ven-radius-card: 14px;
  --ven-radius-field: 8px;
  --ven-radius-pill: 999px;
  --ven-gap: 24px;
  --ven-card-min: 320px;          /* minimum card width in the grid */
  --ven-photo-height: 150px;

  /* venue photo header: the name and pills are drawn over the image */
  --ven-photo-fallback: linear-gradient(135deg, #1f6f78, #8ec5c9);
  --ven-photo-text: #ffffff;
  --ven-photo-text-shadow: 0 1px 3px rgba(0,0,0,.6), 0 0 12px rgba(0,0,0,.35);
  --ven-scrim: linear-gradient(to top, rgba(0,0,0,.72) 0%, rgba(0,0,0,.4) 40%, rgba(0,0,0,0) 75%);
  --ven-badge-text: #ffffff;
  --ven-badge-bg: rgba(255,255,255,.22);
  --ven-badge-border: rgba(255,255,255,.35);
  --ven-badge-distance: rgba(20,20,20,.62);

  /* Petermeter stars */
  --ven-star-on: #c98b0a;
  --ven-star-off: #d3cbbd;

  /* festival cards: a second, differently colored card. These are a surface of their own,
   * so text, muted text, border, accent and chips are all defined for it. */
  --ven-fest-surface: #ffffff;
  --ven-fest-text: #231f1b;
  --ven-fest-muted: #6f665d;
  --ven-fest-border: #b4531f;
  --ven-fest-accent: #b4531f;     /* top rule and links */
  --ven-fest-header: linear-gradient(135deg, #b4531f, #f0b35a);
  --ven-fest-header-text: #ffffff;
  --ven-fest-header-height: 90px;
  --ven-fest-chip-bg: #efe8dc;
  --ven-fest-chip-fg: #231f1b;

  /* festival status badge: upcoming, on now, past or annual */
  --ven-status-upcoming-bg: #fde6c8;  --ven-status-upcoming-fg: #7a3a0c;
  --ven-status-ongoing-bg: #d6f0d9;   --ven-status-ongoing-fg: #1d5e2a;
  --ven-status-past-bg: #efe8dc;      --ven-status-past-fg: #6f665d;
}

@media (prefers-color-scheme: dark) {
  :where(.ven) {
    --ven-surface: #211d17;
    --ven-text: #f1ebe2;
    --ven-muted: #a89f93;
    --ven-border: #342e25;
    --ven-accent: #6cc3cc;
    --ven-on-accent: #17140f;
    --ven-danger: #f2b8b5;
    --ven-chip-bg: #2c261e;
    --ven-star-on: #f0b429;
    --ven-star-off: #3d352a;
    --ven-fest-surface: #211d17;
    --ven-fest-text: #f1ebe2;
    --ven-fest-muted: #a89f93;
    --ven-fest-border: #f0a35e;
    --ven-fest-accent: #f0a35e;
    --ven-fest-chip-bg: #2c261e;
    --ven-fest-chip-fg: #f1ebe2;
    --ven-status-upcoming-bg: #4a3417;  --ven-status-upcoming-fg: #f3c98d;
    --ven-status-ongoing-bg: #243d21;   --ven-status-ongoing-fg: #a9dba2;
    --ven-status-past-bg: #2c261e;      --ven-status-past-fg: #a89f93;
  }
}

/* ============================== BASE ============================== */
.ven, .ven *, .ven *::before, .ven *::after { box-sizing: border-box; }
.ven { font-family: var(--ven-font-body); color: var(--ven-text); }
.ven [hidden] { display: none !important; }
.ven a { color: var(--ven-accent); text-decoration: none; }
.ven a:hover { text-decoration: underline; }
.ven-label {
  display: block; font-size: .72rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ven-muted);
}
.ven-status, .ven-empty { color: var(--ven-muted); }
.ven-error { color: var(--ven-danger); }

/* ============================== SECTIONS ==============================
 * Venues and Festivals are accordions: a bar with a +/- toggle, a count, and (for venues) a
 * filter button that opens the filter and sort panel.
 */
.ven-sec + .ven-sec { margin-top: 40px; }
.ven-sec__bar {
  display: flex; align-items: center; gap: 8px;
  padding-bottom: 8px; border-bottom: 1px solid var(--ven-border);
}
.ven-sec__title { flex: 1; min-width: 0; margin: 0; font: inherit; }
.ven-sec__toggle {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 0;
  font: inherit; font-size: 1.1rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ven-muted); background: none; border: 0; cursor: pointer; text-align: left;
}
.ven-sec__toggle:hover { color: var(--ven-text); }
.ven-pm {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 1.5rem; height: 1.5rem; line-height: 1; font-weight: 700;
  border: 1px solid var(--ven-border); border-radius: var(--ven-radius-field);
}
.ven-pm::before { content: "+"; }
.ven-sec__toggle[aria-expanded="true"] .ven-pm::before { content: "\2212"; }
.ven-sec__meta {
  margin-left: auto; font-size: .8rem; letter-spacing: 0; text-transform: none; white-space: nowrap;
}
.ven-sec__toggle:focus-visible, .ven-select select:focus-visible {
  outline: 2px solid var(--ven-accent); outline-offset: 2px;
}
.ven-sec > .ven__grid, .ven-sec__body { margin-top: 16px; }
.ven-sec > .ven__grid:empty { display: none; }
.ven-sec > .ven__grid + .ven__grid { margin-top: var(--ven-gap); }
.ven-sec > .ven__grid:empty + .ven__grid { margin-top: 16px; }

/* ============================ CONTROLS ============================
 * Same bar as the restaurants page: right-aligned Type and Sort dropdowns. */
.ven__controls {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end;
  gap: 10px 14px; margin: 0 0 20px; font-size: .9rem;
}
.ven-select { display: inline-flex; align-items: center; gap: 8px; color: var(--ven-muted); }
.ven-select select {
  font: inherit; color: var(--ven-text); background: var(--ven-surface);
  border: 1px solid var(--ven-border); border-radius: var(--ven-radius-field); padding: 5px 8px;
}
.ven-geomsg { font-size: .82rem; color: var(--ven-muted); }
.ven-geomsg:empty { display: none; }

/* ============================== GRID ============================== */
.ven__grid {
  display: grid; gap: var(--ven-gap);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--ven-card-min)), 1fr));
}
.ven-empty { grid-column: 1 / -1; margin: 0; }

/* ============================== CARD ============================== */
.ven-card {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--ven-surface); border: 1px solid var(--ven-border);
  border-radius: var(--ven-radius-card);
}
.ven-body { padding: 18px 20px 20px; }
.ven-tagline { margin: 0 0 12px; font-size: .92rem; color: var(--ven-muted); }
.ven-row { margin: 8px 0; font-size: .95rem; }
.ven-note { margin: 14px 0 0; font-size: .82rem; color: var(--ven-muted); }
.ven-credit { margin: -6px 0 12px; font-size: .7rem; text-align: right; color: var(--ven-muted); }
.ven-credit a { color: inherit; text-decoration: underline; }
.ven-info { list-style: none; margin: 4px 0 0; padding: 0; }
.ven-info li { margin: 3px 0; }

/* venue photo header: image, then a scrim so white text reads on any photo */
.ven-photo {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end;
  height: var(--ven-photo-height); padding: 0 20px 14px; background: var(--ven-photo-fallback);
}
.ven-photo::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: var(--ven-scrim); }
.ven-photo__img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.ven-photo__head { position: relative; z-index: 1; max-width: 100%; }
.ven-photo__title {
  margin: 0; font-family: var(--ven-font-heading); font-size: 1.4rem; line-height: 1.2;
  color: var(--ven-photo-text); text-shadow: var(--ven-photo-text-shadow);
}
.ven-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.ven-badge {
  padding: 2px 10px; font-size: .72rem; font-weight: 600; line-height: 1.4;
  letter-spacing: .06em; text-transform: uppercase; color: var(--ven-badge-text);
  background: var(--ven-badge-bg); border: 1px solid var(--ven-badge-border);
  border-radius: var(--ven-radius-pill); backdrop-filter: blur(2px);
}
.ven-badge--distance {
  position: absolute; top: 10px; right: 12px; z-index: 1; font-size: .78rem; letter-spacing: 0;
  text-transform: none; font-variant-numeric: tabular-nums; background: var(--ven-badge-distance);
}

/* ============================== CHIPS ============================== */
.ven-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.ven-chip {
  padding: 2px 10px; font-size: .8rem; color: var(--ven-text); background: var(--ven-chip-bg);
  border-radius: var(--ven-radius-pill);
}

/* ============================ PETERMETER ============================
 * CSS-only stars. --r on .ven-meter is 0 to 5 in half steps. Each star works out its own fill
 * (--p) from --r and its index (--i), so 3.5 fills three stars and half of the fourth.
 */
.ven-meter { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; margin: 0 0 12px; }
.ven-meter .ven-label { font-weight: 600; }
.ven-stars { display: inline-flex; font-size: 22px; line-height: 1.1; user-select: none; }
.ven-star {
  --p: clamp(0%, calc((var(--r) - var(--i)) * 100%), 100%);
  display: inline-block; width: 1.2em; text-align: center; color: transparent;
  background: linear-gradient(90deg, var(--ven-star-on) var(--p), var(--ven-star-off) var(--p));
  -webkit-background-clip: text; background-clip: text;
}
.ven-star::before { content: "\2605"; }
.ven-star:nth-child(1) { --i: 0; } .ven-star:nth-child(2) { --i: 1; } .ven-star:nth-child(3) { --i: 2; }
.ven-star:nth-child(4) { --i: 3; } .ven-star:nth-child(5) { --i: 4; }

/* ============================ FESTIVAL CARD ============================
 * Same grid, a different card: a colored top rule, a header with the dates, and its own surface.
 */
.ven-card--festival {
  color: var(--ven-fest-text); background: var(--ven-fest-surface);
  border-color: var(--ven-fest-border); border-top: 4px solid var(--ven-fest-accent);
}
.ven-card--festival .ven-label, .ven-card--festival .ven-tagline,
.ven-card--festival .ven-note { color: var(--ven-fest-muted); }
.ven-card--festival a { color: var(--ven-fest-accent); }
.ven-card--festival .ven-chip { color: var(--ven-fest-chip-fg); background: var(--ven-fest-chip-bg); }
.ven-fest__head {
  display: flex; align-items: center; justify-content: center; padding: 0 12px; text-align: center;
  height: var(--ven-fest-header-height); background: var(--ven-fest-header);
  font-family: var(--ven-font-heading); font-size: 1.2rem; font-weight: 700; color: var(--ven-fest-header-text);
}
.ven-fest__title {
  margin: 0 0 2px; font-family: var(--ven-font-heading); font-size: 1.4rem; line-height: 1.2;
}
.ven-status-badge {
  display: inline-block; margin-bottom: 10px; padding: 2px 10px; font-size: .72rem; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; border-radius: var(--ven-radius-pill);
}
.ven-status-badge--upcoming { color: var(--ven-status-upcoming-fg); background: var(--ven-status-upcoming-bg); }
.ven-status-badge--ongoing { color: var(--ven-status-ongoing-fg); background: var(--ven-status-ongoing-bg); }
.ven-status-badge--past, .ven-status-badge--annual {
  color: var(--ven-status-past-fg); background: var(--ven-status-past-bg);
}