/* ==========================================================================
   Queen's Gambit Zürich · Language switcher, event programme, registration
   Uses the existing design tokens (glass.css / atmosphere.css).
   ========================================================================== */

/* ---------- Language switcher (EN / DE) ---------- */
.lang-switch {
  display: inline-flex; align-items: center; gap: 2px; flex: none;
  padding: 3px;
  background: rgba(255, 255, 255, .55);
  border: 1px solid rgba(57, 73, 171, .16);
  border-radius: 10px;
}
.lang-switch__link {
  display: grid; place-items: center;
  min-width: 34px; min-height: 30px; padding: 0 .45rem;
  font: 600 .75rem/1 var(--font-body); letter-spacing: .08em;
  color: var(--muted); text-decoration: none; border-radius: 7px;
  transition: background-color .2s ease, color .2s ease;
}
.lang-switch__link:hover { color: var(--g-indigo); background: rgba(255, 255, 255, .8); }
.lang-switch__link[aria-current="page"] { color: var(--g-white); background: var(--g-indigo); }

/* In the header on wider screens; inside the opened mobile menu on phones */
.site-nav__lang { display: none; }
@media (max-width: 599px) {
  .site-header__inner > .lang-switch { display: none; }
  .site-nav__lang { display: block; padding: 1rem 0 .25rem; }
  .site-nav__list .lang-switch__link {
    display: grid; padding: 0 .9rem; min-height: 40px; border-bottom: 0;
    font: 600 .85rem/1 var(--font-body); letter-spacing: .08em; text-transform: none;
  }
}

/* ---------- Event: extras (programme toggle, registration) ---------- */
.event__admission { color: var(--g-indigo); font-weight: 600; }
.event__extras { display: grid; gap: .75rem; padding-top: .35rem; }
.event__buttons { display: flex; flex-wrap: wrap; gap: .6rem; }
.event__programme-toggle .event__chevron { transition: transform .3s ease; }
.event__programme-toggle[aria-expanded="true"] .event__chevron { transform: rotate(180deg); }

/* Smooth expand/collapse: animate the row from 0fr to 1fr */
.event__panel { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .35s ease, opacity .3s ease; }
.event__panel.is-open { grid-template-rows: 1fr; opacity: 1; }
.event__panel-inner { overflow: hidden; min-height: 0; }

.programme {
  width: 100%; border-collapse: collapse; margin-top: .25rem;
  font-size: var(--fs-small); font-variant-numeric: tabular-nums;
  background: rgba(255, 255, 255, .55);
  border: 1px solid rgba(255, 255, 255, .85);
  border-radius: 14px; overflow: hidden;
}
.programme th {
  text-align: left; padding: .6rem .8rem;
  font-size: .68rem; font-weight: 600; letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--g-indigo); border-bottom: 1px solid var(--rule);
}
.programme td { padding: .6rem .8rem; border-bottom: 1px solid var(--rule); vertical-align: top; }
.programme tr:last-child td { border-bottom: 0; }
.programme__time { white-space: nowrap; font-weight: 600; color: var(--g-ink); }
.programme__duration { white-space: nowrap; color: var(--muted); }

/* Phones: each programme row stacks (time + duration, then the item) */
@media (max-width: 599px) {
  .programme thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .programme, .programme tbody, .programme tr, .programme td { display: block; }
  .programme tr {
    display: grid; grid-template-columns: auto 1fr; gap: .1rem .75rem;
    padding: .65rem .8rem; border-bottom: 1px solid var(--rule);
  }
  .programme tr:last-child { border-bottom: 0; }
  .programme td { padding: 0; border: 0; }
  .programme__time { grid-row: 1; grid-column: 1; }
  .programme__duration { grid-row: 1; grid-column: 2; justify-self: end; }
  .programme__item { grid-row: 2; grid-column: 1 / -1; }
}

/* ---------- Registration dialog ---------- */
.reg-dialog {
  width: min(560px, calc(100% - 32px)); max-height: calc(100dvh - 32px);
  padding: 0; border: 0; background: transparent; color: var(--g-ink);
  overflow: visible;
}
.reg-dialog::backdrop { background: rgba(32, 35, 52, .38); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.reg-dialog__panel {
  position: relative;
  max-height: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain;
  padding: clamp(1.25rem, 4vw, 2rem);
  background: rgba(255, 255, 255, .9);
  border: 1px solid rgba(255, 255, 255, .95);
  border-radius: 22px;
  box-shadow: 0 30px 80px rgba(30, 64, 175, .25), inset 0 1px 0 #fff;
  -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%);
  display: grid; gap: .75rem;
}
.reg-dialog__close {
  position: absolute; top: .75rem; right: .75rem;
  width: 40px; height: 40px; display: grid; place-items: center;
  background: transparent; border: 0; border-radius: 10px; color: var(--g-ink); cursor: pointer;
}
.reg-dialog__close:hover { background: var(--g-lavender); }
/* Dialog title is a <p role="heading"> (filled in by JavaScript): same look as the h2 it replaces */
p.reg-dialog__title {
  margin: 0; color: var(--charcoal); text-wrap: balance;
  font-family: var(--font-heading); font-weight: 900; font-synthesis: none; letter-spacing: -0.03em;
}
/* Workshop levels are h5 (below the workshop title): same look as before */
.pilot__levels h5 {
  margin: 0; color: var(--charcoal); text-wrap: balance;
  font-family: var(--font-heading); font-weight: 900; font-synthesis: none;
  line-height: 1.25; letter-spacing: -0.02em;
}
.reg-dialog__title { font-size: clamp(1.25rem, 2vw + .8rem, 1.6rem); line-height: 1.15; padding-right: 2.5rem; text-transform: none; }
.reg-dialog__meta { color: var(--muted); font-size: var(--fs-small); }
.reg-dialog__free {
  padding: .7rem .9rem; border-radius: 12px;
  background: linear-gradient(135deg, rgba(0, 112, 180, .10), rgba(57, 73, 171, .10));
  color: var(--g-indigo); font-size: .95rem;
}

.reg-form { display: grid; gap: .9rem; margin-top: .25rem; }
.reg-field { display: grid; gap: .35rem; }
.reg-field label { font-weight: 600; font-size: .9rem; }
.reg-req { color: var(--g-blue); }
.reg-optional { font-weight: 400; color: var(--muted); }
/* Elo and chess club: only for the blitz tournament (shown by js/site.js) */
.reg-chess { display: grid; gap: .9rem; }
.reg-chess[hidden] { display: none; }
.reg-none { display: flex; align-items: center; gap: .5rem; margin-top: .1rem; }
.reg-none input { width: 18px; height: 18px; margin: 0; accent-color: var(--g-indigo); }
.reg-none label { font-weight: 400; font-size: .9rem; }
.reg-field input:disabled { opacity: .5; background: rgba(255, 255, 255, .5); }
.reg-field input[type=text], .reg-field input[type=email], .reg-field input[type=number], .reg-field select {
  width: 100%; min-height: 46px; padding: .6rem .8rem;
  font: 400 1rem/1.3 var(--font-body); color: var(--g-ink);
  background: rgba(255, 255, 255, .9);
  border: 1px solid rgba(57, 73, 171, .25); border-radius: 12px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.reg-field input:focus, .reg-field select:focus { outline: none; border-color: var(--g-blue); box-shadow: 0 0 0 3px rgba(0, 112, 180, .18); }
.reg-field [aria-invalid="true"] { border-color: #B3261E; }
.reg-field__error { color: #B3261E; font-size: var(--fs-small); }
.reg-field--check { grid-template-columns: auto 1fr; align-items: start; column-gap: .65rem; }
.reg-field--check input { width: 20px; height: 20px; margin-top: .15rem; accent-color: var(--g-indigo); }
.reg-field--check label { font-weight: 400; font-size: .9rem; }
.reg-field--check .reg-field__error { grid-column: 2; }
.reg-field--check a { color: var(--g-blue); }
.reg-form__privacy { font-size: var(--fs-small); color: var(--muted); }
.reg-form__alert {
  padding: .7rem .9rem; border-radius: 12px; font-size: .9rem;
  background: rgba(179, 38, 30, .08); color: #8C1D18; border: 1px solid rgba(179, 38, 30, .25);
}
.reg-form__submit { justify-self: start; }
.reg-form__submit[aria-busy="true"] { opacity: .75; cursor: progress; }
.reg-form__note { font-size: .78rem; color: var(--muted); }
.reg-form__hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.reg-done { display: grid; gap: .8rem; justify-items: start; padding-top: .25rem; }
.reg-done h3 { font-size: 1.3rem; }
.reg-done:focus, .reg-form__alert:focus { outline: none; }

/* ---------- Kids Chess: philosophy, pathway, workshop ---------- */
.kids__approach { max-width: 40rem; color: var(--muted); }
.principles { display: grid; gap: 1rem; margin: 0; padding: 0; }
.principle {
  display: grid; gap: .55rem; align-content: start;
  padding: clamp(1.25rem, 3vw, 1.75rem);
  background: var(--glass-bg); border: 1px solid var(--glass-border);
  border-radius: var(--g-radius); box-shadow: var(--glass-shadow);
}
.principle__num { font-family: var(--font-display); font-size: 1.6rem; line-height: 1; color: var(--g-blue); }
.principle h3 { font-size: clamp(1.15rem, 1vw + .9rem, 1.35rem); }
.kids__subtitle {
  font-family: var(--font-body); font-weight: 600; font-size: clamp(1.15rem, 1.2vw + .85rem, 1.5rem);
  line-height: 1.2; color: var(--g-indigo); max-width: 36ch; text-wrap: balance;
}
.kids__closing { margin-top: clamp(2.5rem, 6vw, 4rem); display: grid; gap: 1rem; }
.kids__closing-title { font-size: clamp(1.3rem, 1.5vw + .9rem, 1.75rem); }
.kids__pull { margin-top: 0; max-width: 34ch; }

.pathway { margin-top: clamp(3rem, 7vw, 5rem); display: grid; gap: 1.25rem; }
.pathway__title, .kids__subhead { font-size: clamp(1.3rem, 1.5vw + .9rem, 1.75rem); }
.pathway__steps { display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; counter-reset: step; }
.pathway__step {
  position: relative; display: grid; gap: .5rem; align-content: start; justify-items: start;
  padding: clamp(1.25rem, 3vw, 1.75rem);
  background: rgba(255, 255, 255, .5); border: 1px solid var(--glass-border); border-radius: var(--g-radius);
}
.pathway__step h4 { font-size: 1.2rem; }
.pathway__type { font-size: var(--fs-label); font-weight: 600; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--g-indigo); }
/* Arrow between steps: down on phones, right on wider screens */
.pathway__step + .pathway__step::before {
  content: ""; position: absolute; left: 50%; top: -1rem; width: 1rem; height: 1rem;
  transform: translate(-50%, -10%);
  background: var(--g-indigo);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4v14m-6-6 6 6 6-6' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4v14m-6-6 6 6 6-6' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.kids__subhead { margin: clamp(3rem, 7vw, 5rem) 0 1.25rem; }

@media (min-width: 720px) {
  .principles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pathway__steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
  .pathway__step + .pathway__step::before { left: -1.5rem; top: 50%; width: 1.5rem; height: 1.25rem; transform: translateY(-50%) rotate(-90deg); }
}

/* ---------- Kids workshop card: details fold away on phones ---------- */
.pilot__more { display: contents; }   /* larger screens: same layout as before */
.pilot__details-inner { display: grid; gap: 1.75rem; min-width: 0; }
.pilot__toggle { display: none; justify-self: start; }
.pilot__toggle .event__chevron { transition: transform .3s ease; }
.pilot__toggle[aria-expanded="true"] .event__chevron { transform: rotate(180deg); }
@media (max-width: 719px) {
  .pilot.is-collapsible .pilot__more { display: grid; min-width: 0; }
  .pilot.is-collapsible .pilot__toggle { display: inline-flex; }
  .pilot.is-collapsible .pilot__details {
    display: grid; grid-template-rows: 0fr; opacity: 0; visibility: hidden;
    transition: grid-template-rows .35s ease, opacity .3s ease, visibility 0s linear .35s;
  }
  .pilot.is-collapsible .pilot__details.is-open {
    grid-template-rows: 1fr; opacity: 1; visibility: visible;
    transition: grid-template-rows .35s ease, opacity .3s ease, visibility 0s;
  }
  .pilot.is-collapsible .pilot__details-inner { overflow: hidden; min-height: 0; }
  .pilot.is-collapsible .pilot__details-inner > :first-child { margin-top: 1.75rem; }
}
@media (prefers-reduced-motion: reduce) {
  .pilot__details, .pilot__toggle .event__chevron { transition: none !important; }
}

/* ---------- Upcoming list: multi-session dates fold away on phones ---------- */
.event__more { display: contents; }   /* larger screens: dates always shown, as before */
.event__dates-toggle { display: none; justify-self: start; }
.event__dates-toggle .event__chevron { transition: transform .3s ease; }
.event__dates-toggle[aria-expanded="true"] .event__chevron { transform: rotate(180deg); }
@media (max-width: 719px) {
  .event__more { display: grid; justify-items: start; min-width: 0; }
  .event__dates-toggle { display: inline-flex; }
  .event__fold {
    display: grid; grid-template-rows: 0fr; opacity: 0; visibility: hidden; width: 100%;
    transition: grid-template-rows .35s ease, opacity .3s ease, visibility 0s linear .35s;
  }
  .event__fold.is-open {
    grid-template-rows: 1fr; opacity: 1; visibility: visible;
    transition: grid-template-rows .35s ease, opacity .3s ease, visibility 0s;
  }
  .event__fold-inner { overflow: hidden; min-height: 0; }
  .event__fold-inner > .event__sessions { margin-top: .75rem; }
}
@media (prefers-reduced-motion: reduce) {
  .event__fold, .event__dates-toggle .event__chevron { transition: none !important; }
}

/* ---------- Registration page (/winz/): the same form, shown in the page ---------- */
.reg-page { padding-block: clamp(2rem, 6vw, 5rem); }
.reg-page__inner { display: grid; gap: clamp(1.5rem, 4vw, 2.5rem); max-width: 720px; }
.reg-inline .reg-dialog__panel { max-height: none; overflow: visible; box-shadow: 0 24px 60px rgba(30, 64, 175, .14), inset 0 1px 0 #fff; }
.reg-inline .reg-dialog__title { padding-right: 0; font-size: clamp(1.5rem, 3vw + .9rem, 2.2rem); }
.reg-page__event:empty { display: none; }

@media (prefers-reduced-motion: reduce) {
  .event__panel, .event__programme-toggle .event__chevron { transition: none; }
}

/* Upcoming dates for visitors without JavaScript (written by tools/build.py) */
.event-noscript { list-style: none; margin: .75rem 0 0; padding: 0; display: grid; gap: .5rem; }

/* ---------- Newsletter signup (inside the Join panel; js/newsletter.js) ---------- */
.newsletter {
  display: grid; gap: 1.25rem;
  padding: clamp(1.25rem, 3vw, 1.75rem);
  background: rgba(255, 255, 255, .12);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: var(--g-radius);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25);
}
.newsletter[hidden] { display: none; }
.newsletter__intro { display: grid; gap: .4rem; max-width: 40rem; }
.newsletter__intro p, .newsletter__done p { color: var(--g-lavender); }
.newsletter__form { max-width: 34rem; margin-top: 0; }
.newsletter__form[hidden] { display: none; }
.newsletter .reg-req { color: var(--g-lavender); }
.newsletter__topics { display: grid; gap: .55rem; margin: 0; padding: 0; border: 0; min-width: 0; }
.newsletter__topics legend { padding: 0; margin-bottom: .45rem; font-weight: 600; font-size: .9rem; }
.newsletter .reg-field--check input { accent-color: var(--g-electric); }
.newsletter .reg-field--check a { color: var(--g-white); text-decoration: underline; text-underline-offset: 2px; }
.newsletter .reg-field__error { color: #FFD7D3; }
.newsletter .reg-field [aria-invalid="true"] { border-color: #FFB4AB; box-shadow: 0 0 0 3px rgba(255, 180, 171, .35); }
.newsletter .reg-form__alert { background: rgba(255, 255, 255, .92); color: #8C1D18; border-color: rgba(179, 38, 30, .35); }
.newsletter__note { font-size: var(--fs-small); color: var(--g-lavender); }
.newsletter__done { display: grid; gap: .5rem; }
.newsletter__done[hidden] { display: none; }
.newsletter__done:focus { outline: none; }
@media (min-width: 900px) {
  .newsletter { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); column-gap: 2.5rem; align-items: start; }
}