/* ============================================================
   events-mobile.css — выделенная мобильная вёрстка (≤640px).
   Источник истины: design-reference/events/mobile.jsx (390x820).
   Грузится глобально после events-blocks. Десктоп НЕ трогает —
   всё внутри @media (max-width:640px), кроме таб-бара (скрыт по умолч.).
   ============================================================ */

/* Нижний таб-бар по умолчанию скрыт (виден только в мобильном медиа). */
.ev-tabbar { display: none; }

@media (max-width: 640px) {

  /* ───── Контейнер: мобильные поля 16px (десктоп — 28px) ───── */
  .ev-container { padding-left: 16px; padding-right: 16px; }

  /* ───── Вертикальные отступы секций: десктоп 84/56px → телефон даёт
     огромные пустоты при листании. Сжимаем до оптимальных. ───── */
  .ev-section { padding: 40px 0; }
  .ev-section-sm { padding: 28px 0; }

  /* ───── Заголовки: десктопные .h1/.h2/.h3 (56/36/24) велики на телефоне. ───── */
  .ev-scope .h1 { font-size: 38px; }
  .ev-scope .h2 { font-size: 26px; }
  .ev-scope .h3 { font-size: 20px; }

  /* ───── Инлайн-гриды без мобильного стека → схлопываем (inline → нужен !important).
     .aud-grid (0.8fr/1.2fr) вылезал за вьюпорт. ───── */
  .aud-grid { grid-template-columns: 1fr !important; gap: 24px !important; }

  /* ───── Узкие экраны (320–360): сетки с фикс-минимумом колонки (minmax 330/340px)
     держали колонку шире контейнера → клип контента. Форсим 1 колонку. ───── */
  .ev-grid { grid-template-columns: 1fr; }

  /* ───── Горизонтальные скроллеры форматов и спикеров (mobile.jsx) ─────
     flex + overflow-x:auto, bleed к краям экрана (margin -16 / padding 16),
     карточки фикс-ширины (flex-shrink:0) + scroll-snap. ───── */
  .pillar-grid, .spk-cards {
    display: flex; gap: 12px; overflow-x: auto; overflow-y: visible;
    margin: 0 -16px; padding: 2px 16px 10px;
    scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
    grid-template-columns: none;                 /* сброс grid-режима */
  }
  /* flex:0 0 Npx = жёсткая ширина (не min-width!) — иначе flex-элемент растёт
     до max-content и текст не переносится (карточка шире экрана). */
  .pillar-grid > .pillar { flex: 0 0 230px; min-width: 0; scroll-snap-align: start; }
  .spk-cards > .spk-card { flex: 0 0 280px; min-width: 0; scroll-snap-align: start; }
  .pillar:hover, .spk-card:hover { transform: none; }   /* без лифта на тач */
  /* Тонкий скроллбар вместо толстого scoped-дефолта. */
  .pillar-grid::-webkit-scrollbar, .spk-cards::-webkit-scrollbar { height: 4px; }
  /* Спикеры: фото-слот 4:3 сверху карточки (v1.1 CHANGELOG §4) вместо 64px-квадрата сбоку. */
  .spk-card-head { flex-direction: column; gap: 12px; align-items: stretch; }
  .spk-card-photo { width: 100%; height: auto; aspect-ratio: 4/3; border-radius: 12px; }

  /* ───── Программа: аккордеон (JS переносит .prog-list под свой .prog-tab) ─────
     Дни-карточки в столбик, расписание раскрывается под днём, шеврон крутится. */
  [data-prog-mode="accordion"] .prog-tabs { display: block; margin-bottom: 0; }
  [data-prog-mode="accordion"] .prog-tab {
    position: relative; width: 100%; text-align: left;
    border-radius: 14px; margin-bottom: 8px; padding-right: 42px;
  }
  [data-prog-mode="accordion"] .prog-tab::after {
    content: ''; position: absolute; right: 18px; top: 50%; width: 8px; height: 8px;
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: translateY(-70%) rotate(45deg); transition: transform .2s; opacity: 0.55;
  }
  [data-prog-mode="accordion"] .prog-tab[data-open="1"]::after { transform: translateY(-30%) rotate(-135deg); }
  /* Открытая карточка-день примыкает к расписанию (нижние углы прямые). */
  [data-prog-mode="accordion"] .prog-tab[data-open="1"] { margin-bottom: 0; border-radius: 14px 14px 0 0; }
  [data-prog-mode="accordion"] .prog-list { margin: 0 0 8px; border-radius: 0 0 14px 14px; border-top: 0; }
  /* Тайм-колонка плотнее на телефоне (96px → 60px). */
  .prog-item { grid-template-columns: 60px 1fr; gap: 12px; padding: 14px 16px; }

  /* Степперы количества: 36→40px (комфортный тап-таргет). */
  .co-qty button { width: 40px; height: 40px; }

  /* Countdown в desktop-hero (4 ячейки min-width:58) на узких форсил ширину
     grid-колонки hero → весь hero вылезал. Ужимаем ячейки (inline → !important). */
  .ev-hero [data-countdown] [data-cd] { min-width: 0 !important; padding-left: 6px !important; padding-right: 6px !important; }

  /* ───── Карточки-афиши (v1.1, CHANGELOG §4): вертикальная афиша с обложкой 16:9
     и плашкой-датой поверх. Разворот прежних компактных строк (подтверждён юзером). ───── */
  .ev-grid { gap: 14px; }
  .ev-card { flex-direction: column; border-radius: 16px; }
  .ev-card:hover { transform: none; box-shadow: var(--shadow-sm); }
  .ev-card-img, .ev-card-cover-fb { aspect-ratio: 16/9; }        /* мобайл — 16:9 */
  .ev-card-media .ev-ph { display: none; }
  /* Плашка-дата поверх обложки (как десктоп, компактнее). */
  .ev-card-date { top: 10px; left: 10px; padding: 6px 9px; }
  .ev-card-date-m { font-size: 10px; }
  .ev-card-date-d { font-size: 22px; }
  .ev-card-body { padding: 14px 14px 16px; min-width: 0; }
  .ev-card-title { font-size: 18px; line-height: 1.2; }
  .ev-card-sub { display: none; }                                /* описание скрываем — компактно */
  .ev-card-meta { margin: 8px 0 0; gap: 12px; font-size: 12px; }
  .ev-card-foot { margin-top: 12px; }

  /* ───── Мобильный топбар (MTopbar) ─────
     padding 8/16/10, blur(12), нижняя граница; лого слева, бургер справа.
     Высота ~54px вместо 72px → синхронизируем оффсет hero ниже.
     ВАЖНО: горизонтальный padding 16px ОБЯЗАН быть здесь — shorthand `padding`
     перебивает .ev-container{padding-left:16px} (та же специфичность, ниже в файле).
     Без 16px справа/слева лого прилипает к краю экрана. */
  .ev-header-inner { height: auto; min-height: 58px; padding: 8px 16px 10px; gap: 10px; }
  /* В топбаре только лого + бургер. Купить/Контакты убираем — покупка идёт
     через таб-бар «Билеты», sticky-CTA и кнопки в контенте. */
  .ev-header .btn-accent,
  .ev-header .btn-ghost { display: none !important; }
  /* Лого на мобайле — почти как на десктопе (40px), иначе детальная
     эмблема-крест в 30px нечитаема и выглядит блёклым пятном. Свап
     тёмная/светлая работает через data-dark/scrolled (оба файла валидны). */
  .ev-header .ev-logo-img { height: 40px; }
  .ev-header .ev-logo-badge { font-size: 9px; padding: 2px 6px; letter-spacing: 0.08em; }
  .ev-header .ev-logo { gap: 8px !important; }
  /* Круглый бургер 34px с подложкой (как в MTopbar). place-items:center —
     иконка по центру (display:grid без него прижимал svg к верху → «криво»). */
  .ev-header .ev-burger { width: 34px; height: 34px; border-radius: 100px; background: var(--bg-sunk); display: grid; place-items: center; padding: 0; }
  .ev-header .ev-burger svg { width: 19px; height: 19px; }
  .ev-header[data-dark="1"][data-scrolled="0"] .ev-burger { background: oklch(1 0 0 / 0.14); }

  /* На тёмном hero шапка ведёт себя КАК НА ДЕСКТОПЕ: прозрачная (баннер просвечивает,
     белый логотип) пока в пределах hero, кремовая — когда прокрутил НИЖЕ hero.
     Порог переключения = высота hero (логика в events.js initHeaderScroll), а НЕ 20px,
     иначе iOS-строка-адреса сразу даёт кремовую полосу над тёмным баннером.
     Никаких тёмных-скрим заплаток — они давали «расслоение по цвету». */

  /* Hero подныривает под мобильный топбар (58px вместо 72px). */
  .ev-hero { margin-top: -58px; padding-top: 58px; }

  /* ───── Нижний таб-бар (MTab) ─────
     fixed внизу вьюпорта (в полностраничном документе скролл-контейнер —
     это сам документ, поэтому fixed, а не sticky как в прототип-фрейме).
     padding 8/6/22 (низ освобождает home-indicator), blur(12), верх. граница. */
  .ev-tabbar {
    display: flex; justify-content: space-around; align-items: stretch;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
    padding: 8px 6px calc(22px + env(safe-area-inset-bottom, 0px));
    background: oklch(0.98 0.012 85 / 0.94);
    backdrop-filter: blur(12px) saturate(160%);
    border-top: 1px solid var(--line);
  }
  /* Цвет иконки наследуется через currentColor (stroke=currentColor у .ev-i).
     Селектор .ev-tabbar .ev-tabbar-item (0,2,0) перебивает .ev-scope a{color:inherit}
     (0,1,1) — иначе пункты наследуют --ink вместо --ink-mute. */
  .ev-tabbar .ev-tabbar-item {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    flex: 1; text-decoration: none; color: var(--ink-mute);
    padding: 2px 0; transition: color .15s;
  }
  .ev-tabbar .ev-tabbar-label { font-size: 10px; font-weight: 600; }
  .ev-tabbar .ev-tabbar-item[data-active="1"] { color: var(--forest); }

  /* Контент не должен прятаться за фикс. таб-баром. */
  body.ev-tabbar-on { padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px)); }
}

/* Таб-бар только для мобильного: на >640 скрыт принудительно. */
@media (min-width: 641px) {
  .ev-tabbar { display: none !important; }
}

/* ============================================================
   ХАБ (/) — мобильные блоки. Источник: mobile.jsx MHub.
   ============================================================ */

/* Мобильная featured-карточка скрыта на десктопе (там — .hub-feature). */
.hub-feature-m { display: none; }

@media (max-width: 640px) {
  /* Поля секции hub-hero под мобильный отступ (14px как в MHub). */
  .hub-hero { padding: 14px 0 8px; }

  /* Десктопный featured прячем, показываем компактную карточку. */
  .hub-feature { display: none; }
  .hub-feature-m {
    display: block; position: relative; overflow: hidden;
    border-radius: 20px; padding: 18px; color: #fff;
    background: linear-gradient(160deg, oklch(0.26 0.03 145), oklch(0.18 0.02 40));
  }
  .hub-feature-m-pill {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 11px; font-weight: 700;
    background: oklch(1 0 0 / 0.14); padding: 4px 10px; border-radius: 100px;
  }
  .hub-feature-m-title {
    display: block; text-decoration: none; color: #fff;
    font-family: var(--font-display); font-size: 32px; font-weight: 500;
    line-height: 1; margin: 12px 0 6px; letter-spacing: -0.01em;
  }
  .hub-feature-m-title .ac { color: var(--ochre); font-style: italic; }
  .hub-feature-m-meta { font-size: 13px; color: oklch(0.85 0.02 85); line-height: 1.4; }
  .hub-feature-m-tiles { display: flex; gap: 8px; margin-top: 16px; }
  .hub-feature-m-tile { background: oklch(1 0 0 / 0.08); border-radius: 10px; padding: 8px 12px; flex: 1; min-width: 0; }
  .hub-feature-m-tile-v { font-family: var(--font-mono); font-weight: 700; font-size: 17px; line-height: 1.1; }
  .hub-feature-m-tile-l { font-size: 10px; color: oklch(0.75 0.02 85); margin-top: 2px; }
}

/* ============================================================
   УЗКИЕ ЭКРАНЫ ≤380px (iPhone SE / малые Android): на 390 эти секции
   выглядят ок (aud-cols 2-кол), а на 320 контент клипался.
   ============================================================ */
@media (max-width: 380px) {
  /* Аудитория: 2-кол сетка не влезает на 320 → одна колонка. */
  .aud-cols { grid-template-columns: 1fr !important; }
  /* Длинные кнопки (white-space:nowrap) форсили ширину блока (gala
     «Добавить гала-ужин · 15 000 ₽») → разрешаем перенос текста. */
  .ev-scope .btn { white-space: normal; }
}