/* Events Listing page (v2 redesign).
 *
 * Desktop Figma: 6jVr7YbefLWCQjcGuvD59L node 1521:13472 — Mobile: Qkw1rAqYvxShVppu34QlEv node 1410:10683.
 * Desktop/mobile variants both render at all viewports; per-section 768px
 * media-query gates hide whichever doesn't fit — same pattern as
 * people-planet-prize.css. Sections: hero, featured, all-events (evl-all),
 * replays, testimonials (evl-quotes), multimedia (evl-media), faq, cta.
 */

/* Events Listing — Hero.
 *
 * Desktop Figma 6jVr7YbefLWCQjcGuvD59L node 1521:13475, mobile
 * Qkw1rAqYvxShVppu34QlEv node 1410:10686. 768px gate hides one variant.
 */

.evl-hero--desktop { display: flex; }
.evl-hero--mobile  { display: none; }
@media (max-width: 768px) {
    .evl-hero--desktop { display: none; }
    .evl-hero--mobile  { display: flex; }
}

/* ============================== Hero desktop (1521:13475) ============================== */

/* Section — white, 48px v-pad / 112px gutters; copy left, illustration right. */
.evl-hero--desktop {
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    padding: 48px 112px;
    background: #FFFFFF;
    font-family: 'Inter', sans-serif;
}
/* Hero Text (1521:13476) — 698px column, 32px stack gap. */
.evl-hero--desktop .evl-hero__copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
    width: 698px;
    flex-shrink: 0;
}
/* Eyebrow row (1521:13477) — 28px learn icon + EVENTS, 12px gap. */
.evl-hero__eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;
}
.evl-hero__eyebrow-icon { display: block; }
.evl-hero--desktop .evl-hero__eyebrow-icon { width: 28px; height: 28px; }
.evl-hero__eyebrow-icon svg { display: block; width: 100%; height: 100%; }
/* EVENTS — 20/28 regular #2FB8A9. */
.evl-hero--desktop .evl-hero__eyebrow-text {
    font-size: 20px;
    line-height: 28px;
    font-weight: 400;
    color: #2FB8A9;
}
/* Heading (1521:13480) — Display lg semibold 48/60, -0.96px, black. */
.evl-hero--desktop .evl-hero__heading {
    margin: 0;
    font-size: 48px;
    line-height: 60px;
    font-weight: 600;
    letter-spacing: -0.96px;
    color: #000000;
}
/* Sub (1521:13481) — Text xl 20/30 regular Gray/8. */
.evl-hero--desktop .evl-hero__sub {
    margin: 0;
    font-size: 20px;
    line-height: 30px;
    font-weight: 400;
    color: #595959;
}
/* Button (1521:13482) — Brand/600, 20/12 pad, r8, 16/24 semibold white, xs shadow. */
.evl-hero__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 20px;
    background: #465DA6;
    border: 1px solid #465DA6;
    border-radius: 8px;
    box-shadow: 0px 1px 2px 0px rgba(10, 13, 18, 0.05);
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
    color: #FFFFFF;
    text-decoration: none;
}
.evl-hero__cta:hover { background: #3C5192; border-color: #3C5192; color: #FFFFFF; }
/* Illustration (1521:13483) — 519.578×301 clipped stage. */
/* Illustration (2672:21604) — the design's composited render, exported 2×. */
.evl-hero--desktop .evl-hero__illustration {
    width: 519.578px;
    flex-shrink: 0;
}
.evl-hero__illustration-img {
    display: block;
    width: 100%;
    height: auto;
}

/* ============================== Hero mobile (1410:10686) ============================== */

/* Section — white, 16px gutters, 24px top / 32px bottom pad, 24px stack gap. */
.evl-hero--mobile {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 24px;
    padding: 24px 16px 32px;
    background: #FFFFFF;
    font-family: 'Inter', sans-serif;
}
/* Text group (1410:10687) — 8px gap. */
.evl-hero--mobile .evl-hero__text-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}
/* Eyebrow — 16px globe-04 icon + 12/20 EVENTS, 8px gap. */
.evl-hero--mobile .evl-hero__eyebrow { gap: 8px; }
.evl-hero--mobile .evl-hero__eyebrow-icon { width: 16px; height: 16px; }
.evl-hero--mobile .evl-hero__eyebrow-text {
    font-size: 12px;
    line-height: 20px;
    font-weight: 400;
    color: #2FB8A9;
}
/* Heading — Heading/2 bold 30/38 Gray/10. */
.evl-hero--mobile .evl-hero__heading {
    margin: 0;
    font-size: 30px;
    line-height: 38px;
    font-weight: 700;
    color: #262626;
}
/* Sub — Base 14/22 regular Gray/8. */
.evl-hero--mobile .evl-hero__sub {
    margin: 0;
    font-size: 14px;
    line-height: 22px;
    font-weight: 400;
    color: #595959;
}
/* Button — 173×40, 16/10 pad, 14/20 semibold. */
.evl-hero--mobile .evl-hero__cta {
    width: 173px;
    height: 40px;
    padding: 10px 16px;
    font-size: 14px;
    line-height: 20px;
}
/* Illustration (1879:12205) — the design's composited render, exported 2×. */
.evl-hero--mobile .evl-hero__illustration {
    width: 100%;
}

/* Events Listing — Featured Event.
 *
 * Desktop Figma 6jVr7YbefLWCQjcGuvD59L node 1521:13517, mobile
 * Qkw1rAqYvxShVppu34QlEv node 1410:10694. 768px gate hides one variant.
 */

.evl-featured--desktop { display: flex; }
.evl-featured--mobile  { display: none; }
@media (max-width: 768px) {
    .evl-featured--desktop { display: none; }
    .evl-featured--mobile  { display: flex; }
}

/* ============================== Featured desktop (1521:13517) ============================== */

/* Section — white, 48px v-pad / 112px gutters, 36px title→card gap. */
.evl-featured--desktop {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 36px;
    padding: 48px 112px;
    background: #FFFFFF;
    font-family: 'Inter', sans-serif;
}
/* Section title (1521:13519) — Display md semibold 36/44, -0.72px. */
.evl-featured--desktop .evl-featured__title {
    margin: 0;
    width: 100%;
    font-size: 36px;
    line-height: 44px;
    font-weight: 600;
    letter-spacing: -0.72px;
    color: rgba(0, 0, 0, 0.88);
}
/* Card (1521:13520) — Blue/8, r24, 48px h-pad / 72px v-pad, clipped stripes. */
.evl-featured--desktop .evl-featured__card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 24px;
    width: 100%;
    padding: 72px 48px;
    background: #2A3864;
    border-radius: 24px;
    overflow: hidden;
}
/* 15°-rotated 160.447×535 #3A4B7E→#243159 gradient stripes (1521:13521/13522). */
.evl-featured__stripe {
    position: absolute;
    width: 160.447px;
    height: 535.005px;
    background: linear-gradient(180deg, #3A4B7E 0%, #243159 100%);
    transform: rotate(15deg);
    pointer-events: none;
}
.evl-featured--desktop .evl-featured__stripe--1 { right: 179.05px; top: -104.85px; }
.evl-featured--desktop .evl-featured__stripe--2 { right: 13.59px;  top: -54.85px; }
/* Content column (1521:13523) — 570px, 16px gap. */
.evl-featured--desktop .evl-featured__content {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    width: 570px;
    flex-shrink: 0;
}
/* Text group (1521:13524) — 12px gap. */
.evl-featured__text {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}
/* Meta row (1521:13525) — 8px gaps, 14px icons. */
.evl-featured__meta {
    display: flex;
    align-items: center;
    gap: 8px;
}
.evl-featured__meta-item {
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}
.evl-featured--desktop .evl-featured__meta-item {
    font-size: 18px;
    line-height: 28px;
    font-weight: 400;
    color: #CDD8F9;
}
.evl-featured__meta-icon { display: block; width: 14px; height: 14px; }
.evl-featured__meta-icon svg { display: block; width: 100%; height: 100%; }
/* Event title (1521:13532) — 36/44 semibold white, -0.72px. */
.evl-featured--desktop .evl-featured__event-title {
    margin: 0;
    font-size: 36px;
    line-height: 44px;
    font-weight: 600;
    letter-spacing: -0.72px;
    color: #FFFFFF;
}
/* Description (1521:13533) — 18/28 Brand/100, 2-line clamp (56px). */
.evl-featured--desktop .evl-featured__desc {
    margin: 0;
    max-height: 56px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-size: 18px;
    line-height: 28px;
    font-weight: 400;
    color: #CDD8F9;
}
/* Speaker chip (1521:13534) — 1px #465DA6 border, r8, 12/8 pad, 10px gap. */
.evl-featured__speaker {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}
.evl-featured--desktop .evl-featured__speaker {
    padding: 8px 12px;
    border: 1px solid #465DA6;
    border-radius: 8px;
}
/* Avatar (1521:13535) — 32px, white ring, full round. */
.evl-featured__speaker-avatar {
    display: flex;
    align-items: center;
    background: #FFFFFF;
    border-radius: 799.2px;
    overflow: hidden;
    flex-shrink: 0;
}
.evl-featured__speaker-avatar img {
    width: 32px;
    height: 32px;
    object-fit: cover;
}
.evl-featured__speaker-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}
.evl-featured--desktop .evl-featured__speaker-name,
.evl-featured--desktop .evl-featured__speaker-role {
    font-size: 18px;
    line-height: 28px;
    font-weight: 400;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.evl-featured__speaker-name { color: #FFFFFF; }
.evl-featured__speaker-role { color: #CDD8F9; }
/* Button (1521:13542) — white, #D5D7DA border, 18/10 pad, r8, 16/24 semibold Gray/700. */
.evl-featured__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 18px;
    background: #FFFFFF;
    border: 1px solid #D5D7DA;
    border-radius: 8px;
    box-shadow: 0px 1px 2px 0px rgba(10, 13, 18, 0.05);
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
    color: #414651;
    text-decoration: none;
}
.evl-featured__cta:hover { background: #F5F5F5; color: #414651; }
.evl-featured__cta-icon { display: block; width: 20px; height: 20px; }
.evl-featured__cta-icon svg { display: block; width: 100%; height: 100%; }
/* Event photo card (1521:13543) — #384A85, 12.515px pad, r16, pinned at 817.17/219. */
.evl-featured--desktop .evl-featured__photo-card {
    position: absolute;
    left: 817.17px;
    top: 219px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding: 12.515px;
    background: #384A85;
    border-radius: 16px;
}
/* image 51 — 386.802×257.868, r16 top corners. */
.evl-featured--desktop .evl-featured__photo {
    width: 386.802px;
    height: 257.868px;
    border-radius: 16px 16px 0 0;
    object-fit: cover;
}

/* ============================== Featured mobile (1410:10694) ============================== */

/* Section — white, 16px gutters / 24px v-pad, 16px title→card gap. */
.evl-featured--mobile {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 24px 16px;
    background: #FFFFFF;
    font-family: 'Inter', sans-serif;
}
/* Title — Heading/4 bold 20/28. */
.evl-featured--mobile .evl-featured__title {
    margin: 0;
    font-size: 20px;
    line-height: 28px;
    font-weight: 700;
    color: rgba(0, 0, 0, 0.88);
}
/* Card (1410:10697) — Blue/8, r8, 16px pad, 12px gap, 0 6 16 shadow. */
.evl-featured--mobile .evl-featured__card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
    padding: 16px;
    background: #2A3864;
    border-radius: 8px;
    box-shadow: 0px 6px 16px 0px rgba(0, 0, 0, 0.07);
    overflow: hidden;
}
.evl-featured--mobile .evl-featured__stripe--1 { right: 49.05px;   top: -54.85px; }
.evl-featured--mobile .evl-featured__stripe--2 { right: -126.41px; top: -54.85px; }
/* Text group (1410:10700) — 4px gap. */
.evl-featured--mobile .evl-featured__text {
    position: relative;
    gap: 4px;
}
.evl-featured--mobile .evl-featured__meta-item {
    font-size: 12px;
    line-height: 20px;
    font-weight: 400;
    color: #B5BEDB;
}
/* Event title (1410:10708) — Large 16/24 semibold white. */
.evl-featured--mobile .evl-featured__event-title {
    margin: 0;
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
    color: #FFFFFF;
}
/* Description (1410:10709) — 12/20 Blue/3, 3-line clamp (63px). */
.evl-featured--mobile .evl-featured__desc {
    margin: 0;
    max-height: 63px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    font-size: 12px;
    line-height: 20px;
    font-weight: 400;
    color: #B5BEDB;
}
/* Button (1410:10710) — full-width white, 16/10 pad, 14/20 semibold. */
.evl-featured--mobile .evl-featured__cta {
    position: relative;
    width: 100%;
    padding: 10px 16px;
    font-size: 14px;
    line-height: 20px;
}
/* Speaker row (1410:10716) — no border on mobile, 4px bottom pad. */
.evl-featured--mobile .evl-featured__speaker {
    position: relative;
    padding-bottom: 4px;
}
.evl-featured--mobile .evl-featured__speaker-name,
.evl-featured--mobile .evl-featured__speaker-role {
    font-size: 12px;
    line-height: 20px;
    font-weight: 400;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Events Listing — All Events.
 *
 * Desktop Figma 6jVr7YbefLWCQjcGuvD59L node 1521:13545 (picker modal
 * 1521:13807), mobile Qkw1rAqYvxShVppu34QlEv node 1410:10724.
 * 768px gate hides one variant; the Vue app renders inside each mount.
 */

.evl-all--desktop { display: block; }
.evl-all--mobile  { display: none; }
@media (max-width: 768px) {
    .evl-all--desktop { display: none; }
    .evl-all--mobile  { display: block; }
}

.evl-all { background: #FFFFFF; font-family: 'Inter', sans-serif; }
/* Desktop section — 72px v-pad / 112px gutters. */
.evl-all--desktop { padding: 72px 112px; }
/* Mobile section — 20px top / 32px bottom, 16px gutters. */
.evl-all--mobile { padding: 20px 16px 32px; }

/* Shared button primitives (Brand/600 primary, white secondary). */
.evl-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 8px;
    box-shadow: 0px 1px 2px 0px rgba(10, 13, 18, 0.05);
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}
.evl-btn--primary {
    background: #465DA6;
    border: 1px solid #465DA6;
    color: #FFFFFF;
}
.evl-btn--primary:hover { background: #3C5192; border-color: #3C5192; color: #FFFFFF; }
.evl-btn--secondary {
    background: #FFFFFF;
    border: 1px solid #D5D7DA;
    color: #414651;
}
.evl-btn--secondary:hover { background: #F5F5F5; color: #414651; }

/* ---------- Layout (1521:13545) — 240px sidebar + flexible grid, 52px gap. ---------- */
.evl-all__layout {
    display: flex;
    align-items: flex-start;
    gap: 52px;
}
.evl-all__layout--m {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
}
.evl-all__sidebar {
    display: flex;
    flex-direction: column;
    gap: 28px;
    width: 240px;
    flex-shrink: 0;
}
/* "Filter by" (1521:13548) — 16/24 semibold Gray/7 in a 44px row. */
.evl-all__filter-by {
    display: flex;
    align-items: center;
    height: 44px;
    margin: 0;
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
    color: #8C8C8C;
}
.evl-all__main {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    flex: 1;
    min-width: 0;
}
/* Head row — All Events title + sort. */
.evl-all__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}
/* Title (1521:13571) — Display md semibold 36/44, -0.72px. */
.evl-all--desktop .evl-all__title {
    margin: 0;
    font-size: 36px;
    line-height: 44px;
    font-weight: 600;
    letter-spacing: -0.72px;
    color: rgba(0, 0, 0, 0.88);
}
/* Mobile title (1410:10725) — Heading/4 bold 20/28. */
.evl-all--mobile .evl-all__title {
    margin: 0;
    width: 100%;
    font-size: 20px;
    line-height: 28px;
    font-weight: 700;
    color: rgba(0, 0, 0, 0.88);
}

/* ---------- Sort control + menu (1521:13572 / 1521:13693). ---------- */
.evl-all__sort { position: relative; }
.evl-all__sort-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
}
.evl-all__sort-label {
    font-size: 16px;
    line-height: 24px;
    font-weight: 500;
    color: #8C8C8C;
}
.evl-all__sort-value {
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.88);
}
.evl-all__sort-chev { display: block; width: 24px; height: 24px; }
.evl-all__sort-chev svg { display: block; width: 100%; height: 100%; }
/* Select menu — 320px, r8, Gray/200 border, Shadow/lg, items 14/10 pad. */
.evl-sort-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    z-index: 30;
    width: 320px;
    padding: 4px 0;
    background: #FFFFFF;
    border: 1px solid #E9EAEB;
    border-radius: 8px;
    box-shadow: 0px 12px 16px -4px rgba(10, 13, 18, 0.08), 0px 4px 6px -2px rgba(10, 13, 18, 0.03);
}
.evl-sort-menu__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    padding: 10px 14px;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 16px;
    line-height: 24px;
    font-weight: 500;
    color: #181D27;
    text-align: left;
}
.evl-sort-menu__item:hover { background: #FAFAFA; }
.evl-sort-menu__item--active { background: #FAFAFA; }
.evl-sort-menu__check { display: block; width: 20px; height: 20px; }
.evl-sort-menu__check svg { display: block; width: 100%; height: 100%; }

/* Mobile controls row (1410:10726) — Filter button + flexible sort select. */
.evl-all__controls {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
}
.evl-all__filter-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    background: #FFFFFF;
    border: 1px solid #D5D7DA;
    border-radius: 8px;
    box-shadow: 0px 1px 2px 0px rgba(10, 13, 18, 0.05);
    cursor: pointer;
    font-family: inherit;
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
    color: #414651;
    flex-shrink: 0;
}
.evl-all__filter-icon { display: block; width: 20px; height: 20px; }
.evl-all__filter-icon svg { display: block; width: 100%; height: 100%; }
.evl-all__sort--m { flex: 1; min-width: 0; }
.evl-all__sort--m .evl-all__sort-btn {
    width: 100%;
    justify-content: space-between;
    padding: 10px 16px;
    background: #FFFFFF;
    border: 1px solid #D5D7DA;
    border-radius: 8px;
    filter: drop-shadow(0px 1px 1px rgba(10, 13, 18, 0.05));
}
.evl-all__sort-inline { display: flex; gap: 4px; align-items: baseline; }
.evl-all__sort--m .evl-all__sort-label { font-size: 14px; line-height: 20px; font-weight: 400; }
.evl-all__sort--m .evl-all__sort-value { font-size: 14px; line-height: 20px; color: #414651; }
.evl-all__sort-chev--m { width: 16px; height: 16px; }
.evl-all__sort--m .evl-sort-menu { width: 100%; }

/* ---------- Filter groups (shared sidebar/sheet). ---------- */
.evl-filters {
    display: flex;
    flex-direction: column;
    gap: 28px;
    width: 100%;
}
.evl-filters__group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.evl-filters__label {
    margin: 0;
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
    color: #000000;
}
/* Date input (1521:13553) — white, #D5D7DA border, r8, 14/10 pad, 20px calendar. */
.evl-filters__date {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 10px 14px;
    background: #FFFFFF;
    border: 1px solid #D5D7DA;
    border-radius: 8px;
    box-shadow: 0px 1px 2px 0px rgba(10, 13, 18, 0.05);
    cursor: pointer;
    font-family: inherit;
    text-align: left;
}
.evl-filters__date-icon { display: block; width: 20px; height: 20px; flex-shrink: 0; }
.evl-filters__date-icon svg { display: block; width: 100%; height: 100%; }
.evl-filters__date-text {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    color: #181D27;
}
/* Checkbox rows — 20px r6 box, 12px gap, 16/24 Gray/700 label. */
.evl-check {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    margin: 0;
}
.evl-check__input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}
.evl-check__box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    background: #FFFFFF;
    border: 1px solid #D5D7DA;
    border-radius: 6px;
    flex-shrink: 0;
}
.evl-check__tick { display: none; width: 14px; height: 14px; }
.evl-check__tick svg { display: block; width: 100%; height: 100%; }
.evl-check__input:checked + .evl-check__box {
    background: #EBF1FF;
    border-color: #465DA6;
}
.evl-check__input:checked + .evl-check__box .evl-check__tick { display: block; }
.evl-check__input:focus-visible + .evl-check__box { outline: 2px solid #465DA6; outline-offset: 2px; }
.evl-check__label {
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    color: #414651;
}
/* Clear filters (1552:10667) — 14/20 semibold Brand/700 text button. */
.evl-filters__clear {
    align-self: flex-start;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
    color: #5E69A8;
}
.evl-filters__clear:hover { text-decoration: underline; }

/* ---------- Desktop event card (1521:13577). ---------- */
.evl-all__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px;
    width: 100%;
}
.evl-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding-bottom: 10px;
    background: #FFFFFF;
    border: 1px solid #D9D9D9;
    border-radius: 14px;
    box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.07);
    overflow: hidden;
}
/* Cover — 212px, badge pinned 8/8. */
.evl-card__media {
    position: relative;
    width: 100%;
    height: 212px;
    overflow: hidden;
}
.evl-card__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.evl-card__img--placeholder { background: #EBF1FF; }
/* Status badge — pill r16, 10/12/4 pad, 6px gap, 8px dot, 14/20 medium. */
.evl-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 4px 12px 4px 10px;
    border-radius: 16px;
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
}
.evl-card__media .evl-badge { position: absolute; right: 8px; top: 8px; }
.evl-badge__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}
/* Upcoming — Secondary/25 bg, Secondary/700 text. Past — Gray/100 bg, Gray/700. */
.evl-badge--upcoming { background: #F3FFFD; color: #269387; }
.evl-badge--upcoming .evl-badge__dot { background: #2FB8A9; }
.evl-badge--past { background: #F5F5F5; color: #414651; }
.evl-badge--past .evl-badge__dot { background: #717680; }
.evl-badge--ongoing { background: #EBF1FF; color: #465DA6; }
.evl-badge--ongoing .evl-badge__dot { background: #465DA6; }
/* Descriptions (1521:13584) — 16px gutters, 5px stack gap. */
.evl-card__body {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 100%;
    padding: 0 16px;
}
.evl-card__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    font-size: 14px;
    line-height: 22px;
    font-weight: 400;
    white-space: nowrap;
}
.evl-card__date { color: #465DA6; }
.evl-card__time { color: #8C8C8C; }
/* Title — 16/24 semibold, single-line ellipsis. */
.evl-card__title {
    margin: 0;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
}
.evl-card__title a { color: rgba(0, 0, 0, 0.88); text-decoration: none; }
.evl-card__title a:hover { color: #465DA6; }
/* Description — 14/22 Gray/8, 2-line clamp (48px box in Figma). */
.evl-card__desc {
    margin: 0;
    max-height: 48px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-size: 14px;
    line-height: 22px;
    font-weight: 400;
    color: #595959;
}
.evl-card__divider {
    width: 100%;
    height: 0;
    border-top: 1px solid #D9D9D9;
}
/* Footer — tags left, View Details right, 16px gutters. */
.evl-card__footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 0 16px;
}
.evl-card__tags {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
}
.evl-card__tag {
    display: flex;
    align-items: center;
    gap: 4px;
    overflow: hidden;
    white-space: nowrap;
    font-size: 14px;
    line-height: 22px;
    font-weight: 400;
    color: #8C8C8C;
}
.evl-card__tag-icon { display: block; width: 12px; height: 12px; flex-shrink: 0; }
.evl-card__tag-icon svg { display: block; width: 100%; height: 100%; }

/* ---------- Mobile event card (1410:10752). ---------- */
.evl-card-m {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
    padding: 10px 10px 12px;
    background: #FFFFFF;
    border: 1px solid #D9D9D9;
    border-radius: 14px;
    filter: drop-shadow(0px 4px 7px rgba(0, 0, 0, 0.07));
}
/* Compact badge — 6/8/2 pad, 12/18 medium. */
.evl-card-m .evl-badge {
    padding: 2px 8px 2px 6px;
    font-size: 12px;
    line-height: 18px;
}
.evl-card-m__row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
    padding: 0 4px;
}
.evl-card-m__text {
    display: flex;
    flex-direction: column;
    gap: 16px;
    flex: 1;
    min-width: 0;
}
.evl-card-m__title {
    margin: 0 0 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
    line-height: 22px;
    font-weight: 600;
}
.evl-card-m__title a { color: rgba(0, 0, 0, 0.88); text-decoration: none; }
/* Description — 12/20, 2-line clamp (39px box in Figma). */
.evl-card-m__desc {
    margin: 0;
    max-height: 40px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-size: 12px;
    line-height: 20px;
    font-weight: 400;
    color: #595959;
}
.evl-card-m__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    font-size: 12px;
    line-height: 20px;
    font-weight: 400;
    white-space: nowrap;
}
.evl-card-m__date { color: #465DA6; }
.evl-card-m__time { color: #8C8C8C; }
/* 64px cover thumb — #D9D9D9 border, r8. */
.evl-card-m__cover {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #D9D9D9;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
}
.evl-card-m__cover img,
.evl-card-m__cover-placeholder {
    display: block;
    width: 64px;
    height: 64px;
    object-fit: cover;
}
.evl-card-m__cover-placeholder { background: #EBF1FF; }
.evl-card-m__footer { padding: 0; }
.evl-card-m .evl-card__tag { font-size: 12px; line-height: 20px; }
.evl-card-m__cta { padding: 8px 14px; }

/* ---------- Pagination (antd legacy, 1521:13671). ---------- */
.evl-pagination {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 0;
}
.evl-pagination__nav {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    background: none;
    border: none;
    border-radius: 90px;
    cursor: pointer;
}
.evl-pagination__nav:disabled { opacity: 0.25; cursor: default; }
.evl-pagination__nav span { display: block; width: 20px; height: 20px; }
.evl-pagination__nav svg { display: block; width: 100%; height: 100%; }
.evl-pagination__item {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 4px 10px;
    background: #FFFFFF;
    border: 0.9px solid #D9D9D9;
    border-radius: 5.4px;
    cursor: pointer;
    font-family: inherit;
    font-size: 14px;
    line-height: 22px;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.85);
}
.evl-pagination__item--active {
    background: #EBF1FF;
    border: none;
    border-radius: 6px;
    color: #465DA6;
}
.evl-pagination__ellipsis {
    width: 32px;
    text-align: center;
    font-size: 14px;
    line-height: 32px;
    letter-spacing: 2px;
    color: rgba(0, 0, 0, 0.25);
}

/* ---------- States. ---------- */
.evl-all__state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 48px 0;
    text-align: center;
    font-size: 16px;
    line-height: 24px;
    color: #595959;
}
.evl-all__state--error { color: #B42318; }
.evl-all__state p { margin: 0; }

/* ---------- Date range picker modal (1521:13807). ---------- */
/* Overlay — rgba(16,24,40,.7) + 8px blur. */
.evl-dp-overlay {
    position: fixed;
    inset: 0;
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(16, 24, 40, 0.7);
    backdrop-filter: blur(8px);
    padding: 16px;
}
/* Panel — white r12, layered shadow, presets rail + calendars. */
.evl-dp {
    display: flex;
    align-items: stretch;
    background: #FFFFFF;
    border-radius: 12px;
    box-shadow: 0px 20px 24px -4px rgba(10, 13, 18, 0.08), 0px 8px 8px -4px rgba(10, 13, 18, 0.03);
    font-family: 'Inter', sans-serif;
    max-height: calc(100vh - 32px);
    overflow: auto;
}
/* Presets rail — 16/12 pad, 4px gap; items 160w, 16/10 pad, r6, 14/20 medium. */
.evl-dp__presets {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 16px;
    border-right: 1px solid #E9EAEB;
}
.evl-dp__preset {
    width: 160px;
    padding: 10px 16px;
    background: #FFFFFF;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-family: inherit;
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    color: #414651;
    text-align: left;
}
.evl-dp__preset:hover { background: #FAFAFA; }
.evl-dp__preset--active { background: #EBF1FF; color: #5E69A8; }
.evl-dp__main { display: flex; flex-direction: column; }
/* Two 328px month pickers, 24/20 content pad. */
.evl-dp__calendars { display: flex; align-items: flex-start; }
.evl-dp__month { width: 328px; padding: 20px 24px; }
.evl-dp__month + .evl-dp__month { border-left: 1px solid #E9EAEB; }
.evl-dp__month-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 280px;
    margin-bottom: 12px;
}
.evl-dp__month-label {
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
    color: #414651;
    text-align: center;
}
.evl-dp__nav {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    background: none;
    border: none;
    border-radius: 8px;
    cursor: pointer;
}
.evl-dp__nav:hover { background: #FAFAFA; }
.evl-dp__nav span { display: block; width: 20px; height: 20px; }
.evl-dp__nav svg { display: block; width: 100%; height: 100%; }
/* 7×40px grid; dow header 14/20 medium; cells r20. */
.evl-dp__grid {
    display: grid;
    grid-template-columns: repeat(7, 40px);
    row-gap: 4px;
}
.evl-dp__dow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    color: #414651;
}
.evl-dp__cell {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: none;
    border: none;
    border-radius: 20px;
    cursor: pointer;
    font-family: inherit;
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
    color: #414651;
}
.evl-dp__cell:hover { background: #F5F5F5; }
.evl-dp__cell--outside { color: #717680; }
/* Range endpoints — Brand/600 round; in-range — Brand/50 square. */
.evl-dp__cell--selected {
    background: #465DA6;
    color: #FFFFFF;
    font-weight: 500;
}
.evl-dp__cell--selected:hover { background: #465DA6; }
.evl-dp__cell--range {
    background: #EBF1FF;
    border-radius: 0;
    color: #5E69A8;
    font-weight: 500;
}
/* Footer — top divider, from/to values + Cancel/Apply. */
.evl-dp__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px;
    border-top: 1px solid #E9EAEB;
}
.evl-dp__inputs {
    display: flex;
    align-items: center;
    gap: 12px;
}
.evl-dp__input {
    padding: 10px 14px;
    border: 1px solid #D5D7DA;
    border-radius: 8px;
    box-shadow: 0px 1px 2px 0px rgba(10, 13, 18, 0.05);
    font-size: 16px;
    line-height: 24px;
    color: #181D27;
    min-width: 136px;
}
.evl-dp__dash { color: #717680; }
.evl-dp__actions { display: flex; align-items: center; gap: 12px; }
/* Small screens — stack presets/calendars, single column. */
@media (max-width: 768px) {
    .evl-dp { flex-direction: column; }
    .evl-dp__presets {
        flex-direction: row;
        flex-wrap: wrap;
        border-right: none;
        border-bottom: 1px solid #E9EAEB;
    }
    .evl-dp__preset { width: auto; }
    .evl-dp__calendars { flex-direction: column; }
    .evl-dp__month + .evl-dp__month { border-left: none; border-top: 1px solid #E9EAEB; }
    .evl-dp__footer { flex-wrap: wrap; }
    .evl-dp__input { min-width: 0; }
}

/* ---------- Mobile filter sheet. ---------- */
.evl-sheet-overlay {
    position: fixed;
    inset: 0;
    z-index: 1040;
    display: flex;
    align-items: flex-end;
    background: rgba(16, 24, 40, 0.7);
    backdrop-filter: blur(8px);
}
.evl-sheet {
    width: 100%;
    max-height: 85vh;
    overflow-y: auto;
    padding: 20px 16px 32px;
    background: #FFFFFF;
    border-radius: 16px 16px 0 0;
}
.evl-sheet__apply {
    width: 100%;
    margin-top: 24px;
}

/* Events Listing — Past Event Replays.
 *
 * Desktop Figma 6jVr7YbefLWCQjcGuvD59L node 1521:13694, mobile
 * Qkw1rAqYvxShVppu34QlEv node 1410:10855. 768px gate hides one variant.
 */

.evl-replays--desktop { display: flex; }
.evl-replays--mobile  { display: none; }
@media (max-width: 768px) {
    .evl-replays--desktop { display: none; }
    .evl-replays--mobile  { display: flex; }
}

/* Section — Blue/9 #1C2542. */
.evl-replays {
    flex-direction: column;
    align-items: flex-start;
    background: #1C2542;
    font-family: 'Inter', sans-serif;
}
.evl-replays--desktop { gap: 32px; padding: 72px 112px; }
.evl-replays--mobile  { gap: 24px; padding: 32px 16px; }
.evl-replays__header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.evl-replays--desktop .evl-replays__header { gap: 16px; }
.evl-replays--mobile .evl-replays__header { gap: 12px; width: 100%; }
/* Title — desktop 36/44 semibold white -0.72px; mobile 20/28 bold. */
.evl-replays__title { margin: 0; color: #FFFFFF; }
.evl-replays--desktop .evl-replays__title {
    font-size: 36px;
    line-height: 44px;
    font-weight: 600;
    letter-spacing: -0.72px;
}
.evl-replays--mobile .evl-replays__title {
    font-size: 20px;
    line-height: 28px;
    font-weight: 700;
}
/* Sub — desktop 20/30 Blue/4 #909ECA; mobile 14/20 Blue/3 #B5BEDB. */
.evl-replays__sub { margin: 0; font-weight: 400; }
.evl-replays--desktop .evl-replays__sub { font-size: 20px; line-height: 30px; color: #909ECA; }
.evl-replays--mobile .evl-replays__sub { font-size: 14px; line-height: 20px; color: #B5BEDB; }
/* Desktop grid — 2-up, 32px gaps. */
.evl-replays__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px;
    width: 100%;
}
/* Card — 16:9 r12 cover + centered 68×48 play + title. */
.evl-replays__card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-decoration: none;
}
.evl-replays--desktop .evl-replays__card { gap: 12px; }
.evl-replays--mobile .evl-replays__card { gap: 8px; }
.evl-replays__media {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 1280 / 720;
    border-radius: 12px;
    overflow: hidden;
}
.evl-replays__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.evl-replays__img--placeholder { background: #2A3864; }
.evl-replays__play {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 68px;
    height: 48px;
}
.evl-replays__card-title { color: #FFFFFF; font-weight: 600; }
.evl-replays--desktop .evl-replays__card-title { font-size: 20px; line-height: 28px; }
.evl-replays--mobile .evl-replays__card-title { font-size: 14px; line-height: 22px; }
/* Mobile carousel — one card per view, scroll-snap, 20px gap. */
.evl-replays__carousel {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
}
.evl-replays__track {
    display: flex;
    gap: 20px;
    width: 100%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}
.evl-replays__track::-webkit-scrollbar { display: none; }
.evl-replays__track .evl-replays__card {
    width: 100%;
    flex-shrink: 0;
    scroll-snap-align: start;
}
/* Dots — 5px, 7px gaps; active white, inactive dim. */
.evl-replays__dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 100%;
    padding: 8px 0;
}
.evl-replays__dot {
    width: 5px;
    height: 5px;
    padding: 0;
    background: rgba(255, 255, 255, 0.35);
    border: none;
    border-radius: 50%;
    cursor: pointer;
}
.evl-replays__dot--active { background: #FFFFFF; }

/* Events Listing — What Attendees Say (testimonials).
 *
 * Desktop Figma 6jVr7YbefLWCQjcGuvD59L node 1521:13715, mobile
 * Qkw1rAqYvxShVppu34QlEv node 1410:10872. 768px gate hides one variant.
 */

.evl-quotes--desktop { display: flex; }
.evl-quotes--mobile  { display: none; }
@media (max-width: 768px) {
    .evl-quotes--desktop { display: none; }
    .evl-quotes--mobile  { display: flex; }
}

.evl-quotes {
    flex-direction: column;
    align-items: flex-start;
    background: #FFFFFF;
    font-family: 'Inter', sans-serif;
}
.evl-quotes--desktop { gap: 32px; padding: 72px 112px; }
.evl-quotes--mobile  { gap: 16px; padding: 24px 16px; }
/* Title — desktop 36/44 semibold -0.72px; mobile 20/28 bold. */
.evl-quotes__title { margin: 0; width: 100%; color: rgba(0, 0, 0, 0.88); }
.evl-quotes--desktop .evl-quotes__title {
    font-size: 36px;
    line-height: 44px;
    font-weight: 600;
    letter-spacing: -0.72px;
}
.evl-quotes--mobile .evl-quotes__title {
    font-size: 20px;
    line-height: 28px;
    font-weight: 700;
}
/* One slide at a time. */
.evl-quotes__slide { display: none; width: 100%; }
.evl-quotes__slide--active { display: flex; }
.evl-quotes--desktop .evl-quotes__slide--active {
    align-items: flex-start;
    gap: 32px;
    padding-bottom: 4px;
}
.evl-quotes--mobile .evl-quotes__slide--active {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
}
/* Desktop 176×176 r12 photo. */
.evl-quotes__photo {
    width: 176px;
    height: 176px;
    border-radius: 12px;
    object-fit: cover;
    flex-shrink: 0;
}
.evl-quotes__photo--placeholder { background: #EBF1FF; }
.evl-quotes__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    flex: 1;
    min-width: 0;
}
/* Quote mark — Brand/50 tile + Brand/600 glyph; 67px desktop / 40px mobile. */
.evl-quotes__mark { display: block; }
.evl-quotes--desktop .evl-quotes__mark { width: 67px; height: 67px; }
.evl-quotes--mobile .evl-quotes__mark { width: 40px; height: 40px; }
.evl-quotes__mark svg { display: block; width: 100%; height: 100%; }
/* Quote — desktop Display sm 30/38; mobile 14/22; clamped w/ Read more. */
.evl-quotes__text {
    margin: 0;
    width: 100%;
    color: #000000;
    font-weight: 400;
}
.evl-quotes--desktop .evl-quotes__text {
    font-size: 30px;
    line-height: 38px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.evl-quotes--mobile .evl-quotes__text { font-size: 14px; line-height: 22px; }
.evl-quotes__text--expanded {
    display: block;
    -webkit-line-clamp: unset;
}
/* Read more — 16/24 semibold Brand/700 text button. */
.evl-quotes__more {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
    color: #5E69A8;
}
.evl-quotes__divider {
    width: 100%;
    height: 0;
    border-top: 1px solid #D9D9D9;
}
.evl-quotes__footer {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    width: 100%;
}
.evl-quotes__person {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.evl-quotes--desktop .evl-quotes__person { gap: 12px; }
.evl-quotes--mobile .evl-quotes__person { gap: 2px; }
/* Name — desktop 24/32 semibold; mobile 14/22 semibold. */
.evl-quotes__name { margin: 0; color: #000000; font-weight: 600; }
.evl-quotes--desktop .evl-quotes__name { font-size: 24px; line-height: 32px; }
.evl-quotes--mobile .evl-quotes__name { font-size: 14px; line-height: 22px; }
.evl-quotes__role-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
/* Role/org — desktop 20/30; mobile 12/20. Org at 45% black. */
.evl-quotes__role { color: #000000; font-weight: 400; }
.evl-quotes__org { color: rgba(0, 0, 0, 0.45); font-weight: 400; }
.evl-quotes--desktop .evl-quotes__role,
.evl-quotes--desktop .evl-quotes__org { font-size: 20px; line-height: 30px; }
.evl-quotes--mobile .evl-quotes__role,
.evl-quotes--mobile .evl-quotes__org { font-size: 12px; line-height: 20px; }
.evl-quotes__dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.45);
}
/* Mobile speaker row — 32px round avatar, 12px gap. */
.evl-quotes__person-row {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
}
.evl-quotes__avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.evl-quotes__avatar--placeholder { display: block; background: #EBF1FF; }
/* Nav — desktop p12 r8 #D5D7DA buttons; mobile 38×38 r5.4 #D9D9D9, centered. */
.evl-quotes__nav {
    display: flex;
    align-items: center;
    gap: 16px;
}
.evl-quotes__nav--centered {
    width: 100%;
    justify-content: center;
}
.evl-quotes__nav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FFFFFF;
    cursor: pointer;
}
.evl-quotes--desktop .evl-quotes__nav-btn {
    padding: 12px;
    border: 1px solid #D5D7DA;
    border-radius: 8px;
    box-shadow: 0px 1px 2px 0px rgba(10, 13, 18, 0.05);
}
.evl-quotes--mobile .evl-quotes__nav-btn {
    width: 38px;
    height: 38px;
    padding: 4px 10px;
    border: 0.9px solid #D9D9D9;
    border-radius: 5.4px;
}
.evl-quotes__nav-btn:hover { background: #F5F5F5; }
.evl-quotes__nav-btn svg { display: block; width: 20px; height: 20px; }

/* Events Listing — Explore Related Multimedia.
 *
 * Desktop Figma 6jVr7YbefLWCQjcGuvD59L node 1521:13735, mobile
 * Qkw1rAqYvxShVppu34QlEv node 1410:10890. 768px gate hides one variant.
 */

.evl-media--desktop { display: flex; }
.evl-media--mobile  { display: none; }
@media (max-width: 768px) {
    .evl-media--desktop { display: none; }
    .evl-media--mobile  { display: flex; }
}

.evl-media {
    flex-direction: column;
    align-items: flex-start;
    background: #FFFFFF;
    font-family: 'Inter', sans-serif;
}
.evl-media--desktop { gap: 20px; padding: 48px 112px 72px; }
.evl-media--mobile  { gap: 16px; padding: 24px 16px; }
/* Title — desktop 36/44 semibold -0.72px; mobile 20/28 bold. */
.evl-media__title { margin: 0; color: rgba(0, 0, 0, 0.88); }
.evl-media--desktop .evl-media__title {
    font-size: 36px;
    line-height: 44px;
    font-weight: 600;
    letter-spacing: -0.72px;
}
.evl-media--mobile .evl-media__title {
    font-size: 20px;
    line-height: 28px;
    font-weight: 700;
}
/* Desktop grid — 3-up, 32px gaps. */
.evl-media__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
    width: 100%;
}
/* Mobile rail — 240px cards, 12px gaps, horizontal scroll. */
.evl-media__rail {
    display: flex;
    gap: 12px;
    width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
}
.evl-media__rail::-webkit-scrollbar { display: none; }
.evl-media__rail .evl-media__card { width: 240px; flex-shrink: 0; }
/* Card — 12px gap stack. */
.evl-media__card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}
/* Cover — 282px desktop / 160px mobile, r12. */
.evl-media__cover {
    position: relative;
    display: block;
    width: 100%;
    height: 282px;
    border-radius: 12px;
    overflow: hidden;
}
.evl-media--mobile .evl-media__cover { height: 160px; }
.evl-media__cover img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.evl-media__cover-ph {
    display: block;
    width: 100%;
    height: 100%;
    background: #EBF1FF;
}
/* Category badge — #EAF8F6 pill, 12/4 pad, 14/20 medium Secondary/700. */
.evl-media__badge {
    position: absolute;
    left: 8px;
    top: 8px;
    padding: 4px 12px;
    background: #EAF8F6;
    border-radius: 16px;
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    color: #269387;
}
/* Media-kind chip — Gray/10 #262626 r4, 16px icon, bottom-right 8/8. */
.evl-media__kind {
    position: absolute;
    right: 8px;
    bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 3px 4px;
    background: #262626;
    border-radius: 4px;
}
.evl-media__kind svg { display: block; width: 16px; height: 16px; }
.evl-media__body {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
/* Card title — 16/24 semibold #1C1C1C (14/22 on mobile). */
.evl-media__card-title {
    margin: 0;
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
}
.evl-media--mobile .evl-media__card-title { font-size: 14px; line-height: 22px; }
.evl-media__card-title a { color: #1C1C1C; text-decoration: none; }
.evl-media__card-title a:hover { color: #465DA6; }
/* Meta — 14/22 author (black) · 2px dot · org at 45% (12/20 on mobile). */
.evl-media__meta {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: 14px;
    line-height: 22px;
    font-weight: 400;
    white-space: nowrap;
    overflow: hidden;
}
.evl-media--mobile .evl-media__meta { font-size: 12px; line-height: 20px; }
.evl-media__author { color: #000000; }
.evl-media__org {
    color: rgba(0, 0, 0, 0.45);
    overflow: hidden;
    text-overflow: ellipsis;
}
.evl-media__meta-dot {
    width: 2px;
    height: 2px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.45);
    flex-shrink: 0;
}

/* Events Listing — FAQ.
 *
 * Desktop Figma 6jVr7YbefLWCQjcGuvD59L node 1521:13780, mobile
 * Qkw1rAqYvxShVppu34QlEv node 1410:10926. 768px gate hides one variant.
 */

.evl-faq--desktop { display: flex; }
.evl-faq--mobile  { display: none; }
@media (max-width: 768px) {
    .evl-faq--desktop { display: none; }
    .evl-faq--mobile  { display: flex; }
}

.evl-faq {
    flex-direction: column;
    align-items: flex-start;
    font-family: 'Inter', sans-serif;
}
/* Desktop — #F9F9F9, 72px v-pad / 288px gutters (864 column), 44px gap. */
.evl-faq--desktop {
    gap: 44px;
    padding: 72px 288px;
    background: #F9F9F9;
}
/* Mobile — white, 24px v-pad / 16px gutters, 24px gap. */
.evl-faq--mobile {
    gap: 24px;
    padding: 24px 16px;
    background: #FFFFFF;
}
.evl-faq__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}
.evl-faq--desktop .evl-faq__header { gap: 12px; }
.evl-faq--mobile .evl-faq__header { gap: 8px; }
/* Title — desktop 36/44 semibold -0.72px; mobile 20/28 bold. */
.evl-faq__title { margin: 0; color: rgba(0, 0, 0, 0.88); }
.evl-faq--desktop .evl-faq__title {
    font-size: 36px;
    line-height: 44px;
    font-weight: 600;
    letter-spacing: -0.72px;
}
.evl-faq--mobile .evl-faq__title {
    font-size: 20px;
    line-height: 28px;
    font-weight: 700;
}
/* Sub — desktop 20/30 Gray/7; mobile 14/20. */
.evl-faq__sub { margin: 0; font-weight: 400; color: #8C8C8C; text-align: center; }
.evl-faq--desktop .evl-faq__sub { font-size: 20px; line-height: 30px; }
.evl-faq--mobile .evl-faq__sub { font-size: 14px; line-height: 20px; }
.evl-faq__list {
    display: flex;
    flex-direction: column;
    width: 100%;
}
.evl-faq--desktop .evl-faq__list { gap: 24px; }
.evl-faq--mobile .evl-faq__list { gap: 16px; }
/* Item — 1px Gray/6 bottom border. */
.evl-faq__item {
    display: flex;
    flex-direction: column;
    width: 100%;
    border-bottom: 1px solid #BFBFBF;
}
.evl-faq--desktop .evl-faq__item { gap: 16px; padding-bottom: 16px; }
.evl-faq--mobile .evl-faq__item { gap: 12px; padding-bottom: 12px; }
.evl-faq__question {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
}
/* Question — desktop 20/28 semibold; mobile 14/22 semibold. */
.evl-faq__question-text { color: #000000; font-weight: 600; }
.evl-faq--desktop .evl-faq__question-text { font-size: 20px; line-height: 28px; }
.evl-faq--mobile .evl-faq__question-text { font-size: 14px; line-height: 22px; }
.evl-faq__icon { display: block; width: 20px; height: 20px; flex-shrink: 0; }
.evl-faq__icon svg { display: block; width: 100%; height: 100%; }
.evl-faq__icon--minus { display: none; }
.evl-faq__item--open .evl-faq__icon--plus { display: none; }
.evl-faq__item--open .evl-faq__icon--minus { display: block; }
.evl-faq__answer { display: none; width: 100%; }
.evl-faq__item--open .evl-faq__answer { display: block; }
/* Answer — desktop 20/30 black; mobile 14/22. */
.evl-faq__answer-text { margin: 0; color: #000000; font-weight: 400; white-space: pre-line; }
.evl-faq--desktop .evl-faq__answer-text { font-size: 20px; line-height: 30px; }
.evl-faq--mobile .evl-faq__answer-text { font-size: 14px; line-height: 22px; }

/* Events Listing — CTA banner.
 *
 * Desktop Figma 6jVr7YbefLWCQjcGuvD59L instance 1683:26729, mobile
 * Qkw1rAqYvxShVppu34QlEv instance 1410:10942. 768px gate hides one variant.
 */

.evl-cta--desktop { display: flex; }
.evl-cta--mobile  { display: none; }
@media (max-width: 768px) {
    .evl-cta--desktop { display: none; }
    .evl-cta--mobile  { display: flex; }
}

/* Banner — Blue/9 with 5% logo watermark top-right. */
.evl-cta {
    position: relative;
    flex-direction: column;
    justify-content: flex-end;
    background: #1C2542;
    overflow: hidden;
    font-family: 'Inter', sans-serif;
}
.evl-cta--desktop { padding: 100px 80px; }
.evl-cta--mobile  { padding: 40px 16px; }
.evl-cta__inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}
.evl-cta--desktop .evl-cta__inner { gap: 24px; }
.evl-cta--mobile .evl-cta__inner { gap: 16px; }
/* Title — desktop 48/1.2 bold -1.44px; mobile 24/1.2 bold. */
.evl-cta__title {
    margin: 0;
    color: #FFFFFF;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
}
.evl-cta--desktop .evl-cta__title { font-size: 48px; letter-spacing: -1.44px; }
.evl-cta--mobile .evl-cta__title { font-size: 24px; letter-spacing: -0.72px; }
/* Sub — desktop 18/1.5 Gray/6 -0.54px; mobile 14/1.5. */
.evl-cta__sub {
    margin: 0;
    color: #BFBFBF;
    font-weight: 400;
    line-height: 1.5;
    text-align: center;
}
.evl-cta--desktop .evl-cta__sub { font-size: 18px; letter-spacing: -0.54px; }
.evl-cta--mobile .evl-cta__sub { font-size: 14px; letter-spacing: -0.42px; }
/* Button — Brand/600, 20/12 pad, r8, 16/24 semibold white. */
.evl-cta__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 20px;
    background: #465DA6;
    border: 1px solid #465DA6;
    border-radius: 8px;
    box-shadow: 0px 1px 2px 0px rgba(10, 13, 18, 0.05);
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
    color: #FFFFFF;
    text-decoration: none;
}
.evl-cta__btn:hover { background: #3C5192; border-color: #3C5192; color: #FFFFFF; }
/* Watermark — 293×489 at 5% opacity, right -50 / top 0 (desktop only). */
.evl-cta__watermark {
    position: absolute;
    right: -50px;
    top: 0;
    width: 293px;
    height: 489px;
    object-fit: cover;
    opacity: 0.05;
    pointer-events: none;
}