/* ==========================================================================
   Events page (V2). Requires tokens.css, site-nav.css, home-hero.css,
   program-hero.css, home-sections.css and program-sections.css.
   Event cards, countdown, join form, gallery and lightbox are built by the
   inline scripts in events.html; the class names below match that markup.
   ========================================================================== */

.tp-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- Up Next (shown by renderFeatured) ---------- */
#featuredBanner { display: none; }
.tp-upnext__card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-5);
  border-radius: var(--radius-xl);
  background: var(--color-bg);
  color: var(--color-text);
  box-shadow: 0 24px 60px -24px rgba(13, 15, 20, .5);
}
.tp-upnext__label {
  display: inline-flex;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  background: rgba(243, 189, 0, .14);
  font-size: var(--text-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  font-weight: var(--weight-bold);
  color: var(--color-accent);
}
.tp-upnext__info h2 {
  margin: var(--space-2) 0 0;
  font-size: var(--text-h3);
  line-height: var(--leading-h3);
  font-weight: var(--weight-bold);
  color: var(--color-heading);
}
.tp-upnext__meta { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); margin-top: var(--space-1-5); font-size: var(--text-body-sm); color: var(--color-text-secondary); }
.tp-upnext__meta span { display: inline-flex; align-items: center; gap: 6px; }
.tp-upnext__meta svg { color: var(--color-accent); }
.tp-upnext__side { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-2); }
.countdown-row { display: flex; gap: var(--space-1); }
.countdown-box {
  display: grid;
  justify-items: center;
  min-width: 64px;
  padding: 10px 8px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}
.countdown-num { font-size: 24px; line-height: 1.1; font-weight: var(--weight-bold); color: var(--color-heading); font-variant-numeric: tabular-nums; }
.countdown-unit { font-size: var(--text-badge); letter-spacing: var(--tracking-badge); text-transform: uppercase; color: var(--color-text-muted); }

/* ---------- Toolbar: filters + search ---------- */
.tp-events__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); margin-bottom: var(--space-4); }
.filter-row { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.filter-pill {
  height: 40px;
  padding: 0 18px;
  border: 1px solid var(--color-border-control);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  font-family: var(--font-sans);
  font-size: var(--text-ui);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  cursor: pointer;
  transition: background-color 600ms var(--ease-out), border-color 600ms var(--ease-out), color 600ms var(--ease-out);
}
.filter-pill:hover { border-color: var(--color-heading); }
.filter-pill.active { border-color: var(--ink-950); background: var(--ink-950); color: var(--white); }
.filter-pill:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
.tp-events__search { display: flex; align-items: center; gap: var(--space-2); }
.search-bar {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  width: 280px;
  height: 44px;
  padding: 0 14px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text-muted);
  transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
}
.search-bar:focus-within { border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(243, 189, 0, .25); }
.search-bar input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  outline: 0;
  background: none;
  font-family: var(--font-sans);
  font-size: var(--text-body);
  color: var(--color-heading);
}
.search-bar input::placeholder { color: var(--color-text-muted); }
.filter-count { font-size: var(--text-caption); color: var(--color-text-muted); white-space: nowrap; }

/* ---------- Event cards ---------- */
.events-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.ev-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  cursor: pointer;
  transition: border-color 600ms var(--ease-out), box-shadow 600ms var(--ease-out), transform 600ms var(--ease-out);
  animation: tp-rise 600ms var(--ease-out) both;
}
.ev-card:hover { border-color: var(--color-accent); box-shadow: var(--shadow-card-hover); transform: translateY(-4px); }
.ev-card.past { cursor: default; }
.ev-card.past:hover { border-color: var(--color-border); box-shadow: none; transform: none; }
.ev-thumb { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--ink-950); }
.ev-thumb img { display: block; width: 100%; height: 100%; object-fit: contain; transition: transform 600ms var(--ease-out); }
.ev-card:not(.past):hover .ev-thumb img { transform: scale(1.04); }
.ev-thumb::after {
  content: "";
  position: absolute;
  inset: 50% 0 0;
  background: linear-gradient(transparent, rgba(13, 15, 20, .7));
  pointer-events: none;
}
.ev-badges { position: absolute; z-index: 1; top: 12px; left: 12px; display: flex; gap: 6px; }
.ev-type {
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: var(--gold-500);
  font-size: var(--text-badge);
  letter-spacing: var(--tracking-badge);
  text-transform: uppercase;
  font-weight: var(--weight-bold);
  color: var(--ink-950);
}
.ev-type.t-meetup { background: var(--white); }
.ev-type.t-career-booster-session { background: var(--ink-950); color: var(--gold-500); }
.ev-date-strip { position: absolute; z-index: 1; left: 12px; right: 12px; bottom: 12px; display: flex; align-items: center; gap: var(--space-1); }
.ev-date-box {
  display: grid;
  justify-items: center;
  min-width: 46px;
  padding: 4px 6px;
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--ink-950);
  line-height: 1.1;
}
.ev-date-day { font-size: 18px; font-weight: var(--weight-bold); }
.ev-date-mon { font-size: 10px; font-weight: var(--weight-bold); letter-spacing: .06em; color: var(--gold-800); }
.ev-time-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: var(--radius-pill);
  background: rgba(13, 15, 20, .72);
  font-size: var(--text-caption);
  font-weight: var(--weight-semibold);
  color: var(--white);
}
.ev-body { display: flex; flex: 1; flex-direction: column; gap: var(--space-1); padding: 20px; }
.ev-venue { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-caption); color: var(--color-text-muted); }
.ev-title { margin: 0; font-size: var(--text-h4); line-height: var(--leading-h4); font-weight: var(--weight-bold); color: var(--color-heading); }
.ev-desc { margin: 0; font-size: var(--text-body-sm); line-height: var(--leading-body-sm); color: var(--color-text-secondary); }
.ev-view-more { font-weight: var(--weight-semibold); color: var(--color-accent-text); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.ev-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.ev-tag {
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  background: var(--color-surface-sunken);
  font-size: var(--text-caption);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
}
.ev-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-1-5);
  padding: 14px 20px;
  border-top: 1px solid var(--color-border);
}
.ev-footer.join-footer { justify-content: stretch; }
.ev-footer.join-footer .ev-register { flex: 1; }
.ev-register {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 40px;
  margin-left: auto;
  padding: 0 16px;
  border-radius: var(--radius-md);
  background: var(--color-accent);
  font-size: var(--text-ui);
  font-weight: var(--weight-semibold);
  color: var(--color-on-accent);
  text-decoration: none;
  transition: background-color var(--duration-fast);
}
.ev-register:hover { background: var(--color-accent-hover); }
.ev-register.disabled { background: var(--color-surface-sunken); color: var(--color-text-muted); pointer-events: none; }
.ev-status { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-caption); color: var(--color-text-secondary); }
.ev-status-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* Loading, empty and error states */
.skeleton {
  border-radius: var(--radius-xl);
  background: linear-gradient(90deg, var(--gray-100) 25%, var(--gray-50) 50%, var(--gray-100) 75%) 0 0 / 200% 100%;
  animation: tp-ev-shimmer 1.4s linear infinite;
}
.skeleton-card { height: 380px; }
@keyframes tp-ev-shimmer { to { background-position: -200% 0; } }
.empty-state,
.error-state {
  display: none;
  padding: var(--space-8) var(--space-3);
  border: 1px dashed var(--color-border-control);
  border-radius: var(--radius-xl);
  text-align: center;
  color: var(--color-text-muted);
}
.empty-state h3,
.error-state h3 { margin: var(--space-2) 0 0; font-size: var(--text-h4); font-weight: var(--weight-bold); color: var(--color-heading); }
.empty-state p,
.error-state p { margin: var(--space-1) auto 0; max-width: 420px; font-size: var(--text-body); color: var(--color-text-secondary); }
.error-state .tp-btn { margin-top: var(--space-3); }

/* ---------- Join event (?event_id= links) ---------- */
.join-event-card {
  max-width: 520px;
  margin: 0 auto;
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  box-shadow: 0 12px 32px -20px rgba(13, 15, 20, .18);
}
.join-event-state { display: none; flex-direction: column; align-items: center; gap: var(--space-1-5); text-align: center; }
#joinFormState { align-items: stretch; text-align: left; }
.join-event-state h2,
.join-event-state h3 { margin: 0; font-size: var(--text-h3); line-height: var(--leading-h3); font-weight: var(--weight-bold); color: var(--color-heading); }
.join-event-state > p { margin: 0; color: var(--color-text-secondary); }
.join-event-state > svg { color: var(--color-text-muted); }
.join-event-meta { font-size: var(--text-body-sm); color: var(--color-text-secondary); }
#joinEventForm { display: grid; gap: var(--space-2); margin-top: var(--space-2); }
.join-field { display: grid; gap: 6px; }
.join-field label { font-size: var(--text-ui); font-weight: var(--weight-semibold); color: var(--color-heading); }
.join-field input {
  width: 100%;
  height: 50px;
  padding: 0 var(--space-2);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  color: var(--color-text);
  transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
}
.join-field input:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(243, 189, 0, .25); }
.join-field input.error { border-color: var(--color-error); }
.join-err { display: none; font-size: var(--text-caption); color: var(--color-error); }
.join-err.show { display: block; }
#joinSubmitBtn.loading { opacity: .6; cursor: progress; }
.join-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--color-border);
  border-top-color: var(--color-accent);
  border-radius: 50%;
  animation: tp-ev-spin .8s linear infinite;
}
@keyframes tp-ev-spin { to { transform: rotate(360deg); } }
.join-event-state a:not(.tp-btn) { font-weight: var(--weight-semibold); color: var(--color-accent-text); text-decoration: underline; }

/* ---------- Gallery ---------- */
.gallery-masonry { columns: 3; column-gap: var(--space-2); }
.gallery-item {
  position: relative;
  margin-bottom: var(--space-2);
  overflow: hidden;
  break-inside: avoid;
  border-radius: var(--radius-lg);
  background: var(--color-surface-sunken);
  cursor: zoom-in;
}
.gallery-item.loading { min-height: 220px; }
.gallery-item.loading img { opacity: 0; }
.gallery-item img { transition: opacity 400ms var(--ease-out), transform 600ms var(--ease-out); }
.gallery-item:hover img { transform: scale(1.04); }
.gallery-item:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
.gallery-item.new-item { animation: tp-rise 600ms var(--ease-out) both; }
.gallery-overlay {
  position: absolute;
  inset: auto 0 0;
  padding: 40px var(--space-2) var(--space-2);
  background: linear-gradient(transparent, rgba(13, 15, 20, .8));
  color: var(--white);
  opacity: 0;
  transition: opacity 600ms var(--ease-out);
}
.gallery-item:hover .gallery-overlay,
.gallery-item:focus-visible .gallery-overlay { opacity: 1; }
.gallery-overlay-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: var(--gold-500);
  font-size: var(--text-badge);
  text-transform: uppercase;
  font-weight: var(--weight-bold);
  color: var(--ink-950);
}
.gallery-overlay-caption { margin: 6px 0 0; font-size: var(--text-body-sm); font-weight: var(--weight-semibold); }
.gallery-overlay-meta { display: flex; align-items: center; gap: 6px; margin: 2px 0 0; font-size: var(--text-caption); opacity: .8; }
.gallery-load-more { display: flex; justify-content: center; margin-top: var(--space-4); }
.gallery-load-btn:disabled { opacity: .55; cursor: default; }
.gallery-load-btn:disabled:not(:has(.btn-spinner)) { display: none; }
.btn-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: tp-ev-spin .8s linear infinite;
}

/* Lightbox */
.gallery-lightbox {
  position: fixed;
  z-index: var(--z-toast);
  inset: 0;
  display: none;
  place-items: center;
  padding: var(--space-3);
  background: rgba(13, 15, 20, .92);
}
.gallery-lightbox.open { display: grid; }
.gallery-lightbox-inner { position: relative; max-width: min(1000px, 100%); }
.gallery-lightbox-inner img { display: block; max-width: 100%; max-height: 78vh; margin: 0 auto; border-radius: var(--radius-lg); }
.gallery-lightbox-info { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-2); margin-top: var(--space-2); color: var(--white); font-family: var(--font-sans); }
.gallery-lightbox-caption { margin: 0; font-weight: var(--weight-semibold); }
.gallery-lightbox-date { margin: 2px 0 0; font-size: var(--text-caption); color: var(--gray-400); }
.gallery-lightbox-close,
.gallery-lightbox-nav {
  display: grid;
  place-items: center;
  width: var(--touch);
  height: var(--touch);
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: var(--radius-round);
  background: rgba(13, 15, 20, .6);
  color: var(--white);
  font-size: 18px;
  cursor: pointer;
  transition: border-color var(--duration-fast), background-color var(--duration-fast);
}
.gallery-lightbox-close:hover,
.gallery-lightbox-nav:hover { border-color: var(--gold-500); background: rgba(243, 189, 0, .15); }
.gallery-lightbox-nav { position: absolute; top: calc(50% - 40px); }
.gallery-lightbox-prev { left: -60px; }
.gallery-lightbox-next { right: -60px; }

/* ---------- Tablet ---------- */
@media (max-width: 1023px) {
  .events-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tp-upnext__card { grid-template-columns: 1fr; }
  .tp-upnext__side { align-items: flex-start; }
  .gallery-masonry { columns: 2; }
  .gallery-lightbox-prev { left: 8px; }
  .gallery-lightbox-next { right: 8px; }
}

/* ---------- Phone ---------- */
@media (max-width: 767px) {
  .events-grid { grid-template-columns: 1fr; }
  .tp-events__bar { flex-direction: column; flex-wrap: nowrap; align-items: stretch; }
  .tp-events__bar > * { min-width: 0; }
  .filter-row { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scrollbar-width: none; }
  .filter-row::-webkit-scrollbar { display: none; }
  .filter-pill { flex-shrink: 0; }
  .tp-events__search { width: 100%; }
  .search-bar { flex: 1; width: auto; min-width: 0; }
  .tp-upnext__card,
  .join-event-card { padding: var(--space-3) var(--space-2); }
  .tp-upnext__side,
  .tp-upnext__side .tp-btn { width: 100%; }
  .countdown-box { flex: 1; min-width: 0; }
  .gallery-masonry { column-gap: 10px; }
  .gallery-item { margin-bottom: 10px; }
  .gallery-load-more .tp-btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .ev-card, .gallery-item.new-item, .skeleton { animation: none; }
}
.tp-upnext__live { font-size: var(--text-body); font-weight: var(--weight-bold); color: var(--color-accent); }

/* ---------- Floating WhatsApp button (events has no bottom bar) ---------- */
.sticky-whatsapp-fab {
  position: fixed;
  z-index: 1101;
  right: 24px;
  bottom: 150px;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--whatsapp);
  box-shadow: 0 4px 16px rgba(0, 0, 0, .3);
  transition: transform 300ms var(--ease-out), box-shadow 300ms var(--ease-out);
}
.sticky-whatsapp-fab:hover { transform: translateY(-2px) scale(1.05); box-shadow: 0 6px 20px rgba(0, 0, 0, .35); }
.sticky-whatsapp-fab img { display: block; width: 28px; height: 28px; }
body:has(.gallery-lightbox.open) .sticky-whatsapp-fab { display: none; }
@media (max-width: 767px) {
  .sticky-whatsapp-fab { right: 16px; bottom: 140px; width: 52px; height: 52px; }
}