/* ═══════════════════════════════════════════
   events.css — the daily "Events" page
   Built on the tokens common.css declares; nothing here redefines them.
   ═══════════════════════════════════════════ */

:root {
  --events-map-w: 46%;
  --pin: #a07840;
  --pin-active: #1a1714;
}

/* ── PAGE HEADER ──
   Same shape as exploration-grounds.html so the two pages read as siblings. */
.page-header {
  padding: 10rem 4rem 4rem;
  background: var(--page);
  border-bottom: 0.5px solid var(--border);
  position: relative;
  overflow: hidden;
}
/* The same trick exploration-grounds.html plays with 'I · II · III': one huge,
   almost invisible serif mark in the corner. Here it is the number of events
   the page is carrying, which the generator sets. */
.page-header::after {
  content: var(--header-mark, '');
  position: absolute; right: 3rem; bottom: 1rem;
  font-family: 'Cormorant Garamond', serif;
  font-size: 190px; font-weight: 300;
  color: rgba(160,120,64,0.055); letter-spacing: 0.02em;
  line-height: 1; pointer-events: none;
}
.page-eyebrow {
  font-size: 10px; letter-spacing: 0.38em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 2rem;
  display: flex; align-items: center; gap: 1rem;
  opacity: 0; animation: fadeUp 0.9s ease 0.2s forwards;
}
.page-eyebrow::before {
  content: ''; display: block; width: 44px; height: 0.5px; background: var(--gold);
}
.page-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(48px, 6vw, 80px); font-weight: 300;
  line-height: 1.05; color: var(--ink); letter-spacing: 0.02em;
  opacity: 0; animation: fadeUp 0.9s ease 0.35s forwards;
}
.page-title em { font-style: italic; color: var(--gold); }
.page-subtitle {
  font-family: 'Cormorant Garamond', serif; font-size: 18px; font-weight: 300;
  font-style: italic; color: var(--text-mid); letter-spacing: 0.06em;
  margin-top: 1.5rem; max-width: 620px; line-height: 1.7;
  opacity: 0; animation: fadeUp 0.9s ease 0.5s forwards;
}

/* The provenance line: how many events, when the page was rebuilt, and which
   clock the times on it are shown in. The time zone is filled in by JS, so the
   sentence has to read correctly before that happens too. */
.page-provenance {
  margin-top: 2.4rem;
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem 1.6rem;
  font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--text-faint);
  opacity: 0; animation: fadeUp 0.9s ease 0.65s forwards;
}
.page-provenance > span { display: flex; align-items: center; gap: 0.6rem; }
.page-provenance > span + span::before {
  content: ''; display: block; width: 3px; height: 3px; border-radius: 50%;
  background: var(--gold); opacity: 0.5; margin-right: 0.4rem;
}
.page-provenance strong { color: var(--gold); font-weight: 500; }

/* ── LAYOUT ──
   List on the left, map anchored on the right. The grid, not the aside, owns
   the height: `position: sticky` only travels as far as its own grid area, so
   the map stays pinned exactly for the length of the list beside it. */
.events-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--events-map-w);
  align-items: start;
  border-bottom: 0.5px solid var(--border);
}

.events-list-col { min-width: 0; padding: 3.5rem 3rem 5rem 4rem; }

.events-map-col {
  min-width: 0;
  position: -webkit-sticky;
  position: sticky;
  top: var(--nav-height);
  height: calc(100vh - var(--nav-height));
  border-left: 0.5px solid var(--border);
  background: var(--page-2);
}

/* ── MAP ── */
.events-map { width: 100%; height: 100%; background: var(--page-3); }
.events-map:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }

/* Leaflet paints its own furniture; these bring it onto the site's palette. */
.events-map .leaflet-container {
  font-family: 'Montserrat', sans-serif;
  background: var(--page-3);
}
.events-map .leaflet-control-zoom a {
  background: var(--page);
  color: var(--gold);
  border-bottom: 0.5px solid var(--border);
  font-weight: 300;
}
.events-map .leaflet-control-zoom a:hover { background: var(--page-2); color: var(--gold-hover); }
.events-map .leaflet-bar {
  border: 0.5px solid var(--border-strong);
  box-shadow: 0 2px 12px rgba(26,23,20,0.08);
  border-radius: 0;
}
.events-map .leaflet-bar a:first-child,
.events-map .leaflet-bar a:last-child { border-radius: 0; }
.events-map .leaflet-control-attribution {
  background: rgba(245,240,232,0.86);
  font-size: 9px; letter-spacing: 0.04em; color: var(--text-faint);
}
.events-map .leaflet-control-attribution a { color: var(--gold); }

/* The tiles are a photographic surface under a very quiet page. Desaturating
   them is what keeps the gold pins the only saturated thing in view. */
.events-map .leaflet-tile-pane { filter: saturate(0.55) contrast(0.94) brightness(1.04); }

/* ── MAP MARKERS ──
   One pin drawn once, in three states: at rest, hovered, and tied to the card
   the reader is looking at. The shape is the site's own hairline geometry —
   a gold teardrop with a cream core — rather than Leaflet's blue default. */
.sg-pin { background: none; border: none; }
.sg-pin svg { display: block; overflow: visible; }
.sg-pin .pin-body {
  fill: var(--pin);
  stroke: var(--page);
  stroke-width: 1.5;
  transition: fill 0.25s ease;
}
.sg-pin .pin-core {
  fill: var(--page);
  transition: fill 0.25s ease, r 0.25s ease;
}
/* The future category icon rides in the core, at the same size as the dot it
   replaces. Off until the page is generated with icons enabled. */
.sg-pin .pin-glyph { fill: var(--page); display: none; }
.sg-pin .pin-shadow { fill: rgba(26,23,20,0.18); }
.sg-pin-inner { transition: transform 0.22s ease; transform-origin: 50% 100%; }

.sg-pin:hover .sg-pin-inner { transform: scale(1.12); }
.sg-pin:hover .pin-body { fill: var(--gold-hover); }

.sg-pin.is-active .sg-pin-inner { transform: scale(1.22); }
.sg-pin.is-active .pin-body { fill: var(--pin-active); stroke: var(--gold); }
.sg-pin.is-active .pin-core { fill: var(--gold); }

/* Clusters: a cream disc with a hairline gold ring and a serif count, sized in
   three steps so a dense corner reads as dense without shouting. */
.sg-cluster { background: none; border: none; }
.sg-cluster .sg-cluster-inner {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--page);
  border: 1px solid var(--gold-mid);
  box-shadow: 0 0 0 6px rgba(160,120,64,0.10), 0 2px 10px rgba(26,23,20,0.10);
  font-family: 'Cormorant Garamond', serif;
  font-size: 17px; font-weight: 400; letter-spacing: 0.04em;
  color: var(--gold);
  transition: background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}
.sg-cluster-m .sg-cluster-inner { font-size: 19px; }
.sg-cluster-l .sg-cluster-inner { font-size: 21px; box-shadow: 0 0 0 8px rgba(160,120,64,0.10), 0 2px 10px rgba(26,23,20,0.10); }
.sg-cluster:hover .sg-cluster-inner {
  background: var(--gold);
  color: #fff;
  box-shadow: 0 0 0 8px rgba(160,120,64,0.16), 0 2px 12px rgba(26,23,20,0.14);
}

/* Popups: the map's own way back into the list. */
.events-map .leaflet-popup-content-wrapper {
  border-radius: 0;
  background: var(--page);
  border: 0.5px solid var(--border-strong);
  box-shadow: 0 8px 30px rgba(26,23,20,0.14);
}
.events-map .leaflet-popup-tip {
  background: var(--page);
  border: 0.5px solid var(--border-strong);
  box-shadow: none;
}
.events-map .leaflet-popup-content { margin: 1.1rem 1.3rem; width: 232px !important; }
.events-map .leaflet-popup-close-button { color: var(--text-faint); }
.events-map .leaflet-popup-close-button:hover { color: var(--gold); }
.sg-popup-when {
  font-size: 9px; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 0.5rem;
}
.sg-popup-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 19px; font-weight: 300; line-height: 1.25;
  color: var(--ink); margin-bottom: 0.85rem;
}
.sg-popup-links { display: flex; flex-direction: column; gap: 0.45rem; }
.sg-popup-links a {
  font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gold); text-decoration: none;
}
.sg-popup-links a:hover { color: var(--gold-hover); text-decoration: underline; }

/* ── DAY SEPARATORS ──
   Inserted by JS once the local date is known, because which events fall on
   "the same day" is a question only the reader's clock can answer. */
.day-separator {
  display: flex; align-items: baseline; gap: 1.2rem;
  margin: 3.2rem 0 1.6rem;
  padding-top: 1.6rem;
  border-top: 0.5px solid var(--border);
}
.events-list > .day-separator:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.day-separator .day-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 26px; font-weight: 300; font-style: italic;
  color: var(--gold); line-height: 1;
}
.day-separator .day-rest {
  font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--text-faint);
}

/* ── EVENT CARD ── */
.events-list { list-style: none; }

.event-card {
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr);
  gap: 1.8rem;
  padding: 1.8rem 1.6rem 1.8rem 0;
  border-bottom: 0.5px solid var(--border);
  scroll-margin-top: calc(var(--nav-height) + 1.5rem);
  transition: background 0.35s ease;
}
.events-list > .event-card:first-child { padding-top: 0; }
.event-card:hover { background: var(--gold-faint); }
.event-card.is-active {
  background: var(--gold-faint);
  box-shadow: inset 2px 0 0 var(--gold);
}

/* Date block. The three parts are separate elements because JS replaces their
   text one by one with the reader's own locale; a single formatted string
   would have to be re-parsed to do that. */
.event-when { text-align: center; padding-top: 0.15rem; }
.event-date { display: block; }
.event-date .wd {
  display: block;
  font-size: 9px; letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 0.35rem;
}
.event-date .dd {
  display: block;
  font-family: 'Cormorant Garamond', serif;
  font-size: 34px; font-weight: 300; line-height: 1; color: var(--ink);
}
.event-date .mo {
  display: block;
  font-size: 9px; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--text-soft); margin-top: 0.3rem;
}
.event-time {
  display: block; margin-top: 0.7rem;
  padding-top: 0.6rem;
  border-top: 0.5px solid var(--border);
  font-size: 11px; letter-spacing: 0.14em;
  color: var(--text-mid); font-variant-numeric: tabular-nums;
}
/* The source published a date and no time. Saying so is more useful than
   printing the midnight that stands in for it. */
.event-time.is-tbc {
  font-size: 8.5px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--text-faint);
}

.event-body { min-width: 0; }
.event-head { display: flex; align-items: flex-start; gap: 0.85rem; }
.event-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px; font-weight: 300; line-height: 1.3;
  color: var(--ink); letter-spacing: 0.01em;
  margin-bottom: 0.85rem;
}
.event-card.is-active .event-title { color: var(--gold-hover); }

/* Category icon slot. Present in the markup from the first release so turning
   it on later is a generator flag and a sprite, not a re-render of the page. */
.event-cat {
  flex: 0 0 auto; width: 18px; height: 18px; margin-top: 0.35rem;
  color: var(--gold); opacity: 0.75;
}
.event-cat svg { width: 100%; height: 100%; fill: currentColor; display: block; }
body[data-category-icons='off'] .event-cat { display: none; }

.event-text {
  font-size: 13.5px; font-weight: 300; line-height: 1.85;
  color: var(--text-mid); letter-spacing: 0.01em;
}
.event-text p + p { margin-top: 0.9rem; }
.event-text em { font-style: italic; }
.event-text strong { font-weight: 500; color: var(--text-main); }

/* Collapsed by default, but only where JS can expand it again. Without JS the
   full text stays visible rather than being cut off with no way back. */
.js .event-text.is-clamped {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.event-actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1.6rem;
  margin-top: 1.1rem;
}
.event-action {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0; border: none; background: none; cursor: pointer;
  font-family: 'Montserrat', sans-serif;
  font-size: 10px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gold); text-decoration: none;
  transition: color 0.3s;
}
.event-action:hover { color: var(--gold-hover); }
.event-action:focus-visible { outline: 1px solid var(--gold); outline-offset: 4px; }
.event-action .ico { width: 13px; height: 13px; flex: 0 0 auto; fill: currentColor; }
.event-more[hidden] { display: none; }

/* ── EMPTY STATE ──
   A generation that produced no events must still produce a page that explains
   itself, rather than an empty column under a headline. */
.events-empty {
  padding: 5rem 0;
  font-family: 'Cormorant Garamond', serif;
  font-size: 20px; font-style: italic; font-weight: 300;
  color: var(--text-soft);
}

/* ── CLOSING NOTE ── */
.events-note {
  padding: 4rem 4rem 5rem;
  background: var(--page-2);
  border-top: 0.5px solid var(--border);
}
.events-note p {
  max-width: 640px;
  font-size: 12px; font-weight: 300; line-height: 1.9;
  color: var(--text-soft); letter-spacing: 0.02em;
}
.events-note a { color: var(--gold); text-decoration: none; }
.events-note a:hover { text-decoration: underline; }

/* ── RESPONSIVE ── */
@media (max-width: 1200px) {
  :root { --events-map-w: 42%; }
  .events-list-col { padding: 3rem 2rem 4rem 2.5rem; }
}

@media (max-width: 1000px) {
  /* One column. The map goes first — it is the fastest way to see whether
     anything is happening near you — but it stops being sticky, because a
     pinned map on a phone leaves no room for the list it belongs to. */
  .events-layout { display: flex; flex-direction: column; }
  .events-map-col {
    order: -1;
    position: static;
    height: 48vh; min-height: 300px;
    border-left: none;
    border-bottom: 0.5px solid var(--border);
  }
  .events-list-col { padding: 2.5rem 2rem 4rem; }
  .page-header { padding: 9rem 2rem 3.5rem; }
  .page-header::after { font-size: 120px; right: 1.5rem; bottom: 0.6rem; }
  .events-note { padding: 3rem 2rem 4rem; }
}

@media (max-width: 620px) {
  .event-card {
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 1.2rem;
    padding: 1.5rem 0;
  }
  .event-date .dd { font-size: 28px; }
  .event-title { font-size: 19px; }
  .event-actions { gap: 1.1rem; }
}

@media (max-width: 480px) {
  .page-header { padding: 8.8rem 1.4rem 3rem; }
  .page-header::after { display: none; }
  .page-title { font-size: clamp(36px, 10vw, 48px); }
  .page-subtitle { font-size: 16px; line-height: 1.65; letter-spacing: 0.03em; }
  .page-provenance { font-size: 9px; letter-spacing: 0.16em; gap: 0.6rem 1rem; }
  .events-list-col { padding: 2rem 1.4rem 3rem; }
  .events-map-col { height: 44vh; }
  .events-note { padding: 2.5rem 1.4rem 3rem; }
}

/* Leaflet animates pins and clusters on every zoom; honour the same opt-out the
   rest of the site does. */
@media (prefers-reduced-motion: reduce) {
  .sg-pin-inner, .sg-cluster .sg-cluster-inner,
  .event-card, .event-action { transition: none !important; }
}