/* Group C: events, event detail, register, sponsor, cancel-registration, gala.
   Uses tokens and components from the shared files; only page-level layout lives here. */

/* ---------- shared ---------- */
.gc-narrow { max-width: 46rem; margin-inline: auto; }
.gc-lead { font-size: var(--step-1); max-width: 60ch; }
.gc-muted { color: var(--ink-600); }
.gc-actions { display: flex; flex-wrap: wrap; gap: var(--space-xs); align-items: center; }
.gc-notfound { text-align: center; }
.gc-hidden-title:focus { outline: none; }
.gc-region { display: block; }
.gc-section-title { font-size: var(--step-2); margin: 0 0 var(--space-s); }
[data-step-heading]:focus, .gc-focus-target:focus { outline: none; }

/* ---------- events listing ---------- */
.events-toolbar { display: flex; flex-direction: column; gap: var(--space-s); margin-bottom: var(--space-m); }
.events-toolbar__row { display: flex; flex-wrap: wrap; gap: var(--space-s) var(--space-l); align-items: flex-end; justify-content: space-between; }
.events-toolbar .chip-group { margin: 0; }
.events-toolbar__label { display: block; font-size: var(--step--1); font-weight: var(--weight-bold); color: var(--ink-700); margin-bottom: var(--space-2xs); }
.events-count { margin: 0; color: var(--ink-700); font-size: var(--step--1); }
.events-results { --grid-min: 24rem; }
.events-results > .empty-state { grid-column: 1 / -1; }
.events-pager { margin-top: var(--space-l); display: flex; justify-content: center; }
.events-results h3 { margin: 0; }

/* ---------- event detail ---------- */
.hero-card {
  background: var(--surface-raised); color: var(--ink-900); border-radius: var(--radius-md);
  padding: var(--space-m); display: flex; flex-direction: column; gap: var(--space-s);
  box-shadow: var(--shadow-m, 0 8px 24px rgba(0, 0, 0, .2));
}
.hero-card__title { font-family: var(--font-display); font-size: var(--step-1); margin: 0; color: var(--navy-800); }
.hero-card p { margin: 0; }
.hero-card .btn { width: 100%; justify-content: center; }
.hero-card__note { font-size: var(--step--1); color: var(--ink-700); }
.hero-card a:not(.btn) { color: var(--color-link); }
.page-hero .hero-card a:not(.btn):hover { color: var(--color-link-hover); }
.event-facts { display: grid; gap: var(--space-m); }
.event-facts .dl { font-size: var(--step-0); }
.event-section { margin-top: var(--space-xl); }
.event-section > h2 { font-size: var(--step-2); margin: 0 0 var(--space-s); }
.reg-box { border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-m); background: var(--surface-raised); display: flex; flex-direction: column; gap: var(--space-s); }
.reg-box h3 { margin: 0; font-size: var(--step-1); }
.reg-box p { margin: 0; }
.reg-box--ended { background: var(--surface-sunken); }
.waitlist-form { display: grid; gap: var(--space-s); max-width: 30rem; }
.waitlist-done { display: flex; flex-direction: column; gap: var(--space-2xs); }
.tier-grid { --grid-min: 15rem; align-items: stretch; list-style: none; padding: 0; margin: 0; }
.tier-card { display: flex; flex-direction: column; gap: var(--space-s); height: 100%; }
.tier-card.is-soldout { background: var(--surface-sunken); }
.tier-card.is-soldout .tier-card__price { color: var(--ink-600); }
.tier-card__head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-xs); }
.tier-card__name { font-size: var(--step-1); margin: 0; color: var(--navy-800); }
.tier-card__benefits { margin: 0; padding-left: 1.2em; flex: 1; }
.tier-card__benefits li + li { margin-top: 0.3em; }
.tier-card__left { font-size: var(--step--1); color: var(--ink-700); margin: 0; }

/* ---------- register + sponsor ---------- */
.flow { display: flex; flex-direction: column; gap: var(--space-l); }
.flow-event { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-xs) var(--space-m); align-items: center; }
.flow-event h2 { margin: 0; font-size: var(--step-1); }
.flow-event p { margin: 0; color: var(--ink-700); font-size: var(--step--1); }
.flow [data-step] { display: flex; flex-direction: column; gap: var(--space-m); }
.flow [data-step] > h2 { margin: 0; font-size: var(--step-2); }
.order-summary { width: 100%; border-collapse: collapse; }
.order-summary th, .order-summary td { text-align: left; padding: 0.6rem 0.25rem; border-bottom: 1px solid var(--border); }
.order-summary td:last-child, .order-summary th:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.order-summary tfoot th, .order-summary tfoot td { font-size: var(--step-1); font-weight: var(--weight-bold); border-bottom: 0; }
.order-summary caption { text-align: left; font-weight: var(--weight-bold); padding-bottom: var(--space-2xs); }
.pay-methods { display: grid; gap: var(--space-xs); grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.pay-method {
  display: flex; gap: var(--space-xs); align-items: flex-start; padding: var(--space-s);
  border: 2px solid var(--border); border-radius: var(--radius-md); background: var(--surface-raised); cursor: pointer;
}
.pay-method:has(input:checked) { border-color: var(--navy-800); background: var(--surface-sky); }
.pay-method:has(input:focus-visible) { outline: var(--focus-width) solid var(--focus-ring); outline-offset: 2px; }
.pay-method input { margin-top: 0.25rem; }
.pay-method strong { display: block; }
.pay-method span span { font-size: var(--step--1); color: var(--ink-700); }
.card-demo { border: 1px dashed var(--border-strong, var(--ink-500)); border-radius: var(--radius-md); padding: var(--space-m); background: var(--surface-sunken); }
.card-demo legend { font-weight: var(--weight-bold); padding-inline: var(--space-2xs); }
.card-demo .form-grid { margin-top: var(--space-xs); }
.ref-box {
  display: inline-block; align-self: flex-start; padding: 0.4rem 0.8rem; border-radius: var(--radius-sm);
  background: var(--surface-sky); font-family: var(--font-mono, monospace); font-size: var(--step-1);
  font-weight: var(--weight-bold); letter-spacing: .04em; color: var(--navy-800);
}
.tier-options { display: grid; gap: var(--space-xs); border: 0; padding: 0; margin: 0; min-width: 0; }
.tier-options legend { font-weight: var(--weight-bold); margin-bottom: var(--space-2xs); padding: 0; }
.tier-option {
  display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-2xs) var(--space-s); align-items: start;
  padding: var(--space-s); border: 2px solid var(--border); border-radius: var(--radius-md); background: var(--surface-raised); cursor: pointer;
}
.tier-option input { margin-top: 0.3rem; }
.tier-option:has(input:checked) { border-color: var(--navy-800); background: var(--surface-sky); }
.tier-option:has(input:focus-visible) { outline: var(--focus-width) solid var(--focus-ring); outline-offset: 2px; }
.tier-option.is-disabled { background: var(--surface-sunken); color: var(--ink-600); cursor: not-allowed; }
.tier-option__name { font-weight: var(--weight-bold); font-size: var(--step-1); }
.tier-option__price { text-align: right; }
.tier-option__benefits { grid-column: 2 / -1; margin: 0; padding-left: 1.2em; font-size: var(--step--1); }

/* ---------- cancel registration ---------- */
.cancel-panel { display: flex; flex-direction: column; gap: var(--space-m); }
.cancel-panel h2 { margin: 0; font-size: var(--step-2); }
.cancel-panel p { margin: 0; }

/* ---------- gala ---------- */
.award-grid { --grid-min: 18rem; list-style: none; padding: 0; margin: 0; }
.award-card { display: flex; flex-direction: column; gap: var(--space-s); height: 100%; }
.award-card__head { display: flex; justify-content: space-between; gap: var(--space-xs); align-items: flex-start; }
.award-card__title { margin: 0; font-size: var(--step-1); color: var(--navy-800); }
.award-card p { margin: 0; }
.award-card__elig { font-size: var(--step--1); color: var(--ink-700); }
.award-card__foot { margin-top: auto; display: flex; flex-wrap: wrap; gap: var(--space-xs); align-items: center; justify-content: space-between; }
.award-card.is-closed { background: var(--surface-sunken); }
.gala-form-wrap { display: flex; flex-direction: column; gap: var(--space-m); }
.gala-summary { margin: 0; }
.nom-closed { text-align: left; }

/* ---------- sponsor: event chooser ---------- */
.gc-choose-list { list-style: none; padding: 0; margin: 0; }
.gc-choose-list .btn { white-space: normal; max-width: 100%; text-align: left; height: auto; }