/*
 * events.bundle.css — the /events/ page's own components (rewritten 2026-09-30, replacing the F5e
 * source cards and planner rail). The page is built on the guide kit (css/nightlife.bundle.css: hero,
 * desk, sections, fold-outs, buttons, next links); this file owns only what that kit does not have:
 * "What's on" from the events catalogue (2026-10-09, replacing the 2026-09-30 desk), the listing rows
 * and their filters, the source list, the organise block and the submit form. Registered when=events.
 *
 * Every rule sits under .eventGuide or an event* class that exists nowhere else. The --sc-* tokens flip
 * in dark on their own, and the legacy theme leaves .nightGuide alone, so there is no dark block and
 * no !important. The kit loads after this file and sets p, li and h3 at one class: a rule here that
 * sizes or spaces those elements carries .eventGuide in front.
 */

/* ---- What's on: the events catalogue, as each organiser lists it ---- */
/* Phones: a day reads the start over the end time beside each event, and the one-off cards scroll
   sideways in one row. From 760px the times sit on one line; from 900px each contact link also shows
   its number, handle or address; from 1024px the cards form a grid. Price chips keep one look in both themes. */
.eventGuide .eventOn { padding-block: 26px 10px; }
.eventGuide .eventOnHead { display: grid; gap: 10px; justify-items: start; max-width: 78ch; }
.eventGuide .eventOnHead .nightKicker { color: var(--sc-muted); }
.eventGuide .eventOnShort { margin: 0; color: var(--sc-ink); font-size: 16px; font-weight: 600; line-height: 1.5; }
.eventGuide .eventOnNote { margin: 0; padding-inline-start: 12px; border-inline-start: 3px solid var(--sc-amber); color: var(--sc-ink); font-size: 15px; line-height: 1.55; }
.eventGuide .eventOnUpdated { margin: 0; color: var(--sc-muted); font-size: 12.5px; line-height: 1.4; }
.eventGuide .eventOnSub { margin: 28px 0 4px; color: var(--sc-ink); font-size: 19px; line-height: 1.25; }
.eventGuide .eventOnSubNote { margin: 0 0 12px; color: var(--sc-muted); font-size: 14px; line-height: 1.5; }
.eventGuide .eventOnWeek .eventOnSub { margin-bottom: 0; }
.eventGuide .eventOnDay > summary,.eventGuide .eventOnKind > summary { min-height: 52px; padding-block: 13px; }
.eventOnDayName { font-size: 16px; font-weight: 750; }
.eventOnCount { margin-inline-start: auto; color: var(--sc-muted); font-size: 13px; font-weight: 600; white-space: nowrap; }
.eventGuide .eventOnCount + .nightPlus { margin-inline-start: 2px; }
.eventGuide .eventOnNone { margin: 0 0 16px; color: var(--sc-muted); font-size: 14px; }
.eventGuide .eventOnList { margin: 0 0 14px; padding: 0; list-style: none; }
.eventGuide .eventOnItem { display: grid; grid-template-columns: 3.75rem minmax(0,1fr); gap: 4px 12px; margin: 0; padding: 12px 0; border-top: 1px solid var(--sc-line); font-size: 14px; line-height: 1.5; }
.eventGuide .eventOnItem:first-child { padding-top: 2px; border-top: 0; }
/* Clock times read left to right in Arabic too; an all-day label wraps inside its column. */
.eventOnTime { direction: ltr; unicode-bidi: isolate; color: var(--sc-ink); font-size: 14px; font-weight: 800; line-height: 1.35; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
html[dir="rtl"] .eventOnTime { text-align: right; }
.eventOnEnd { display: block; color: var(--sc-muted); font-size: 12.5px; font-weight: 600; }
/* One track as wide as the box: a contact's nowrap number must not widen the column and push titles past the card. */
.eventOnMain { display: grid; grid-template-columns: minmax(0,1fr); gap: 6px; justify-items: start; min-width: 0; }
/* Titles and summaries are the organisers' English (bdi, lang="en"); on the Arabic page they keep its right edge. */
.eventOnTitle { display: block; color: var(--sc-ink); font-size: 15.5px; line-height: 1.35; font-weight: 750; overflow-wrap: anywhere; }
html[dir="rtl"] :is(.eventOnTitle,.eventOnSummary) { text-align: right; }
.eventOnMeta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; color: var(--sc-muted); font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; }
.eventOnPrice { padding: 1px 8px; border-radius: 7px; background: var(--sc-amber); color: #113e45; font-size: 12.5px; line-height: 1.5; font-weight: 800; }
.eventOnFree { background: var(--sc-lime); }
.eventOnContacts { display: flex; flex-wrap: wrap; gap: 6px; }
.eventGuide .eventOnContact { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-height: 32px; padding: 4px 11px; border: 1px solid var(--sc-muted); border-radius: 999px; background: var(--sc-paper); color: var(--sc-ink); font-size: 13px; line-height: 1.2; font-weight: 750; text-decoration: none; white-space: nowrap; }
/* Focus: the site-wide ring (tgz-unified-2026, theme-phase407 in dark) already draws it on these links. */
.eventGuide .eventOnContact:hover { text-decoration: underline; text-underline-offset: 3px; }
.eventOnId { display: none; min-width: 0; overflow: hidden; color: var(--sc-muted); font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
/* A link that leaves the site says so with an arrow that is drawn, not read. */
.eventOnWeb::after { content: "↗"; content: "↗" / ""; display: inline-block; font-size: 12px; }
html[dir="rtl"] .eventOnWeb::after { transform: scaleX(-1); }
/* One-off events: a card each, photo first. */
.eventGuide .eventOnCards { display: grid; grid-auto-flow: column; grid-auto-columns: min(78%, 270px); gap: 12px; margin: 0 -12px; padding: 2px 12px 14px; list-style: none; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 12px; }
.eventGuide .eventOnCard { display: flex; flex-direction: column; min-width: 0; margin: 0; overflow: hidden; border: 1px solid var(--sc-line); border-radius: 14px; background: var(--sc-paper); font-size: 14px; line-height: 1.5; scroll-snap-align: start; }
.eventOnPhoto,.eventOnArt { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: var(--sc-line); }
/* A card without a photo shows its kind on the hero's teal, the same in both themes. */
.eventOnArt { display: grid; place-items: center; background: #113e45; color: var(--sc-amber); font-size: 17px; font-weight: 800; }
/* A row of cards is as tall as its longest card: the contacts sit at the foot of each. */
.eventOnCardBody { display: flex; flex: 1 1 auto; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; padding: 12px 14px 14px; }
.eventOnCardBody > * { max-width: 100%; }
.eventOnCardBody .eventOnContacts { margin-top: auto; padding-top: 4px; }
.eventOnWhen { color: var(--sc-ink); font-size: 13px; line-height: 1.4; font-weight: 800; }
.eventOnMore { color: var(--sc-muted); font-size: 12.5px; line-height: 1.4; }
.eventOnSummary { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; color: var(--sc-muted); font-size: 13.5px; line-height: 1.5; }
/* Every week: the days and times first, then the class. */
.eventGuide .eventOnWeeklyItem { grid-template-columns: minmax(0,1fr); }
.eventOnSlots { display: flex; flex-wrap: wrap; gap: 2px 12px; color: var(--sc-ink); font-size: 13.5px; line-height: 1.45; font-weight: 700; }
.eventOnSlotDays { font-weight: 800; }
.eventGuide .eventOnStale { display: grid; gap: 12px; justify-items: start; margin-top: 16px; }
.eventGuide .eventOnStale p { margin: 0; color: var(--sc-muted); }
@media (min-width: 760px) {
  .eventGuide .eventOnItem { grid-template-columns: 7.25rem minmax(0,1fr); gap: 4px 18px; }
  .eventOnEnd { display: inline; color: inherit; font-size: inherit; font-weight: inherit; }
  .eventGuide .eventOnWeeklyItem { grid-template-columns: 12.5rem minmax(0,1fr); }
  .eventOnSlots { display: grid; align-content: start; gap: 2px; }
}
@media (min-width: 900px) {
  .eventOnId { display: inline; }
  /* A card is narrow: its contacts stay one word each. */
  .eventGuide .eventOnCard .eventOnId { display: none; }
}
/* Tablets keep the sideways row (a grid of 17 cards stood 2,800px tall at 768px); wide screens lay them out. */
@media (min-width: 1024px) {
  .eventGuide .eventOnCards { grid-auto-flow: row; grid-template-columns: repeat(auto-fill, minmax(232px,1fr)); margin: 0; padding: 0; overflow: visible; scroll-snap-type: none; }
}

/* ---- Dates to plan around: the date reads before the title ---- */
/* A paragraph margin set here needs .eventGuide in front: the kit resets p margins at the same weight and loads later. */
.eventWhen { flex: 0 0 auto; padding: 3px 8px; border: 1px solid var(--sc-line); border-radius: 8px; color: var(--sc-muted); font-size: 12px; line-height: 1.4; font-weight: 750; white-space: nowrap; }
.eventWhenDated { border-color: #c58a50; background: #ffc078; color: #113e45; }

/* ---- The board: one listing per line ---- */
.eventTools { display: grid; gap: 12px; margin-bottom: 8px; }
/* The edge of a field is what says "type here": it takes the text colour's muted tone, not the hairline
   (the hairline is 1.3:1 on the page). Placeholders are hints at full muted strength. */
.eventInput { width: 100%; min-height: 46px; margin: 0; padding: 10px 12px; border: 1px solid var(--sc-muted); border-radius: 10px; background: var(--sc-paper); color: var(--sc-ink); font: inherit; font-size: 15px; line-height: 1.4; }
.eventInput::placeholder { color: var(--sc-muted); opacity: 1; }
.eventInput:focus-visible,.eventFilter:focus-visible { outline: 2px solid var(--sc-ink); outline-offset: 2px; }
textarea.eventInput { min-height: 130px; resize: vertical; }
.eventFilters { display: flex; flex-wrap: wrap; gap: 8px; }
.eventFilter { min-height: 44px; margin: 0; padding: 8px 14px; border: 1px solid var(--sc-muted); border-radius: 999px; background: var(--sc-paper); color: var(--sc-ink); font: inherit; font-size: 14px; line-height: 1.3; font-weight: 750; cursor: pointer; }
.eventFilter[aria-pressed="true"] { border-color: #c58a50; background: #ffc078; color: #113e45; }
/* The chosen filter is not told by colour alone. The tick is drawn, not read: aria-pressed says it. */
.eventFilter[aria-pressed="true"]::before { content: "✓ "; content: "✓ " / ""; }
.eventGuide .eventCount { margin: 0; color: var(--sc-muted); font-size: 13px; }
.eventGuide .eventCount:not(:empty) { margin: 2px 0 10px; }
.eventRows { border-top: 1px solid var(--sc-line); }
.eventRow { display: grid; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--sc-line); color: var(--sc-ink); text-decoration: none; }
.eventRow.hasImage { grid-template-columns: 72px minmax(0,1fr); }
.eventRow[hidden] { display: none; }
.eventRow img { width: 72px; height: 72px; border-radius: 10px; object-fit: cover; }
.eventRowBody { display: grid; gap: 4px; justify-items: start; }
.eventRow strong { color: var(--sc-ink); font-size: 16px; line-height: 1.3; font-weight: 750; }
.eventRow:hover strong { text-decoration: underline; text-underline-offset: 4px; }
.eventTag { padding: 2px 8px; border: 1px solid #b9c9ae; border-radius: 8px; background: #e7edce; color: #113e45; font-size: 12px; line-height: 1.4; font-weight: 800; }
.eventMeta { color: var(--sc-ink); font-size: 13px; line-height: 1.5; }
.eventExcerpt { color: var(--sc-muted); font-size: 14px; line-height: 1.55; }
.eventGuide .eventLane { margin-top: 16px; color: var(--sc-muted); }
.eventLane a,.eventOrganiseFoot a { color: var(--sc-ink); font-weight: 750; text-decoration: underline; text-underline-offset: 4px; }
.eventGuide .eventNotice { margin: 0 0 16px; padding: 12px 14px; border: 1px solid #b9c9ae; border-radius: 10px; background: #e7edce; color: #113e45; font-weight: 700; }
.eventGuide .eventNoticeBad { border-color: #b3261e; background: #fbe9e7; color: #5c1410; }
.eventNoticeBad a { color: inherit; text-decoration: underline; text-underline-offset: 4px; }

/* ---- Official sources: one per line ---- */
.eventSources { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--sc-line); }
.eventSources li { display: grid; gap: 4px; justify-items: start; padding: 12px 0 14px; border-bottom: 1px solid var(--sc-line); }
.eventSources a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--sc-ink); font-size: 16px; line-height: 1.3; font-weight: 750; text-decoration: underline; text-underline-offset: 4px; }

/* ---- Your own event, organised by the team ---- */
.eventOffers { display: grid; gap: 4px; margin: 0 0 18px; }
.eventOffers dt { margin: 10px 0 0; color: var(--sc-ink); font-weight: 750; }
.eventOffers dd { margin: 0; color: var(--sc-muted); font-size: 14px; line-height: 1.55; }
.eventOrganise .nightButton { width: 100%; }
.eventGuide .eventOrganiseFoot { margin-top: 14px; color: var(--sc-muted); font-size: 13px; }

/* ---- Share an event (/events/submit/, its own page since 2026-10-09) ---- */
.eventGuide .eventSubmitHero { grid-template-columns: 1fr; }
.eventForm { margin-top: 8px; }
.eventTrap { display: none; }
.eventFields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px 16px; }
.eventField { display: grid; gap: 6px; align-content: start; }
.eventFieldWide { grid-column: 1 / -1; }
.eventField label { color: var(--sc-ink); font-size: 14px; line-height: 1.4; font-weight: 750; }
/* A required field carries a star; the control's own "required" is what a screen reader hears. */
.eventField label:has(+ :required)::after { content: " *"; content: " *" / ""; }

/* ---- One listing (/event/) ---- */
.eventGuide.eventOne .nightSection { max-width: 72ch; }
.eventGuide.eventOne h1 { margin-block: 12px 8px; color: var(--sc-ink); font-size: clamp(28px,3.2vw,40px); line-height: 1.1; letter-spacing: -.03em; }
.eventGuide.eventOne .nightSection > p { margin-block: 10px; }
.eventGuide.eventOne .eventTag { display: inline-block; }
.eventGuide.eventOne .eventOnePhoto { margin: 0 0 18px; min-height: 220px; }

.eventGuide .nightNextLinks { grid-template-columns: repeat(4,minmax(0,1fr)); }
html[dir=rtl] .eventGuide .eventSources a > span[aria-hidden] { transform: scaleX(-1); }

@media (max-width: 900px) {
  .eventGuide .nightNextLinks { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 680px) {
  .eventGuide #event-dates summary { flex-wrap: wrap; row-gap: 6px; }
  .eventGuide #event-dates summary .eventWhen { order: -1; flex-basis: auto; }
  .eventGuide #event-dates summary > span:nth-child(2) { flex: 1 1 100%; order: 1; }
  .eventGuide #event-dates summary .nightPlus { order: 0; }
  .eventFields { grid-template-columns: 1fr; }
  .eventGuide .nightNextLinks { grid-template-columns: 1fr; }
  .eventGuide .nightColumns #event-dates { grid-row: 1; }
  .eventGuide .nightColumns #event-board { grid-row: 2; }
  .eventGuide .nightColumns #organize-event { grid-row: 3; }
  .eventGuide .nightColumns #official-sources { grid-row: 4; }
  .eventGuide .nightColumns #submit { grid-row: 5; }
  .eventGuide .nightColumns .nightStay { grid-row: 6; }
  /* On the submission page the form comes first, then "organise your event". */
  #events-submit .nightColumns #submit { grid-row: 1; }
  #events-submit .nightColumns #organize-event { grid-row: 2; }
}