/* ==========================================================================
   Events page — interactive, single-page design (approved prototype).
   Everything here is scoped under #evt-app / #evt-register-bar so it can't
   bleed into the shared site header/footer that also render on this page.
   ========================================================================== */

/* :where() keeps every rule below at zero specificity, so this scoped
   reset can never outrank the component classes further down the file —
   without it, "#evt-app button" (an ID selector) would beat ".evt-tab.active"
   (classes only) regardless of source order and silently kill their styles. */
:where(#evt-app, #evt-register-bar) {
  font-family: 'Manrope', sans-serif;
  color: #0B1B2B;
}
:where(#evt-app, #evt-register-bar) :where(*, *::before, *::after) {
  box-sizing: border-box;
}
:where(#evt-app, #evt-register-bar) button {
  font-family: inherit; margin: 0; padding: 0; border: 0; background: none;
  cursor: pointer; color: inherit; text-align: left; font-size: inherit;
}
:where(#evt-app, #evt-register-bar) a { text-decoration: none; color: inherit; }
:where(#evt-app) i.ti { font-style: normal; }

.evt-wrap { max-width: 1200px; margin: 0 auto; padding: 40px 32px 60px; }

.evt-eyebrow { font-size: 12px; font-weight: 700; color: #0451CB; letter-spacing: .06em; text-transform: uppercase; display: flex; align-items: center; gap: 6px; }
.evt-h1 { font-size: 34px; font-weight: 800; margin-top: 10px; line-height: 1.15; }
.evt-lede { font-size: 14.5px; color: #51606F; margin-top: 8px; max-width: 560px; line-height: 1.6; }

/* Buttons */
.evt-btn-primary { background: #0451CB; color: #fff; border-radius: 999px; padding: 13px 26px; font-size: 14px; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; transition: background .15s ease; }
.evt-btn-primary:hover { background: #033f9e; }
.evt-btn-primary.disabled { opacity: .5; pointer-events: none; }
.evt-back { display: inline-flex; align-items: center; gap: 6px; color: #0B1B2B; font-weight: 700; font-size: 13px; padding: 8px 0; }
.evt-back:hover { color: #0451CB; }

/* Map (Leaflet) */
.evt-map-card { margin-top: 28px; background: #0B1B2B; border-radius: 20px; position: relative; overflow: hidden; padding-bottom: 4px; }
.evt-map-hint-bar { padding: 14px 24px 0; color: #8FA3BE; font-size: 11px; font-weight: 600; letter-spacing: .04em; display: flex; align-items: center; gap: 6px; }
.evt-map-real { width: 100%; aspect-ratio: 2.6/1; margin-top: 10px; background: #152840; }
.evt-map-legend { position: relative; padding: 14px 24px; display: flex; gap: 18px; flex-wrap: wrap; }
.evt-map-legend-item { display: flex; align-items: center; gap: 6px; color: #fff; font-size: 11.5px; font-weight: 600; }
.evt-map-legend-item span { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.evt-online-row { padding: 0 24px 16px; color: #8FA3BE; font-size: 12px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.evt-online-link { color: #7FC9FF; font-weight: 700; text-decoration: underline; }
.evt-online-link:hover { color: #fff; }

/* Leaflet marker popup content (marker/tile chrome comes from Leaflet's own CSS) */
.evt-map-popup-title { font-size: 13px; font-weight: 800; color: #0B1B2B; margin-bottom: 6px; }
.evt-map-popup-list a { display: block; font-size: 12.5px; font-weight: 600; color: #0451CB; padding: 4px 0; }
.evt-map-popup-list a:hover { text-decoration: underline; }
.evt-map-popup-list .meta { color: #8A96A8; font-weight: 500; }

/* Date strip */
.evt-datestrip-wrap { margin-top: 26px; }
.evt-datestrip-label { font-size: 12.5px; font-weight: 700; color: #51606F; margin-bottom: 12px; }
.evt-datestrip { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; }
.evt-datechip { width: 56px; flex-shrink: 0; text-align: center; border-radius: 14px; padding: 12px 0; border: 1.5px solid #EEF1F5; cursor: pointer; background: #fff; }
.evt-datechip .dow { font-size: 10px; color: #8A96A8; font-weight: 600; }
.evt-datechip .dom { font-size: 17px; color: #0B1B2B; font-weight: 800; margin-top: 2px; }
.evt-datechip.active { background: #0B1B2B; border-color: #0B1B2B; }
.evt-datechip.active .dow, .evt-datechip.active .dom { color: #fff; }
.evt-dot { width: 5px; height: 5px; border-radius: 50%; margin: 5px auto 0; }

/* Toolbar / filters */
.evt-toolbar { display: flex; justify-content: space-between; align-items: center; margin-top: 32px; gap: 16px; flex-wrap: wrap; }
.evt-toggle { display: flex; border: 1.5px solid #EEF1F5; border-radius: 999px; padding: 3px; width: fit-content; }
.evt-toggle button { font-size: 13px; font-weight: 700; padding: 8px 18px; border-radius: 999px; color: #8A96A8; }
.evt-toggle button.active { background: #0B1B2B; color: #fff; }
.evt-region-tabs { display: flex; gap: 28px; flex-wrap: wrap; }
.evt-tab { font-size: 14px; font-weight: 700; color: #8A96A8; padding: 10px 4px; border-bottom: 3px solid transparent; }
.evt-tab.active { color: #0B1B2B; border-bottom-color: #0451CB; }

.evt-year-chip { display: inline-flex; align-items: center; gap: 8px; background: #EAF1FD; color: #0451CB; border-radius: 999px; padding: 8px 16px; font-size: 13px; font-weight: 700; margin: 18px 0 -6px; }
.evt-year-chip button { display: flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: rgba(4,81,203,0.12); }
.evt-year-chip button:hover { background: rgba(4,81,203,0.22); }

/* Event grid + cards */
.evt-event-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; padding: 28px 0; }
.evt-event-card { display: flex; gap: 16px; border: 1px solid #EEF1F5; border-radius: 16px; padding: 16px; cursor: pointer; transition: border-color .15s ease, transform .15s ease; text-align: left; background: #fff; width: 100%; }
.evt-event-card:hover { border-color: #0451CB; transform: translateY(-2px); }
.evt-event-thumb { width: 88px; height: 88px; border-radius: 12px; flex-shrink: 0; background-position: center; background-size: cover; background-color: #F1F4F8; }
.evt-event-body { flex: 1; min-width: 0; }
.evt-event-loc { display: flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; }
.evt-event-title { font-size: 15px; font-weight: 700; margin-top: 6px; }
.evt-event-meta { font-size: 12px; color: #8A96A8; margin-top: 4px; }
.evt-empty-state { grid-column: 1/-1; color: #8A96A8; font-size: 14px; padding: 20px 0; }

/* Views */
.evt-view { display: none; }
.evt-view.active { display: block; }
.evt-badge-past { background: #F1F4F8; color: #51606F; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 999px; display: inline-flex; align-items: center; gap: 4px; }
.evt-badge-live { background: #E9F7EF; color: #1B7A43; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 999px; }

/* Detail templates (shared) */
.evt-detail-intro { max-width: 760px; margin-top: 20px; }
.evt-quote { font-size: 36px; font-weight: 800; line-height: 1.3; margin-top: 14px; }
.evt-detail-title { font-size: 32px; font-weight: 800; line-height: 1.3; margin-top: 16px; }
.evt-summary { font-size: 14.5px; color: #51606F; margin-top: 16px; line-height: 1.7; }
.evt-detail-photo { aspect-ratio: 2.4/1; border-radius: 20px; margin-top: 34px; background-color: #0B1B2B; background-position: center; background-size: cover; }
.evt-block { margin-top: 40px; }
.evt-block-title { font-size: 20px; font-weight: 700; margin-bottom: 17px; display: flex; align-items: center; gap: 8px; }
.evt-about-body { font-size: 14.5px; color: #3D4A5C; line-height: 1.8; max-width: 700px; }
.evt-about-body p + p { margin-top: 14px; }

.evt-access-body { font-size: 13.5px; color: #3D4A5C; line-height: 1.7; padding: 18px 20px; border: 1px solid #EEF1F5; border-radius: 14px; background: #FAFBFC; max-width: 700px; }

.evt-related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.evt-related-card { display: block; border: 1px solid #EEF1F5; border-radius: 14px; padding: 16px; }
.evt-related-card:hover { border-color: #0451CB; }
.evt-related-date { font-size: 11px; color: #8A96A8; font-weight: 600; }
.evt-related-title { font-size: 13.5px; font-weight: 700; margin-top: 4px; }

/* Upcoming detail */
.evt-speaker-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.evt-speaker-card { border: 1px solid #EEF1F5; border-radius: 14px; padding: 16px; display: flex; align-items: center; gap: 12px; }
.evt-speaker-card.dashed { border-style: dashed; justify-content: center; color: #8A96A8; }
.evt-speaker-avatar { width: 48px; height: 48px; border-radius: 50%; flex-shrink: 0; background-position: center; background-size: cover; background-color: #F1F4F8; }
.evt-speaker-name { font-size: 13.5px; font-weight: 700; }
.evt-speaker-role { font-size: 11.5px; color: #8A96A8; }

.evt-why { margin-top: 44px; background: #F6F9FC; border-radius: 18px; padding: 32px 36px; }
.evt-why-body { font-size: 16px; color: #3D4A5C; line-height: 1.75; margin-top: 14px; max-width: 640px; }

.evt-statbar { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid #EEF1F5; border-radius: 14px; margin-top: 32px; }
.evt-statbar > div { padding: 16px 22px; }
.evt-statbar > div:not(:last-child) { border-right: 1px solid #EEF1F5; }
.evt-statbar .lbl { font-size: 11px; color: #8A96A8; font-weight: 600; }
.evt-statbar .val { font-size: 13.5px; font-weight: 700; margin-top: 4px; }

.evt-howto { margin-top: 36px; padding: 24px; border: 1.5px dashed #D7E1EC; border-radius: 14px; background: #FAFBFC; }
.evt-howto-body { font-size: 13.5px; color: #3D4A5C; margin-top: 10px; line-height: 1.7; }

/* Past detail */
.evt-recap-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 32px; padding: 24px 0; border-top: 1px solid #EEF1F5; border-bottom: 1px solid #EEF1F5; }
.evt-recap-stats > div { text-align: center; }
.evt-recap-stats .num { font-size: 24px; font-weight: 800; }
.evt-recap-stats .lbl { font-size: 11px; color: #51606F; margin-top: 4px; font-weight: 600; }
.evt-recap-body { font-size: 14.5px; color: #3D4A5C; line-height: 1.8; max-width: 700px; }

.evt-video-frame { aspect-ratio: 16/9; border-radius: 16px; max-width: 640px; background-color: #0B1B2B; background-position: center; background-size: cover; position: relative; display: block; }
.evt-video-overlay { position: absolute; inset: 0; background: rgba(11,27,43,0.45); border-radius: 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
.evt-video-play { width: 52px; height: 52px; border-radius: 50%; background: rgba(255,255,255,0.2); backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; }
.evt-video-play i { font-size: 20px; color: #fff; }
.evt-video-overlay span { color: #fff; font-size: 11px; font-weight: 600; }

.evt-gallery { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.evt-gallery-item { aspect-ratio: 1/1; border-radius: 10px; background-position: center; background-size: cover; background-color: #F1F4F8; }

.evt-cta-block { margin-top: 40px; background: #F6F9FC; border-radius: 16px; padding: 28px; text-align: center; }
.evt-cta-title { font-size: 15px; font-weight: 700; }

/* Journey timeline */
.evt-journey { margin-top: 8px; padding: 32px 0; border-top: 1px solid #EEF1F5; }
.evt-journey-title { font-size: 20px; font-weight: 700; margin-bottom: 20px; }
.evt-journey-track { display: flex; align-items: flex-end; gap: 0; height: 90px; position: relative; }
.evt-journey-line { position: absolute; top: 50%; left: 0; right: 0; height: 1px; background: #EEF1F5; }
.evt-journey-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; position: relative; padding: 8px 4px; border-radius: 8px; }
.evt-journey-item:hover { background: #F6F9FC; }
.evt-journey-item:hover .evt-journey-year { color: #0451CB; }
.evt-journey-dot { border-radius: 50%; }
.evt-journey-year { font-size: 11px; color: #8A96A8; font-weight: 600; }
.evt-journey-year.bold { font-weight: 700; color: #0B1B2B; }
.evt-journey-empty { color: #8A96A8; font-size: 13px; }

/* Floating register bar */
.evt-register-bar { position: fixed; bottom: 0; left: 0; right: 0; background: #0B1B2B; padding: 16px 32px; display: none; z-index: 40; }
.evt-register-inner { max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.evt-register-text { color: #fff; font-size: 13.5px; }
.evt-register-text #evt-bar-title { font-weight: 700; }
.evt-register-text #evt-bar-meta { color: #8A96A8; margin-left: 10px; }

/* Responsive */
@media (max-width: 860px) {
  .evt-event-list { grid-template-columns: 1fr; }
  .evt-speaker-grid { grid-template-columns: repeat(2, 1fr); }
  .evt-recap-stats { grid-template-columns: repeat(2, 1fr); }
  .evt-gallery { grid-template-columns: repeat(3, 1fr); }
  .evt-related-grid { grid-template-columns: 1fr; }
  .evt-statbar { grid-template-columns: 1fr; }
  .evt-statbar > div:not(:last-child) { border-right: none; border-bottom: 1px solid #EEF1F5; }
  .evt-quote { font-size: 26px; }
  .evt-h1 { font-size: 27px; }
}
@media (max-width: 520px) {
  .evt-wrap { padding: 28px 18px 48px; }
  .evt-gallery { grid-template-columns: repeat(2, 1fr); }
  .evt-speaker-grid { grid-template-columns: 1fr; }
}