/* 🎟 Сторінка «Івенти та курси» (редизайн 26.09.2026). Лише токени палітри — світла й темні теми працюють самі.
   Акцент картки — --evc-acc (тема події бренду), решта — з палітри сайту. */

.evp { max-width: 1440px; /* 05.10: як шапка (1440) */ margin: 0 auto; padding: 26px 16px 64px; }

/* ── Шапка сторінки ── */
.evp-hero { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 18px; align-items: stretch; margin-bottom: 22px; }
.evp-hero__main { padding: 6px 0; }
.evp-eyebrow { display: inline-flex; align-items: center; gap: 6px; font-size: 0.74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--color-accent); margin-bottom: 8px; }
.evp-hero h1 { font-family: var(--font-heading); font-size: clamp(1.7rem, 3.4vw, 2.4rem); line-height: 1.12; margin: 0 0 10px; text-wrap: balance; }
.evp-hero__lead { color: var(--color-text-muted); font-size: 1rem; line-height: 1.55; margin: 0 0 14px; max-width: 56ch; }
.evp-stats { display: flex; flex-wrap: wrap; gap: 8px; }
.evp-stat { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--color-surface); border: 1px solid var(--color-border); font-size: 0.84rem; font-weight: 600; color: var(--color-text); }
.evp-stat b { color: var(--color-accent); font-variant-numeric: tabular-nums; }

.evp-org { position: relative; overflow: hidden; border-radius: 20px; padding: 20px 20px 18px; background: var(--color-ink-deep, var(--color-primary)); color: var(--color-white, #fff); display: flex; flex-direction: column; gap: 8px; }
.evp-org::after { content: ''; position: absolute; right: -40px; bottom: -50px; width: 170px; height: 170px; border-radius: 50%; background: rgb(var(--color-accent-rgb) / .35); filter: blur(4px); }
.evp-org__t { font-family: var(--font-heading); font-size: 1.08rem; line-height: 1.25; position: relative; z-index: 1; }
.evp-org__d { font-size: 0.86rem; line-height: 1.5; opacity: .86; position: relative; z-index: 1; }
.evp-org__a { position: relative; z-index: 1; align-self: flex-start; margin-top: auto; display: inline-flex; align-items: center; gap: 6px; background: var(--color-accent); color: var(--color-on-accent); text-decoration: none; font-weight: 700; font-size: 0.86rem; padding: 9px 16px; border-radius: 999px; transition: background .15s; }
.evp-org__a:hover { background: var(--color-accent-hover); }

/* ── Панель фільтрів ── */
.evp-tools { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 20px; }
.evp-tabs { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--color-surface); border: 1px solid var(--color-border); box-shadow: var(--shadow-sm); }
.evp-tab { border: none; background: none; cursor: pointer; padding: 8px 14px; border-radius: 999px; font: inherit; font-size: 0.86rem; font-weight: 700; color: var(--color-text-muted); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.evp-tab .n { font-size: 0.74rem; padding: 1px 7px; border-radius: 999px; background: var(--color-bg-alt); color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.evp-tab.on { background: var(--color-accent); color: var(--color-on-accent); }
.evp-tab.on .n { background: rgb(255 255 255 / .22); color: inherit; }
.evp-tab:focus-visible, .ev-pill:focus-visible, .ev-dd-btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

.ev-pills { display: inline-flex; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 999px; padding: 4px; gap: 2px; box-shadow: var(--shadow-sm); }
.ev-pill { border: none; background: none; padding: 8px 14px; border-radius: 999px; cursor: pointer; font: inherit; font-size: 0.85rem; font-weight: 600; color: var(--color-text-muted); white-space: nowrap; transition: color .15s, background .15s; }
.ev-pill:hover { color: var(--color-accent); }
.ev-pill.active { background: var(--color-bg-alt); color: var(--color-text); }

.ev-dd { position: relative; display: inline-block; }
.ev-dd-btn { display: inline-flex; align-items: center; gap: 8px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 999px; padding: 9px 16px; font: inherit; font-size: 0.86rem; font-weight: 600; color: var(--color-text); cursor: pointer; box-shadow: var(--shadow-sm); }
.ev-dd-btn:hover { border-color: var(--color-accent); }
.ev-dd-btn.has { border-color: var(--color-accent); color: var(--color-accent); }
.ev-dd-btn .chev { color: var(--color-accent); font-size: 0.66rem; transition: transform .2s; }
.ev-dd.open .ev-dd-btn { border-color: var(--color-accent); box-shadow: 0 0 0 3px rgb(var(--color-accent-rgb) / .15); }
.ev-dd.open .chev { transform: rotate(180deg); }
.ev-dd-menu { display: none; position: absolute; top: calc(100% + 6px); left: 0; min-width: 200px; max-height: 300px; overflow-y: auto; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 14px; box-shadow: var(--shadow-lg); padding: 6px; z-index: 30; }
.ev-dd.open .ev-dd-menu { display: block; animation: evddin .14s ease; }
@keyframes evddin { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.ev-dd-menu button { display: block; width: 100%; text-align: left; border: none; background: none; padding: 9px 12px; border-radius: 9px; font: inherit; font-size: 0.86rem; cursor: pointer; color: var(--color-text); }
.ev-dd-menu button:hover { background: var(--color-bg); }
.ev-dd-menu button.sel { background: var(--color-accent); color: var(--color-on-accent); font-weight: 600; }
.evp-reset { border: none; background: none; cursor: pointer; font: inherit; font-size: 0.84rem; font-weight: 600; color: var(--color-accent); padding: 8px 6px; text-decoration: underline; text-underline-offset: 3px; }

/* ── Заголовки секцій ── */
.evp-sec { display: flex; align-items: baseline; gap: 10px; margin: 26px 0 12px; }
.evp-sec h2 { font-family: var(--font-heading); font-size: 1.3rem; margin: 0; display: inline-flex; align-items: center; gap: 8px; }
.evp-sec .n { color: var(--color-text-muted); font-size: 0.9rem; }

/* ── Сітка й картка ── */
.ev-list-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 960px) { .ev-list-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 580px) { .ev-list-grid { grid-template-columns: 1fr; } }

.evc { --evc-acc: var(--color-accent); position: relative; display: flex; flex-direction: column; text-decoration: none; color: inherit; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 18px; overflow: hidden; transition: transform .18s ease, box-shadow .18s ease, border-color .18s; }
.evc:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: color-mix(in srgb, var(--evc-acc) 45%, var(--color-border)); }
.evc:focus-visible { outline: 2px solid var(--evc-acc); outline-offset: 3px; }
.evc__cover { position: relative; aspect-ratio: 16 / 10; background: color-mix(in srgb, var(--evc-acc) 16%, var(--color-bg-alt)); overflow: hidden; }
.evc__cover img.ph { width: 100%; height: 100%; object-fit: cover; display: block; }
.evc__glyph { position: absolute; inset: 0; display: grid; place-items: center; }
.evc__glyph .nyt-ico { opacity: .55; }
.evc__glyph::before { content: ''; position: absolute; width: 60%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--evc-acc) 30%, transparent), transparent 70%); }
.evc__date { position: absolute; left: 12px; top: 12px; min-width: 54px; padding: 6px 8px 5px; border-radius: 12px; background: var(--color-surface); box-shadow: var(--shadow-sm); text-align: center; line-height: 1; }
.evc__date b { display: block; font-family: var(--font-heading); font-size: 1.35rem; color: var(--evc-acc); font-variant-numeric: tabular-nums; }
.evc__date span { display: block; margin-top: 3px; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-muted); }
.evc__tags { position: absolute; right: 10px; top: 10px; display: flex; gap: 5px; flex-wrap: wrap; justify-content: flex-end; }
.evc__tag { font-size: 0.7rem; font-weight: 700; padding: 4px 9px; border-radius: 999px; background: var(--color-surface); color: var(--color-text); box-shadow: var(--shadow-sm); white-space: nowrap; }
.evc__tag--hot { background: var(--color-accent); color: var(--color-on-accent); }
.evc__tag--past { background: var(--color-bg-alt); color: var(--color-text-muted); }
.evc__body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.evc__brand { font-size: 0.78rem; font-weight: 700; color: var(--evc-acc); display: inline-flex; align-items: center; gap: 5px; }
.evc__title { font-weight: 700; font-size: 1.04rem; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-wrap: balance; }
.evc__meta { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 0.8rem; color: var(--color-text-muted); }
.evc__meta span { display: inline-flex; align-items: center; gap: 4px; }
.evc__sum { font-size: 0.84rem; color: var(--color-text-muted); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.evc__foot { margin-top: auto; padding-top: 10px; border-top: 1px dashed var(--color-border); display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.evc__price { font-family: var(--font-heading); font-size: 1.05rem; color: var(--color-text); }
.evc__price.free { color: var(--evc-acc); }
.evc__seats { font-size: 0.76rem; font-weight: 600; color: var(--color-text-muted); display: inline-flex; align-items: center; gap: 5px; }
.evc__seats.low { color: var(--color-accent); }
.evc__go { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--evc-acc) 14%, var(--color-surface)); transition: background .15s; flex: 0 0 auto; }
.evc:hover .evc__go { background: var(--evc-acc); }
.evc:hover .evc__go .nyt-ico { filter: brightness(0) invert(1); }
.evc.past { opacity: .8; }
.evc.past .evc__cover { filter: grayscale(.45); }

/* Найближча подія — широка картка зверху */
.evc--feat { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); margin-bottom: 6px; }
.evc--feat .evc__cover { aspect-ratio: auto; min-height: 250px; }
.evc--feat .evc__body { padding: 22px 24px; gap: 8px; justify-content: center; }
.evc--feat .evc__title { font-family: var(--font-heading); font-size: 1.45rem; -webkit-line-clamp: 3; }
.evc--feat .evc__sum { -webkit-line-clamp: 3; font-size: 0.92rem; }
.evc__soon { display: inline-flex; align-self: flex-start; align-items: center; gap: 6px; font-size: 0.74rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--color-on-accent); background: var(--evc-acc); padding: 5px 11px; border-radius: 999px; }
.evc__cta { display: inline-flex; align-items: center; gap: 6px; background: var(--evc-acc); color: var(--color-on-accent); font-weight: 700; font-size: 0.88rem; padding: 10px 18px; border-radius: 999px; }
@media (max-width: 760px) {
  .evc--feat { grid-template-columns: 1fr; }
  .evc--feat .evc__cover { min-height: 0; aspect-ratio: 16 / 9; }
  .evc--feat .evc__body { padding: 16px; }
  .evc--feat .evc__title { font-size: 1.2rem; }
}

/* ── Порожньо ── */
.evp-empty { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 22px; align-items: center; padding: 26px 28px; border-radius: 22px; background: var(--color-surface); border: 1px solid var(--color-border); }
.evp-empty img { width: 140px; height: auto; }
.evp-empty h3 { font-family: var(--font-heading); font-size: 1.2rem; margin: 0 0 6px; }
.evp-empty p { color: var(--color-text-muted); margin: 0 0 14px; line-height: 1.55; max-width: 52ch; }
.evp-empty__a { display: flex; flex-wrap: wrap; gap: 8px; }
.evp-btn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text); font: inherit; font-size: 0.86rem; font-weight: 700; padding: 9px 16px; border-radius: 999px; cursor: pointer; text-decoration: none; }
.evp-btn:hover { border-color: var(--color-accent); color: var(--color-accent); }
.evp-btn--main { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-on-accent); }
.evp-btn--main:hover { background: var(--color-accent-hover); color: var(--color-on-accent); }
@media (max-width: 580px) { .evp-empty { grid-template-columns: 1fr; text-align: center; padding: 22px 18px; } .evp-empty img { margin: 0 auto; width: 120px; } .evp-empty p { margin-inline: auto; } .evp-empty__a { justify-content: center; } }

/* ── Скелетон ── */
@keyframes evSkSh { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.ev-sk { background: linear-gradient(90deg, var(--color-bg-alt) 25%, var(--color-bg) 50%, var(--color-bg-alt) 75%); background-size: 200% 100%; animation: evSkSh 1.3s ease-in-out infinite; }
.ev-sk-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 18px; overflow: hidden; }
.ev-sk__cover { aspect-ratio: 16 / 10; }
.ev-sk-card__body { padding: 14px 16px; }
.ev-sk__line { height: 12px; border-radius: 6px; margin-bottom: 9px; }
@media (prefers-reduced-motion: reduce) { .ev-sk, .evc, .ev-dd-menu { animation: none; transition: none; } .evc:hover { transform: none; } }

/* ── Моб ── */
@media (max-width: 760px) {
  .evp { padding-top: 18px; }
  .evp-hero { grid-template-columns: 1fr; gap: 14px; }
  .evp-org { padding: 16px; }
  .evp-tools { gap: 8px; }
  .evp-tabs { width: 100%; }
  .evp-tab { flex: 1; justify-content: center; }
  .ev-pills { width: 100%; }
  .ev-pill { flex: 1; padding: 9px 4px; font-size: 0.78rem; text-align: center; }
  .ev-dd { flex: 1 1 calc(50% - 4px); }
  .ev-dd-btn { width: 100%; justify-content: space-between; }
  .ev-dd:last-of-type .ev-dd-menu { left: auto; right: 0; }
}

/* Дрібні правки після перегляду: ціна в один рядок, біла стрілка на кольоровій кнопці, низ великої картки на телефоні */
.evc__price { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 0; white-space: nowrap; min-width: 0; }
.evc__foot { flex-wrap: wrap; row-gap: 10px; }
.evc__price span[title] { font-family: var(--font-body); }   /* пігулка знижки — звичайним шрифтом, не заголовковим */
.evc__cta .nyt-ico { filter: brightness(0) invert(1); }
@media (max-width: 760px) {
  .evc--feat .evc__foot { flex-wrap: wrap; row-gap: 10px; }
  .evc--feat .evc__cta { flex: 1 0 100%; justify-content: center; }
}