/* Webinars and master classes (templates/events/*) and the home calendar
   (events/calendar.html). Green hero, white catalog, green steps; cards keep
   the book/course card language: white surface, soft border, orange accents. */

.ev { overflow-x: clip; }
.ev .jn-slide--white .jn-section-heading h2 { color: var(--jn-green); }
.ev .jn-section-heading { margin-bottom: 1.75rem; }

/* Hero */
.ev-hero { padding-block: clamp(3.5rem, 7vw, 5rem); }
.ev-hero h1 { max-width: 40rem; font-size: clamp(1.75rem, 3.4vw, 2.5rem); line-height: 1.15; letter-spacing: -.02em; color: #fff; }
.ev-hero h1 span { color: var(--jn-orange); }
.ev-hero__lead { max-width: 40rem; margin: 1rem 0 2rem; font-size: var(--jn-text-lead); line-height: 1.75; color: rgb(255 255 255 / .78); }
.ev-switch { display: inline-flex; gap: .25rem; margin-bottom: 1.75rem; padding: .25rem; border: 1px solid rgb(255 255 255 / .18); border-radius: 999px; }
.ev-switch a { padding: .5rem 1.1rem; border-radius: 999px; color: rgb(255 255 255 / .78); font-size: .8125rem; font-weight: 700; text-decoration: none; transition: background-color .2s ease, color .2s ease; }
.ev-switch a:hover { color: #fff; }
.ev-switch a[aria-current="page"] { background: #fff; color: var(--jn-green); }
.ev-facts { display: flex; flex-wrap: wrap; gap: .75rem 2.5rem; margin: 0; padding: 1.25rem 0 0; border-top: 1px solid rgb(255 255 255 / .16); list-style: none; }
.ev-facts li { display: grid; gap: .15rem; max-width: 15rem; font-size: .8125rem; line-height: 1.5; color: rgb(255 255 255 / .7); }
.ev-facts strong { font-size: 1.0625rem; color: #fff; }

/* Catalog */
.ev-catalog { display: grid; gap: 3.5rem; }
.ev-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr)); gap: 1.25rem; }
.ev-card { display: grid; grid-template-rows: 1fr auto; gap: 1.25rem; padding: 1.5rem; border: 1px solid var(--jn-border); border-radius: var(--jn-radius); background: #fff; scroll-margin-top: calc(var(--jn-header-height) + 1.5rem); transition: border-color .2s ease, box-shadow .3s ease; }
.ev-card:hover, .ev-card:target { border-color: var(--jn-orange); box-shadow: 0 18px 40px rgb(1 60 53 / .1); }
.ev-card--dated { grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; }
.ev-card--dated .ev-card__buy { grid-column: 1 / -1; }
.ev-card--cover { grid-template-rows: auto 1fr auto; }
.ev-card--cover.ev-card--dated { grid-template-rows: auto auto auto; }
.ev-card__cover { grid-column: 1 / -1; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--jn-radius-sm); background: var(--jn-cream); }
.ev-card__speaker { margin: 0; font-size: .8125rem; font-weight: 700; color: var(--jn-muted); }
.ev-card__date { margin: 0; }
.ev-card__date time { display: grid; place-items: center; min-width: 4.25rem; padding: .6rem .5rem; border-radius: var(--jn-radius-sm); background: var(--jn-green); color: rgb(255 255 255 / .8); font-size: .6875rem; font-weight: 700; letter-spacing: .04em; text-transform: lowercase; }
.ev-card__date strong { font-size: 1.625rem; line-height: 1.1; color: #fff; }
.ev-card__body { display: grid; align-content: start; gap: .6rem; }
.ev-card__meta { display: flex; flex-wrap: wrap; gap: .35rem .9rem; margin: 0; font-size: .6875rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--jn-orange-dark); }
.ev-card h3 { margin: 0; font-size: var(--jn-h3); line-height: 1.3; color: var(--jn-green); }
.ev-card__text { margin: 0; font-size: .9375rem; line-height: 1.65; color: #444; }
.ev-card__more summary { cursor: pointer; color: var(--jn-green); font-size: .8125rem; font-weight: 700; }
.ev-card__more summary:hover { color: var(--jn-orange-dark); }
.ev-card__more div { font-size: .875rem; line-height: 1.65; color: #444; }
.ev-card__buy { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1rem; padding-top: 1.1rem; border-top: 1px solid var(--jn-border); }
.ev-card__price { display: grid; gap: .1rem; margin: 0; }
.ev-card__price strong { font-size: 1.5rem; line-height: 1.1; color: var(--jn-green); }
.ev-card__price span { font-size: .75rem; color: var(--jn-muted); }
.ev-empty { display: grid; justify-items: start; gap: 1rem; max-width: 36rem; padding: 2rem; border-radius: var(--jn-radius); background: var(--jn-cream); }
.ev-empty h2 { color: var(--jn-green); }
.ev-more { margin: 0; font-size: .9375rem; color: var(--jn-muted); }
.ev-more a { color: var(--jn-orange-dark); font-weight: 700; text-decoration: none; }
.ev-more a:hover { text-decoration: underline; }

.ev-faq { max-width: 44rem; margin: 2.25rem 0 0; font-size: .9375rem; line-height: 1.65; color: rgb(255 255 255 / .78); }
.ev-faq a { color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: .2em; }
.ev-faq a:hover { color: var(--jn-orange); }

/* Home calendar: month groups of dated rows; the date tile is the first thing the
   eye catches, the nearest row is orange and counts down. calendar.js adds the type
   filter and folds long schedules; without JS every row is listed. */
.jn-calendar [hidden] { display: none; }
.jn-calendar__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: .75rem 2rem; margin-bottom: 2rem; }
.jn-calendar .jn-section-heading { margin: 0; }
.jn-calendar .jn-section-heading h2 { color: var(--jn-green); }
.jn-calendar__lead { grid-column: 1; max-width: 36rem; margin: 0; color: var(--jn-muted); font-size: .9375rem; line-height: 1.6; }
.jn-calendar__lead a { color: var(--jn-orange-dark); font-weight: 700; text-decoration: none; }
.jn-calendar__lead a:hover { text-decoration: underline; }

/* Type filter: a segmented control; the pressed button turns green. */
.jn-calendar__filter { grid-column: 2; grid-row: 1 / span 2; display: flex; gap: .15rem; padding: .25rem; border: 1px solid var(--jn-border); border-radius: 999px; background: var(--jn-cream); }
.jn-calendar__filter button { display: inline-flex; align-items: center; gap: .4rem; padding: .55rem 1rem; border: 0; border-radius: 999px; background: none; color: var(--jn-green); font: inherit; font-size: .8125rem; font-weight: 700; white-space: nowrap; cursor: pointer; transition: background-color .25s ease, color .25s ease; }
.jn-calendar__filter button small { min-width: 1.25rem; padding: .05rem .35rem; border-radius: 999px; background: rgb(1 60 53 / .08); font-size: .6875rem; font-weight: 800; text-align: center; transition: background-color .25s ease; }
@media (hover: hover) { .jn-calendar__filter button:hover { color: var(--jn-orange-dark); } }
.jn-calendar__filter button[aria-pressed="true"] { background: var(--jn-green); color: #fff; }
.jn-calendar__filter button[aria-pressed="true"] small { background: rgb(255 255 255 / .18); }
.jn-calendar__filter button:focus-visible { outline: 2px solid var(--jn-orange); outline-offset: 1px; }

.jn-calendar__month + .jn-calendar__month { margin-top: 1.75rem; }
.jn-calendar__month-title { display: flex; align-items: center; gap: .6rem; margin: 0 0 .9rem; color: var(--jn-muted); font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.jn-calendar__month-title span { color: var(--jn-green); font-weight: 800; }
.jn-calendar__month-title::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--jn-border), transparent); }

/* A dotted thread through the tiles ties the rows of a month together. */
.jn-calendar__list { position: relative; display: grid; gap: .75rem; margin: 0; padding: 0; list-style: none; --tile: 6.25rem; --pad: .75rem; }
.jn-calendar__list::before { content: ""; position: absolute; top: 1.5rem; bottom: 1.5rem; left: calc(var(--pad) + var(--tile) / 2 - 1px); border-left: 2px dotted rgb(1 60 53 / .22); }
.jn-calendar__row { position: relative; display: grid; grid-template-columns: var(--tile) minmax(0, 1fr) auto 2.75rem; align-items: center; gap: 1.5rem; padding: var(--pad) 1.25rem var(--pad) var(--pad); border: 1px solid var(--jn-border); border-radius: var(--jn-radius); background: #fff; transition: border-color .25s ease; }

.jn-calendar__date { display: grid; justify-items: center; align-content: center; min-height: var(--tile); padding: .6rem .4rem; border-radius: var(--jn-radius-sm); background: linear-gradient(155deg, var(--jn-green-soft), var(--jn-green) 70%); color: #fff; text-align: center; line-height: 1.15; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .08); transition: scale .25s ease; }
.jn-calendar__date strong { font-size: 1.875rem; font-weight: 800; line-height: 1; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.jn-calendar__weekday { margin-top: .4rem; font-size: .75rem; color: rgb(255 255 255 / .75); font-weight: 600; text-transform: lowercase; }

.jn-calendar__body { display: grid; gap: .45rem; min-width: 0; }
.jn-calendar__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem; margin: 0; }
.jn-calendar__kind { color: var(--jn-orange-dark); font-size: .6875rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.jn-calendar__format { display: inline-flex; align-items: center; gap: .35rem; color: var(--jn-muted); font-size: .8125rem; font-weight: 600; }
.jn-calendar__format svg { flex: none; width: 1rem; height: 1rem; fill: none; stroke: var(--jn-orange); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.jn-calendar__format--offline svg { stroke: var(--jn-green); }
.jn-calendar__countdown { color: var(--jn-muted); font-size: .8125rem; }
.jn-calendar__countdown::before { content: "·"; margin-right: 1rem; margin-left: -.5rem; color: var(--jn-border); font-weight: 800; }
.jn-calendar__title { color: var(--jn-green); font-size: 1.0625rem; font-weight: 700; line-height: 1.35; text-decoration: none; }
/* The whole row opens the event page. */
.jn-calendar__title::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.jn-calendar__title:focus-visible { outline: none; }
.jn-calendar__row:has(.jn-calendar__title:focus-visible) { outline: 2px solid var(--jn-orange); outline-offset: 2px; }
.jn-calendar__price { white-space: nowrap; text-align: right; }
.jn-calendar__price strong { display: block; color: var(--jn-green); font-size: 1.1875rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.jn-calendar__price span { color: var(--jn-muted); font-size: .75rem; }
.jn-calendar__go { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--jn-cream); color: var(--jn-green); transition: background-color .25s ease, color .25s ease, scale .25s ease; }
.jn-calendar__go svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* The nearest event: orange tile, tinted card and a live countdown badge. */
.jn-calendar__row--next { border-color: rgb(255 111 63 / .4); background: linear-gradient(100deg, rgb(255 111 63 / .07), #fff 45%); box-shadow: 0 .75rem 2rem rgb(255 111 63 / .1); }
.jn-calendar__row--next .jn-calendar__date { background: linear-gradient(155deg, #ff8a5f, var(--jn-orange-dark) 75%); box-shadow: 0 .6rem 1.4rem rgb(232 90 42 / .3); }
.jn-calendar__row--next .jn-calendar__weekday { color: rgb(255 255 255 / .88); }
.jn-calendar__row--next .jn-calendar__title { font-size: 1.1875rem; }
.jn-calendar__badge { display: inline-flex; align-items: center; gap: .45rem; padding: .25rem .65rem .25rem .55rem; border-radius: 999px; background: var(--jn-green); color: #fff; font-size: .6875rem; font-weight: 800; letter-spacing: .04em; }
.jn-calendar__badge::before { content: ""; width: .45rem; height: .45rem; border-radius: 50%; background: var(--jn-orange); }

/* Hover: only colour and a slight enlargement of the tile and the arrow. */
@media (hover: hover) {
  .jn-calendar__row:hover { border-color: rgb(255 111 63 / .45); }
  .jn-calendar__row:hover .jn-calendar__date { scale: 1.05; }
  .jn-calendar__row:hover .jn-calendar__go { background: var(--jn-orange); color: #fff; scale: 1.1; }
}

.jn-calendar__more { display: flex; margin: 1.5rem auto 0; }

@keyframes jn-cal-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
/* Rows rise into view like the other home blocks; rows shown by the filter fade in. */
.jn-calendar__row.is-entering { animation: jn-cal-in .3s ease both; }
@supports (animation-timeline: view()) {
  .jn-calendar__row:not(.is-entering) { animation: jn-cal-in linear both; animation-timeline: view(); animation-range: entry 0% entry 55%; }
}

@media (max-width: 52rem) {
  .jn-calendar__head { grid-template-columns: minmax(0, 1fr); }
  .jn-calendar__filter { grid-column: 1; grid-row: auto; justify-self: start; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
}

@media (max-width: 40rem) {
  .jn-calendar__head { margin-bottom: 1.5rem; }
  .jn-calendar__filter { justify-self: stretch; }
  .jn-calendar__filter button { flex: auto; justify-content: center; padding: .5rem .6rem; font-size: .75rem; }
  .jn-calendar__filter button small { display: none; }
  .jn-calendar__list { --tile: 4.75rem; --pad: .65rem; }
  .jn-calendar__row { grid-template-columns: var(--tile) minmax(0, 1fr); gap: .5rem .9rem; }
  .jn-calendar__date { grid-row: span 2; align-self: stretch; }
  .jn-calendar__date strong { font-size: 1.375rem; }
  .jn-calendar__weekday { font-size: .6875rem; }
  .jn-calendar__meta { gap: .35rem .75rem; }
  .jn-calendar__countdown { display: none; }
  .jn-calendar__title, .jn-calendar__row--next .jn-calendar__title { font-size: 1rem; }
  .jn-calendar__price { grid-column: 2; display: flex; align-items: baseline; gap: .5rem; text-align: left; }
  .jn-calendar__price strong { display: inline; font-size: 1rem; }
  .jn-calendar__go { display: none; }
}

@media (max-width: 40rem) {
  .ev-card--dated { grid-template-columns: minmax(0, 1fr); }
  .ev-card__date time { display: inline-flex; gap: .4rem; align-items: baseline; padding: .35rem .75rem; }
  .ev-card__date strong { font-size: 1rem; }
}

/* Recordings from the video library inside the card's «Детальніше». */
.ev-card__list-title { margin: .75rem 0 .35rem; color: var(--jn-green); font-size: .8125rem; font-weight: 800; }
.ev-card__videos { display: grid; gap: .3rem; margin: 0; padding-left: 1.25rem; }
.ev-card__videos li { color: #444; font-size: .875rem; }
.ev-card__videos li::marker { color: var(--jn-orange); font-weight: 700; }
.ev-card__videos small { margin-left: .5rem; color: var(--jn-muted); font-variant-numeric: tabular-nums; }

/* Card links to an event page (events/card.html when the event has a description). */
.ev-card h3 a { color: inherit; text-decoration: none; }
.ev-card__cover-link { grid-column: 1 / -1; display: block; overflow: hidden; border-radius: var(--jn-radius-sm); }
.ev-card__cover-link .ev-card__cover { display: block; transition: scale .4s ease; }
.ev-card__cover-link:hover .ev-card__cover { scale: 1.03; }
.ev-card h3 a:hover { color: var(--jn-orange-dark); }
.ev-card__link { justify-self: start; color: var(--jn-orange-dark); font-size: .8125rem; font-weight: 700; text-decoration: none; }
.ev-card__link:hover { text-decoration: underline; }

/* Event page (events/detail.html): green hero with cover and price, white description with
   a sticky details card, green audience/outcomes, white related events, green steps. */
.evp .jn-section-heading { margin-bottom: 1.5rem; }
.evp-hero { padding-block: clamp(3rem, 6vw, 4.5rem); }
.evp-hero__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.evp-back { display: inline-block; margin-bottom: 1.5rem; color: rgb(255 255 255 / .75); font-size: .875rem; font-weight: 600; text-decoration: none; }
.evp-back:hover { color: var(--jn-orange); }
.evp-tags { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin: 0 0 1rem; color: rgb(255 255 255 / .7); font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.evp-tag { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .7rem .3rem .55rem; border-radius: 999px; background: rgb(255 111 63 / .16); color: #fff; font-weight: 800; }
.evp-tag svg { width: 1rem; height: 1rem; fill: none; stroke: var(--jn-orange); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.evp-hero h1 { max-width: 38rem; font-size: clamp(1.75rem, 3.4vw, 2.5rem); line-height: 1.15; letter-spacing: -.02em; color: #fff; }
.evp-lead { max-width: 38rem; margin: 1rem 0 1.75rem; font-size: var(--jn-text-lead); line-height: 1.75; color: rgb(255 255 255 / .78); }
.evp-facts { margin-bottom: 1.75rem; }
.evp-facts li { max-width: 14rem; }
.evp-buy { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; }
.evp-price { display: grid; gap: .15rem; margin: 0; }
.evp-price strong { font-size: 2rem; font-weight: 800; line-height: 1.05; color: #fff; font-variant-numeric: tabular-nums; }
.evp-price span { font-size: .8125rem; color: rgb(255 255 255 / .65); }
.evp-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.evp-actions form, .evp-card__buy form, .evp-bar form { margin: 0; }
.evp-button--ghost { border-color: rgb(255 255 255 / .35); background: transparent; color: #fff; }
.evp-button--ghost:hover { border-color: var(--jn-orange); color: #fff; }

.evp-cover { position: relative; margin: 0; overflow: hidden; border-radius: var(--jn-radius); background: var(--jn-green-soft); box-shadow: 0 30px 70px rgb(0 0 0 / .3); aspect-ratio: 16 / 9; }
.evp-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.evp-cover--plain { display: grid; place-content: center; justify-items: center; gap: .75rem; background: radial-gradient(circle at 30% 20%, rgb(255 255 255 / .12), transparent 55%), linear-gradient(155deg, var(--jn-green-soft), #012e29); }
.evp-cover__icon svg { width: 4.5rem; height: 4.5rem; fill: none; stroke: var(--jn-orange); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.evp-cover__label { color: rgb(255 255 255 / .8); font-size: .8125rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.evp-cover__date { position: absolute; left: 1rem; bottom: 1rem; display: grid; justify-items: center; min-width: 5.5rem; padding: .7rem .6rem; border-radius: var(--jn-radius-sm); background: linear-gradient(155deg, #ff8a5f, var(--jn-orange-dark) 75%); color: rgb(255 255 255 / .88); font-size: .75rem; font-weight: 600; line-height: 1.2; box-shadow: 0 .6rem 1.4rem rgb(0 0 0 / .25); }
.evp-cover__date strong { color: #fff; font-size: 1.625rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }

/* Description, programme and the sticky details card */
.evp-about { display: grid; grid-template-columns: minmax(0, var(--jn-reading)) minmax(16rem, 21rem); gap: clamp(2rem, 5vw, 4.5rem); justify-content: space-between; align-items: start; }
.evp-main { display: grid; gap: 3rem; min-width: 0; }
.evp-block h2 { margin: .35rem 0 1.25rem; font-size: clamp(1.375rem, 2.4vw, 1.75rem); letter-spacing: -.01em; color: var(--jn-green); }
.evp-prose { font-size: 1rem; line-height: 1.8; color: #333; }
.evp-prose p { margin: 0 0 1rem; }
.evp-prose p:last-child { margin-bottom: 0; }
.evp-program { display: grid; gap: .75rem; margin: 0; padding: 0; list-style: none; counter-reset: none; }
.evp-program li { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); gap: 1rem; align-items: start; padding: 1rem 1.25rem 1rem 1rem; border: 1px solid var(--jn-border); border-radius: var(--jn-radius-sm); background: #fff; transition: border-color .25s ease; }
.evp-program__num { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--jn-cream); color: var(--jn-green); font-size: .875rem; font-weight: 800; font-variant-numeric: tabular-nums; transition: background-color .25s ease, color .25s ease, scale .25s ease; }
.evp-program p { margin: 0; padding-top: .6rem; font-size: .9375rem; line-height: 1.6; color: #333; }
.evp-videos { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.evp-videos li { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr) auto; gap: .9rem; align-items: center; padding: .7rem 1rem .7rem .7rem; border-radius: var(--jn-radius-sm); background: var(--jn-cream); font-size: .9375rem; color: #222; }
.evp-videos__play { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--jn-green); }
.evp-videos__play svg { width: 1rem; height: 1rem; fill: #fff; }
.evp-videos small { color: var(--jn-muted); font-size: .8125rem; font-variant-numeric: tabular-nums; }
.evp-card { position: sticky; top: calc(var(--jn-header-height) + 1.5rem); display: grid; gap: 1.25rem; padding: 1.5rem; border: 1px solid var(--jn-border); border-radius: var(--jn-radius); background: var(--jn-cream); }
.evp-card__title { margin: 0; color: var(--jn-orange-dark); font-size: .6875rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.evp-card dl { display: grid; margin: 0; }
.evp-card dl div { display: grid; gap: .15rem; padding: .7rem 0; border-top: 1px solid var(--jn-border); }
.evp-card dt { font-size: .75rem; color: var(--jn-muted); }
.evp-card dd { margin: 0; font-size: .9375rem; font-weight: 600; color: #222; }
.evp-price--card { padding-top: 1rem; border-top: 1px solid var(--jn-border); }
.evp-price--card strong { color: var(--jn-green); font-size: 1.75rem; }
.evp-price--card span { color: var(--jn-muted); }
.evp-card__buy .jn-button { width: 100%; }

/* Audience and outcomes on green */
.evp-for { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.evp-for--single { grid-template-columns: minmax(0, var(--jn-reading)); }
.evp-for .jn-section-heading h2 { font-size: clamp(1.375rem, 2.4vw, 1.75rem); letter-spacing: -.01em; }
.evp-list { display: grid; gap: .75rem; margin: 0; padding: 0; list-style: none; }
.evp-list li { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: 1rem; align-items: center; padding: .9rem 1.1rem .9rem .9rem; border: 1px solid rgb(255 255 255 / .12); border-radius: var(--jn-radius-sm); background: rgb(255 255 255 / .06); color: rgb(255 255 255 / .9); font-size: .9375rem; line-height: 1.55; }
.evp-list__icon { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: rgb(255 111 63 / .16); transition: background-color .25s ease, scale .25s ease; }
.evp-list__icon svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: var(--jn-orange); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: stroke .25s ease; }

@media (hover: hover) {
  .evp-program li:hover { border-color: rgb(255 111 63 / .45); }
  .evp-program li:hover .evp-program__num { background: var(--jn-orange); color: #fff; scale: 1.08; }
  .evp-list li:hover .evp-list__icon { background: var(--jn-orange); scale: 1.08; }
  .evp-list li:hover .evp-list__icon svg { stroke: #fff; }
}

/* Bottom buy bar on narrow screens (event-page.js shows it when both buy blocks are off screen). */
.evp-bar { display: none; }
@media (max-width: 56rem) {
  .evp-bar { position: fixed; inset: auto 0 0; z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .75rem var(--jn-gutter) calc(.75rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--jn-border); background: #fff; box-shadow: 0 -.75rem 2rem rgb(1 60 53 / .12); translate: 0 110%; transition: translate .3s ease; }
  .evp-bar.is-shown { translate: 0 0; }
  .evp-bar__copy { display: grid; min-width: 0; }
  .evp-bar__copy span { overflow: hidden; color: var(--jn-muted); font-size: .75rem; text-overflow: ellipsis; white-space: nowrap; }
  .evp-bar__copy strong { color: var(--jn-green); font-size: 1.125rem; font-weight: 800; }
  .evp-bar .jn-button { white-space: nowrap; }
}

@keyframes evp-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.evp-hero__copy > *, .evp-cover { animation: evp-in .7s cubic-bezier(.2, .7, .2, 1) both; }
.evp-hero__copy > :nth-child(2) { animation-delay: .06s; }
.evp-hero__copy > :nth-child(3) { animation-delay: .12s; }
.evp-hero__copy > :nth-child(4) { animation-delay: .18s; }
.evp-hero__copy > :nth-child(n+5) { animation-delay: .24s; }
.evp-cover { animation-delay: .2s; animation-duration: .9s; }
@supports (animation-timeline: view()) {
  .evp :is(.evp-program li, .evp-videos li, .evp-list li, .ev-card) { animation: evp-in linear both; animation-timeline: view(); animation-range: entry 0% entry 55%; }
}

@media (max-width: 56rem) {
  .evp-hero__grid, .evp-about, .evp-for { grid-template-columns: minmax(0, 1fr); }
  .evp-cover { max-width: 36rem; }
  .evp-card { position: static; }
}
@media (max-width: 40rem) {
  .evp-actions, .evp-actions form { flex: 1 1 100%; }
  .evp-actions .jn-button { width: 100%; }
  .evp-program li { grid-template-columns: 2.25rem minmax(0, 1fr); gap: .75rem; padding: .85rem; }
  .evp-program__num { width: 2.25rem; height: 2.25rem; font-size: .8125rem; }
  .evp-program p { padding-top: .4rem; }
  .evp-list li { grid-template-columns: 2.25rem minmax(0, 1fr); gap: .8rem; }
  .evp-list__icon { width: 2.25rem; height: 2.25rem; }
}