/* ============================================================
   Хронология сезона: события (обычное, нелорное, ключевое) и их карточки.
   Каркас, годы и хребет — season-chrono.css. Только токены tokens.css.
   ============================================================ */
.events { list-style: none; display: grid; gap: var(--space-5); margin: var(--space-5) 0 0; padding: 0; }
.ev { position: relative; display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: var(--space-1) var(--space-5); padding-left: calc(var(--spine-x) + 14px + var(--space-5)); padding-right: 40px; max-width: none; scroll-margin-top: calc(var(--stick) + 5rem); }
.ev__dot { position: absolute; left: calc(var(--spine-x) - 6px); top: 7px; width: 12px; height: 12px; border-radius: 50%; background: var(--bg); border: 2px solid var(--accent); }
.ev__date { padding-top: 2px; font-size: var(--fs-sm); font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.ev__body { min-width: 0; }
.ev__text { line-height: 1.65; }
.ev__src { margin-top: var(--space-2); font-size: var(--fs-xs); color: var(--text-faint); max-width: none; }
.ev__src a { display: inline-grid; place-items: center; min-width: 22px; height: 22px; margin-left: 4px; padding: 0 5px; border-radius: var(--r-sm); background: var(--surface-2); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.ev__src a:hover { background: var(--surface-3); color: var(--text); }
/* Клип момента — первый чип строки источников: тот же чип, янтарный треугольник «play» */
.ev__src a.ev__clip { display: inline-flex; gap: 5px; padding: 0 7px; }
.ev__clip svg { color: var(--accent); }

/* Копирование ссылки */
.ev__share { position: absolute; top: -2px; right: 0; display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: var(--r-full); color: var(--text-faint); opacity: 0; transition: opacity var(--dur-fast), background var(--dur-fast), color var(--dur-fast); }
.ev:hover .ev__share, .ev__share:focus-visible { opacity: 1; }
.ev__share:hover { background: var(--surface-2); color: var(--accent); }
.ev__share--key { top: calc(var(--space-2) + var(--space-3)); right: var(--space-3); }
@media (hover: none) { .ev__share { opacity: 1; } }

/* Нелорное событие: серая точка, приглушённый текст; в режиме «Только лор» скрыто */
.ev--nonlore .ev__dot { top: 9px; left: calc(var(--spine-x) - 4px); width: 8px; height: 8px; border: 0; background: var(--text-faint); }
.ev--nonlore .ev__date { color: var(--text-muted); font-weight: 600; }
.ev--nonlore .ev__text { color: var(--text-muted); font-size: var(--fs-sm); }
.chrono[data-filter="lore"] .ev--nonlore { display: none; }

/* Подсветка события после перехода по якорю */
.ev.is-flash .ev__text, .ev.is-flash .keycard { animation: ev-flash 1.6s var(--ease-out); }
@keyframes ev-flash { 0%, 30% { background-color: var(--accent-weak); } 100% { background-color: transparent; } }

/* Ключевое событие: ромб на хребте и карточка с кадром */
.ev--key { grid-template-columns: minmax(0, 1fr); padding-top: var(--space-2); padding-bottom: var(--space-2); padding-right: 0; }
.ev--key .ev__dot { top: calc(var(--space-2) + 18px); left: calc(var(--spine-x) - 8px); width: 16px; height: 16px; border-radius: 0; rotate: 45deg; background: var(--accent); border: 3px solid var(--bg); box-shadow: 0 0 0 1px var(--accent); }
.keycard { display: grid; grid-template-columns: 240px minmax(0, 1fr); align-items: start; gap: var(--space-5); padding: var(--space-4) var(--space-7) var(--space-4) var(--space-4); background: var(--surface-glass); border: 1px solid var(--border); border-radius: var(--r-lg); }
.keycard__media { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2); aspect-ratio: 16 / 10; padding: var(--space-3); border: 1px dashed var(--border-strong); border-radius: var(--r-md); background: linear-gradient(135deg, var(--accent-weak), transparent 60%), var(--surface-2); color: var(--text-faint); font-size: var(--fs-xs); font-weight: 500; text-align: center; }
.keycard:not(:has(.keycard__media)) { grid-template-columns: minmax(0, 1fr); }
.keycard__media--img { padding: 0; border-style: solid; overflow: hidden; background: var(--surface-2); }
.keycard__media--img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.keycard__body { min-width: 0; }
.keycard__body .ev__date { padding: 0; color: var(--accent); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.02em; }
.keycard__title { margin: var(--space-1) 0 var(--space-2); font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 700; line-height: var(--lh-tight); letter-spacing: 0.01em; }
.keycard .ev__text { font-size: var(--fs-sm); color: var(--text-muted); }

@media (max-width: 768px) {
    .ev { grid-template-columns: minmax(0, 1fr); padding-left: calc(var(--spine-x) + 6px + var(--space-4)); padding-right: 36px; }
    .ev--key { padding-right: 0; }
    .ev__share { width: var(--tap-min); height: var(--tap-min); }
    .ev__share--float { top: -10px; right: -8px; }
    /* Чипы источников: видимые 28px, зона нажатия 44px за счёт псевдоэлемента (шаг 44px, без наложения) */
    .ev__src { margin-top: var(--space-3); font-size: var(--fs-sm); }
    .ev__src a { position: relative; min-width: 28px; height: 28px; margin-left: var(--space-4); }
    .ev__src a::after { content: ""; position: absolute; inset: -8px; }
    .keycard { grid-template-columns: minmax(0, 1fr); padding: var(--space-3); gap: var(--space-3); }
}