/* ──────────────────────────────────────────────────────────────────────
   Icebreaker /events, standalone page.
   Mirrors landing-page tokens (Dagssonic + Figtree, orange accent,
   asymmetric corners, shadow-based cards). Self-contained so it can
   be drag-and-dropped to any Netlify site without external asset
   dependencies.
   ────────────────────────────────────────────────────────────────────── */

@font-face {
  font-family: "Dagssonic";
  /* Points at the site-wide copy in /assets/fonts/ rather than a local
     duplicate. There used to be an identical Dagssonic.ttf sitting in
     this folder (md5 c558d1e2…, same 42504 bytes), which meant the font
     shipped twice and could be updated in one place and not the other.
     Absolute path, so it resolves the same whether this page is served
     from /events/ or anywhere else.

     Note this is the ONLY thing /events shares with the main stylesheet.
     It cannot simply load /styles.css instead of this file: 28 of the
     classes below exist nowhere else, `.hero` there is a two-column grid
     built for the homepage, and `--muted` there was deliberately set
     equal to `--ink`, which would flatten every piece of secondary text
     on this page. */
  src: url("/assets/fonts/Dagssonic-v2.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --ink: #171717;
  --paper: #ffffff;
  --paper-2: #f5f5f2;
  --paper-warm: #e3e4dc;
  --muted: #575757;

  --orange: #ff5500;
  --orange-tint: #ffe9dc;

  --aurora: #7ddb5a;
  --mint-tint: #f0faf5;
  --rose-tint: #fdf0f3;
  --gold-tint: #faf6e8;
  --sky-tint: #e8f4f8;
  --peach-tint: #fdefe5;
  --lilac-tint: #f1ecf8;

  /* Asymmetric corners, hand-drawn feel */
  --r-card-tl: 3px;
  --r-card-tr: 14px;
  --r-card-br: 6px;
  --r-card-bl: 10px;
  --r-chip-tl: 2px;
  --r-chip-tr: 16px;
  --r-chip-br: 4px;
  --r-chip-bl: 12px;

  --shadow-card: 0 3px 12px rgba(23, 23, 23, 0.10), 0 1px 3px rgba(23, 23, 23, 0.06);
  --shadow-card-hover: 0 6px 20px rgba(23, 23, 23, 0.14), 0 2px 6px rgba(23, 23, 23, 0.08);
}

* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  padding: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: "Figtree", system-ui, -apple-system, "Helvetica Neue", sans-serif;
  font-size: 17px;
  line-height: 1.5;
  letter-spacing: -0.005em;
  min-height: 100vh;
}

h1,
h2 {
  font-family: "Dagssonic", "Figtree", sans-serif;
  font-weight: normal;
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0;
}

h3 {
  font-family: "Figtree", sans-serif;
  font-weight: 600;
  line-height: 1.2;
  margin: 0;
}

a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}
a:hover {
  color: var(--orange);
}

/* ── Hero ──────────────────────────────────────────────────── */
.hero {
  padding: 48px 20px 24px;
  background: var(--paper);
  border-bottom: 2px solid var(--ink);
}
.hero__inner {
  max-width: 960px;
  margin: 0 auto;
}
.hero__title {
  font-size: clamp(48px, 8vw, 88px);
  color: var(--ink);
  margin-bottom: 12px;
}
.hero__title::after {
  content: ".";
  color: var(--orange);
}
.hero__lede {
  max-width: 640px;
  font-size: 17px;
  color: var(--ink);
  margin: 0;
}

/* ── Filter bar (sticky) ──────────────────────────────────── */
.filters {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--paper);
  border-bottom: 1px solid var(--ink);
  padding: 12px 20px;
}
.filters__inner {
  max-width: 960px;
  margin: 0 auto;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 2px 0;
}
.filters__inner::-webkit-scrollbar {
  display: none;
}

.chip {
  flex: 0 0 auto;
  padding: 8px 16px;
  background: var(--paper);
  color: var(--ink);
  border: 1.5px solid var(--ink);
  border-radius: var(--r-chip-tl) var(--r-chip-tr) var(--r-chip-br) var(--r-chip-bl);
  font-family: "Figtree", sans-serif;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s ease, color 0.12s ease, transform 0.08s ease;
}
.chip:hover {
  background: var(--paper-2);
}
.chip:active {
  transform: translateY(1px);
}
.chip.is-active {
  background: var(--ink);
  color: var(--paper);
}
.chip__count {
  opacity: 0.5;
  font-weight: 400;
  margin-left: 4px;
}
.filters__inner--days {
  margin-top: 8px;
}
.chip--date {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.chip--date input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

/* ── Events list ───────────────────────────────────────────── */
.events {
  max-width: 960px;
  margin: 0 auto;
  padding: 32px 20px 64px;
}
.events__status {
  color: var(--muted);
  font-size: 15px;
  padding: 24px 0;
  text-align: center;
}
.events__status.is-error {
  color: var(--orange);
}

.day-group {
  margin-bottom: 40px;
}
.day-group__title {
  font-size: clamp(28px, 4vw, 40px);
  color: var(--ink);
  margin-bottom: 4px;
}
.day-group__sub {
  color: var(--muted);
  font-size: 14px;
  margin-bottom: 20px;
}

.event {
  display: grid;
  grid-template-columns: 128px 1fr;
  gap: 20px;
  padding: 16px;
  background: var(--paper);
  border: 1.5px solid var(--ink);
  border-radius: var(--r-card-tl) var(--r-card-tr) var(--r-card-br) var(--r-card-bl);
  box-shadow: var(--shadow-card);
  margin-bottom: 12px;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.event:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-1px);
}

.event__img {
  width: 128px;
  height: 128px;
  border-radius: var(--r-card-tl) var(--r-card-tr) var(--r-card-br) var(--r-card-bl);
  overflow: hidden;
  background: var(--paper-2);
  display: flex;
  align-items: center;
  justify-content: center;
}
.event__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.event__img--placeholder {
  background: var(--peach-tint);
  padding: 24px;
}
.event__img--placeholder img {
  object-fit: contain;
  opacity: 0.7;
}

.event__body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.event__title {
  font-size: 20px;
  line-height: 1.25;
  color: var(--ink);
  margin: 0;
}
.event__title a {
  color: inherit;
  text-decoration: none;
}
.event__title a:hover {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.event__meta {
  color: var(--muted);
  font-size: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
}
.event__meta strong {
  color: var(--ink);
  font-weight: 600;
}
.event__desc {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 4px 0 0 0;
}
.event__badges {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 8px;
}
.badge {
  font-size: 12px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--paper-2);
  color: var(--ink);
  border: 1px solid var(--ink);
}
.badge--tag {
  background: var(--orange-tint);
  border-color: var(--orange);
  color: var(--ink);
}
.badge--free {
  background: var(--mint-tint);
  border-color: var(--aurora);
}
.badge--kids {
  background: var(--sky-tint);
  border-color: #60b5cf;
}

/* ── Empty / error states ─────────────────────────────────── */
.empty {
  text-align: center;
  padding: 48px 20px;
  color: var(--muted);
}
.empty__title {
  font-family: "Dagssonic", "Figtree", sans-serif;
  font-size: 32px;
  color: var(--ink);
  margin-bottom: 8px;
}

/* ── Footer ───────────────────────────────────────────────── */
.footer {
  border-top: 2px solid var(--ink);
  padding: 24px 20px;
  text-align: center;
  color: var(--muted);
  font-size: 14px;
}
.footer p {
  margin: 4px 0;
}
.footer__quiet {
  font-style: italic;
  opacity: 0.7;
}

/* ── Mobile tweaks ────────────────────────────────────────── */
@media (max-width: 600px) {
  .hero {
    padding: 32px 16px 20px;
  }
  .filters {
    padding: 10px 16px;
  }
  .events {
    padding: 24px 16px 48px;
  }
  .event {
    grid-template-columns: 88px 1fr;
    gap: 14px;
    padding: 12px;
  }
  .event__img {
    width: 88px;
    height: 88px;
  }
  .event__title {
    font-size: 17px;
  }
  .event__desc {
    -webkit-line-clamp: 2;
  }
}