/* ------------------------------------------------------------------
   Events: the page of upcoming event cards.

   Each card wears the colour of its category, using the same accent
   variables as the blog cards (--c1 and --c2 from .blog-teal and the
   rest, defined in article.css, which this page also loads). An event
   with a flyer shows the flyer; one without shows a coloured band with
   the category's icon behind it. The date tile sits on both, so a list
   mixing the two still scans as one design.
   ------------------------------------------------------------------ */

.ev-hero {
  background: linear-gradient(180deg, #eef3fb 0%, var(--surface) 100%);
  border-bottom: 1px solid var(--line);
  padding: 44px 0 38px;
}
.ev-hero h1 { font-size: clamp(2rem, 4.4vw, 3rem); line-height: 1.07; margin: 12px 0 12px; }
.ev-lede { font-size: 1.06rem; line-height: 1.62; color: var(--ink-2); max-width: 62ch; margin: 0; }

.ev-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1px;
  margin-top: 26px; background: var(--line); border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
}
.ev-stat { background: var(--surface); padding: 15px 18px; }
.ev-stat i { display: inline-flex; color: var(--teal-deep); }
.ev-stat svg { width: 17px; height: 17px; }
.ev-stat b { display: block; margin-top: 8px; font-size: 1.35rem; line-height: 1.15; color: var(--ink); }
.ev-stat span { display: block; margin-top: 4px; color: var(--muted); font-size: var(--fs-sm); line-height: 1.45; }

.ev-body { background: var(--surface); padding: 44px 0 10px; }
.ev-section { margin-bottom: 46px; }
.ev-h2 { display: flex; align-items: center; gap: 10px; font-size: clamp(1.25rem, 2.2vw, 1.6rem); margin: 0 0 6px; }
.ev-h2 svg { width: 20px; height: 20px; color: var(--teal-deep); }
.ev-sub { margin: 0 0 20px; color: var(--ink-2); font-size: var(--fs-sm); line-height: 1.6; max-width: 70ch; }
.ev-h2 + .ev-grid { margin-top: 20px; }

.ev-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px; }
@media (min-width: 1100px) { .ev-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---------- the card ---------- */
.ev-card {
  display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--line); border-radius: 18px; background: var(--surface);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.ev-card:hover { transform: translateY(-3px); border-color: transparent; box-shadow: 0 16px 38px rgba(11, 27, 63, 0.16); }
.ev-card:focus-within { border-color: var(--brand); }
@media (prefers-reduced-motion: reduce) { .ev-card, .ev-card:hover { transition: none; transform: none; } }

.ev-card-top {
  position: relative; display: block; min-height: 190px; overflow: hidden; text-decoration: none;
  background: linear-gradient(145deg, var(--c1) 0%, var(--c2) 100%);
}
.ev-card.has-flyer .ev-card-top { min-height: 0; background: var(--wash-2); }
.ev-card-flyer { display: block; width: 100%; height: 230px; object-fit: cover; }
/* the lattice, same motif as the blog cards, so the two pages feel related */
.ev-card:not(.has-flyer) .ev-card-top::before {
  content: ""; position: absolute; inset: 0; opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='96' viewBox='0 0 84 96'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='1.5' opacity='.28'%3E%3Cpath d='M21 8 L35 16 L35 32 L21 40 L7 32 L7 16 Z'/%3E%3Cpath d='M63 32 L77 40 L77 56 L63 64 L49 56 L49 40 Z'/%3E%3Cpath d='M21 56 L35 64 L35 80 L21 88 L7 80 L7 64 Z'/%3E%3Cpath d='M35 24 L49 40'/%3E%3Cpath d='M35 64 L49 56'/%3E%3C/g%3E%3C/svg%3E");
}
.ev-card-motif { position: absolute; right: -10px; bottom: -14px; color: rgba(255, 255, 255, 0.22); }
.ev-card-motif svg { width: 120px; height: 120px; stroke-width: 1.2; }

/* the date tile: the thing people are scanning for */
.ev-date {
  position: absolute; top: 16px; left: 16px; display: grid; justify-items: center; min-width: 62px;
  padding: 9px 10px 7px; border-radius: 13px; background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 4px 14px rgba(8, 20, 45, 0.22);
}
.ev-date b { font-size: 1.45rem; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.ev-date span { margin-top: 2px; font-size: 0.72rem; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: color-mix(in srgb, var(--c2) 80%, #000); }
@supports not (color: color-mix(in srgb, red 50%, blue)) { .ev-date span { color: var(--brand-ink); } }

.ev-chips { position: absolute; top: 16px; right: 16px; display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.ev-chip {
  display: inline-block; padding: 5px 11px; border-radius: 999px; font-size: var(--fs-xs); font-weight: 750;
  background: rgba(8, 18, 40, 0.34); border: 1px solid rgba(255, 255, 255, 0.3); color: #fff;
}
.ev-card.has-flyer .ev-chip { background: rgba(8, 18, 40, 0.62); }
.ev-chip.soon { background: var(--amber); color: #3b2500; border-color: rgba(255, 255, 255, 0.5); }

.ev-card-main { padding: 18px 20px 4px; flex: 1 1 auto; }
.ev-card-main h3 { margin: 0 0 8px; font-size: 1.22rem; line-height: 1.25; }
.ev-card-main h3 a { color: var(--ink); text-decoration: none; }
.ev-card:hover .ev-card-main h3 a { color: var(--brand-ink); }
.ev-card-sum { margin: 0; color: var(--ink-2); font-size: var(--fs-sm); line-height: 1.6; }

.ev-facts { list-style: none; margin: 15px 0 0; padding: 0; display: grid; gap: 7px; }
.ev-facts li { display: flex; align-items: center; gap: 9px; color: var(--ink-2); font-size: var(--fs-sm); }
.ev-facts svg { width: 15px; height: 15px; color: color-mix(in srgb, var(--c2) 75%, #000); flex: 0 0 auto; }
@supports not (color: color-mix(in srgb, red 50%, blue)) { .ev-facts svg { color: var(--muted); } }

.ev-speakers { display: flex; align-items: center; gap: 10px; margin-top: 15px; }
.ev-faces { display: flex; }
.ev-faces img, .ev-face-initials {
  width: 30px; height: 30px; border-radius: 50%; object-fit: cover;
  border: 2px solid var(--surface); margin-left: -8px; background: var(--wash-2);
}
.ev-faces > :first-child { margin-left: 0; }
.ev-face-initials { display: grid; place-items: center; font-size: 0.62rem; font-weight: 800; color: var(--ink-2); }
.ev-speaker-names { color: var(--ink-2); font-size: var(--fs-sm); font-weight: 650; }

.ev-seats { position: relative; height: 22px; margin-top: 15px; border-radius: 999px; background: var(--wash-2); overflow: hidden; }
.ev-seats > span { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, var(--c1), var(--c2)); opacity: .22; }
.ev-seats em {
  position: relative; display: block; line-height: 22px; text-align: center; font-style: normal;
  font-size: var(--fs-xs); font-weight: 750; color: var(--ink-2);
}

.ev-card-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 15px 20px; margin-top: 18px; border-top: 1px solid var(--line-soft);
}
.ev-more { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: var(--fs-sm);
  color: color-mix(in srgb, var(--c2) 85%, #000); text-decoration: none; }
@supports not (color: color-mix(in srgb, red 50%, blue)) { .ev-more { color: var(--brand-ink); } }
.ev-more svg { width: 15px; height: 15px; transition: transform .16s ease; }
.ev-card:hover .ev-more svg { transform: translateX(3px); }
.ev-closed { display: inline-flex; align-items: center; gap: 7px; color: var(--danger); font-weight: 700; font-size: var(--fs-sm); }
.ev-closed svg { width: 16px; height: 16px; }

/* ---------- already run ---------- */
.ev-past { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 8px; }
.ev-past a {
  display: grid; grid-template-columns: 110px minmax(0, 1fr) auto 18px; gap: 14px; align-items: center;
  padding: 13px 18px; border: 1px solid var(--line); border-left: 4px solid var(--c1);
  border-radius: 12px; background: var(--wash); text-decoration: none;
}
.ev-past a:hover { border-color: var(--line-2); border-left-color: var(--c2); background: var(--surface); }
.ev-past-date { color: var(--muted); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.ev-past-title { color: var(--ink); font-weight: 650; }
.ev-past-kind { color: var(--muted); font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.ev-past svg { width: 16px; height: 16px; color: var(--muted); }

/* ---------- empty state and closing band ---------- */
.ev-empty { text-align: center; padding: 48px 0 56px; }
.ev-empty svg { width: 34px; height: 34px; color: var(--muted); }
.ev-empty h2 { margin: 14px 0 8px; }
.ev-empty p { color: var(--ink-2); max-width: 52ch; margin: 0 auto 20px; line-height: 1.6; }

.ev-cta { background: var(--night); color: #fff; padding: 46px 0; }
.ev-cta h2 { color: #fff; margin: 0 0 10px; font-size: clamp(1.4rem, 2.6vw, 2rem); }
.ev-cta p { color: #c2d0e9; max-width: 64ch; line-height: 1.65; margin: 0 0 22px; }

@media (max-width: 760px) {
  .ev-past a { grid-template-columns: minmax(0, 1fr) auto; row-gap: 4px; }
  .ev-past-date { grid-column: 1 / -1; }
  .ev-card-foot { flex-direction: column; align-items: stretch; gap: 10px; }
  .ev-card-foot .btn { justify-content: center; }
  .ev-more { justify-content: center; }
}

/* Before anybody has booked, the bar would be empty and the row would look broken, so it reads
   as a plain capacity line instead. */
.ev-seats.is-open { background: transparent; border: 1px dashed var(--line-2); }

/* ---------- the flyer, shown whole ---------- */
/* A portrait poster cropped into a landscape card loses its own headline, which is the mistake on
   most event listings. The picture is blurred and scaled up behind to fill the frame, then the
   poster itself sits on top complete. */
.ev-card.has-flyer .ev-card-top { min-height: 240px; background: #0b1b3f; }
.ev-card-backdrop {
  position: absolute; inset: -24px; background-size: cover; background-position: center;
  filter: blur(18px) saturate(1.1) brightness(0.72); transform: scale(1.06);
}
.ev-card-flyer { position: relative; display: block; width: 100%; height: 240px; object-fit: contain; }

/* ---------- the reader's own timezone, added by localtime.js ---------- */
.ev-localtime { color: var(--brand-ink); font-weight: 650; }
.ev-facts .ev-localtime { font-size: inherit; }

/* two lines of title and two of summary, so a row of cards lines up */
.ev-card-main h3 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ev-card-sum { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }