/*
 * modern.css — современный слой оформления публичных страниц (v3.4).
 * Прогрессивное улучшение: всё новое (view transitions, scroll-driven animations,
 * text-wrap, :has) включается только в браузерах, которые это поддерживают,
 * остальные видят обычную страницу.
 */

/* ---------- База ---------- */
:root {
    --mx-accent: #6d28d9;
    --mx-accent-2: #8b5cf6;
    --mx-soft: #f5f3ff;
    --mx-ink: #1f2937;
    --mx-radius: 14px;
    --mx-dock-h: 64px;
    --mx-safe-b: env(safe-area-inset-bottom, 0px);
}
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 80px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { -webkit-tap-highlight-color: rgba(109, 40, 217, .12); text-rendering: optimizeLegibility; }
h1, h2, h3 { text-wrap: balance; }
p, li, .event-description { text-wrap: pretty; }
img { max-width: 100%; height: auto; }
:focus-visible { outline: 3px solid rgba(124, 58, 237, .55); outline-offset: 2px; border-radius: 6px; }
::selection { background: #ddd6fe; color: #2e1065; }

/* Плавные переходы между страницами (Chrome/Edge 126+, Safari 18.2+) */
@view-transition { navigation: auto; }
.event-main-photo { view-transition-name: event-photo; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .22s; }
@media (prefers-reduced-motion: reduce) {
    @view-transition { navigation: none; }
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Длинные ленты рисуются только по мере прокрутки */
.event-card, .timeline-item { content-visibility: auto; contain-intrinsic-size: auto 260px; }

/* ---------- Прогресс чтения события (scroll-driven animation) ---------- */
.mx-progress { position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 60; pointer-events: none; transform-origin: 0 50%; transform: scaleX(0);
    background: linear-gradient(90deg, var(--mx-accent), #22c55e); }
@supports (animation-timeline: scroll()) {
    .mx-progress { animation: mx-grow linear both; animation-timeline: scroll(root); }
    @keyframes mx-grow { to { transform: scaleX(1); } }
}
@supports not (animation-timeline: scroll()) { .mx-progress { display: none; } }

/* ---------- Галерея события ---------- */
.event-hero-photo { position: relative; cursor: zoom-in; }
.event-photo-count { position: absolute; right: 12px; bottom: 12px; background: rgba(17, 24, 39, .72); color: #fff;
    padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.event-gallery__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .65rem; }
.event-gallery__item { display: block; border-radius: 12px; overflow: hidden; background: #fff; border: 1px solid #e5e7eb; aspect-ratio: 4 / 3; cursor: zoom-in; }
.event-gallery__item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; }
.event-gallery__item:hover img { transform: scale(1.05); }
@media (max-width: 640px) {
    /* На телефоне — лента с прокруткой пальцем и «примагничиванием» */
    .event-gallery__grid { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 72%; overflow-x: auto;
        scroll-snap-type: x mandatory; overscroll-behavior-x: contain; padding-bottom: .4rem; scrollbar-width: none; }
    .event-gallery__grid::-webkit-scrollbar { display: none; }
    .event-gallery__item { scroll-snap-align: start; }
}
.event-lightbox { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); touch-action: pan-y; }
.event-lightbox img { transition: opacity .2s ease; }

/* ---------- Кнопка «Дополнить это событие» ---------- */
.event-supplement-btn { display: inline-flex; align-items: center; gap: .85rem; padding: .85rem 1.15rem; border-radius: var(--mx-radius);
    background: linear-gradient(135deg, #f5f3ff, #ede9fe); border: 1px solid #ddd6fe; color: #4c1d95; text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease; max-width: 100%; }
.event-supplement-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(109, 40, 217, .15); }
.event-supplement-btn i { font-size: 1.35rem; color: var(--mx-accent); }
.event-supplement-btn span { display: flex; flex-direction: column; line-height: 1.25; }
.event-supplement-btn small { color: #6b7280; font-size: .82rem; }

/* Системная кнопка «Поделиться» (Web Share API) — показывается скриптом, если поддерживается */
.native-share-btn[hidden] { display: none !important; }

/* ---------- Нижняя панель навигации на телефоне ---------- */
.m-dock { display: none; }
@media (max-width: 768px) {
    body { padding-bottom: calc(var(--mx-dock-h) + var(--mx-safe-b)); }
    .m-dock { position: fixed; z-index: 70; left: 8px; right: 8px; bottom: calc(8px + var(--mx-safe-b)); height: var(--mx-dock-h);
        display: grid; grid-template-columns: repeat(5, 1fr); align-items: stretch;
        background: rgba(255, 255, 255, .86); backdrop-filter: saturate(1.6) blur(14px); -webkit-backdrop-filter: saturate(1.6) blur(14px);
        border: 1px solid rgba(221, 214, 254, .9); border-radius: 20px; box-shadow: 0 12px 32px rgba(76, 29, 149, .18); }
    .m-dock__item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: #6b7280;
        text-decoration: none; font-size: 11px; font-weight: 600; min-height: 44px; border-radius: 16px; margin: 6px 3px; }
    .m-dock__item i { font-size: 18px; }
    .m-dock__item.is-active { color: var(--mx-accent); background: #f5f3ff; }
    .m-dock__item:active { transform: scale(.94); }
    /* кнопка «наверх» поднимается над панелью */
    a[aria-label="Наверх"], #scrollTopBtn, .scroll-top { bottom: calc(var(--mx-dock-h) + 20px + var(--mx-safe-b)) !important; }
    /* удобные для пальца элементы */
    .pagination-link, .filter-select { min-height: 44px; }
    input, select, textarea { font-size: 16px !important; } /* без автоувеличения на iPhone */
    .event-description { font-size: 1.04rem; line-height: 1.75; }
}
@media (display-mode: standalone) { .m-dock { bottom: calc(10px + var(--mx-safe-b)); } }

/* ---------- Печать ---------- */
@media print { .m-dock, .mx-progress, .event-supplement-btn { display: none !important; } }