/* C6 v1 -- event detail page (PAGES-SPEC 5.1, mockups P3Event / P3EventMob,
   «Схожі» carousel per DESIGN-ADDENDUM Р3.3/Р3.4). Loaded only by
   event-card.html, after styles.css; everything is scoped to main.evd and
   uses the shared shell tokens (--bg, --card, --text, --muted, --line,
   --line-strong, --perf, --focus, --link, --accent-text), so light and dark
   themes come from the same [data-theme] switch as the rest of the site.
   Hooks that script.js renders keep their old class names; the legacy rules
   for those names are neutralised here, inside .evd only. */

.evd {
  --evd-red: #c8102e;
  --evd-red-hover: #a50d26;
  --evd-on-red: #ffffff;
  --evd-chip: #ffffff;
  --evd-past-bg: #fff1f3;
  --evd-past-text: #8a0c20;
  --evd-admin-bg: #0b1020;
  --evd-admin-text: #ffffff;
  --evd-admin-muted: #c3cad6;
  --evd-pop-shadow: 0 14px 36px rgba(11, 16, 32, 0.16);
  --evd-sticky-shadow: 0 -8px 24px rgba(11, 16, 32, 0.08);
  /* C6 v1.2 (AC-C6-15): with the shell footer's own top margin (36px on
     phones, 72px on desktop) this halves the old gap after «Схожі події»
     (108 -> 54px, 144 -> 72px). The mobile panel's clearance is the
     body's padding below, unchanged. */
  padding: 0 0 18px;
  background: var(--bg);
  color: var(--text);
}

[data-theme='dark'] .evd {
  --evd-chip: #0f172a;
  --evd-past-bg: rgba(255, 107, 127, 0.12);
  --evd-past-text: #ff8a9b;
  --evd-admin-bg: #1a2338;
  --evd-admin-muted: #b9c4da;
  --evd-pop-shadow: 0 14px 36px rgba(0, 0, 0, 0.5);
  --evd-sticky-shadow: 0 -8px 24px rgba(0, 0, 0, 0.45);
}

.evd *,
.evd *::before,
.evd *::after {
  box-sizing: border-box;
}

.evd :focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.evd-icon {
  flex: none;
}

/* ---------- admin bar (EV-12) ---------- */

.evd .evd-adminbar {
  margin: 0;
  padding: 0;
  border: 0;
  display: block;
  background: var(--evd-admin-bg);
  color: var(--evd-admin-text);
}

.evd-adminbar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  padding-top: 12px;
  padding-bottom: 12px;
  font-size: 14px;
}

.evd-adminbar__status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  /* C6 v1.4 (AC-C6-28): the status always has its own first row, so the
     action buttons sit on the second row from the first render and do not
     jump when the Recommended status (loaded later) makes it longer. */
  flex: 1 1 100%;
  min-width: 0;
}

.evd-adminbar__tag,
.evd .evd-adminbar .event-admin__badge {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  border: 0;
  background: rgba(255, 255, 255, 0.14);
  color: var(--evd-admin-text);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

.evd-adminbar__who {
  font-size: 13px;
  color: var(--evd-admin-muted);
}

/* C6 v1.4 (AC-C6-28): below desktop the «Цю смугу бачать лише адміни»
   note has its own line, so a longer status arriving later never pushes it
   (and the buttons) to a new line. */
@media (max-width: 1023px) {
  .evd .evd-adminbar__who {
    flex: 1 1 100%;
  }
}

/* On phones the status text has its own line under «Адмін». While the
   Recommended status is still loading (empty, hidden and marked
   data-evd-pending by script.js), that line is kept blank -- no text,
   nothing claimed -- so the buttons below do not move when it arrives. No
   blank line for an archived event (badge only), once the request has
   failed, or when no request is made. */
@media (max-width: 719px) {
  .evd .evd-adminbar__state {
    flex: 1 1 100%;
    min-height: 22px;
    min-height: 1lh;
  }

  .evd .evd-adminbar__status:not(:has([data-admin-archived-badge]:not([hidden]))) .evd-adminbar__state[data-evd-pending][hidden] {
    display: block !important;
    visibility: hidden;
  }
}

.evd .evd-adminbar__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Round 1 lesson (PAGES-SPEC 5.1): white outline buttons whose text is
   always white -- no inherited `.pg a.btn`-style colour can win here. */
.evd .evd-adminbar__btn,
.evd a.evd-adminbar__btn:link,
.evd a.evd-adminbar__btn:visited,
.evd a.evd-adminbar__btn:hover {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  background: transparent;
  color: var(--evd-admin-text);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

/* C6 v1.2 (AC-C6-19): the bar starts compact. «Рекомендовані слоти»
   opens ONE management panel -- the current slots and the duration /
   position / Save / Remove controls -- that directly follows it in the DOM
   (Tab goes from the toggle into the panel); visually it wraps under the
   button row. Opening it only shows what is already loaded. */
.evd .evd-adminbar__actions .evd-adminbar__panel {
  order: 1;
}

.evd .evd-adminbar__btn[aria-expanded='true'] {
  background: rgba(255, 255, 255, 0.16);
  border-color: #ffffff;
}

.evd .evd-adminbar__btn:hover {
  background: rgba(255, 255, 255, 0.1);
}

.evd .evd-adminbar__btn:focus-visible {
  outline-color: #ffffff;
}

.evd .evd-adminbar__btn[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}

.evd .evd-adminbar__panel {
  flex: 1 1 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 10px 14px;
  margin: 0;
  padding: 12px 0 0;
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  background: transparent;
  color: var(--evd-admin-text);
}

.evd .evd-adminbar__panel .event-admin__field {
  display: grid;
  gap: 4px;
  font-size: 13px;
  color: var(--evd-admin-muted);
}

.evd .evd-adminbar__panel select,
.evd .evd-adminbar__panel input {
  min-height: 36px;
  padding: 0 10px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: transparent;
  color: var(--evd-admin-text);
  font: inherit;
}

.evd .evd-adminbar__panel select option {
  color: #0b1020;
}

/* The duration / position / Save / Remove row inside the panel. */
.evd .evd-adminbar__fields {
  flex: 1 1 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 10px 14px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

/* A past event has no placement controls. */
.evd .event-admin__recommended:not(:has(> .event-admin__field:not([hidden]))) {
  display: none;
}

/* B3's status line (Save / Remove results, an Archive / Restore refusal)
   stays outside the collapsible panel, so a refusal or failure is seen even
   with the panel closed (a past event has no panel at all). Other messages
   («Active in slot 1 until ...») show only with the panel open -- the line
   at the top already says where the event is placed. Empty, it takes no
   space. */
.evd .evd-adminbar__note {
  flex: 1 1 100%;
  margin: 0;
  font-size: 13px;
  color: var(--evd-admin-muted);
}

.evd .evd-adminbar__note:empty,
.evd .evd-adminbar__inner:has([data-recommended-slots][hidden]) .evd-adminbar__note:not([data-state='error']) {
  display: none;
}

.evd .evd-adminbar__note[data-state='error'] {
  color: #ff9aa8;
}

.evd-adminbar__panel-title {
  flex: 1 1 100%;
  margin: 0;
  font-size: 15px;
}

.evd .evd-adminbar__panel .event-admin__slots-list {
  flex: 1 1 100%;
  display: grid;
  gap: 6px;
}

.evd .evd-adminbar__panel .event-admin__slot-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--evd-admin-text);
}

.evd .evd-adminbar__panel .event-admin__slot-row .btn {
  min-height: 32px;
  border-color: rgba(255, 255, 255, 0.45);
  color: var(--evd-admin-text);
  background: transparent;
}

/* ---------- top: poster + ticket ---------- */

.evd-wrap {
  padding-top: 18px;
}

.evd .evd-back,
.evd .evd-back:hover {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  backdrop-filter: none;
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

.evd .evd-back:hover {
  color: var(--text);
}

.evd-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  margin-top: 6px;
}

/* UI-POSTER-1: WebKit does not clip the blurred backdrop's own layer to
   overflow + border-radius, so the frame is also clipped with clip-path
   (same technique and reason as the catalog posters in styles.css). */
.evd-poster {
  position: relative;
  overflow: hidden;
  height: 440px;
  border-radius: 20px;
  clip-path: inset(0 round 20px);
  background: #0b1020;
  color: rgba(255, 255, 255, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
}

.evd-poster__bg {
  position: absolute;
  left: -24px;
  top: -24px;
  width: calc(100% + 48px);
  height: calc(100% + 48px);
  object-fit: cover;
  filter: blur(16px) brightness(0.72);
}

.evd .evd-poster__fg {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  max-height: none;
  margin: 0;
  border: 0;
  border-radius: 0;
  object-fit: contain;
  background: none;
}

.evd-poster__empty {
  position: absolute;
  display: none;
}

.evd-poster--empty .evd-poster__empty {
  display: block;
}

.evd-main {
  min-width: 0;
}

.evd-eyebrow {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--accent-text);
}

.evd-eyebrow--muted {
  color: var(--muted);
}

.evd-title {
  margin: 8px 0 0;
  font-size: 32px;
  line-height: 1.08;
  font-weight: 800;
  letter-spacing: -1px;
  overflow-wrap: anywhere;
}

.evd .evd-pastbanner {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0 0;
  padding: 14px 18px;
  border: 0;
  border-radius: 16px;
  background: var(--evd-past-bg);
  color: var(--evd-past-text);
  font-size: 15px;
  font-weight: 600;
}

.evd .evd-pastbanner p {
  margin: 0;
}

.evd-ticket {
  position: relative;
  margin-top: 18px;
  border-radius: 20px;
  background: var(--card);
}

.evd-meta {
  list-style: none;
  margin: 0;
  padding: 18px;
  display: grid;
  gap: 12px;
}

.evd-meta__row {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.evd-meta__icon {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: var(--evd-chip);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
}

.evd-meta__text {
  flex: 1;
  min-width: 0;
}

.evd-meta__text b {
  display: block;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.evd-meta__text > span,
.evd-meta__place {
  display: block;
  margin-top: 1px;
  font-size: 13px;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.evd .evd-meta__text b + .evd-meta__place {
  margin-top: 1px;
}

/* Without a venue the address is the row's main line. */
.evd .evd-meta__text b[hidden] + .evd-meta__place {
  margin-top: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}

.evd .evd-meta__place a,
.evd .evd-meta__place a:hover {
  color: inherit;
  text-decoration: none;
  border-bottom: 0;
}

/* script.js's combined "date · time · city" line stays as the data carrier
   for its own logic and tests; the redesigned rows above show it. */
.evd .evd-meta-carrier {
  display: none;
}

.evd-mini,
.evd .evd-mini.event-calendar__toggle {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 44px;
  min-height: 44px;
  width: auto;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--link);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

.evd-mini__label {
  display: none;
}

.evd-pop-host,
.evd .event-calendar.evd-pop-host,
.evd .event-share.evd-pop-host {
  position: relative;
  width: auto;
  margin: 0;
}

/* C6 v1.2 (AC-C6-22): the server render keeps the calendar button's space
   for an upcoming event (invisible, not focusable) until script.js shows
   the button, so the date never re-wraps after loading. */
.evd:not(.evd--past) [data-calendar][data-evd-reserve][hidden] {
  display: block !important;
  visibility: hidden;
}

/* C6 v1.2 (AC-C6-18): «Поділитися» as a tooltip on mouse hover and on
   keyboard focus. The text is the button's own aria-label (the accessible
   name, read once); the tooltip itself is decoration. Anchored to the
   button's right edge so it never sticks out of the page; hidden while the
   menu is open. WCAG 1.4.13: it can be hovered (a transparent border
   bridges the gap to the button) and Escape dismisses it
   (modules/event-detail-page.mjs sets data-evd-tip="off").
   C6 v1.3 (AC-C6-24): the quiet «Схожі події» Pause / Resume control shows
   the same tooltip (its live aria-label). */
.evd .event-share__toggle::after,
.evd .evd-similar__autoplay::after {
  content: attr(aria-label);
  position: absolute;
  z-index: 31;
  right: 0;
  bottom: 100%;
  padding: 6px 10px;
  border-bottom: 8px solid transparent;
  border-radius: 8px;
  background: var(--text);
  background-clip: padding-box;
  color: var(--bg);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.12s ease;
}

.evd .event-share__toggle:focus-visible::after,
.evd .evd-similar__autoplay:focus-visible::after {
  opacity: 1;
  visibility: visible;
}

/* The rectangular host, not the round button, keeps the hover, so a
   diagonal path towards the tooltip never drops it. */
@media (hover: hover) and (pointer: fine) {
  .evd .event-share:hover > .event-share__toggle::after,
  .evd .evd-similar__autoplay:hover::after {
    opacity: 1;
    visibility: visible;
  }
}

.evd .event-share__toggle[aria-expanded='true']::after,
.evd .event-share__toggle[data-evd-tip='off']::after,
.evd .evd-similar__autoplay[data-evd-tip='off']::after {
  opacity: 0;
  visibility: hidden;
}

.evd .evd-pop {
  position: absolute;
  z-index: 30;
  top: calc(100% + 8px);
  right: 0;
  left: auto;
  width: 260px;
  min-width: 0;
  max-width: calc(100vw - 32px);
  display: grid;
  gap: 0;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--bg);
  box-shadow: var(--evd-pop-shadow);
}

.evd .evd-pop__item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.evd .evd-pop__item:hover,
.evd .evd-pop__item:focus-visible {
  background: var(--card);
  color: var(--text);
}

.evd-perf {
  position: relative;
  height: 0;
}

.evd-perf::before,
.evd-perf::after {
  content: '';
  position: absolute;
  top: -10px;
  width: 20px;
  height: 20px;
  border-radius: 10px;
  background: var(--bg);
}

.evd-perf::before {
  left: -10px;
}

.evd-perf::after {
  right: -10px;
}

.evd-perf i {
  position: absolute;
  left: 18px;
  right: 18px;
  top: -1px;
  border-top: 2px dashed var(--perf);
}

.evd-stub {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 16px 18px 18px;
}

.evd-price {
  flex: 1 1 auto;
  min-width: 0;
}

.evd-price small {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}

.evd .evd-price .event-sidebar__price {
  display: block;
  margin: 2px 0 0;
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.4px;
  line-height: 1.2;
}

.evd .evd-note {
  display: none !important;
}

.evd-stub__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex: 1 1 100%;
}

.evd-btn,
.evd .evd-btn.event-sidebar__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: auto;
  min-height: 52px;
  padding: 0 26px;
  border-radius: 999px;
  border: 1.5px solid transparent;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: none;
}

.evd .evd-btn--red,
.evd .evd-btn--red:link,
.evd .evd-btn--red:visited,
.evd .evd-btn--red.event-sidebar__cta--ticket {
  background: var(--evd-red);
  border-color: var(--evd-red);
  color: var(--evd-on-red);
}

.evd .evd-btn--red:hover,
.evd .evd-btn--red.event-sidebar__cta--ticket:hover,
.evd .evd-btn--red.event-sidebar__cta--ticket:focus-visible {
  background: var(--evd-red-hover);
  border-color: var(--evd-red-hover);
  color: var(--evd-on-red);
  box-shadow: none;
}

/* Ticket and registration links open the organizer's site. */
.evd .evd-buy.event-sidebar__cta--ticket::after,
.evd .evd-sticky__cta::after {
  content: '';
  width: 16px;
  height: 16px;
  flex: none;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6M20 4l-9 9M18 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6M20 4l-9 9M18 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Only an absolute http(s) link is a ticket button (EV-16, AC-C6-3). A
   paid event without a link (script.js leaves href="#") or any other
   scheme written in on hydration (javascript:, data:, ...) shows nothing --
   fail closed, before and independent of any script. */
.evd .event-sidebar__cta--ticket:not([href^='https://' i]):not([href^='http://' i]) {
  display: none !important;
}

.evd .evd-btn--out,
.evd .evd-btn--out:link,
.evd .evd-btn--out:visited {
  border-color: var(--text);
  background: transparent;
  color: var(--text);
}

.evd .evd-btn--line {
  border-color: var(--line-strong);
  background: transparent;
  color: var(--text);
}

.evd .evd-btn--out:hover,
.evd .evd-btn--line:hover {
  background: var(--card);
  color: var(--text);
}

.evd .evd-btn--sm {
  min-height: 44px;
  padding: 0 16px;
  font-size: 14px;
}

.evd-buy {
  flex: 1 1 100%;
  order: 3;
}

.evd .evd-iconbtn,
.evd .save-star.evd-iconbtn,
.evd .event-share__toggle.evd-iconbtn,
.evd .similar-events__control.evd-iconbtn {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  border-radius: 999px;
  border: 1.5px solid var(--line-strong);
  background: transparent;
  color: var(--text);
  font: inherit;
  text-decoration: none;
  cursor: pointer;
}

.evd .evd-iconbtn:hover {
  background: var(--card);
  border-color: var(--text);
  color: var(--text);
}

.evd .evd-iconbtn[disabled] {
  opacity: 0.4;
  cursor: default;
}

/* The star keeps script.js's ☆/★ glyph for its state; it is drawn as the
   design's outline / filled star instead of a font glyph. */
.evd .evd-star span,
.evd .evd-bell span {
  font-size: 0;
  width: 22px;
  height: 22px;
  display: block;
  background: currentColor;
  -webkit-mask: var(--evd-star-icon) center / contain no-repeat;
  mask: var(--evd-star-icon) center / contain no-repeat;
}

.evd .evd-star {
  --evd-star-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M12 3.5l2.6 5.4 5.9.8-4.3 4.1 1 5.8L12 16.8l-5.2 2.8 1-5.8L3.5 9.7l5.9-.8z'/%3E%3C/svg%3E");
}

.evd .evd-star.is-saved,
.evd .evd-star[data-saved='true'] {
  --evd-star-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M12 3.5l2.6 5.4 5.9.8-4.3 4.1 1 5.8L12 16.8l-5.2 2.8 1-5.8L3.5 9.7l5.9-.8z'/%3E%3C/svg%3E");
  color: var(--accent-text);
  border-color: var(--accent-text);
}

.evd .evd-bell {
  --evd-star-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 16V11a6 6 0 0 1 12 0v5l1.5 2h-15z'/%3E%3Cpath d='M10 20.5a2 2 0 0 0 4 0'/%3E%3C/svg%3E");
}

.evd-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.evd-tags:empty {
  display: none;
}

.evd .evd-tags .event-tag,
.evd .evd-tags .event-tag:nth-child(even) {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 14px;
  border: 1.5px solid var(--line-strong);
  border-radius: 999px;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
}

/* ---------- body: about, how to get there | organizer, bot ---------- */

.evd-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
  margin-top: 34px;
}

.evd-section + .evd-section {
  margin-top: 34px;
}

.evd-h2 {
  margin: 0;
  font-size: 22px;
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -0.5px;
}

.evd-desc {
  max-width: 42em;
  margin: 12px 0 0;
  font-size: 15px;
  line-height: 1.65;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

/* EV-8: clamped by height once script.js has measured it (without
   JavaScript the whole text stays readable); the fade only when the text
   really continues. */
.evd .evd-desc.is-clamped:not(.is-expanded) {
  max-height: 212px;
  overflow: hidden;
}

.evd .evd-desc.is-clamped.is-overflowing:not(.is-expanded) {
  -webkit-mask-image: linear-gradient(#000 60%, transparent);
  mask-image: linear-gradient(#000 60%, transparent);
}

.evd .evd-more {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 4px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--link);
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}

/* EV-3 is pending (#164) and Release 1 shows no map and nothing that looks
   like one (Ivan, JRN-7): «Як дістатися» is the address, the Google Maps
   route (opened only on the visitor's click) and «Скопіювати адресу». */
.evd-addr {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  margin-top: 16px;
}

.evd-addr__text {
  min-width: 0;
}

.evd-addr__text b {
  display: block;
  font-size: 17px;
  overflow-wrap: anywhere;
}

.evd-addr__text span {
  display: block;
  margin-top: 3px;
  font-size: 15px;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.evd-addr__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.evd .evd-route__long {
  display: none;
}

.evd [data-evd-copy-address][data-copied='true'] {
  border-color: var(--text);
}

.evd-side {
  display: grid;
  gap: 12px;
  align-content: start;
}

.evd-card {
  border-radius: 22px;
  background: var(--card);
}

.evd .evd-org {
  padding: 18px;
}

.evd .evd-org--empty {
  display: none;
}

.evd-org__top {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 10px;
}

.evd-org__ava {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 22px;
  background: #0b1020;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.5px;
}

[data-theme='dark'] .evd-org__ava {
  background: #e7edf7;
  color: #0b1020;
}

.evd-org__ava:empty {
  display: none;
}

.evd-org__name {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  overflow-wrap: anywhere;
}

/* C6 v1.2 (AC-C6-17): «Йдете самі?» as a C6 card, same tokens as the
   organizer card above it; script.js decides when it shows (future,
   offline, not archived) and owns the modal. */
.evd .evd-company {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 18px;
  border: 0;
  border-radius: 22px;
  background: var(--card);
}

.evd-company__top {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.evd-company__icon {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 22px;
  background: var(--evd-chip);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
}

.evd .evd-company .event-company__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
}

.evd-company__lead {
  display: block;
  margin-bottom: 2px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--text);
}

.evd .evd-company .event-company__button {
  width: 100%;
}

/* ---------- «Схожі події»: carousel (Р3.3 / Р3.4) ---------- */

.evd .evd-similar {
  display: block;
  margin-top: 44px;
  scroll-margin-top: 90px;
}

.evd .evd-similar__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.evd .evd-similar .similar-events__controls {
  display: none;
  gap: 8px;
}

.evd-similar__tools {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Pause / resume of the drift (AC-C6-14, WCAG 2.2.2): on every width,
   also where the arrows are hidden. */
.evd .evd-similar__autoplay .evd-similar__icon-play,
.evd .evd-similar__autoplay[data-state='paused'] .evd-similar__icon-pause {
  display: none;
}

.evd .evd-similar__autoplay[data-state='paused'] .evd-similar__icon-play {
  display: block;
}

.evd .evd-similar .similar-events__control.evd-iconbtn {
  width: 44px;
  height: 44px;
}

/* C6 v1.3 (AC-C6-24, Ivan JRN-27): Pause / Resume is a quiet secondary
   control -- no border or fill, muted small icon, the same 44px target and
   focus ring; a soft background only on hover. It stays the one permanent
   way to stop the drift (WCAG 2.2.2). */
.evd .evd-similar .evd-similar__autoplay.evd-iconbtn {
  position: relative;
  border-color: transparent;
  border-radius: 12px;
  background: transparent;
  color: var(--muted);
}

.evd .evd-similar__autoplay .evd-icon {
  width: 16px;
  height: 16px;
}

@media (hover: hover) and (pointer: fine) {
  .evd .evd-similar .evd-similar__autoplay.evd-iconbtn:hover {
    border-color: transparent;
    background: var(--card);
    color: var(--text);
  }
}

/* 2 cards and the edge of a third on phones, swipe with snap; the edge
   fades (and moves left once scrolled to the end). */
.evd .evd-similar__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 12px) / 2.25);
  gap: 12px;
  margin-top: 14px;
  padding-bottom: 4px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent);
  mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent);
}

.evd .evd-similar__track::-webkit-scrollbar {
  display: none;
}

/* C6 v1.4 (AC-C6-25, Ivan JRN-28): only the RIGHT edge ever fades -- the
   44px mask above, whenever more cards lie to the right, also while the
   cards drift and loop. Never a left fade, in any state. At the last
   position (nothing to the right) and without overflow nothing fades. */
.evd .evd-similar__track[data-evd-at-end='true'] {
  -webkit-mask-image: none;
  mask-image: none;
}

.evd .evd-similar__track > * {
  scroll-snap-align: start;
  min-width: 0;
}

/* While the cards drift (modules/similar-autoscroll.mjs) snapping would
   pull them back to a card edge every frame. */
.evd .evd-similar__track[data-evd-autoscroll='on'] {
  scroll-snap-type: none;
}

/* C6 v1.2 (AC-C6-13): every card is as tall as the tallest one in the
   carousel (the grid row already stretches the items); the footer with
   price and button sits at the bottom (styles.css margin-top: auto), so
   buttons line up whatever the price, title or poster. Event page only. */
.evd .evd-similar__item {
  display: flex;
}

.evd .evd-similar__item > .ticket-card {
  flex: 1 1 auto;
}

/* ---------- mobile bottom panel (EV-10) ---------- */

.evd-sticky {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 45;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px calc(16px + env(safe-area-inset-bottom, 0px));
  background: var(--bg);
  border-top: 1px solid var(--line);
  box-shadow: var(--evd-sticky-shadow);
}

.evd-sticky__price {
  flex: 1;
  min-width: 0;
}

.evd-sticky__price small {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}

.evd-sticky__price b {
  display: block;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.2;
}

.evd-sticky__amount {
  display: inline-block;
}

.evd .evd-sticky .evd-iconbtn {
  width: 46px;
  height: 46px;
}

.evd .evd-sticky__cta {
  flex: none;
  min-height: 46px;
  padding: 0 16px;
  font-size: 15px;
}

/* C6 v1.2 (AC-C6-21): the price is never cut off. It keeps one line when
   it fits; a long range wraps after «DKK» (the amount itself only when it
   is wider than the column) instead of
   ending in «…». On narrow phones the label and the button get compact so
   a paid price keeps its room; a free event's «Безкоштовно» gives way to
   «Зареєструватися», which already says it (still read out). */
@media (max-width: 389px) {
  .evd-sticky {
    gap: 6px;
  }

  .evd-sticky__price small {
    display: none;
  }

  .evd-sticky__price b {
    font-size: 15px;
  }

  .evd .evd-sticky .evd-iconbtn {
    width: 44px;
    height: 44px;
  }

  .evd .evd-sticky__cta {
    padding: 0 12px;
    font-size: 13px;
  }

  .evd .evd-sticky__cta::after {
    display: none;
  }
}

@media (max-width: 409px) {
  .evd-sticky[data-evd-price-kind='free'] .evd-sticky__price {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .evd-sticky[data-evd-price-kind='free'] .evd-sticky__cta {
    flex: 1 1 auto;
  }
}

/* The panel's height is reserved at the end of the page whenever it can
   appear, so the footer is never covered and nothing jumps when it shows. */
body.evd-has-sticky {
  padding-bottom: calc(86px + env(safe-area-inset-bottom, 0px));
}

/* PAGES-SPEC 3: no «Нагору» while the panel is on screen. */
body.evd-sticky-on .back-to-top {
  display: none !important;
}

/* ---------- past event (EV-11) ----------
   .evd--past comes from the page module with the same Copenhagen rule as
   script.js, also when the event ends while the tab is open: the whole
   past state follows -- banner and «Схожі події» shown; buying, calendar,
   reminder and the bottom panel gone. */

.evd--past [data-calendar],
.evd--past [data-evd-sticky],
.evd--past [data-event-reminder],
.evd--past .event-sidebar__cta--ticket {
  display: none !important;
}

.evd--past .evd-pastbanner[data-past-banner] {
  display: flex !important;
}

.evd--past .event-sidebar__cta--similar {
  display: inline-flex !important;
}

/* ---------- tablet and desktop ---------- */

@media (min-width: 720px) {
  .evd-mini__label {
    display: inline;
  }

  .evd-mini,
  .evd .evd-mini.event-calendar__toggle {
    padding: 0 6px;
  }

  .evd .evd-route__long {
    display: inline;
  }

  .evd .evd-route__short {
    display: none;
  }

  .evd .evd-similar .similar-events__controls {
    display: inline-flex;
  }

  .evd .evd-similar__track {
    grid-auto-columns: calc((100% - 36px) / 3.2);
  }

  .evd-stub__actions {
    flex: 0 1 auto;
    flex-wrap: nowrap;
  }

  .evd-buy {
    flex: 0 0 auto;
    order: 0;
  }

}

@media (min-width: 900px) {
  .evd-wrap {
    padding-top: 18px;
  }

  .evd-top {
    grid-template-columns: 360px minmax(0, 1fr);
    gap: 36px;
    align-items: start;
    margin-top: 8px;
  }

  .evd-poster {
    height: 520px;
    border-radius: 24px;
    clip-path: inset(0 round 24px);
  }

  .evd-title {
    font-size: 44px;
    letter-spacing: -1.4px;
  }

  .evd-ticket {
    margin-top: 24px;
    border-radius: 24px;
  }

  .evd-meta {
    padding: 22px 26px;
    gap: 14px;
  }

  .evd-meta__icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
  }

  .evd-meta__text b,
  .evd .evd-meta__text b[hidden] + .evd-meta__place {
    font-size: 16px;
  }

  .evd-meta__text > span,
  .evd-meta__place {
    font-size: 14px;
  }

  .evd-stub {
    padding: 20px 26px 22px;
  }

  .evd .evd-price .event-sidebar__price {
    font-size: 24px;
  }

  .evd-h2 {
    font-size: 28px;
    letter-spacing: -0.7px;
  }

  .evd-desc {
    margin-top: 16px;
    font-size: 16px;
  }
}

@media (min-width: 1024px) {
  .evd-top {
    grid-template-columns: 440px minmax(0, 1fr);
    gap: 48px;
  }

  .evd-poster {
    height: 600px;
  }

  .evd-main {
    padding-top: 6px;
  }

  .evd-title {
    font-size: 52px;
    letter-spacing: -1.8px;
    line-height: 1.04;
  }

  .evd-body {
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 56px;
    margin-top: 64px;
  }

  .evd-section + .evd-section {
    margin-top: 48px;
  }

  .evd-side {
    gap: 16px;
  }

  .evd .evd-org {
    padding: 22px;
  }

  .evd-org__ava {
    width: 52px;
    height: 52px;
    border-radius: 26px;
    font-size: 17px;
  }

  .evd-org__name {
    font-size: 18px;
  }

  .evd .evd-company {
    padding: 22px;
  }

  .evd {
    padding-bottom: 0;
  }

  .evd .evd-similar {
    margin-top: 72px;
  }

  /* 4 cards and the edge of a fifth; arrows page by the visible width. */
  .evd .evd-similar__track {
    grid-auto-columns: calc((100% - 60px) / 4.25);
    gap: 20px;
    margin-top: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .evd *,
  .evd *::before,
  .evd *::after {
    scroll-behavior: auto !important;
    transition: none !important;
    animation: none !important;
  }
}