/* =============================================================
   Events index — /events/
   Loaded only by events.php. Deliberately standalone rather
   than an addition to event.css: that file is the detail page,
   and the two share tokens rather than rules. The few classes
   that do appear in both — .crumbs, .event-tag — are redefined
   here for the same reason event.css redefines .crumbs itself:
   the other stylesheet is not loaded on this page.

   A light page, like the detail page, rather than one that
   follows the newsroom's dark toggle — that toggle is scoped to
   .news and would leave these tokens half-applied.
   ============================================================= */

.events { padding-bottom: 5rem; }

/* ---------- Breadcrumb ---------- */
.events .crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: var(--text-soft);
  margin-bottom: 1.5rem;
}
.events .crumbs a { color: var(--text-soft); text-decoration: none; }
.events .crumbs a:hover { color: var(--primary); }

/* ---------- Hero ---------- */
/* Same shape as the detail page's hero, so arriving here from an event page and
   going back does not feel like two different sites. */
.events-hero {
  padding-block: 3.5rem 2.5rem;
  background:
    radial-gradient(80% 120% at 12% 0%, var(--primary-soft), transparent 60%),
    var(--surface);
  border-bottom: 1px solid var(--line-soft);
}

.events-hero__eyebrow {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-soft);
  margin: 0 0 0.875rem;
}

.events-hero__title {
  font-size: clamp(1.75rem, 1.15rem + 2.4vw, 2.75rem);
  margin: 0 0 1rem;
}

.events-hero__lede {
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--text-muted);
  margin: 0;
  max-width: 42rem;
}

/* ---------- Sections ---------- */
.events__body { padding-top: 2.75rem; }

.events-block { margin-bottom: 3.25rem; }

.events-block__title {
  font-size: 1.25rem;
  margin: 0 0 1rem;
}

.events-block__note {
  margin: -0.5rem 0 1.25rem;
  font-size: 0.9375rem;
  color: var(--text-soft);
}

.events-prose {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--text-muted);
  margin: 0;
}

/* ---------- The list ---------- */
.events-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.25rem;
}

/* One card. Relative, because the title's link is stretched across the whole of
   it — see the note in includes/event-card.php. */
.event-card {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-glass);
  overflow: hidden;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.event-card:hover {
  transform: translateY(-2px);
  border-color: var(--primary);
  box-shadow: 0 18px 40px -24px rgba(15, 23, 42, 0.45);
}

/* The artwork sits above the text on a phone and beside it once there is room
   for both. aspect-ratio holds the stacked shape; in two columns the image
   simply fills whatever height the text sets. */
.event-card__art {
  background: var(--bg);
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
/* CONTAIN, NOT COVER, and it is not a matter of taste.
   These banners are posters: the date, the city, "invite only" and the partner
   logos are all printed across the artwork as pictures of text — which is why
   event.php writes the whole lot out again as alt text. Cover crops to fill the
   box, and in the narrow column this sits in on a desktop that threw away half
   of a 2.11:1 poster, taking the right-hand side of the sentence with it.
   Contain shows the whole thing and pads it against the card's own background,
   which reads as a framed poster rather than as a broken image. */
.event-card__art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.event-card__body { padding: 1.25rem 1.375rem 1.375rem; }

.event-card__eyebrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.75rem;
}

.event-card__series {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-soft);
}

.event-card__title {
  font-size: 1.1875rem;
  line-height: 1.35;
  margin: 0 0 0.5rem;
}

.event-card__link {
  color: inherit;
  text-decoration: none;
}
/* The whole card is the click target. The ring is drawn on this element rather
   than on the card so a keyboard user sees exactly what pressing enter opens. */
.event-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-lg);
}
.event-card__link:focus-visible { outline: none; }
.event-card__link:focus-visible::after {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}

.event-card__lede {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0 0 0.875rem;
  /* Two lines. The lede is written for the detail page's hero, where it has the
     room; here it is a taste of it and the rest is one click away. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.event-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem 1.25rem;
  margin: 0;
  font-size: 0.875rem;
  color: var(--text-soft);
}
.event-card__fact {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  min-width: 0;
}
.event-card__fact .icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--primary);
}
.event-card__time { color: var(--text-faint); }
.event-card__time::before {
  content: "\00b7";
  margin-inline: 0.375rem;
  color: var(--text-faint);
}

/* ---------- Photos link ---------- */
/* Sits above the title's stretched link, which otherwise covers the whole card
   and would swallow the click meant for this one. */
.event-card__photos {
  position: relative;
  z-index: 1;
  margin: 0.875rem 0 0;
  font-size: 0.875rem;
}
.event-card__photos-link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-weight: 600;
  color: var(--primary);
  text-decoration: none;
}
.event-card__photos-link::after {
  content: "\2192";
  transition: transform var(--speed, 0.2s) ease;
}
.event-card__photos-link:hover { text-decoration: underline; }
.event-card__photos-link:hover::after { transform: translateX(3px); }

/* ---------- Tags ---------- */
/* The base is the detail page's .event-tag, redefined because event.css is not
   loaded here. The tones are this page's own: a list is where "open" and
   "closed" have to be told apart at a glance. */
.event-tag {
  display: inline-block;
  padding: 0.25rem 0.625rem;
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  color: var(--accent-deep);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.event-tag--open { background: rgba(22, 163, 74, 0.12); color: #15803d; }
.event-tag--soon { background: rgba(217, 119, 6, 0.14); color: #b45309; }
.event-tag--shut {
  background: rgba(15, 23, 42, 0.05);
  color: var(--text-soft);
}

/* ---------- Past events ---------- */
/* Present, and plainly finished. Muted through weight and colour rather than
   opacity, which would take the text below the contrast it needs. */
.events-list--past { gap: 1rem; }

.event-card--past { box-shadow: none; }
.event-card--past:hover { box-shadow: 0 14px 32px -26px rgba(15, 23, 42, 0.4); }
.event-card--past .event-card__title { font-size: 1.0625rem; }
.event-card--past .event-card__art img { filter: grayscale(0.4); }

/* ---------- Nothing coming up ---------- */
.events-empty {
  margin: 0;
  padding: 1.25rem 1.375rem;
  border: 1px dashed var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--text-muted);
}
.events-empty a { color: var(--primary); }

/* ---------- Wider than a phone ---------- */
@media (min-width: 46rem) {
  /* 20rem rather than 15. A poster shown whole in a 15rem column renders about
     240px wide, at which the date across the top of this one is no longer
     readable — and an unreadable poster is decoration taking up a quarter of the
     card. Wide enough to read, narrow enough that the title still leads. */
  .event-card { grid-template-columns: 20rem 1fr; }
  .event-card__art { aspect-ratio: auto; height: 100%; }
  .event-card__body { padding: 1.5rem 1.625rem; }
}

@media (max-width: 640px) {
  .events-hero { padding-block: 2.5rem 2rem; }
}

@media (prefers-reduced-motion: reduce) {
  .event-card { transition: none; }
  .event-card:hover { transform: none; }
}