/* ==========================================================================
   Workpeg Events — page styles
   Layout follows the workpeg.com landing page (www): a 1300px ruled frame,
   frosted sticky header, boxed sections with 1px hairlines, Plus Jakarta
   Sans display headings over Geist body text, pill tags and 16px cards.
   Colours, type sizes, weights, radii, shadows and spacing come from
   Pegment tokens (/css/pegment/, synced by scripts/sync-pegment.sh), and
   Pegment components (.btn, .badge, .input-wrapper, .tgl-btn, .tgl-group,
   .accordion, .ti) are used as-is in the markup.
   The page runs in Pegment's dark theme (class="dark" on <html>).
   ========================================================================== */

:root {
  /* Display face used for headings on workpeg.com */
  --font-display: 'Plus Jakarta Sans', var(--font-base);
  --frame-width: 1385px;
  /* Side margin, matching the workpeg.com header (px-16, lg:px-30), so every
     block lines up with the logo and the Register button */
  --gutter: 16px;
  --line: var(--color-border-subtle);
  --heading-color: var(--color-neutral-40);
}

@media (min-width: 1024px) { :root { --gutter: 30px; } }

/* ── Base ──────────────────────────────────────────────────────────────── */
/* Element defaults sit in Tailwind's base layer (/css/output.css loads first and
   declares the layer order), so the workpeg.com header's utility classes beat
   them exactly as they do on the rest of the site. Class rules below stay
   unlayered and win over Tailwind's preflight. */
@layer base {
  *, *::before, *::after { box-sizing: border-box; }
  html { color-scheme: dark; scroll-behavior: smooth; scroll-padding-top: 80px; }
  body {
    margin: 0;
    background: var(--color-bg-canvas);
    color: var(--color-text-primary);
    font-family: var(--font-base);
    font-size: var(--text-body-lg-size);
    line-height: var(--line-height-base);
    -webkit-font-smoothing: antialiased;
  }
  button, input, select, textarea { font: inherit; }
  button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
  button, a { touch-action: manipulation; }
  button { cursor: pointer; color: inherit; border: 0; background: none; padding: 0; }
  a { color: inherit; text-decoration: none; }
  :where(button, a):focus-visible {
    outline: 2px solid var(--color-border-focus);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
  }
  p { color: var(--color-text-tertiary); margin: 0 0 var(--space-md); }
  h1, h2, h3 { margin: 0; }
  h2 {
    font-family: var(--font-display);
    font-size: var(--text-display-md-size);
    line-height: var(--text-display-md-line-height);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--text-display-md-letter-spacing);
    color: var(--heading-color);
  }
  h3 {
    font-size: var(--text-title-md-size);
    line-height: var(--text-title-md-line-height);
    font-weight: var(--font-weight-medium);
  }
}
/* Pegment buttons, toggles and accordion headers draw their own focus ring */
.btn:focus-visible, .tgl-btn:focus-visible { outline: none; }
[hidden] { display: none !important; }
.phone-only { display: none !important; }

/* The ruled 1300px column every block sits in */
.frame { width: min(var(--frame-width), 100% - 2 * var(--gutter)); margin-inline: auto; }

/* Pill tag — the "Featured Pegs" label from workpeg.com */
.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  width: fit-content;
  height: 28px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: var(--text-body-md-size);
  line-height: var(--text-body-md-line-height);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-tertiary);
  white-space: nowrap;
}

/* Small uppercase label (used in JS-rendered event cards) */
.eyebrow {
  display: inline-block;
  font-size: var(--text-label-sm-size);
  line-height: var(--text-label-sm-line-height);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.08em;
  color: var(--color-text-tertiary);
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--text-body-md-size);
  line-height: var(--text-body-md-line-height);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  border-bottom: 1px solid var(--color-border-default);
  padding-bottom: var(--space-xs);
  transition: color var(--transition-fast), border-color var(--transition-fast);
}
.text-link:hover { color: var(--color-text-link); border-color: var(--color-text-link); }

/* Pegment badges are block-level flex; let them sit inline with text */
.badge { display: inline-flex; width: fit-content; }

/* ── Brand (footer logo; the header is the workpeg.com header, styled by /css/output.css) ── */
.brand > .brand__pill {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: var(--text-body-md-size);
  line-height: var(--text-body-md-line-height);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-tertiary);
}
.brand:has(.brand__pill) { gap: 8px; }
.brand { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.brand img { height: 22px; width: auto; }

/* ── Breadcrumb (event pages) ──────────────────────────────────────────── */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md) 0;
  font-size: var(--text-body-md-size);
  line-height: var(--text-body-md-line-height);
  color: var(--color-text-tertiary);
}
.breadcrumb a { display: inline-flex; align-items: center; gap: 6px; color: var(--color-text-secondary); transition: color var(--transition-fast); }
.breadcrumb a:hover { color: var(--color-text-primary); }
.breadcrumb [aria-current] { color: var(--color-text-primary); font-weight: var(--font-weight-medium); }

/* Native <select> inside a Pegment field: hide the OS arrow, show a Tabler chevron */
.input__field select.input { appearance: none; -webkit-appearance: none; cursor: pointer; padding-inline-end: var(--space-lg); }
/* Nothing chosen yet: the empty first option reads as a placeholder */
.input__field select.input:has(option[value=""]:checked) { color: var(--color-text-placeholder); }
.input__field select.input option { color: var(--color-text-primary); }
.input__field select.input + .ti {
  position: absolute;
  inset-inline-end: 14px;
  pointer-events: none;
  color: var(--color-icon-tertiary);
  --icon-size: 16px;
}
.input__field option { background: var(--color-surface-default); color: var(--color-text-primary); }

/* ── Hero ──────────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  display: grid;
  place-items: center;
  min-height: clamp(520px, calc(100dvh - 140px), 644px);
  padding: var(--space-2xl) var(--space-lg);
  border: 1px solid var(--line);
  isolation: isolate;
  text-align: center;
}
/* Photo on its own layer: grayscale keeps the page monochrome without
   draining the coloured buttons and badges above it */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgb(0 0 0 / .55), rgb(0 0 0 / .45) 40%, rgb(0 0 0 / .85)),
    url('/images/events/hackathon.jpg') center 44% / cover;
  filter: grayscale(1);
}
.hero-inner { display: grid; justify-items: center; gap: var(--space-md); max-width: 860px; }
.hero .pill {
  color: var(--color-text-secondary);
  border-color: var(--color-border-default);
  background: color-mix(in srgb, var(--color-bg-canvas) 45%, transparent);
  backdrop-filter: blur(8px);
}
.live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--color-success-icon); box-shadow: 0 0 8px var(--color-success-icon); }
.divider { color: var(--color-text-tertiary); }
.hero h1 {
  margin-top: var(--space-sm);
  font-family: var(--font-display);
  font-size: clamp(40px, 6vw, 86px);
  line-height: 1;
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--text-display-2xl-letter-spacing);
  color: var(--color-text-primary);
}
.hero h1 span { color: var(--color-text-secondary); }
.hero-subtitle {
  margin: 0;
  font-size: var(--text-headline-sm-size);
  line-height: var(--text-headline-sm-line-height);
  color: var(--color-text-secondary);
}
.hero-description { max-width: 565px; margin: 0; font-size: var(--text-body-lg-size); line-height: var(--text-body-lg-line-height); color: var(--color-text-tertiary); }
.hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: var(--space-md); }

/* Events home hero: animated canvas background (/js/workpeg-hero-bg.js + /css/workpeg-hero-bg.css)
   draws the isometric grid, travelling builders and rising peg-slabs */
.hero--home { overflow: hidden; padding: 117px var(--space-lg); background: var(--color-bg-canvas); }
.hero--home::before { content: none; }
.hero--home .wp-hero__bg { opacity: .8; }
.hero--home h1 { font-size: clamp(44px, 6vw, 86px); line-height: 1; }
.hero--home .hero-subtitle { max-width: 463px; color: var(--color-text-tertiary); }

/* ── Key facts strip (attached under the hero) ─────────────────────────── */
.facts {
  display: grid;
  grid-template-columns: 1fr 1fr 1.2fr;
  border: 1px solid var(--line);
  border-top: 0;
}
.fact { display: grid; align-content: start; justify-items: start; gap: var(--space-sm); padding: var(--space-xl) 32px; }
.fact + .fact { border-inline-start: 1px solid var(--line); }
.fact-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-bottom: var(--space-sm);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--color-bg-default);
  color: var(--color-icon-secondary);
}
.fact-icon .ti { --icon-size: 20px; }
.fact-label { font-size: var(--text-body-md-size); line-height: var(--text-body-md-line-height); color: var(--color-text-tertiary); }
.fact h3 {
  font-family: var(--font-display);
  font-size: var(--text-headline-sm-size);
  line-height: var(--text-headline-sm-line-height);
  font-weight: var(--font-weight-semibold);
  letter-spacing: -0.01em;
}
.fact p { margin: 0 0 var(--space-xs); font-size: var(--text-body-md-size); }
.fact-address { font-size: var(--text-body-xs-size); color: var(--color-text-placeholder); }
.fact--countdown { background: var(--color-bg-default); }
.countdown { display: flex; gap: var(--space-sm); }
.countdown > div {
  display: grid;
  justify-items: center;
  min-width: 64px;
  padding: var(--space-sm) 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--color-bg-canvas);
}
.countdown strong {
  font-family: var(--font-display);
  font-size: var(--text-headline-md-size);
  line-height: var(--text-headline-md-line-height);
  font-weight: var(--font-weight-semibold);
  font-variant-numeric: tabular-nums;
}
.countdown span { font-size: var(--text-label-xs-size); line-height: var(--text-label-xs-line-height); color: var(--color-text-tertiary); }
.fact .deadline { margin: var(--space-xs) 0 0; font-size: var(--text-body-xs-size); }

/* ── Sections ──────────────────────────────────────────────────────────── */
.section { margin-block: 98px; }
.section--open { width: min(var(--frame-width), 100% - 2 * var(--gutter)); margin-inline: auto; }
.section--boxed { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: var(--space-lg); }

/* Title left, copy right — "Why Workpeg changes everything" */
.split-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-lg);
  padding: 32px 0;
}
.split-head > h2 { max-width: 420px; }
.overview-intro { max-width: 440px; }
.overview-intro p { margin: var(--space-md) 0 0; font-size: var(--text-body-lg-size); line-height: var(--text-body-lg-line-height); }
.split-head > div:last-child:not(.tgl-group) { max-width: 520px; }
.split-head--center { padding: var(--space-sm) var(--space-sm) var(--space-lg); align-items: flex-end; }
.split-head--center h2 { margin: 12px 0 var(--space-sm); }
.split-head--center p { margin: 0; }
.lead { font-size: var(--text-title-lg-size); line-height: var(--text-title-lg-line-height); color: var(--color-text-secondary); }
.split-head > .lead { max-width: 568px; margin: 0; }
#featured .split-head > .lead { max-width: 411px; }
#featured .split-head > h2 { max-width: 380px; }

/* ── Overview feature cards ────────────────────────────────────────────── */
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); margin-top: var(--space-lg); }
.feature-card {
  display: grid;
  align-content: start;
  padding: var(--space-xs) var(--space-xs) 0;
  min-height: 360px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--color-bg-default);
}
.feature-card__art {
  display: grid;
  place-items: center;
  height: 208px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: rgb(0 0 0 / .4);
}
.feature-card__art strong {
  font-family: var(--font-display);
  font-size: 96px;
  line-height: 1;
  font-weight: var(--font-weight-semibold);
  letter-spacing: -0.04em;
  color: var(--heading-color);
}
.feature-card__art strong span { font-size: var(--text-display-md-size); color: var(--color-text-tertiary); margin-inline-start: var(--space-xs); letter-spacing: -0.02em; }
.feature-card__art .ti { --icon-size: 104px; color: var(--heading-color); }
.feature-card__art { position: relative; overflow: hidden; }
.feature-card__illustration {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  overflow: hidden;
  border-radius: 6.6px;
}
/* Animated Hairline illustrations (hairline/): 5:4 box, dark plate #08090a set by the kit */
.feature-card__body { display: grid; gap: var(--space-sm); padding: 32px var(--space-lg); }
.feature-card__body h3 { line-height: 28px; }
.feature-card__body p { margin: 0; font-size: var(--text-body-lg-size); line-height: var(--text-body-lg-line-height); }

/* ── Events ────────────────────────────────────────────────────────────── */
.intro-card {
  display: grid;
  justify-items: center;
  gap: 12px;
  padding: 32px 28px;
  text-align: center;
}
.intro-card h2 { font-weight: var(--font-weight-medium); }
.intro-card p { margin: 0; font-size: var(--text-title-lg-size); line-height: var(--text-title-lg-line-height); }
.events-toolbar { display: flex; justify-content: space-between; align-items: center; gap: var(--space-md); margin: var(--space-lg) 0; }
.search { max-width: 280px; }
.search .input__field { border-radius: 999px; background: var(--color-bg-default); }
.search .input__icon { color: var(--color-icon-tertiary); }
.search .input__icon .ti { --icon-size: 18px; }
.event-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); }
.event-card {
  display: block;
  overflow: hidden;
  color: inherit;
  padding: var(--space-xs);
  border: 1px solid var(--line);
  border-radius: 16px;
  transition: border-color 0.3s, box-shadow 0.3s;
}
a.event-card:hover {
  border-color: var(--color-border-default);
  box-shadow: 0 8px 8px -4px rgb(0 0 0 / .03), 0 20px 24px -4px rgb(0 0 0 / .08), inset 0 3px 10px 0 rgb(255 255 255 / .04);
}
.event-card-art {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  height: 200px;
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.event-card-art::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--art, none) center bottom / cover;
}
.event-card-art strong {
  font-family: var(--font-display);
  font-size: var(--text-display-md-size);
  line-height: 1.05;
  font-weight: var(--font-weight-semibold);
  letter-spacing: -0.03em;
}
.event-card-content { padding: var(--space-lg) 20px 20px; }
.event-card-content h3 {
  margin: var(--space-sm) 0 12px;
  font-family: var(--font-display);
  font-size: var(--text-headline-sm-size);
  line-height: var(--text-headline-sm-line-height);
  font-weight: var(--font-weight-semibold);
}
.event-card-content p { font-size: var(--text-body-md-size); line-height: 1.7; }
.event-card-content h3:first-child { margin-top: 0; }
article.event-card { cursor: default; }
/* Dates / Location / Registration rows, label left and value right, ruled */
.event-card-facts { margin: var(--space-md) 0; font-size: var(--text-body-md-size); line-height: var(--text-body-md-line-height); }
.event-card-facts > div { display: flex; justify-content: space-between; align-items: center; gap: var(--space-md); padding: 10px 0; border-top: 1px solid var(--line); }
.event-card-facts dt { display: flex; align-items: center; gap: var(--space-sm); flex-shrink: 0; color: var(--color-text-tertiary); }
.event-card-facts dd { margin: 0; text-align: end; color: var(--color-text-primary); }
.event-card-facts .ti { --icon-size: 16px; color: var(--color-icon-tertiary); }
.event-card-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--space-md);
  border-top: 1px solid var(--line);
  font-size: var(--text-body-xs-size);
  color: var(--color-text-tertiary);
}
.event-card-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-body-sm-size);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
}
.event-card-link .ti { transition: transform var(--transition-fast); }
.event-card:hover .event-card-link .ti { transform: translateX(3px); }

/* ── Featured event (home) ─────────────────────────────────────────────── */
.featured {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--space-xs);
  margin-top: var(--space-lg);
  padding: var(--space-xs);
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--color-bg-default);
}
.featured__art {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 420px;
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  border-radius: 20px;
}
.featured__art::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--art, none) center bottom / cover;
}
.featured__art strong {
  font-family: var(--font-display);
  font-size: var(--text-display-lg-size);
  line-height: var(--text-display-lg-line-height);
  font-weight: var(--font-weight-semibold);
  letter-spacing: -0.03em;
}
.featured__body { display: grid; align-content: center; justify-items: start; gap: var(--space-md); padding: 40px; }
.featured__body h3 {
  font-family: var(--font-display);
  font-size: var(--text-headline-lg-size);
  line-height: var(--text-headline-lg-line-height);
  font-weight: var(--font-weight-semibold);
  letter-spacing: -0.02em;
}
.featured__body > p { margin: 0; }
.featured__facts { display: grid; gap: 0; width: 100%; margin: var(--space-sm) 0; }
.featured__facts > div {
  display: flex;
  justify-content: space-between;
  gap: var(--space-md);
  padding: 12px 0;
  border-top: 1px solid var(--line);
  font-size: var(--text-body-md-size);
}
.featured__facts > div:last-child { border-bottom: 1px solid var(--line); }
.featured__facts dt { display: inline-flex; align-items: center; gap: var(--space-sm); color: var(--color-text-tertiary); }
.featured__facts dt .ti { --icon-size: 16px; }
.featured__facts dd { margin: 0; text-align: end; color: var(--color-text-primary); }
.featured__countdown { font-variant-numeric: tabular-nums; }
.featured__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.empty {
  padding: 28px;
  border: 1px dashed var(--color-border-default);
  border-radius: 16px;
  font-size: var(--text-body-md-size);
}


/* ── Prizes ────────────────────────────────────────────────────────────── */
.prizes { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.prizes h2 { margin: var(--space-md) 0 20px; }
.prize-description {
  max-width: 440px;
  font-family: var(--font-display);
  font-size: var(--text-headline-md-size);
  line-height: var(--text-headline-md-line-height);
  font-weight: var(--font-weight-medium);
  letter-spacing: -0.02em;
  color: var(--color-text-secondary);
}
.prizes > div > p:last-child { font-size: var(--text-body-md-size); }
.prize-card {
  padding: 32px;
  border-radius: 16px;
  background: var(--color-bg-inverse);
  color: var(--color-text-inverse);
}
.prize-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  font-size: var(--text-label-sm-size);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.prize-top .ti { --icon-size: 36px; }
.prize-card strong {
  display: block;
  margin-top: 20px;
  font-family: var(--font-display);
  font-size: 80px;
  line-height: 1.15;
  font-weight: var(--font-weight-bold);
  letter-spacing: -0.05em;
}
.prize-card h3 {
  margin-bottom: 12px;
  font-family: var(--font-display);
  font-size: var(--text-headline-sm-size);
  line-height: var(--text-headline-sm-line-height);
  font-weight: var(--font-weight-semibold);
}
.prize-card p { color: var(--color-neutral-200); font-size: var(--text-body-md-size); }
.prize-foot {
  display: flex;
  justify-content: space-between;
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid var(--color-neutral-40);
  font-size: var(--text-label-sm-size);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ── Schedule ──────────────────────────────────────────────────────────── */
.segmented { flex-shrink: 0; }
.segmented .tgl-btn span { margin-inline-start: 6px; font-size: var(--text-label-xs-size); opacity: .75; }
.notice {
  display: flex;
  gap: 12px;
  margin: 0 0 var(--space-sm);
  padding: var(--space-md) 20px;
  border-radius: 16px;
  background: var(--color-bg-default);
  color: var(--color-icon-secondary);
}
.notice .ti { --icon-size: 18px; flex-shrink: 0; margin-top: 1px; }
.notice p { margin: 0; font-size: var(--text-body-sm-size); line-height: 1.6; }
.notice strong { color: var(--color-text-primary); font-weight: var(--font-weight-semibold); }
.schedule-list { padding: 0 var(--space-sm); }
.schedule-row {
  display: grid;
  grid-template-columns: 110px 24px 1fr;
  gap: 20px;
  align-items: start;
  padding: 20px 0;
  border-bottom: 1px solid var(--color-border-medium);
}
.schedule-time {
  padding-top: 2px;
  font-size: var(--text-body-md-size);
  font-variant-numeric: tabular-nums;
  color: var(--color-text-secondary);
}
.schedule-dot {
  width: 8px;
  height: 8px;
  margin-top: 8px;
  border-radius: 50%;
  background: var(--color-text-primary);
  outline: 5px solid var(--color-surface-raised);
}
.schedule-row h3 { margin-bottom: var(--space-xs); color: var(--color-text-primary); }
.schedule-row p { font-size: var(--text-body-md-size); margin: 0; }
.schedule-note { margin: 20px var(--space-sm) var(--space-sm); font-size: var(--text-body-xs-size); }

/* ── FAQ — the workpeg.com layout: title left, Pegment accordion right ── */
.faq { display: flex; justify-content: space-between; gap: var(--space-lg); }
.faq-intro { flex: 0 1 441px; padding: 32px; }
.faq-intro h2 { font-weight: var(--font-weight-medium); margin-bottom: var(--space-md); }
.faq-intro > p { font-size: var(--text-body-lg-size); }
.faq-intro > .faq-draft {
  margin-top: var(--space-lg);
  padding-inline-start: 14px;
  border-inline-start: 2px solid var(--color-border-default);
  font-size: var(--text-body-xs-size);
  line-height: 1.7;
}
.faq-contact { margin-top: var(--space-xl); padding-top: var(--space-lg); border-top: 1px solid var(--line); }
.faq-contact h3 { margin-bottom: var(--space-sm); }
.faq-contact p { font-size: var(--text-body-md-size); }
.faq-list { flex: 0 1 640px; min-width: 0; padding: var(--space-sm) 0; }
.faq-group-title {
  margin: var(--space-lg) 0 var(--space-xs);
  padding: 0 12px;
  font-size: var(--text-label-sm-size);
  line-height: var(--text-label-sm-line-height);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}
.faq-group-title:first-child { margin-top: var(--space-sm); }
.faq-list .accordion { max-width: none; }
.faq-list .accordion--item { padding: 0; border-radius: var(--radius); }
.faq-list .accordion--header { padding: var(--space-md) 12px; cursor: pointer; color: inherit; }
.faq-list .accordion--title { white-space: normal; overflow: visible; }
.faq-list .accordion--item.is-open .accordion--panel { padding: 0 32px var(--space-md) 12px; }
.faq-list .accordion--content { line-height: 1.7; }
.faq-list .accordion--indicator .ti { --icon-size: 20px; }

/* ── Footer ────────────────────────────────────────────────────────────── */
.site-footer { margin-top: 98px; margin-bottom: 56px; }
.footer-cta {
  border: 1px solid var(--line);
  border-bottom: 0;
  background: url('/images/footer-bg-overlay.png') center / cover no-repeat;
}
.footer-cta__inner {
  display: grid;
  justify-items: center;
  gap: 32px;
  padding: 130px var(--space-lg);
  background: url('/images/footer-bg.webp') center / cover no-repeat;
  text-align: center;
}
.footer-cta h2 {
  max-width: 800px;
  font-size: var(--text-display-xl-size);
  line-height: var(--text-display-xl-line-height);
  color: var(--color-neutral-20);
}
.footer-cta__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.footer-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2xl);
  padding: 48px;
  border: 1px solid var(--line);
  border-bottom: 0;
}
.footer-brand { display: grid; gap: var(--space-md); }
.footer-brand .brand img { height: 24px; }
.footer-brand p { margin: 0; font-size: var(--text-body-md-size); }
.footer-links { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 48px; margin: 0; padding: 0; list-style: none; }
.footer-links a, .footer-links button {
  font-size: var(--text-body-lg-size);
  line-height: var(--text-body-lg-line-height);
  color: var(--color-text-tertiary);
  transition: color 0.3s;
}
.footer-links a:hover, .footer-links button:hover { color: var(--color-text-primary); }
.footer-links--muted a { color: var(--color-text-placeholder); }
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  padding: 48px;
  border: 1px solid var(--line);
}
.footer-bottom p { margin: 0; font-size: var(--text-body-md-size); line-height: var(--text-body-md-line-height); color: var(--color-text-placeholder); }
.socials { display: flex; gap: var(--space-lg); color: var(--color-neutral-100); }
.socials a { transition: color var(--transition-fast); }
.socials a:hover { color: var(--color-text-primary); }
.socials .ti { --icon-size: 22px; }

/* ── Application page (/events/<event>/apply/) ─────────────────────────── */
.apply-page {
  width: 100%;
  max-width: calc(412px + 2 * var(--gutter));
  margin: 0 auto;
  padding: 36px var(--gutter) 48px;
  box-sizing: border-box;
}
.apply-page h1 {
  margin: var(--space-md) 0 var(--space-sm);
  font-family: var(--font-display);
  font-size: var(--text-headline-sm-size);
  line-height: var(--text-headline-sm-line-height);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
}
.apply-page__lead { margin: 0 0 32px; font-size: var(--text-body-sm-size); line-height: var(--text-body-sm-line-height); color: var(--color-text-tertiary); }
#application-form { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-lg) var(--space-sm); }
#application-form .input-wrapper, #email-result .input-wrapper { max-width: none; }
#application-form .input-wrapper--textarea .input { min-height: 108px; }
.apply-page__submit { width: 100%; margin-top: 72px; }
.full { grid-column: 1 / -1; }
.form-note { margin: 0; font-size: var(--text-body-xs-size); line-height: 1.7; color: var(--color-text-tertiary); }
:is(#email-result, #apply-success) h2 {
  margin: var(--space-md) 0;
  font-family: var(--font-display);
  font-size: var(--text-headline-sm-size);
  line-height: var(--text-headline-sm-line-height);
  font-weight: var(--font-weight-semibold);
}
:is(#email-result, #apply-success) p { font-size: var(--text-body-md-size); line-height: 1.8; }
#apply-success strong, #success-name { color: var(--color-text-primary); }
#submit-error { margin-bottom: var(--space-md); padding: 12px var(--space-md); border: 1px solid var(--color-warning-border, var(--line)); border-radius: 12px; color: var(--color-text-secondary); }
#email-body { font-size: var(--text-body-xs-size); line-height: var(--text-body-xs-line-height); }
.result-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
#copy-status { margin-top: var(--space-sm); font-size: var(--text-body-sm-size); color: var(--color-success-text); }

/* ── Tablet & below (workpeg.com collapses its nav at 1024px) ──────────── */
@media (max-width: 1023px) {

  .facts { grid-template-columns: 1fr 1fr; }
  .fact--countdown { grid-column: 1 / -1; border-top: 1px solid var(--line); }
  .fact + .fact--countdown { border-inline-start: 0; }
  .feature-grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter);
  }
  .feature-grid::-webkit-scrollbar { display: none; }
  .feature-card { flex: 0 0 320px; min-height: 0; scroll-snap-align: center; }
  .prizes { gap: 40px; }
  .featured { grid-template-columns: 1fr; }
  .featured__art { min-height: 300px; }
  .faq-intro { flex-basis: 360px; padding: var(--space-lg) var(--space-md); }
  .footer-main { flex-direction: column; align-items: flex-start; gap: 32px; }
}

@keyframes slideDown {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── Phone ─────────────────────────────────────────────────────────────── */
@media (max-width: 700px) {
  h2 { font-size: var(--text-headline-md-size); line-height: var(--text-headline-md-line-height); }
  .brand img { height: 20px; }

  .breadcrumb { padding: 12px 0; }
  .featured__art { min-height: 240px; padding: var(--space-lg); }
  .featured__art strong { font-size: var(--text-display-md-size); line-height: var(--text-display-md-line-height); }
  .featured__body { padding: var(--space-lg) 20px; }
  .featured__body h3 { font-size: var(--text-headline-sm-size); line-height: var(--text-headline-sm-line-height); }
  .featured__art { min-height: 234px; }

  .hero { min-height: 475px; padding: 48px var(--gutter); }
  .hero-inner { gap: 12px; }
  .hero .pill { font-size: var(--text-body-xs-size); }
  .hero-subtitle { font-size: var(--text-body-lg-size); line-height: var(--text-body-lg-line-height); }
  .hero-description { font-size: var(--text-body-md-size); line-height: var(--text-body-md-line-height); }

  .facts { grid-template-columns: 1fr; }
  .fact { padding: var(--space-lg) 20px; }
  .fact + .fact { border-inline-start: 0; border-top: 1px solid var(--line); }
  .countdown > div { min-width: 0; flex: 1; }

  .section { margin-block: var(--space-2xl); }
  .section--boxed { padding: var(--space-md); }
  .split-head { flex-direction: column; align-items: center; text-align: center; padding: var(--space-md) 0; }
  .split-head--center { align-items: center; }
  .lead { font-size: var(--text-body-lg-size); line-height: var(--text-body-lg-line-height); }
  .split-head .text-link { margin-inline: auto; }

  .intro-card { padding: var(--space-lg) 20px; }
  .intro-card p { font-size: var(--text-body-lg-size); line-height: var(--text-body-lg-line-height); }
  .events-toolbar { flex-direction: column; align-items: stretch; }
  .search { max-width: none; }
  .event-grid { grid-template-columns: 1fr; }

  .prizes { grid-template-columns: 1fr; gap: 32px; }
  .prize-description { font-size: var(--text-headline-sm-size); line-height: var(--text-headline-sm-line-height); }
  .prize-card { padding: var(--space-lg); }
  .prize-card strong { font-size: var(--text-display-xl-size); }

  .schedule-list { padding: 0; }
  .schedule-row { grid-template-columns: 72px 12px 1fr; gap: 12px; }
  .schedule-time { font-size: var(--text-body-xs-size); }
  .schedule-note { margin-inline: 0; }

  .faq { flex-direction: column; gap: 0; }
  .faq-intro { flex-basis: auto; padding: var(--space-md) var(--space-sm); text-align: center; }
  .faq-intro > .faq-draft { text-align: start; }
  .faq-list { padding-top: 0; }

  .site-footer { margin-top: var(--space-2xl); }
  .footer-cta__inner { padding: 96px var(--gutter); }
  .footer-cta h2 { font-size: var(--text-display-md-size); line-height: var(--text-display-md-line-height); }
  .footer-main, .footer-bottom { padding: 32px var(--space-lg); }
  .footer-links { display: grid; gap: var(--space-md); }
  .footer-bottom { flex-direction: column-reverse; align-items: flex-start; }

  .phone-only { display: revert !important; }
  .not-phone { display: none !important; }

  /* Events home on phones, per the mobile frame */
  .events-home .hero-actions .btn--outline-gray { display: none; }
  .events-home .hero h1 span { color: inherit; }
  .events-home #events { display: none; }
  .events-home #why .split-head {
    gap: 12px;
    padding: 32px 28px;
    border-radius: 16px;
    background: var(--color-bg-default);
  }
  .events-home #why .split-head > .pill { display: inline-flex !important; }
  .events-home #why .split-head > h2 { font-weight: var(--font-weight-medium); }
  .events-home #why .split-head > .lead { color: var(--color-text-tertiary); }
  .events-home .feature-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-lg); margin-inline: 0; padding-inline: 0; overflow: visible; }
  .events-home .feature-card { min-height: 0; }
  .events-home .footer-cta, .events-home .footer-cta__inner { background: none; border: 0; }
  .events-home .footer-cta .pill { display: none; }
  .events-home .footer-brand { gap: 32px; }
  .events-home .footer-brand .brand__pill { display: none; }
  .events-home .footer-brand .socials { display: flex !important; }
  .events-home .footer-bottom { padding-block: 40px; }

  .result-actions { flex-direction: column; }
}
/* The form keeps two columns on most phones (Figma); only the narrowest stack */
@media (max-width: 419px) {
  #application-form { grid-template-columns: 1fr; }
}


/* ══════════════════════════════════════════════════════════════════════════
   Tabs tweak (Figma 1193:8321): Pegment primary tabs, rounded, on a subtle
   blurred track; selected = surface/default, others = text/tertiary.
   Used by the events filters and the event schedule's day switch.
   ══════════════════════════════════════════════════════════════════════════ */
.tabs--events {
  gap: 2px;
  padding: 4px;
  border-radius: 24px;
  background: var(--color-surface-default-subtle);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.tabs--events .tab {
  padding: 6px 16px;
  border-radius: 9999px;
  font-size: var(--text-label-lg-size);
  line-height: var(--text-label-lg-line-height);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-tertiary);
}
.tabs--events .tab[aria-selected="true"] {
  background: var(--color-surface-default);
  color: var(--color-text-primary);
  font-weight: var(--font-weight-medium);
}
.tabs--events.tabs--lg .tab { padding: 12px 24px; font-size: var(--text-body-lg-size); line-height: var(--text-body-lg-line-height); }

/* ══════════════════════════════════════════════════════════════════════════
   Event detail page (Figma 1132:3377) — /events/<event>/
   ══════════════════════════════════════════════════════════════════════════ */
.event-detail .ev-section { margin-block: 98px; }
.event-detail h2 { font-weight: var(--font-weight-semibold); }

/* Hero: framed on three sides, centred title, countdown strip along the bottom */
.ev-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 694px;
  border: 1px solid var(--line);
  border-top: 0;
}
.ev-hero__inner {
  flex: 1;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 28px;
  padding: 64px var(--space-lg);
  text-align: center;
}
.ev-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(44px, 6vw, 86px);
  line-height: 1;
  font-weight: var(--font-weight-semibold);
  letter-spacing: -0.02em;
  color: var(--color-text-primary);
}
.ev-hero h1 > span { color: var(--color-neutral-200); }
.ev-hero__pill {
  display: inline-flex;
  align-items: stretch;
  gap: 20px;
  margin: 0;
  padding: 11px var(--space-lg);
  border: 1px solid var(--color-border-default);
  border-radius: 16px;
  font-size: 22px;
  line-height: 32px;
  color: var(--color-text-secondary);
}
.ev-hero__sep { width: 1px; background: var(--color-border-default); }
.ev-hero__inner .btn { margin-top: 16px; }
.ev-countdown {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  height: 140px;
  margin: 0 -1px -1px;
}
.ev-countdown > div {
  display: grid;
  align-content: center;
  justify-items: center;
  border: 1.5px solid var(--line);
  margin-inline-end: -1px;
  background: var(--color-bg-canvas);
}
.ev-countdown strong {
  font-family: var(--font-display);
  font-size: 43px;
  line-height: 55px;
  font-weight: var(--font-weight-semibold);
  font-variant-numeric: tabular-nums;
}
.ev-countdown span { font-size: 17px; line-height: 21px; color: var(--color-text-tertiary); }

/* Boxed section: 1px frame, 24px inset */
.ev-boxed { border: 1px solid var(--line); padding: var(--space-lg); }
.ev-split { display: flex; justify-content: space-between; align-items: center; gap: var(--space-lg); padding: 32px; }
.ev-split h2 { max-width: 370px; }
.ev-split p { max-width: 455px; margin: 0; font-size: var(--text-title-lg-size); line-height: var(--text-title-lg-line-height); color: var(--color-text-placeholder); }

/* "Build better hospitality." cards: illustration above, text pinned to the bottom */
.ev-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); }
.ev-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 360px;
  padding: 32px;
  border-radius: 16px;
  background: var(--color-bg-default);
}
.ev-card__art { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); width: 270px; }
/* Hairline figures size themselves at 5:4 from their width */
.ev-card__body { position: relative; display: grid; gap: var(--space-sm); }
.ev-card h3 { font-size: var(--text-title-lg-size); line-height: var(--text-title-lg-line-height); font-weight: var(--font-weight-normal); color: var(--color-text-primary); }
.ev-card p { margin: 0; font-size: var(--text-body-lg-size); line-height: var(--text-body-lg-line-height); color: var(--color-text-placeholder); }

/* Prize & Rewards */
.ev-prizes { width: min(984px, 100% - 2 * var(--gutter)); margin-inline: auto; }
.ev-prizes__head { max-width: 729px; margin: 0 auto 48px; text-align: center; }
.ev-prizes__head h2 { font-weight: var(--font-weight-medium); margin-bottom: var(--space-md); }
.ev-prizes__head p { margin: 0; font-size: var(--text-title-lg-size); line-height: var(--text-title-lg-line-height); color: var(--color-text-placeholder); }
.ev-prizes__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 80px; }
.ev-prize {
  display: grid;
  justify-items: center;
  align-content: start;
  min-height: 526px;
  padding: 48px var(--space-lg);
  border: 1px solid var(--color-border-medium);
  border-radius: 16px;
  background: var(--color-bg-default);
  text-align: center;
}
.ev-prize--grand { border-color: var(--color-brand-secondary); }
.ev-prize__label {
  margin: 0;
  font-size: var(--text-title-lg-size);
  line-height: var(--text-title-lg-line-height);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  color: var(--color-text-secondary);
}
.ev-prize--grand .ev-prize__label { color: var(--color-brand-secondary); }
.ev-prize__coin { width: 261px; height: 230px; margin: 24px 0; }
.ev-prize__coin { display: flex; justify-content: center; }
/* <hairline-coin> (/js/hairline-coins.js) is a 5:4 box; at 287.5 × 230 its coin
   matches the Figma "Coin body" frame (1177:5510) */
.ev-prize__coin hairline-coin { flex: 0 0 auto; width: 287.5px; }
.ev-prize strong {
  font-family: var(--font-display);
  font-size: var(--text-display-xl-size);
  line-height: var(--text-display-xl-line-height);
  font-weight: var(--font-weight-semibold);
  letter-spacing: -0.02em;
}
.ev-prize > p:last-child { margin: 24px 0 0; font-size: var(--text-title-lg-size); line-height: var(--text-title-lg-line-height); color: var(--color-text-secondary); }

/* Schedule: box on the page column, title + day tabs, timeline rows */
.ev-schedule {
  width: min(var(--frame-width), 100% - 2 * var(--gutter));
  margin-inline: auto;
  padding: 24px 24px 32px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.ev-schedule__head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-md); padding: 8px 8px 24px; }
.ev-schedule__list { padding: 8px 8px 0; }
.ev-schedule .schedule-row { grid-template-columns: 110px 8px 1fr; gap: 20px; padding: 20px 0; border-bottom: 1px solid var(--color-border-medium); }
.ev-schedule .schedule-row > div { padding-inline-start: var(--space-md); }
.ev-schedule .schedule-dot { margin-top: 8px; outline: 0; border: 4px solid var(--color-border-medium); width: 8px; height: 8px; box-sizing: content-box; margin-inline-start: -4px; background: var(--color-text-primary); }
.ev-schedule .schedule-row h3 { font-size: var(--text-body-lg-size); line-height: var(--text-body-lg-line-height); font-weight: var(--font-weight-medium); }
.ev-schedule .schedule-row p { font-size: var(--text-body-md-size); line-height: 21px; color: var(--color-text-tertiary); }
.ev-schedule__note { margin: 20px 8px 0; font-size: var(--text-body-xs-size); line-height: 18px; color: var(--color-text-tertiary); }

/* FAQ: title left, accordion panel right */
.ev-faq { display: flex; gap: var(--space-lg); align-items: flex-start; }
.ev-faq h2 { flex: 1; max-width: 309px; padding: 32px; box-sizing: content-box; font-weight: var(--font-weight-medium); }
.ev-faq__panel { flex: 0 1 711px; min-width: 0; margin-inline-start: auto; padding: var(--space-md); border: 1px solid var(--line); border-radius: 16px; }
/* Pegment accordion inside the panel: full width, and long questions wrap */
.ev-faq__panel .accordion { max-width: none; }
.ev-faq__panel .accordion--title { white-space: normal; overflow: visible; }

/* More Workpeg events */

/* Footer CTA link beside the Apply button */
.event-detail .footer-cta__actions { align-items: center; gap: var(--space-lg); }
.event-detail .ev-link { border-bottom: 0; padding: 0; color: var(--color-text-primary); }

@media (max-width: 1023px) {
  .ev-cards { grid-template-columns: 1fr; }
  .ev-prizes__grid { gap: var(--space-lg); }
  .ev-faq { flex-direction: column; }
  .ev-faq h2 { max-width: none; padding: var(--space-md); }
  .ev-faq__panel { flex-basis: auto; width: 100%; margin-inline-start: 0; }
}
@media (max-width: 700px) {
  .event-detail .ev-section { margin-block: var(--space-2xl); }
  .ev-hero { min-height: 0; }
  .ev-hero__inner { padding: 64px var(--gutter) 48px; gap: 20px; }
  .ev-hero__pill { flex-direction: column; align-items: center; gap: 4px; font-size: var(--text-body-lg-size); line-height: var(--text-body-lg-line-height); padding: 10px 20px; }
  .ev-hero__sep { display: none; }
  .ev-countdown { height: 96px; }
  .ev-countdown strong { font-size: var(--text-headline-md-size); line-height: var(--text-headline-md-line-height); }
  .ev-countdown span { font-size: var(--text-body-sm-size); }
  .ev-split { flex-direction: column; align-items: flex-start; padding: var(--space-md); }
  .ev-boxed { padding: var(--space-md); }
  .ev-card { height: 340px; padding: var(--space-lg); }
  .ev-card__art { width: 240px; top: 4px; }
  .ev-prizes__grid { grid-template-columns: 1fr; }
  .ev-prize { min-height: 0; }
  .ev-prize__coin { height: 200px; }
  .ev-prize__coin hairline-coin { width: 250px; }
  .ev-schedule__head { flex-direction: column; align-items: flex-start; }
  .ev-schedule .schedule-row { grid-template-columns: 72px 8px 1fr; gap: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Translated pages (src/<lang>/events/…, scripts/events-i18n/gen.py)
   Layout uses logical properties (inline-start/end), so Arabic and Hebrew
   (dir="rtl") mirror on their own; these rules cover what does not.
   ══════════════════════════════════════════════════════════════════════════ */
/* Arrows point the way the page reads */
[dir="rtl"] :is(.ti-arrow-right, .ti-arrow-left, .ti-arrow-up-right) { transform: scaleX(-1); }
[dir="rtl"] .event-card:hover .event-card-link .ti { transform: scaleX(-1) translateX(3px); }
/* URLs read left to right in every language; keeps the https:// chip on the left with its own corners */
[dir="rtl"] .input-wrapper--link .input__field { direction: ltr; }
/* Joined and stacked scripts: no negative tracking (it breaks Arabic joins and
   the Devanagari headline), and taller lines for their ascenders and marks */
:is(:lang(ar), :lang(he), :lang(hi)) :is(h1, h2, h3, strong, .featured__art strong, .event-card-art strong) { letter-spacing: normal; }
:is(:lang(ar), :lang(hi)) :is(h1, h2) { line-height: 1.3; }