/* ════════════════════════════════════════════════════════════════════════
   Rich event landing page styles.
   Scoped under the .evl- prefix so they never leak into the rest of the site.
   ════════════════════════════════════════════════════════════════════════ */

.evl-body { background: #fff; }

/* ═════════════════ HERO ═════════════════
   Pure image banner. No overlay text — the title, date and venue are
   shown in the page content sections below (Overview, Agenda, etc.).
   When no image is uploaded the gradient placeholder fills the same
   banner area so the page still has a visual top.
   ─────────────────────────────────────── */
.evl-hero {
  position: relative;
  width: 100%;
  /* background: linear-gradient(125deg, #0a1230 0%, #20104c 55%, #3a0f7e 100%); */
  overflow: hidden;
  /* Gradient placeholder height when no image is present. */
  /* min-height: 220px; */
}
.evl-hero picture { display: block; width: 100%; }
.evl-hero__bg {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: center;
}
/* Full-bleed banners are designed full-width with baked-in text — never
   crop top/bottom; cap only applies to the overlay-copy variant where
   the image is a backdrop, not the message itself. */
.evl-hero__bg--full {
  max-height: 70vh;
}
.evl-hero__bg:not(.evl-hero__bg--full) {
  max-height: 70vh;
  object-fit: cover;
}
/* Full-bleed variant — used when the hero is purely an image banner
   with no overlay copy. */
.evl-hero__bg--full { opacity: 1; }

/* ═════════════════ IN-PAGE NAV ═════════════════ */
.evl-nav {
  position: sticky;
  top: 0;
  z-index: 30;
  background: #fff;
  border-bottom: 1px solid #e5e9f2;
}
/* ─── Desktop: three-column grid (logo · centred links · spacer) ─── */
.evl-nav__container {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  padding: 0.6rem 1rem;
  min-height: 56px;
}
.evl-nav__logo {
  grid-column: 1;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.evl-nav__logo img {
  display: block;
  height: 40px;
  width: auto;
  object-fit: contain;
}
.evl-nav__list {
  grid-column: 2;
  display: flex; gap: 2rem;
  align-items: center;
}
/* Hamburger button — hidden on desktop, visible on phones */
.evl-nav__toggle {
  grid-column: 3;
  justify-self: end;
  display: none;        /* shown via @media below */
  width: 40px; height: 40px;
  align-items: center; justify-content: center;
  flex-direction: column;
  gap: 5px;
  background: transparent;
  border: 1px solid #e5e9f2;
  border-radius: 8px;
  cursor: pointer;
  padding: 0;
}
.evl-nav__toggle-bar {
  display: block;
  width: 20px; height: 2px;
  background: #3a0f7e;
  border-radius: 2px;
  transition: transform 0.2s, opacity 0.2s;
}
.evl-nav__toggle[aria-expanded="true"] .evl-nav__toggle-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.evl-nav__toggle[aria-expanded="true"] .evl-nav__toggle-bar:nth-child(2) {
  opacity: 0;
}
.evl-nav__toggle[aria-expanded="true"] .evl-nav__toggle-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ─── Mobile: collapse to a stacked drop-down menu ─── */
@media (max-width: 767.98px) {
  .evl-nav { position: sticky; top: 0; z-index: 40; background: #fff; box-shadow: 0 1px 4px rgba(15,23,42,0.06); }
  .evl-nav__container {
    grid-template-columns: auto 1fr auto;   /* [logo] [spacer] [hamburger] */
    column-gap: 0.6rem;
  }
  .evl-nav__logo { grid-column: 1; justify-self: start; }
  .evl-nav__logo img { height: 28px; }
  .evl-nav__toggle {
    display: inline-flex;
    grid-column: 3;
  }
  /* Slide-down panel: full width, hidden until .is-open */
  .evl-nav__list {
    grid-column: 1 / -1;
    grid-row: 2;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: #fff;
    border-top: 1px solid #e5e9f2;
    margin: 0.5rem -1rem -0.6rem;
    padding: 0.4rem 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease;
  }
  .evl-nav__list.is-open { max-height: 70vh; overflow-y: auto; }
  .evl-nav__list .evl-nav__link {
    padding: 0.85rem 1.25rem;
    border-bottom: 1px solid #f1f3f7;
    border-radius: 0;
  }
  .evl-nav__list .evl-nav__link:last-child { border-bottom: 0; }
}
.evl-nav__link {
  flex-shrink: 0;
  padding: 0.35rem 0.1rem;
  color: #526484;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: 0.02em;
  border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}
.evl-nav__link:hover,
.evl-nav__link:focus { color: #3a0f7e; border-bottom-color: #3a0f7e; }
/* Sub-page mode: the current page's nav link gets a brand-purple underline
   so visitors instantly see where they are in the cross-page nav. */
.evl-nav__link.is-active {
  color: #3a0f7e;
  border-bottom-color: #3a0f7e;
}

/* ═════════════════ SECTION CHROME ═════════════════ */
.evl-section {
  padding: clamp(1.5rem, 5vw, 2.0rem) 0;
  scroll-margin-top: 80px;
}
/* Unified cream backdrop across content sections to match the design mock;
   only the dark "Why Attend" block breaks out for visual punctuation. */
.evl-section--overview,
.evl-section--venue,
.evl-section--agenda,
.evl-section--people,
.evl-section--sponsors,
.evl-section--register,
.evl-section--faq,
.evl-section--contact,
.evl-section--pmi-awards,
.evl-section--pmi-winners { background: #f6f3ef; }
.evl-section--why         { background: #0a1230; color: #e0e6f5; }

.evl-section__inner { max-width: 1200px; }
.evl-section__kicker {
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #b58a39;
  font-weight: 700;
  margin: 0 0 0.5rem;
}
.evl-section__title {
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 800;
  color: #0a1230;
  margin: 0 0 1.5rem;
  line-height: 1.2;
}
.evl-section__title--center { text-align: center; margin-left: auto; margin-right: auto; }
.evl-section__kicker--center { text-align: center; }
.evl-section--why .evl-section__title { color: #fff; }
/* Base subtitle MUST come BEFORE the --center modifier — otherwise its
   `margin: 0 0 1.8rem` (zero left/right) wins the cascade over the
   modifier's auto-margins and the subtitle sticks to the left edge even
   though text-align + max-width apply. */
.evl-section__subtitle {
  color: #6b7a93;
  font-size: 0.92rem;
  margin: 0 0 1.8rem;
}
.evl-section__subtitle--center {
  text-align: center;
  margin: 0.5rem auto 1.5rem;
}

/* ═════════════════ OVERVIEW ═════════════════
   Entire section is centered — kicker, title and body all align on the
   horizontal axis so the block reads as a balanced welcome panel. */
.evl-section--overview .evl-section__inner { text-align: center; }
.evl-section--overview .evl-section__kicker { /* centred via parent text-align */ }
.evl-overview__body {  
  margin: 1.5rem auto 0;
  text-align: justify;
  color: #364a63;
  line-height: 1.75;
  font-size: 0.98rem;
}

@media (max-width: 768px) {
  .evl-overview__body { text-align: left; }
}

/* ═════════════════ VENUE ═════════════════ */
.evl-venue__alt {
  color: #6b7a93;
  font-size: 0.95rem;
  margin: -0.25rem 0 1rem;
}
.evl-venue__map {
  position: relative;
  margin-top: 1.5rem;
  width: 100%;
  /* Taller than a 16:9 strip so the embed shows useful context around the
     pin instead of a cropped, mostly-empty sliver. */
  aspect-ratio: 16 / 10;
  min-height: 320px;
  border-radius: 12px;
  overflow: hidden;
  border: 3px solid var(--clr-brand-purple);
  outline: 1px solid #e5e9f2;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.08);
}
@media (max-width: 575.98px) {
  .evl-venue__map { aspect-ratio: 4 / 3; min-height: 260px; }
}
.evl-venue__map iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
/* Address badge overlaid on the map, anchored bottom-left, so visitors
   immediately see the venue address without reading it off the iframe. */
.evl-venue__map-badge {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  max-width: calc(100% - 2rem);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: #fff;
  color: var(--clr-brand-dark);
  font-weight: 700;
  font-size: 0.9rem;
  line-height: 1.3;
  padding: 0.6rem 1rem;
  border-radius: 999px;
  border: 0;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.18);
  cursor: pointer;
  font-family: inherit;
}
.evl-venue__map-badge i {
  color: var(--clr-brand-purple);
  font-size: 1.1rem;
  flex-shrink: 0;
}
.evl-venue__map-badge > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 575.98px) {
  .evl-venue__map-badge {
    font-size: 0.8rem;
    padding: 0.5rem 0.85rem;
  }
}

/* ── Popup card shown centred over the map when the badge is clicked ── */
.evl-venue__map-popup {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0.96);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.35rem;
  min-width: 240px;
  max-width: min(320px, calc(100% - 2rem));
  background: #fff;
  color: var(--clr-brand-dark);
  white-space: normal;
  border-radius: 12px;
  padding: 1.1rem 1.25rem;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.28);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
  z-index: 2;
}
.evl-venue__map.is-open .evl-venue__map-popup {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}
/* Dim the map slightly while the popup is open so the centred card stands out */
.evl-venue__map.is-open iframe {
  filter: brightness(0.85);
}
.evl-venue__map-popup-close {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 50%;
  background: #f1f3f7;
  color: #6b7a93;
  font-size: 0.75rem;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.evl-venue__map-popup-close:hover {
  background: #e5e9f2;
  color: var(--clr-brand-dark);
}
.evl-venue__map-popup-title {
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.35;
}
.evl-venue__map-popup-alt {
  font-size: 0.82rem;
  font-weight: 500;
  color: #6b7a93;
  line-height: 1.4;
}
.evl-venue__map-popup-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-top: 0.3rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--clr-brand-purple);
  text-decoration: none;
}
.evl-venue__map-popup-link:hover { text-decoration: underline; }

/* ═════════════════════════════════════════════════════════════════════
   AGENDA — vertical timeline + per-session cards.

   Layout per item is a 3-column grid:
     [time]  [rail+dot]  [card]
   The rail draws a soft vertical line behind the dot; the dot sits on top
   centred to that line so consecutive items visually connect. Cards have
   a quiet hover state (lift + border tint) borrowed from the apply-awards
   tiles so the agenda feels part of the same family.

   Tag colours live on item modifier classes (.evl-agenda__item--keynote,
   etc.). The server normalises arbitrary admin tags into a small fixed
   set (see partial). Unknown tags fall through to --default = neutral.

   "Break-like" items (break / arrival / networking / lunch / tea) collapse
   to a slim chip-only row so the eye glides past them — they're transitions,
   not sessions. Honor reduced-motion at the bottom.

   All selectors scoped under .evl-agenda*; no rules touch bare elements.
   ═════════════════════════════════════════════════════════════════════ */

.evl-agenda {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
}

.evl-agenda__item {
  display: grid;
  grid-template-columns: 110px 28px 1fr;
  gap: 1rem;
  align-items: stretch;
  position: relative;
  padding: 0 0 1rem;
}
.evl-agenda__item:last-child { padding-bottom: 0; }

/* ── Time column ── */
.evl-agenda__time {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding-top: 0.7rem;
  text-align: right;
}
.evl-agenda__time-text {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--clr-brand-dark);
  letter-spacing: 0.02em;
  line-height: 1.35;
  font-variant-numeric: tabular-nums;
}
.evl-agenda__time--empty { padding: 0; }

/* ── Rail + dot column ── */
.evl-agenda__rail {
  position: relative;
  display: flex;
  justify-content: center;
}
/* Vertical line through the rail column. Sits behind the dot. */
.evl-agenda__rail::before {
  content: "";
  position: absolute;
  top: 0; bottom: -1rem;     /* slight overshoot so the line connects across the gap */
  left: 50%;
  width: 2px;
  margin-left: -1px;
  background: linear-gradient(180deg, rgba(79, 23, 168, 0.18) 0%, rgba(79, 23, 168, 0.08) 100%);
}
.evl-agenda__item:last-child .evl-agenda__rail::before { bottom: 50%; }
.evl-agenda__item:first-child .evl-agenda__rail::before { top: 50%; }

.evl-agenda__dot {
  position: relative;
  z-index: 1;
  width: 14px;
  height: 14px;
  border-radius: var(--radius-pill);
  background: var(--clr-white);
  border: 3px solid var(--clr-brand-purple);
  margin-top: 0.85rem;
  box-shadow: 0 0 0 4px rgba(79, 23, 168, 0.08);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

/* ── Card column ── */
.evl-agenda__card {
  background: var(--clr-white);
  border: 1px solid var(--clr-border);
  border-left: 3px solid var(--clr-border);
  border-radius: var(--radius-md);
  padding: 0.85rem 1.1rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.evl-agenda__item:hover .evl-agenda__card {
  border-color: rgba(79, 23, 168, 0.32);
  box-shadow: 0 6px 20px rgba(79, 23, 168, 0.08);
  transform: translateY(-1px);
}
.evl-agenda__item:hover .evl-agenda__dot {
  transform: scale(1.15);
  box-shadow: 0 0 0 5px rgba(79, 23, 168, 0.12);
}

.evl-agenda__tag {
  display: inline-block;
  padding: 0.18rem 0.6rem;
  font-size: 0.68rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: var(--radius-pill);
  line-height: 1.4;
  margin-bottom: 0.35rem;
  background: #eef2f7;
  color: var(--clr-brand-dark);
}

.evl-agenda__title {
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  color: var(--clr-brand-dark);
  margin: 0;
  line-height: 1.4;
}
.evl-agenda__speaker {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0.5rem 0 0;
  color: var(--clr-purple-mid);
  font-size: var(--fs-sm);
  line-height: 1.4;
}
.evl-agenda__speaker-icon {
  color: var(--clr-brand-purple);
  font-size: 1rem;
  opacity: 0.85;
}

/* ── Tag colour ──
   All non-break agenda items share one neutral badge + purple-dot
   look (the base .evl-agenda__tag / .evl-agenda__dot / .evl-agenda__card
   rules above already provide it), regardless of tag/slug. Only the
   break/networking variant below still gets its own quieter treatment. */

/* ── Break/networking — slim & quieter so they read as transitions ── */
.evl-agenda__item--break .evl-agenda__card {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5rem 0.6rem;
  background: rgba(15, 23, 42, 0.035);
  border: 1px dashed rgba(208, 204, 195, 0.8);  /* var(--clr-border) at .8 */
  border-left: 1px dashed rgba(208, 204, 195, 0.8);
  border-radius: var(--radius-pill);
  padding: 0.5rem 1.1rem;
  box-shadow: none;
}
.evl-agenda__item--break .evl-agenda__title {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--clr-purple-mid);
  margin: 0;
}
.evl-agenda__item--break .evl-agenda__tag {
  background: transparent;
  color: var(--clr-gray-mid);
  padding-left: 0;
  padding-right: 0;
  margin-bottom: 0;
}
.evl-agenda__item--break .evl-agenda__tag::after {
  content: '•';
  margin-left: 0.6rem;
  color: var(--clr-border);
}
.evl-agenda__item--break .evl-agenda__dot {
  width: 10px; height: 10px;
  border-color: var(--clr-border);
  background: var(--clr-page-bg);
  box-shadow: none;
  margin-top: 0.6rem;
}

/* ── Mobile: stack the time above the card, kill the rail ── */
@media (max-width: 640px) {
  .evl-agenda__item {
    grid-template-columns: 1fr;
    gap: 0.35rem;
    padding-bottom: 1.1rem;
  }
  .evl-agenda__time {
    padding-top: 0;
    justify-content: flex-start;
    text-align: left;
  }
  .evl-agenda__time-text {
    font-size: 0.72rem;
    color: var(--clr-purple-mid);
    font-weight: var(--fw-bold);
  }
  .evl-agenda__rail { display: none; }
  .evl-agenda__card { padding: 0.9rem 1rem; }
  .evl-agenda__item--break .evl-agenda__card {
    padding: 0.55rem 1rem;
    border-radius: var(--radius-md);
  }
}

/* ── Respect prefers-reduced-motion ── */
@media (prefers-reduced-motion: reduce) {
  .evl-agenda__card,
  .evl-agenda__dot { transition: none; }
  .evl-agenda__item:hover .evl-agenda__card { transform: none; }
  .evl-agenda__item:hover .evl-agenda__dot  { transform: none; }
}

/* ═════════════════ SPEAKERS & ORGANIZERS ═════════════════ */
.evl-people__intro {  
  margin: 0 auto 2rem;
  text-align: center;
}
.evl-people__intro-heading {
  font-size: 1.1rem;
  font-weight: 700;
  color: #0a1230;
  margin: 0 0 0.6rem;
}
.evl-people__intro-body {
  color: #6b7a93;
  font-size: 1.0rem;
  line-height: 1.7;
  margin: 0;
}
.evl-people__grid {
  display: grid;
  /* Four cards per row on desktop, collapsing down on smaller screens. */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.25rem;
}
@media (max-width: 992px) {
  .evl-people__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .evl-people__grid { grid-template-columns: 1fr; }
}
.evl-person {
  background: #fff;
  padding: 1.1rem;
  border-radius: 6px;
  border: 1px solid #e5e9f2;
  display: flex; flex-direction: column;
}
.evl-section--people .evl-person { background: #fff; }
.evl-person__photo {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #d8dde4;
  border-radius: 4px;
  margin: 0 0 0.85rem;
  overflow: hidden;
}
.evl-person__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.evl-person__photo-placeholder {
  width: 100%; height: 100%;
  background: linear-gradient(135deg, #c8cfd9, #d8dde4);
}
.evl-person__name {
  font-size: 1rem;
  font-weight: 700;
  color: #0a1230;
  margin: 0 0 0.25rem;
}
.evl-person__role {
  color: #b58a39;
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0 0 0.2rem;
}
.evl-person__affiliation {
  color: #6b7a93;
  font-size: 0.85rem;
  margin: 0 0 0.85rem;
}
.evl-person__bio {
  margin-top: auto;
  display: inline-flex; align-items: center; gap: 0.35rem;
  color: #b58a39;           /* gold — matches the mock */
  font-weight: 600;
  font-size: 0.85rem;
  text-decoration: none;
  letter-spacing: 0.01em;
}
.evl-person__bio:hover { color: #8a6529; text-decoration: underline; }

/* Clickable speaker cards — visual + interaction affordance */
.evl-person--clickable {
  cursor: pointer;
  transition: transform .15s, box-shadow .15s, border-color .15s;
  border: 1px solid transparent;
}
.evl-person--clickable:hover,
.evl-person--clickable:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12);
  border-color: rgba(181, 138, 57, 0.4);
  outline: none;
}
.evl-person__more {
  margin-top: auto;
  /* padding-top: 0.5rem; */
  display: inline-flex; align-items: center; gap: 0.25rem;
  color: #b58a39;
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.01em;
}
.evl-person--clickable:hover .evl-person__more,
.evl-person--clickable:focus-visible .evl-person__more {
  color: #8a6529;
}

/* ── Speaker bio modal ──
   Single shared dialog per section. Backdrop covers the viewport, the
   dialog itself centers + slides up on enter. Plain CSS transitions —
   Alpine just toggles x-show. */
.evl-bio-modal {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1050;
  padding: 1.5rem;
  overflow-y: auto;
}
.evl-bio-modal__dialog {
  position: relative;
  background: #fff;
  border-radius: 12px;
  max-width: 640px;
  width: 100%;
  padding: 2rem 2rem 1.75rem;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
  animation: evl-bio-modal-in .18s ease-out;
}
@keyframes evl-bio-modal-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.evl-bio-modal__close {
  position: absolute;
  top: 0.85rem;
  right: 0.85rem;
  width: 32px; height: 32px;
  background: #f5f6fa;
  border: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center; justify-content: center;
  cursor: pointer;
  color: #6b7a93;
  transition: background .15s, color .15s;
}
.evl-bio-modal__close:hover { background: #ecedf3; color: #1f2937; }
.evl-bio-modal__header {
  display: flex;
  gap: 1.25rem;
  margin-bottom: 1.25rem;
  align-items: center;
}
.evl-bio-modal__photo {
  width: 96px; height: 96px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: linear-gradient(135deg, #c8cfd9, #d8dde4);
}
.evl-bio-modal__photo--placeholder {
  display: inline-block;
}
.evl-bio-modal__heading { min-width: 0; }
.evl-bio-modal__name {
  font-size: 1.25rem;
  font-weight: 700;
  color: #0a1230;
  margin: 0 0 0.25rem;
  line-height: 1.25;
}
.evl-bio-modal__role {
  margin: 0;
  color: #b58a39;
  font-weight: 600;
  font-size: 0.9rem;
}
.evl-bio-modal__affiliation {
  margin: 0.15rem 0 0;
  color: #6b7a93;
  font-size: 0.85rem;
}
.evl-bio-modal__body {
  font-size: 0.95rem;
  color: #2a3447;
  line-height: 1.6;
  margin-bottom: 1.5rem;
  max-height: 50vh;
  overflow-y: auto;
}
.evl-bio-modal__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding-top: 1rem;
  border-top: 1px solid #e5e9f2;
}
.evl-bio-modal__linkedin,
.evl-bio-modal__biolink {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.45rem 0.95rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.85rem;
  text-decoration: none;
  transition: background .15s, color .15s;
}
.evl-bio-modal__linkedin {
  background: #0a66c2;       /* LinkedIn brand */
  color: #fff;
}
.evl-bio-modal__linkedin:hover { background: #084d92; color: #fff; }
.evl-bio-modal__biolink {
  background: #f5f6fa;
  color: #1f2937;
  border: 1px solid #e5e9f2;
}
.evl-bio-modal__biolink:hover { background: #ecedf3; color: #1f2937; }

@media (max-width: 540px) {
  .evl-bio-modal { padding: 0.75rem; }
  .evl-bio-modal__dialog { padding: 1.5rem 1.25rem 1.25rem; }
  .evl-bio-modal__header { gap: 1rem; }
  .evl-bio-modal__photo { width: 72px; height: 72px; }
  .evl-bio-modal__name  { font-size: 1.1rem; }
}

@media (max-width: 768px) {
  .evl-people { grid-template-columns: 1fr; }
}

/* ═════════════════ SPONSORS ═════════════════ */
.evl-sponsors__tier {
  margin-top: 2.5rem;
  text-align: center;
}

/* Tier label with flanking decorative lines */
.evl-sponsors__tier-label {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 1.0rem;
  font-weight: 700;
  color: #b58a39;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0 0 1.0rem;
}
.evl-sponsors__tier-label::before,
.evl-sponsors__tier-label::after {
  content: '';
  display: block;
  width: 48px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #d5c5a0, transparent);
}

.evl-sponsors__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.25rem;
}

/* White card tile — clean border + shadow so each logo sits on its own
   neutral surface regardless of the cream page background. */
.evl-sponsors__logo {
  flex: 0 1 calc((100% - 2.5rem) / 3);
  max-width: 220px;
  min-width: 140px;
  background: #ffffff;
  height: 110px;
  border-radius: 10px;
  border: 1px solid #e8e9f0;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.1rem 1.4rem;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.evl-sponsors__logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: grayscale(15%);
  transition: filter 0.18s ease;
}

/* Linked tiles — lift + gold border + full colour on hover */
.evl-sponsors__logo--linked {
  text-decoration: none;
  cursor: pointer;
}
.evl-sponsors__logo--linked:hover,
.evl-sponsors__logo--linked:focus-visible {
  transform: translateY(-3px);
  border-color: rgba(181, 138, 57, 0.4);
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.10);
  outline: none;
}
.evl-sponsors__logo--linked:hover img,
.evl-sponsors__logo--linked:focus-visible img {
  filter: grayscale(0%);
}

@media (max-width: 575.98px) {
  .evl-sponsors__logo {
    flex-basis: calc((100% - 1.25rem) / 2);
    min-width: 0;
    height: 90px;
  }
}

/* ═════════════════ REGISTER CTA ═════════════════ */
.evl-register {
  display: grid;
  grid-template-columns: minmax(0, 320px) 1fr;
  gap: 2.5rem;
  align-items: start;
}
.evl-register__body {
  background: #fff;
  padding: 1.5rem;
  border-radius: 6px;
  border: 1px solid #e5e9f2;
}
.evl-register__lead {
  font-size: 0.95rem;
  line-height: 1.6;
  color: #364a63;
  margin: 0 0 1rem;
}
.evl-register__bullets-heading {
  font-weight: 700;
  color: #0a1230;
  font-size: 0.9rem;
  margin: 0 0 0.5rem;
}
.evl-register__bullets {
  list-style: none; margin: 0 0 1.5rem; padding: 0;
}
.evl-register__bullets li {
  padding: 0.4rem 0 0.4rem 1.5rem;
  position: relative;
  color: #364a63;
  font-size: 0.9rem;
}
.evl-register__bullets li::before {
  content: '\f26b'; /* bi-record-circle */
  font-family: 'bootstrap-icons';
  position: absolute; left: 0; top: 0.5rem;
  color: #b58a39;
  font-size: 0.8rem;
}
.evl-register__cta {
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 0.85rem 1.6rem;
  background: transparent;
  border: 1.5px solid #0a1230;
  color: #0a1230;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}
.evl-register__cta:hover {
  background: #0a1230; color: #fff;
}
.evl-register__closed {
  background: #f6f3ef;
  border: 1px solid #e5e9f2;
  border-radius: 6px;
  padding: 0.85rem 1rem;
  color: #6b7a93;
  font-size: 0.9rem;
}

@media (max-width: 768px) {
  .evl-register { grid-template-columns: 1fr; }
}

/* ═════════════════ WHY ATTEND ═════════════════ */
.evl-why__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
  border-top: 1px solid rgba(255,255,255,0.12);
  padding-top: 2rem;
}
.evl-why__col-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 0.6rem;
}
.evl-why__col-body {
  color: #b8c1d9;
  font-size: 0.88rem;
  line-height: 1.6;
  margin: 0;
}

/* ═════════════════ FAQ / CONTACT ═════════════════ */
.evl-faq {
  display: grid;
  grid-template-columns: minmax(0, 320px) 1fr;
  gap: 2rem;
  align-items: start;
}
.evl-faq__title {
  font-size: 1.5rem;
  font-weight: 800;
  color: #0a1230;
  margin: 0;
}
.evl-faq__body {
  color: #6b7a93;
  font-size: 0.92rem;
  line-height: 1.7;
  margin: 0 0 1rem;
}
.evl-faq__contact {
  font-size: 0.92rem;
  color: #364a63;
  margin: 0;
}
.evl-faq__contact a {
  color: #3a0f7e;
  font-weight: 600;
  text-decoration: none;
}
.evl-faq__contact a:hover { color: #b58a39; text-decoration: underline; }

@media (max-width: 768px) {
  .evl-faq { grid-template-columns: 1fr; }
}

/* ═════════════════ COMPACT EVENT-ONLY FOOTER ═════════════════
   Renders when the admin has hidden the global chapter footer via
   Landing-page-mode → Main footer toggle. Deliberately minimal so the
   event page reads as a self-contained landing experience. */
.evl-footer {
  background: #0a1230;
  color: #b8c1d9;
  margin-top: auto;
  font-size: 0.875rem;
}
.evl-footer__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding: 1.5rem 1rem;
}
.evl-footer__brand { flex: 1 1 auto; min-width: 0; }
.evl-footer__title {
  margin: 0 0 0.25rem;
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
}
.evl-footer__meta { margin: 0; color: rgba(255,255,255,0.55); font-size: 0.82rem; }
.evl-footer__contact {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}
.evl-footer__link {
  display: inline-flex; align-items: center; gap: 0.4rem;
  color: #d1d8ec;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.15s;
}
.evl-footer__link:hover { color: #fff; }
.evl-footer__link i { opacity: 0.7; }

.evl-footer__legal {
  background: rgba(0,0,0,0.25);
  padding: 0.85rem 1rem;
  font-size: 0.78rem;
  color: rgba(255,255,255,0.45);
}
.evl-footer__legal .container {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 0.5rem;
}
.evl-footer__credit a { color: rgba(255,255,255,0.6); text-decoration: none; }
.evl-footer__credit a:hover { color: #fff; }

@media (max-width: 575.98px) {
  .evl-footer__inner { flex-direction: column; align-items: flex-start; }
  .evl-footer__legal .container { justify-content: flex-start; }
}

/* ═════════════════ PMI AWARDS ═════════════════ */
/* PMI Awards section — LEFT-aligned text + optional 2-col split when
   the admin has uploaded an image. Single column when no image (body
   flows full-width, capped at 70ch for readability). */
.evl-pmi-awards {
  margin-top: 1.5rem;
}
.evl-pmi-awards--split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 3rem;
  align-items: center;
}
@media (max-width: 768px) {
  .evl-pmi-awards--split {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}
.evl-pmi-awards__text { min-width: 0; }
/* Larger, bolder heading for this section — gives the "About Event"
   intro more visual weight than the standard section title. */
.evl-section--pmi-awards .evl-section__title {
  font-size: 40px;
  font-weight: 700;
  line-height: 1.15;
  margin-top: 0.25rem;
  margin-bottom: 1rem;
}
.evl-section--pmi-awards .evl-section__subtitle {
  margin-bottom: 1.25rem;
}
@media (max-width: 767.98px) {
  .evl-section--pmi-awards .evl-section__title,
  .faq__title,
  .evl-section__title {
    font-size: 24px;
  }

  .faq__header {
    flex-wrap: wrap;
  }

  .faq__expand-all {
    order: 1;
    width: 100%;
    text-align: right;
  }
}
.evl-pmi-awards__body {
  max-width: 70ch;
  color: #6b7a93;
  line-height: 1.85;
  font-size: 1rem;
}
.evl-pmi-awards--split .evl-pmi-awards__body {
  max-width: none;        /* the grid track already caps the width */
}
.evl-pmi-awards__body p {
  margin: 0 0 1.25rem;
}
.evl-pmi-awards__body p:last-child {
  margin-bottom: 0;
}
.evl-pmi-awards__cta {
  margin-top: 1.75rem;
  text-align: left;
}
.evl-pmi-awards__media {
  display: flex;
  align-items: stretch;
  justify-content: center;
}
.evl-pmi-awards__media img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: cover;
  border-radius: 16px;
  display: block;
}

/* ═════════════════ COMING SOON PLACEHOLDER ═════════════════ */
.evl-coming-soon {
  margin: 1.5rem auto 0;
  /* max-width: 520px; */
  background: #fff;
  border: 1px solid #e5e9f2;
  border-radius: 12px;
  padding: 2.25rem 1.5rem;
  text-align: center;
  box-shadow: 0 2px 6px rgba(15,23,42,0.04);
}
.evl-coming-soon__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px; height: 64px;
  border-radius: 50%;
  background: rgba(181, 138, 57, 0.12);   /* gold accent */
  color: #b58a39;
  font-size: 1.6rem;
  margin-bottom: 1rem;
}
.evl-coming-soon__label {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: #1c2b46;
  line-height: 1.5;
}

/* ═════════════════ WINNERS GRID ═════════════════ */
.evl-winners__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1.5rem;
  margin-top: 1.5rem;
}
.evl-winner {
  background: #fff;
  border: 1px solid #e5e9f2;
  border-radius: 8px;
  padding: 1.1rem;
  text-align: center;
  transition: transform 0.15s, box-shadow 0.15s;
}
.evl-winner:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(15,23,42,0.08);
}
.evl-winner__photo {
  position: relative;
  width: 120px; height: 120px;
  margin: 0 auto 1rem;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(135deg, #c8cfd9, #d8dde4);
}
.evl-winner__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.evl-winner__photo-placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  color: #b58a39;
  font-size: 2.4rem;
}
.evl-winner__badge {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%) translateY(35%);
  background: #b58a39;
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
.evl-winner__name {
  font-size: 1rem;
  font-weight: 700;
  color: #0a1230;
  margin: 0.85rem 0 0.25rem;
}
.evl-winner__designation {
  margin: 0;
  font-size: 0.85rem;
  color: #6b7a93;
  line-height: 1.5;
}

@media (max-width: 480px) {
  .evl-winners__grid { grid-template-columns: 1fr; }
}

/* ─────────────────────────────────────────────────────────────────────────
   APPLY-FOR-AWARDS / NOMINATIONS CARDS — landing section that surfaces
   nomination / application CTAs as a tile grid. Each tile has an icon,
   title, short description, and a brand-styled CTA. Tiles open the
   configured URL — typically a custom-form public URL.

   All colours / radii / spacing / weights / shadows pull from the design
   tokens defined in /assets/frontend/css/style.css:
     --clr-brand-purple #4f17a8 (primary), --clr-brand-dark, --clr-brand-violet,
     --clr-purple-mid, --clr-border, --clr-white,
     --radius-md/lg/pill, --space-2..8, --fw-semibold/bold,
     --fs-sm/md, --shadow-btn

   Scope: all selectors chained under .evl-section--apply-awards /
   .evl-apply-awards so the rules can't bleed.
   ───────────────────────────────────────────────────────────────────────── */
.evl-section--apply-awards {
  /* Subtle purple-to-page-bg wash so the strip reads as a distinct call
     to action without competing with the rest of the page chrome. */
  background: linear-gradient(180deg, rgba(79, 23, 168, 0.04) 0%, transparent 70%);
}
.evl-apply-awards__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-5);
  margin-top: var(--space-8);
}

.evl-apply-awards__card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: var(--clr-white);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-5) var(--space-5);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.evl-apply-awards__card:hover {
  transform: translateY(-4px);
  border-color: rgba(79, 23, 168, 0.32);
  box-shadow: 0 12px 32px rgba(79, 23, 168, 0.12);
}

/* Icon tile — purple-to-gold gradient tying brand-purple to the awards
   programme's gold kicker accent. Trophy/etc. icon sits in brand-purple. */
.evl-apply-awards__icon {
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg,
              rgba(79, 23, 168, 0.12) 0%,
              rgba(181, 138, 57, 0.10) 100%);
  color: var(--clr-brand-purple);
  font-size: 1.6rem;
  margin-bottom: var(--space-4);
  transition: transform 0.25s ease;
}
.evl-apply-awards__card:hover .evl-apply-awards__icon {
  transform: scale(1.06) rotate(-4deg);
}

.evl-apply-awards__title {
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  color: var(--clr-brand-dark);
  margin: 0 0 var(--space-2);
  line-height: 1.35;
  min-height: 49px;
}
.evl-apply-awards__desc {
  font-size: var(--fs-sm);
  color: var(--clr-purple-mid);
  line-height: 1.65;
  margin: 0 0 var(--space-5);
  flex-grow: 1;
}

/* CTA — pill button using the brand-purple → brand-violet hover idiom
   and --shadow-btn (the canonical button shadow token). */
.evl-apply-awards__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  align-self: center;
  padding: 0.6rem var(--space-5);
  background: var(--clr-brand-purple);
  color: var(--clr-white);
  border-radius: var(--radius-pill);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  text-decoration: none;
  transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.evl-apply-awards__cta:hover {
  background: var(--clr-brand-violet);
  color: var(--clr-white);
  transform: translateY(-1px);
  box-shadow: var(--shadow-btn);
}
.evl-apply-awards__cta .bi-arrow-right {
  transition: transform 0.15s ease;
}
.evl-apply-awards__cta:hover .bi-arrow-right {
  transform: translateX(3px);
}

@media (max-width: 480px) {
  .evl-apply-awards__grid { grid-template-columns: 1fr; }
}

/* Respect prefers-reduced-motion — disable lift/scale/rotate transitions */
@media (prefers-reduced-motion: reduce) {
  .evl-apply-awards__card,
  .evl-apply-awards__icon,
  .evl-apply-awards__cta { transition: none; }
  .evl-apply-awards__card:hover { transform: none; }
  .evl-apply-awards__card:hover .evl-apply-awards__icon { transform: none; }
  .evl-apply-awards__cta:hover { transform: none; }
}

/* ─────────────────────────────────────────────────────────────────────────
   COUNTDOWN BANNER — gradient strip with 4 Days/Hours/Minutes/Seconds boxes.
   Gradient stops come from inline style (admin-controlled hex from
   landing.countdown.gradient_from / to). Box layout, fonts, colours are
   all neutral white-on-gradient so any gradient combo works.

   The JS ticker lives in this file's <script> block below — it finds every
   .evl-countdown[data-target] on the page and updates [data-cd=d|h|m|s]
   spans once a second.
   ───────────────────────────────────────────────────────────────────────── */
.evl-section--countdown .evl-section__inner { max-width: 1200px; }
.evl-countdown {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1.5rem;
  padding: 1.6rem 1.5rem;
  margin-top: 0.0rem;
  border-radius: 12px;
  color: #fff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}
.evl-countdown__box { text-align: center; min-width: 70px; }
.evl-countdown__num {
  font-size: clamp(1.8rem, 5vw, 2.6rem);
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.evl-countdown__lbl {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: 0.45rem;
  opacity: 0.9;
}
.evl-countdown__sep {
  font-size: clamp(1.4rem, 4vw, 2rem);
  font-weight: 800;
  opacity: 0.5;
  align-self: center;
}
.evl-countdown__expired {
  width: 100%;
  text-align: center;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.03em;
}
@media (max-width: 480px) {
  .evl-countdown__sep { display: none; }
}

/* ─────────────────────────────────────────────────────────────────────────
   AWARDS GRID — 2-col layout: intro on the left, cards on the right.
   Intro column is sticky-aligned to the section top; cards stack in a
   responsive grid (2 columns on desktop, 1 on mobile).
   ───────────────────────────────────────────────────────────────────────── */
.evl-section--awards-grid .evl-section__inner { max-width: 1200px; }
.evl-awards-grid {
  display: grid;
  grid-template-columns: minmax(0, 280px) 1fr;
  gap: 2.5rem;
  margin-top: 1.5rem;
}
@media (max-width: 768px) {
  .evl-awards-grid { grid-template-columns: 1fr; gap: 1.5rem; }
}
/* Use the standard gold kicker colour from .evl-section__kicker (defined
   higher up). Don't override it here — every section's kicker should look
   identical so the page reads as one consistent family. */
.evl-awards-grid__intro .evl-section__kicker {
  margin-bottom: 0.65rem;
}
.evl-awards-grid__intro .evl-section__title {
  font-size: clamp(1.4rem, 2.4vw, 1.75rem);
  margin-bottom: 1rem;
}
.evl-awards-grid__desc {
  color: #6b7a93;
  font-size: 1.0rem;
  line-height: 1.7;
  margin: 0 0 1rem;  
}
.evl-awards-grid__more {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: #225aff;
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
}
.evl-awards-grid__more:hover { text-decoration: underline; }

.evl-awards-grid__cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
}
@media (max-width: 540px) {
  .evl-awards-grid__cards { grid-template-columns: 1fr; }
}
.evl-awards-grid__card {
  display: flex;
  gap: 1rem;
  padding: 1.25rem 1.1rem;
  background: #fff;
  border: 1px solid #e5e9f2;
  border-radius: 10px;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.04);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.evl-awards-grid__card:hover {
  /* Hover tint pulled from the PMI brand-purple palette so this section
     reads as part of the same family as the apply-awards cards / tabs / CTAs. */
  transform: translateY(-2px);
  border-color: rgba(79, 23, 168, 0.32);
  box-shadow: 0 8px 20px rgba(79, 23, 168, 0.1);
}
.evl-awards-grid__card-icon {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--clr-brand-purple);    /* PMI brand purple */
  font-size: 1.7rem;
}
.evl-awards-grid__card-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.evl-awards-grid__card-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: #1c2b46;
  margin: 0 0 0.4rem;
  line-height: 1.3;
}
.evl-awards-grid__card-desc {
  color: #6b7a93;
  font-size: 1.0rem;
  line-height: 1.55;
  margin: 0 0 0.5rem;
}
.evl-awards-grid__card-desc--clamped {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}
.evl-awards-grid__card-toggle {
  display: inline-block;
  background: none;
  border: none;
  padding: 0;
  margin: 0 0 0.5rem;
  color: var(--clr-brand-purple);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}
.evl-awards-grid__card-toggle:hover { text-decoration: underline; }
.evl-awards-grid__card-more {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: #225aff;
  font-weight: 600;
  font-size: 0.85rem;
  text-decoration: none;
}
.evl-awards-grid__card-more:hover { text-decoration: underline; }

/* ─────────────────────────────────────────────────────────────────────────
   TABBED INFO — centered heading + horizontal tab bar with N tabs.
   Active tab is white-on-white (looks attached to the panel); inactive
   tabs are info-blue. Panel is a bordered card. Pure CSS only — the
   JS in <script> below just toggles .is-active.
   ───────────────────────────────────────────────────────────────────────── */
.evl-section--info-tabs .evl-section__inner { max-width: 1200px; }
.evl-tabs { margin-top: 2rem; }
.evl-tabs__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  border-bottom: 1px solid #e5e9f2;
}
/* Tab pills use the PMI brand-purple palette so the section feels part
   of the same family as the apply-awards cards / register CTA / nav
   accents. Inactive = brand-purple bg + white text; hover = deeper
   brand-violet; active flips to white bg + brand-purple text with a
   purple top stripe so the eye instantly tracks which tab is open. */
.evl-tabs__btn {
  flex: 1 1 auto;
  min-width: 140px;
  padding: 0.85rem 1.25rem;
  background: var(--clr-brand-purple);
  color: #fff;
  border: 0;
  border-radius: 8px 8px 0 0;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.evl-tabs__btn:hover {
  background: var(--clr-brand-violet);
}
.evl-tabs__btn.is-active {
  background: #fff;
  color: var(--clr-brand-purple);
  border: 1px solid #e5e9f2;
  border-top: 3px solid var(--clr-brand-purple);   /* brand stripe across the active tab */
  border-bottom-color: #fff;
  padding-top: calc(0.85rem - 2px);                 /* keep label vertically centered when border grows */
  position: relative;
  top: 1px;
}
.evl-tabs__panels {
  background: #fff;
  border: 1px solid #e5e9f2;
  border-top: 0;
  border-radius: 0 0 8px 8px;
  padding: 1.5rem 1.75rem;
  color: #364a63;
  line-height: 1.7;
  font-size: 1.0rem;
}
.evl-tabs__panel { display: none; }
.evl-tabs__panel.is-active { display: block; }

/* Split layout — tab has an optional image rendered to the right of the body.
   When the image is absent (.evl-tabs__panel without --split modifier) the
   body just flows at full width, no grid wrapper. */
.evl-tabs__panel--split.is-active {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 2rem;
  align-items: start;
}
@media (max-width: 768px) {
  .evl-tabs__panel--split.is-active {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
}
.evl-tabs__media { display: flex; align-items: flex-start; justify-content: center; }
.evl-tabs__media img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  display: block;
}

@media (max-width: 575px) {
  .evl-tabs__btn { min-width: 0; flex-basis: 50%; }
}

/* ─────────────────────────────────────────────────────────────────────────
   TICKET PRICING TABLE — one table per ticket category.
   Three columns: Category (ticket name), Early Bird Price, Regular Price.
   The currently-active price column is highlighted in brand purple (header)
   + soft purple tint (body cells). When the event's early_bird_until passes,
   the small JS swap flips the .evl-ticket-col--active class from the EB
   column to the Regular column.
   Follows the design system tokens defined in /assets/frontend/css/style.css.
   ───────────────────────────────────────────────────────────────────────── */
.evl-section--tickets {
  background: var(--clr-page-bg);
  padding-block: var(--space-12);     /* was 16; tightened section padding */
}
.evl-section--tickets .evl-section__title--center {
  margin-bottom: var(--space-8);      /* was 10 */
}

/* ── Per-category wrapper ── */
.evl-ticket-table-wrap {
  max-width: 1080px;
  margin: 0 auto var(--space-6);      /* was 10; tighter gap between tables */
}
.evl-ticket-table-wrap:last-of-type {
  margin-bottom: var(--space-3);
}
.evl-ticket-table__title {
  font-size: var(--fs-lg);            /* was xl; subtler section header */
  font-weight: var(--fw-semibold);
  color: var(--clr-brand-dark);
  margin: 0 0 var(--space-3);
  line-height: 1.3;
  text-align: left;
}

/* ── Table shell ── */
.evl-ticket-table {
  border-radius: var(--radius-md);    /* was lg; cleaner with compact rows */
  overflow: hidden;
  box-shadow: var(--shadow-card);
  background: var(--clr-white);
}
.evl-ticket-table table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

/* ── Header (compact) ── */
.evl-ticket-table thead th {
  background: var(--clr-brand-dark);
  color: var(--clr-white);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  padding: var(--space-2) var(--space-3);
  text-align: center;
  vertical-align: middle;
  line-height: 1.35;
}
.evl-ticket-table thead th.evl-ticket-table__col-name {
  text-align: left;
  width: 38%;
  background: var(--clr-brand-navy);
}
.evl-ticket-table thead th.evl-ticket-table__col-action {
  width: 110px;
  background: var(--clr-brand-navy);
}
.evl-ticket-col__title {
  display: block;
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
}
.evl-ticket-col__per {
  font-weight: var(--fw-regular);
  font-size: 11px;
  opacity: 0.85;
}
.evl-ticket-col__range {
  display: block;
  font-size: 11px;
  font-weight: var(--fw-regular);
  margin-top: 2px;
  opacity: 0.78;
  font-family: 'Roboto Mono', monospace;
}

/* ── Active column highlight ──
   The active tier (EB or Regular) gets the brand purple in the header and a
   soft yellow tint in the body — matches the wireframe sketch. */
.evl-ticket-table thead th.evl-ticket-col--active {
  /* background: var(--clr-brand-purple); */
  position: relative;
}
.evl-ticket-table thead th.evl-ticket-col--active::after {
  content: '';
  position: absolute;
  left: var(--space-3);
  right: var(--space-3);
  bottom: -1px;
  height: 3px;
  /* background: #ffd60a; */
}

/* ── Body (compact) ── */
.evl-ticket-table tbody tr {
  border-bottom: 1px solid var(--clr-border);
  transition: background var(--transition);
}
.evl-ticket-table tbody tr:last-child {
  border-bottom: none;
}
.evl-ticket-table tbody tr:hover {
  background: rgba(79, 23, 168, 0.03);
}
.evl-ticket-table tbody td {
  padding: var(--space-2) var(--space-3);   /* was 4/5; compact rows */
  font-size: var(--fs-sm);
  color: var(--clr-gray-dark);
  text-align: center;
  vertical-align: middle;
  line-height: 1.35;
}
.evl-ticket-table__name {
  text-align: left !important;
  color: var(--clr-brand-dark);
  font-weight: var(--fw-medium);
}
.evl-ticket-table tbody td.evl-ticket-col--active {
  background: rgba(255, 214, 10, 0.18);
  color: var(--clr-brand-dark);
  font-weight: var(--fw-semibold);
}
.evl-ticket-table__price {
  display: inline-block;
  font-family: 'Roboto Mono', monospace;
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  letter-spacing: -0.01em;
  line-height: 1.1;
}
.evl-ticket-table__currency {
  font-size: var(--fs-sm);
  margin-right: 2px;
}
.evl-ticket-table__usd {
  display: block;
  font-family: 'Roboto Mono', monospace;
  font-size: 11px;
  font-weight: var(--fw-regular);
  color: var(--clr-gray-mid);
  margin-top: 2px;
}
.evl-ticket-table__dash {
  color: var(--clr-gray-mid);
  font-weight: var(--fw-regular);
}

/* ── Per-row Register button ──
   Sits in the rightmost column on each row. Deep-links to the register
   form with ?ticket=<id> appended so the form preselects that ticket. */
.evl-ticket-table__action {
  text-align: center !important;
  white-space: nowrap;
}
.evl-ticket-table__cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--clr-brand-purple);
  color: var(--clr-white);
  text-decoration: none;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-xs);
  line-height: 1.2;
  white-space: nowrap;
  transition: background var(--transition), transform var(--transition);
}
.evl-ticket-table__cta:hover {
  background: var(--clr-brand-dark);
  color: var(--clr-white);
  transform: translateY(-1px);
}
.evl-ticket-table__cta i {
  font-size: 0.85em;
  transition: transform var(--transition);
}
.evl-ticket-table__cta:hover i {
  transform: translateX(2px);
}

/* ── Event-wide notes (rendered once below the tables) ──
   Two boxes: Early Bird and Regular. The currently-active tier gets the
   bright yellow highlight per wireframe; the inactive tier gets a subtle
   neutral background so admins can still read what's coming next. */
.evl-ticket-notes {
  max-width: 1080px;
  margin: var(--space-6) auto 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.evl-ticket-note {
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4); 
  background: var(--clr-white);
  transition: background var(--transition), border-color var(--transition);
}
.evl-ticket-note.is-active {
  background: #fff8c6;
  border-color: #ffd60a;
  margin: 0.4rem 0 1.0rem;
}
.evl-ticket-note__title {
  margin: 0 0 var(--space-1);
  font-weight: var(--fw-bold);
  color: var(--clr-brand-dark);
  font-size: var(--fs-sm);
}
.evl-ticket-note__body p {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--clr-gray-dark);
  line-height: 1.55;
}

/* ── Responsive ── */
@media (max-width: 720px) {
  .evl-ticket-table-wrap { padding: 0 var(--space-2); }
  .evl-ticket-table__title { font-size: var(--fs-base); }
  .evl-ticket-table thead th,
  .evl-ticket-table tbody td {
    padding: 6px 8px;
    font-size: 11px;
  }
  .evl-ticket-table thead th.evl-ticket-table__col-name { width: 36%; }
  .evl-ticket-table thead th.evl-ticket-table__col-action { width: 80px; }
  .evl-ticket-col__per { display: block; }
  .evl-ticket-col__range { font-size: 10px; }
  .evl-ticket-table__price { font-size: var(--fs-sm); }
  .evl-ticket-table__usd { font-size: 10px; }
  .evl-ticket-table__cta {
    padding: 4px 8px;
    font-size: 11px;
  }
  .evl-ticket-table__cta i { display: none; }
}