:root {
      --text-xs: clamp(0.75rem, 0.72rem + 0.2vw, 0.875rem);
      --text-sm: clamp(0.875rem, 0.84rem + 0.25vw, 1rem);
      --text-base: clamp(1rem, 0.96rem + 0.25vw, 1.125rem);
      --text-lg: clamp(1.125rem, 1rem + 0.7vw, 1.5rem);
      --text-xl: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
      --text-2xl: clamp(2.25rem, 1.2rem + 3vw, 4.25rem);

      --space-1: 0.25rem;
      --space-2: 0.5rem;
      --space-3: 0.75rem;
      --space-4: 1rem;
      --space-5: 1.25rem;
      --space-6: 1.5rem;
      --space-8: 2rem;
      --space-10: 2.5rem;
      --space-12: 3rem;
      --space-16: 4rem;
      --space-20: 5rem;

      --color-bg: #fafafa;
      --color-surface: rgba(255, 255, 255, 0.86);
      --color-text: #1f241d;
      --color-text-muted: #4a5648;
      --color-border: rgba(24, 24, 24, 0.12);
      --color-primary: #214e34;
      --shadow-md: 0 12px 40px rgba(0, 0, 0, 0.14);
      --radius-lg: 1rem;
      --radius-xl: 1.5rem;
      --container: 1300px;
      --top-bar-height: 70px;
      --font-body: 'Mulish', sans-serif;
    }

    *, *::before, *::after { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    
    body {
      display: flex !important;
      flex-direction: column !important;
      min-height: 100vh !important;
      margin: 0;
      min-height: 100vh;
      overflow-x: hidden; /* Перенесли сюди, щоб меню вільно випадали за межі блоків */
      font-family: var(--font-body);
      font-size: var(--text-base);
      line-height: 1.6;
      color: var(--color-text);
      background-color: #f4f6f9;
      /* Мега-насичений геометричний хаотичний фон із десятками різнокаліберних випадкових фігур */
      background-image: url("data:image/svg+xml,%3Csvg width='1200' height='1200' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23b8c2cc' stroke-width='1.2' opacity='0.55'%3E%3Cpath d='M50 150 L250 80 M250 80 L180 400 M180 400 L550 320 M550 320 L400 80 M400 80 L700 180 M700 180 L850 450 M850 450 L550 320 M180 400 L100 650 M100 650 L450 580 M450 580 L350 850 M350 850 L800 750 M800 750 L850 450 M450 580 L750 520 M750 520 L800 750 M50 150 L100 650' /%3E%3Cpath d='M900 100 L950 300 M950 300 L750 200 M50 850 L200 950 M600 900 L850 920 M950 300 L1100 150 L900 400 L750 520 M100 650 L50 850 M350 850 L200 950 M800 750 L1050 800 L850 920 M300 500 L500 750 L700 600 M150 250 L450 220 L600 50' /%3E%3Ccircle cx='50' cy='150' r='4' fill='%23b8c2cc' /%3E%3Ccircle cx='250' cy='80' r='6' fill='%23b8c2cc' /%3E%3Ccircle cx='180' cy='400' r='3' fill='%23b8c2cc' /%3E%3Ccircle cx='550' cy='320' r='5' fill='%23b8c2cc' /%3E%3Ccircle cx='400' cy='80' r='4' fill='%23b8c2cc' /%3E%3Ccircle cx='700' cy='180' r='5' fill='%23b8c2cc' /%3E%3Ccircle cx='850' cy='450' r='6' fill='%23b8c2cc' /%3E%3Ccircle cx='100' cy='650' r='4' fill='%23b8c2cc' /%3E%3Ccircle cx='450' cy='580' r='5' fill='%23b8c2cc' /%3E%3Ccircle cx='350' cy='850' r='3' fill='%23b8c2cc' /%3E%3Ccircle cx='800' cy='750' r='6' fill='%23b8c2cc' /%3E%3Ccircle cx='750' cy='520' r='4' fill='%23b8c2cc' /%3E%3Ccircle cx='1100' cy='150' r='4' fill='%23b8c2cc' /%3E%3Ccircle cx='900' cy='400' r='5' fill='%23b8c2cc' /%3E%3Ccircle cx='1050' cy='800' r='6' fill='%23b8c2cc' /%3E%3Ccircle cx='150' cy='1050' r='5' fill='%23b8c2cc' /%3E%3Ccircle cx='300' cy='250' r='45' stroke-dasharray='5 5' /%3E%3Ccircle cx='750' cy='200' r='30' /%3E%3Ccircle cx='750' cy='200' r='35' stroke-dasharray='2 2' /%3E%3Ccircle cx='500' cy='600' r='90' stroke-dasharray='1 6' /%3E%3Ccircle cx='120' cy='900' r='12' /%3E%3Ccircle cx='920' cy='720' r='20' stroke-dasharray='6 3' /%3E%3Ccircle cx='620' cy='70' r='15' /%3E%3Ccircle cx='880' cy='880' r='25' stroke-dasharray='3 6' /%3E%3Ccircle cx='1050' cy='250' r='18' stroke-dasharray='4 4' /%3E%3Ccircle cx='250' cy='650' r='55' stroke-dasharray='1 8' /%3E%3Ccircle cx='950' cy='1050' r='40' /%3E%3Ccircle cx='400' cy='1100' r='22' stroke-dasharray='8 4' /%3E%3Cpath d='M30 40 h10 M35 35 v10 M920 80 h8 M924 76 v8 M500 200 h12 M506 194 v12 M150 500 h8 M154 496 v8 M620 450 h10 M625 445 v10 M850 640 h8 M854 636 v8 M250 780 h10 M255 775 v10 M680 850 h12 M686 844 v12 M400 950 h8 M404 946 v8 M1050 600 h10 M1055 595 v10 M200 1150 h8 M204 1146 v8 M750 1100 h12 M756 1094 v12 M50 50 h8 M54 46 v8 M1150 400 h10 M1155 395 v10 M350 480 h10 M355 475 v10' /%3E%3Crect x='60' y='300' width='14' height='14' stroke-dasharray='2 2' /%3E%3Crect x='670' y='60' width='10' height='10' /%3E%3Crect x='580' y='780' width='20' height='20' stroke-dasharray='4 2' /%3E%3Crect x='1000' y='450' width='16' height='16' stroke-dasharray='3 3' /%3E%3Crect x='420' y='950' width='12' height='12' /%3E%3Crect x='850' y='50' width='25' height='8' stroke-dasharray='2 2' /%3E%3Cpath d='M800 300 h15 v15 M150 200 v-15 h15 M300 680 h-10 v10 M1100 900 h-15 v-15 M100 1000 v15 h15 M950 550 l10 -10 l10 10' /%3E%3C/g%3E%3C/svg%3E");
      background-attachment: fixed;
    }

    .site-shell {
  position: relative;
/* БЕЗ z-index навмисно. Разом із position: relative він робив із оболонки
   стековий контекст, і всі попапи сторінки — а вони лежать усередині неї —
   важили назовні рівно 100, хоч би скільки мали власного z-index. Нижня
   панель кнопок PWA (.bottom-nav, 2500) — прямий нащадок body, тож
   перекривала їх усі: модалку деталей події, організатора, авторизацію,
   кастомні селекти й пікери. Замір у браузері: elementFromPoint у центрі
   панелі при відкритій модалці віддавав панель, а після зняття z-index —
   модалку. Позиціювання нащадків не постраждало: його тримає position.
   Панель лишається над вмістом сторінки й далі — найбільший z-index
   всередині оболонки це 50 (.events-main-grid), а хедер (2000) і так був
   нижчий за панель. */
  background: transparent;
  flex: 1 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 100vh; /* Розтягуємо оболонку на весь екран */
}

    .header-loader-frame {
      position: fixed;
      inset: 0 0 auto 0;
      width: 100%;
      height: 94px;
      border: 0;
      z-index: 2000;
      display: block;
    }

    .footer-frame {
  width: 100%;
  height: 385px;
  border: 0;
  display: block;
  background: transparent;
  flex-shrink: 0 !important;
  margin-top: auto !important;
  position: relative;
  z-index: 1;
}

    .content {
  padding-top: var(--top-bar-height);
  position: relative;
  flex: 1; /* Змушуємо контент заповнити весь вільний простір, відштовхуючи футер вниз */
}

    /* Видалили .content::before, щоб він не перекривав геометричний фон body */
    
    .container {
      width: min(calc(100% - 32px), var(--container));
      margin: 0 auto;
      position: relative;
      z-index: 1;
      /* Зменшено верхній відступ з 3rem до 1.5rem, щоб він ідеально збігався з головною сторінкою */
      padding: 1.5rem 0 3rem; 
    }

    .profile-header {
      display: flex;
      align-items: center;
      gap: 1.1rem;
      margin-bottom: 2rem;
      padding: 1.25rem;
      background: #ffffff;
      border: 1px solid rgba(0, 0, 0, 0.08);
      border-radius: 8px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    }
    
    /* ... ваші інші стилі ... */
    
    .events-summary-card {
      border: 1px solid rgba(0, 0, 0, 0.08);
      border-radius: 8px;
      background: #ffffff;
      padding: 1.15rem;
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
    }
    
    /* ... ваші інші стилі ... */
    
    .filter-panel {
      border: 1px solid rgba(0, 0, 0, 0.08);
      border-radius: 8px;
      background: #ffffff;
      box-shadow: 0 10px 28px rgba(0, 0, 0, 0.05);
      padding: 1.25rem;
      display: grid;
      gap: 1rem;
    }
    
    /* ... ваші інші стилі ... */
    
    .event-card {
      border: 1px solid rgba(0, 0, 0, 0.08);
      border-radius: 8px;
      background: #ffffff;
      box-shadow: 0 10px 28px rgba(0, 0, 0, 0.05);
      overflow: hidden;
    }

    /* Стилі сторінки подій */
    .events-layout {
      display: grid;
      gap: 1.5rem;
    }
    /* flex:1;min-height:0 — усередині .events-stats-card (тепер flex-колонка,
       правило вище файлу): плитки заповнюють ВСЮ вільну висоту картки (не
       лишаючи порожнечі знизу), а grid-рядки плиток (2 ряди по 2, inline
       grid-template-columns у events/index.html.erb) за замовчуванням
       align-content:stretch розтягуються порівну — усі 4 плитки виходять
       однакової висоти, не лише кожна пара в своєму ряду. */
    .events-summary {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 1rem;
      flex: 1;
      min-height: 0;
    }
    
    .events-summary-card strong {
      display: block;
      color: #0851b8;
      font-size: 1.4rem;
      line-height: 1;
      font-weight: 900;
    }
    .events-summary-card span {
      display: block;
      margin-top: 0.35rem;
      color: #4a5648;
      font-size: 0.82rem;
      font-weight: 800;
    }
    
    .filter-grid {
      display: grid;
      /* Фіксовані 4 колонки (не auto-fit) — щоб .adv-filters (events_filters.css)
         міг клампити висоту рівно під ОДИН рядок незалежно від ширини: рядок
         завжди містить РІВНО стільки полів, скільки задає ця сітка на поточній
         ширині (4 десктоп → 3 планшет → 2 телефон, медіа-запити нижче), без
         "сирітського" останнього поля, що переносилось би саме собою. */
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 0.85rem;
      /* Без цього рядок-помилки (.field-error-msg) в одному полі за замовчуванням
         (align-items: stretch) розтягував/зсував СУСІДНІ поля того самого рядка
         замість того, щоб просто зробити рядок вищим і зсунути НАСТУПНІ рядки
         вниз. Те саме виправлення, що для .filter-grid у кабінеті ("Мої події"). */
      align-items: start;
    }
    /* ПРОБУВАЛИ container-query (@container) тут — БУДЬ-ЯКЕ використання
       container-type на цій сторінці (перевірено на #event-filter-panel І на
       .adv-filters окремо) ламало мобільний viewport: document.documentElement.
       clientWidth/scrollWidth розходились із window.innerWidth (наприклад
       500 проти 517px), браузер вважав сторінку ширшою за екран і масштабував
       усе — position:fixed елементи (шапка, модалки) "відʼїжджали" від правого
       краю, і чим вужчий екран, тим більше. Це поведінка рушія (чи цієї тестової
       обгортки Chrome), не помилка в конкретному селекторі — тому звичайні
       viewport-медіа-запити, підібрані під ДВА режими (сайдбар "Останні
       переглянуті" ще поруч, чи вже під блоком):
       - 981-1310px (сайдбар ще поруч, events-main-grid лишається 2-колонковим
         — форма вужча за viewport десь на ~330px, бо сайдбар займає місце):
         3 колонки раніше, ніж без сайдбара.
       - ≤980px (сайдбар уже під блоком, форма ≈ вся ширина контейнера):
         власні, вужчі пороги 3→2. */
    /* .event-btn дає синю тінь за замовчуванням (box-shadow у global.css) — на
       Скасувати вона зайва (кнопка вже червона), і в спокійному (не hover/
       active) стані на БУДЬ-ЯКІЙ ширині екрана, не лише ≤552px (те
       медіа-запитне правило нижче лишається — для симетрії з рештою файлу). */
    .btn-cancel-event {
      box-shadow: none !important;
    }
    @media (min-width: 981px) and (max-width: 1310px) {
      .filter-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    }
    @media (max-width: 832px) {
      .filter-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    }
    @media (max-width: 552px) {
      .filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }
    .filter-field {
      display: grid;
      gap: 0.35rem;
    }
    .filter-field label {
      color: #4a5648;
      font-size: 0.72rem;
      font-weight: 900;
      letter-spacing: 0.07em;
      text-transform: none;
    }
    .filter-field input,
    .filter-field select {
      min-height: 40px;
      border: 1px solid rgba(0, 0, 0, 0.12); /* Прибрали синю рамку */
      border-radius: 8px;
      background: rgba(255,255,255,0.94);
      color: #1f241d;
      font: inherit;
      font-size: 0.88rem;
      font-weight: 700;
      padding: 0.5rem 0.75rem;
      outline: none;
    }
    .filter-actions {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.75rem;
      flex-wrap: wrap;
    }
    .filter-result-count {
      color: #0851b8;
      font-size: 0.88rem;
      font-weight: 900;
    }

    .event-list {
      display: grid;
      gap: 0.85rem;
    }
    
    .event-card-main {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 1rem;
      padding: 1rem;
    }
    .event-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 0.45rem;
      margin-bottom: 0.65rem;
    }
    .event-submeta {
      display: flex;
      flex-wrap: wrap;
      gap: 0.45rem;
      margin-bottom: 0.5rem;
    }
    .event-formatmeta {
      display: flex;
      flex-wrap: wrap;
      gap: 0.45rem;
      margin-bottom: 0.85rem;
    }

    /* .event-btn дає синю тінь за замовчуванням (box-shadow у global.css) — на
       Скасувати вона зайва, кнопка вже червона. Обидві версії (іконка біля
       лічильника й повна на телефоні) мають цей клас. Дубль без медіа-запиту
       нижче (той самий рецепт) — це правило тут ДІЄ ЛИШЕ ≤552px, юзер бачив
       тінь на ширшому екрані (планшет/десктоп), де воно не застосовується. */
    .btn-cancel-event {
      box-shadow: none !important;
    }
    /* Дубль чіпа організатора — видно ЛИШЕ на телефоні (events.css ≤640px
       вмикає його й ховає оригінал event-meta-desktop). За замовчуванням
       (десктоп/планшет) прихований, інакше показувались би обидві копії. */
    .event-meta-phone {
      display: none;
    }
    .event-side {
      width: 170px;
      /* Раніше display:grid + gap:0.55rem між прямими дітьми (лічильник/стать/
         дії), а «статус» сидів усередині .event-actions. Тепер статус —
         окрема пряма дитина (щоб на телефоні стати поруч зі статтю у
         2-колонковій сітці), тож інтервали тут — явні margin-bottom на
         кожній дитині (events/_event.html.erb), а не контейнерний gap:
         інакше довелось би рахувати подвійний відступ навколо
         винесеного статусу. */
      display: block;
    }
   
    /* event-actions — grid: Деталі/Редагувати/Скасувати/дія — окремі прямі
       grid-item'и (не вкладені flex-обгортки), бо групуються в рядки ІНАКШЕ
       на десктопі й на телефоні/планшеті (≤900px нижче) — іменовані area
       переставляють елементи між рядками без дублювання розмітки Деталі
       (усі data-атрибути й onclick, _event.html.erb). Без --has-editcancel (нема що
       редагувати) — Деталі просто над дією, обидва на всю ширину. */
    .event-actions {
      display: grid;
      /* minmax(0,1fr), НЕ голий 1fr — той самий гейтч, що й у .filter-grid/
         .events-main-grid (коментарі вище файлу): голий fr-трек не стискається
         нижче min-content дитини (тут — ширини тексту «Деталі»), тож три
         "рівні" колонки нижче (--has-editcancel) виходили б нерівними. */
      grid-template-columns: minmax(0, 1fr);
      grid-template-areas: "details" "action";
      gap: 0.45rem;
      /* align-content:start — без цього (дефолт grid: normal, що для контейнера
         з ВИЗНАЧЕНОЮ висотою рахується як stretch) рядок(и) розтягуються на
         будь-яку зайву висоту, що каскадом доходить сюди від .event-list
         (grid, align-items:stretch за замовчуванням розтягує картки в рядку
         до найвищої — організаторська картка вища через зайвий рядок
         editcancel, і БЕЗ цього правила сусідня, коротша картка мовчки
         "успадковує" ту зайву висоту в кнопки Деталі/дія, вони стають вищими
         за 38px, хоч самі по собі рівно такі самі за розміткою). start —
         рядки лишаються природної висоти незалежно від того, скільки зайвого
         місця дав .event-side (сама картка все одно розтягнута рівно). */
      align-content: start;
    }
    .event-details-btn {
      grid-area: details;
    }
    .event-actions-row2 {
      grid-area: action;
    }
    /* Закладка-зірка — квадрат 38px ПРАВОРУЧ від «Деталі», у тому самому рядку
       (раніше — круглий значок в абсолютному куті картки). Своя колонка
       з'являється лише разом із кнопкою (модифікатор --has-bookmark ставить
       _event.html.erb), інакше в гостя лишалась би порожня 38px-щілина.
       З --has-editcancel не перетинається ніколи: закладку бачить лише
       НЕ-організатор, а Ред./Скас. — лише організатор. */
    .event-actions-bookmark {
      grid-area: bookmark;
      display: block;
      min-width: 0;
    }
    .event-actions--has-bookmark {
      grid-template-columns: minmax(0, 1fr) 38px;
      grid-template-areas: "details bookmark" "action action";
    }
    /* Є що редагувати — Деталі звужується й ділить рядок 1 з Ред./Скас., дія
       лишається окремим рядком 2 на всю ширину. Ред./Скас. — квадрат 38px
       (== висота .event-btn, та сама, що в Деталі) замість рівної третини:
       іконці однаково затісно під текст, а квадрат займає МЕНШЕ місця, ніж
       третина колонки, — решту віддаємо Деталі (minmax(0,1fr) росте на
       залишок), і в неї реально стає ширше, а не так само тісно. */
    .event-actions--has-editcancel {
      grid-template-columns: minmax(0, 1fr) 38px 38px;
      grid-template-areas: "details editcancel editcancel" "action action action";
    }
    /* min-width:0 — grid-item (не лише track) теж має неявний min-width:auto
       (== ширина вмісту), той самий гейтч, що й з голим 1fr на треку вище:
       без цього обгортка відмовлялась стискатись нижче ширини свого вмісту
       (двох кнопок-flex із текстом) і вилазила за межі своєї grid-area. */
    .event-actions-editcancel {
      grid-area: editcancel;
      display: flex;
      gap: 0.45rem;
      min-width: 0;
    }
    /* Ред./Скас. мають inline width:100% (успадковано з мобільної розмітки,
       де це просто "на всю ширину рядка") — усередині ЦЬОГО flex-контейнера
       (2 кнопки в рядок) width:100% на кожній робить flex-basis:100% для
       ОБОХ одразу, і друга кнопка вилазить за межі замість поділу навпіл.
       flex:1 1 0 (basis:0, не auto) + width:auto ігнорує inline width і
       ділить порівну незалежно від довжини тексту "Редагувати"/"Скасувати".
       min-width:0 — той самий гейтч, що й на самій .event-actions-editcancel
       вище: без нього кожна кнопка теж відмовлялась стискатись нижче
       ширини свого тексту. */
    .event-actions-editcancel .event-btn {
      flex: 1 1 0;
      width: auto;
      min-width: 0;
    }
    /* 38px квадрат — досить для самої іконки, замало для іконки+тексту
       («Редагувати»/«Скасувати» не влазять і не повинні переноситись у
       2 рядки, збиваючи висоту рядка). Текст ховаємо (лишається лише іконка —
       той самий підхід, що мав старий event-side-editcancel-desktop). Лише
       Ред./Скас. (не Деталі поруч — та звільнене місце й забирає, тексту їй
       вистачає); лише в цій розкладці: на телефоні/планшеті (≤900px нижче)
       той самий рядок ширший (половина картки), тексту вистачає й Ред./
       Скас. — повертаємо його там. */
    .event-actions--has-editcancel .event-actions-editcancel .event-btn-label {
      display: none;
    }
    /* Іконка мала inline margin-right:0.3rem — відступ ПЕРЕД текстом (щоб не
       тулився впритул). Текст сховано вище, а margin інлайновий і без нього
       нікуди не дівається — центрування (justify-content:center на .event-btn)
       рахує іконку РАЗОМ із цим невидимим відступом, тож сама іконка
       (не порожній простір) виходить трохи лівіше центру квадрата. */
    .event-actions--has-editcancel .event-actions-editcancel .event-btn svg {
      margin-right: 0 !important;
    }

    .event-load-more-row {
      display: flex;
      justify-content: center;
      margin-top: 0.4rem;
    }
    /* === НУМЕРАЦІЯ СТОРІНОК (ПАГІНАЦІЯ) === */
    .pagination-row {
      display: flex; justify-content: center; align-items: center;
      gap: 0.5rem; margin-top: 1.5rem; width: 100%; flex-wrap: wrap;
    }
    .pagination-btn {
      min-width: 28px; height: 28px; padding: 0 0.4rem;
      border: 1px solid rgba(8, 81, 184, 0.15); background: #fff; color: #4a5648;
      border-radius: 6px; font-family: var(--font-body); font-size: 0.78rem; font-weight: 800;
      cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
      transition: all 0.2s ease;
    }
    .pagination-btn:hover:not(:disabled) { background: rgba(8, 81, 184, 0.05); color: #0851b8; border-color: #0851b8; }
    .pagination-btn.active { background: #0851b8; color: #fff; border-color: #0851b8; }
    .pagination-btn:disabled { opacity: 0.4; cursor: default; }
   
  

    /* МЕГА-ОБ'ЄМНИЙ 3D ЧІП ОРГАНІЗАТОРА НА КАРТЦІ */
    .event-organizer-chip-3d {
      cursor: pointer;
      background: #ffffff !important;
      border: 1px solid #cce0ff !important;
      box-shadow: 0 3px 0 #d4e4f7, 0 4px 8px rgba(0,0,0,0.04) !important;
      display: inline-flex !important;
      align-items: center !important;
      gap: 0.3rem !important;
      padding: 0.15rem 0.6rem !important;
      color: #1f241d !important;
      height: 25px !important;
      border-radius: 8px !important;
      position: relative !important;
      /* ВАЖЛИВО: overflow має бути visible, щоб внутрішні елементи не обрізалися */
      overflow: visible !important;
      /* Капсула не має права вилазити за свій контейнер: у верхньому лівому
         варіанті (.event-meta-desktop) це колонка з описом — тобто капсула
         впирається рівно там, де починаються блоки «Статус» і «Учасників»; у
         нижньому правому (.event-meta-phone) — ширина свого ж блоку. Обидва
         випадки покриває одне max-width:100%, бо в обох капсула — прямий
         flex-item свого контейнера. min-width:0 обовʼязковий: без нього
         flex-item не може стиснутись вужче за власний вміст, і ellipsis нижче
         ніколи б не спрацював. */
      max-width: 100% !important;
      min-width: 0 !important;
      transition: transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.1s ease !important;
    }
    /* Рядок «Організатор: [капсула]» не переноситься: інлайновий flex-wrap:wrap
       (розмітка картки) при довгому імені кидав капсулу на власний рядок замість
       того, щоб її стиснути. nowrap + flex-shrink:0 на підпису лишає єдиним
       кандидатом на стиснення саму капсулу, а вона вже обрізає ім'я трьома
       крапками (правила нижче). Селектор .event-meta, а не .event-meta-desktop: той самий рядок є
       і в картках, які малює cabinet.js (там класу -desktop немає). У
       .event-meta-phone цього класу немає взагалі — там підпис над капсулою
       окремим рядком, так і задумано. */
    .event-meta { flex-wrap: nowrap !important; }
    .event-meta > span:first-child { flex-shrink: 0 !important; }
    /* Стискається ЛИШЕ ім'я. Ава й значок «перевірений організатор» мають
       лишатись цілими, інакше при довгому імені обрізало б саме їх. */
    .event-organizer-chip-3d > * { flex-shrink: 0 !important; }
    .event-organizer-chip-3d .chip-org-name,
    .event-organizer-chip-3d [data-user-name] {
      flex: 1 1 auto !important;
      min-width: 0 !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
      white-space: nowrap !important;
    }
    .event-organizer-chip-3d:hover {
      transform: translateY(-1px);
      box-shadow: 0 4px 0 #c2d9f2, 0 6px 12px rgba(8, 81, 184, 0.1) !important;
    }
    .event-organizer-chip-3d:active {
      transform: translateY(2px) !important;
      box-shadow: 0 1px 0 #c2d9f2, 0 2px 4px rgba(8, 81, 184, 0.08) !important;
    }
    /* Жорстко вимикаємо всі відблиски, які ламають структуру! */
    .event-organizer-chip-3d::before,
    .event-organizer-chip-3d::after {
      display: none !important;
    }

    /* Один Grid для геть усіх чотирьох блоків (герой/статистика/останні
       переглянуті/форма фільтрів) як ПРЯМИХ дітей на кожній ширині — без
       вкладених flex-обгорток і без display:contents (те й друге раніше
       ламало живий (drag) resize в Chrome: картки застрягали на старому
       розмірі й лише обрізались, замість стискатись — див. коментар нижче
       біля 980px-запиту). grid-template-columns/areas далі повністю
       перевизначаються на кожному брейкпоінті, змінюється лише розкладка
       (3 колонки → 2 → 1), самі елементи завжди прямі grid-діти. */
    .events-main-grid {
      display: grid;
      /* minmax(0, ...) на fr-треках — той самий floor-фікс, що й у ≤640px
         запиті нижче: голий fr має неявний min-width:auto, тож трек не
         стискається нижче min-content дитини. */
      grid-template-columns: minmax(0, 2.2fr) minmax(0, 0.8fr) 310px;
      grid-template-areas:
        "hero  stats aside"
        "form  form  aside";
      gap: 1.25rem;
      align-items: stretch;
    }
    .events-hero-card { grid-area: hero; min-height: 220px; }
    /* display:flex;column — інлайн justify-content:center (events/index.html.erb)
       був мертвим без цього (justify-content нічого не робить у block-контексті). */
    .events-stats-card { grid-area: stats; display: flex; flex-direction: column; }
    #event-filter-panel { grid-area: form; }
    /* display:flex;column — щоб .bento-glass-card усередині (inline
       position:sticky, розмір за власним вмістом) міг flex:1-розтягнутись на
       ПОВНУ висоту aside (нижче) замість того, щоб лишатись природного
       розміру. <aside> сам має inline height:100% (events/index.html.erb) —
       на 1190px і ширше (тут, "aside" area — grid-area, що охоплює ОБИДВА
       рядки сітки одразу, "hero stats aside"/"form form aside") це коректно
       резолвиться в повну висоту героя+відступу+форми (грід-область уже МАЄ
       визначену висоту), але сама картка всередині це НЕ успадковує сама по
       собі — звідси flex-ланцюжок нижче. Спіймано на порожньому "Останні
       переглянуті" (немає localStorage-історії): з довгим списком карток
       природний розмір картки випадково був близький до потрібного, з
       порожнім — картка лишалась короткою (~107px, лише заголовок+"Тут
       з'являться події…"), хоч сам <aside> уже мав правильну висоту. */
    .events-main-grid > aside {
      grid-area: aside;
      display: flex;
      flex-direction: column;
    }
    .events-main-grid > aside .bento-glass-card {
      flex: 1;
      min-height: 0;
      max-height: none !important;
      position: static !important;
    }
    .events-left-content {
      display: grid;
      gap: 1.25rem; /* Збільшили відступ між блоками зліва */
    }
    .events-sidebar-panel {
      display: grid;
      gap: 1.25rem;
      position: sticky;
      top: calc(var(--top-bar-height) + 1.25rem);
    }
    
    /* Нова двоколоночна сітка для карток подій */
    .event-list {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      grid-auto-flow: row;
      gap: 1.25rem;
    }

    /* .events-main-grid/aside на ≤980px — див. окремий, консолідований
       медіа-запит нижче (біля коментаря "981px і нижче"), який замінив цей
       блок повністю (grid-template-areas замість простого 1fr). */
    @media (max-width: 720px) {
      .event-list {
        grid-template-columns: 1fr;
      }
    }
    .recent-view-card {
      background: #fff;
      border: 1px solid rgba(0, 0, 0, 0.08);
      border-radius: 6px;
      padding: 0.65rem 0.75rem;
      display: flex;
      flex-direction: column;
      gap: 0.35rem;
      position: relative;
      transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
    }
    .recent-view-card:hover {
      border-color: #0851b8;
      transform: none !important;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    }
    .recent-view-title {
      margin: 0;
      font-size: 0.86rem; /* Зменшено шрифт заголовка */
      font-weight: 800;
      color: #1f241d;
      line-height: 1.2;
    }
    .recent-view-meta {
      font-size: 0.72rem; /* Зменшено шрифт деталей */
      color: #4a5648;
      font-weight: 700;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    /* Дублікат 960px видалено — правило вже є вище на 980px. */

    /* Стать зливається з .event-count в один суцільний блок (той самий
       прийом, що в попапі Деталі, .modal-detail-grid .event-count у
       global.css) — тепер на ВСІХ шириностях. Раніше цей стик жив лише в
       @media ≤900px нижче, і десктоп тримав .event-gender-row окремою
       пунктирною карткою під лічильником. */
    .event-count-col .event-count {
      border-bottom: none !important;
      border-bottom-left-radius: 0 !important;
      border-bottom-right-radius: 0 !important;
      padding-bottom: 0 !important;
    }
    /* margin-bottom:0 — inline margin-bottom:0.6rem (_event.html.erb, тепер
       уже зайвий там, де раніше стояла колонка іконок ред./скас.) лишав
       розрив рівно НА СТИКУ з .event-gender-row нижче — обидва мали пласкі
       краї й однаковий фон, але щілина між ними все одно робила їх двома
       окремими блоками, а не суцільною карткою. */
    .event-count-col .event-count-row {
      margin-bottom: 0 !important;
    }
    .event-count-col .event-gender-row {
      background: rgba(8,81,184,0.07) !important;
      border: 1px solid rgba(8,81,184,0.12) !important;
      border-top: none !important;
      border-top-left-radius: 0 !important;
      border-top-right-radius: 0 !important;
      border-bottom-left-radius: 8px !important;
      border-bottom-right-radius: 8px !important;
      padding: 0 0.4rem 0.35rem !important;
      flex-direction: column !important;
      gap: 0.1rem !important;
    }
    .event-gender-row .event-gender-value {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.25rem;
    }
    /* Статус — той самий фоновий блок-капсула, що на телефоні/планшеті,
       тепер і на десктопі (раніше — лише @media ≤900px нижче). Розмітка
       (_event.html.erb) ставить event-status-col ПЕРЕД event-count-col, тож
       на десктопі (.event-side — звичайний блочний потік) статус опиняється
       над блоком учасників. */
    .event-status-row {
      border-radius: 8px;
      padding: 0.15rem 0.4rem;
      background: rgba(8,81,184,0.08);
      border: 1px solid rgba(8,81,184,0.12);
    }
    .event-status-row:has(.event-pill--live) {
      background: rgba(26,126,77,0.12);
      border-color: rgba(26,126,77,0.24);
    }
    .event-status-row:has(.event-pill--past) {
      background: rgba(31,36,29,0.08);
      border-color: rgba(31,36,29,0.14);
    }
    .event-status-row:has(.event-pill--closed) {
      background: rgba(26,126,77,0.12);
      border-color: rgba(26,126,77,0.24);
    }
    .event-status-row .event-pill {
      background: none !important;
      border: none !important;
      padding: 0 !important;
    }

    @media (max-width: 900px) {
      /* .filter-grid прибрано звідси — тепер власні 980/620 медіа-запити вище
         (4→3→2 колонки), синхронізовані з клампом .adv-filters на 1 рядок. */
      .events-summary, .event-detail-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .event-card-main {
        grid-template-columns: 1fr;
      }
      .event-side {
        width: 100%;
      }
      /* Асайд на планшеті — авто-висота замість 100% */
      aside .bento-glass-card {
        max-height: none !important;
        position: static !important;
      }
      /* Картка події: лічильник учасників (+ стать всередині, злиті в один
         блок) зліва, статус справа. .event-count-col/.event-status-row —
         прямі діти .event-side (статус винесено з .event-actions саме
         заради цієї сітки), event-actions лишає собі тільки ред./скас.+
         Деталі/Чат нижче на всю ширину. Той самий вигляд, що й на телефоні
         (≤640px) — тут просто той самий поріг, що й решта планшетного
         layout-у картки (event-card-main/event-side вище в цьому ж блоці). */
      .event-side {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas:
          "count status"
          "actions actions";
        gap: 0.4rem;
      }
      /* justify-content:space-evenly ТУТ БУЛО — прибрано. Задум був
         розподілити вертикальний залишок МІЖ рядками колонки, щоб «N друзів
         йде» не тулилось впритул під «Стать». Але виміряно на реальному
         DOM (getBoundingClientRect): коли рядок друзів Є — колонка й так
         рівно дорівнює сумі своїх дітей, зайвого простору немає, space-evenly
         нічого не розподіляв узагалі (центрування «N друзів йде» тепер дає
         власний симетричний margin, events/_event.html.erb). Коли рядка НЕМА
         (лише лічильник+стать, 2 дитини) — колонка раптом КОРОТША за сусідню
         статус-колонку (там чіп організатора), реальний залишок висоти
         з'являється, і space-evenly чесно вставляв рівну щілину МІЖ УСІМА
         дітьми — зокрема між лічильником і статтю, які мають зливатись в
         ОДНУ картку (border-bottom:none/border-top:none, стик вище файлу).
         Щілина розривала злитий блок навпіл — юзер побачив це як "картка
         учасників обрізається". height:100% лишається: будь-який реальний
         залишок тепер просто йде порожнім місцем ПІД останньою дитиною
         (flex-start за замовчуванням), не займаючи місце МІЖ ними. */
      .event-count-col {
        grid-area: count;
        margin-bottom: 0 !important;
        display: flex;
        flex-direction: column;
        height: 100%;
      }
      /* margin-bottom:0 на .event-count-row — тепер у базовому правилі вище
         файлу (діє на всіх шириностях), тут не дублюємо. flex:0 0 auto —
         природний розмір, НЕ розтягується. */
      .event-count-col .event-gender-row {
        margin: 0 !important;
        flex: 0 0 auto;
      }
      /* :last-child — коли рядка «N друзів йде» НЕМА, «Стать» лишається
         останньою дитиною колонки: юзер попросив, щоб низ злитого блоку
         лічильник+стать тоді збігався з низом сусідньої колонки організатора
         (обидві однакової висоти рядка). flex:1 тут стосується ЛИШЕ цього
         випадку (селектор :last-child не спрацює, коли після «Стать» іде ще
         й .event-friends-going-row) — той рядок і далі отримує свій
         природний розмір (flex:0 0 auto, правило вище) і власний симетричний
         margin (events/_event.html.erb), не розтягування. justify-content:
         center на самому .event-gender-row (inline, flex-direction:column
         тут-таки в базовому правилі) центрує "Стать:"/значення ВСЕРЕДИНІ
         вищого блоку, а не притискає їх до верху. */
      .event-count-col .event-gender-row:last-child {
        flex: 1;
      }
      /* event-status-col — сама grid-area:status тепер тут (не на
         .event-status-row): статус + (на телефоні) дубль чіпа організатора —
         3 рядки в межах ОДНІЄЇ "статусної" колонки (не на всю ширину
         картки), а не окремим рядком під обома колонками. */
      .event-status-col {
        grid-area: status;
        display: flex;
        flex-direction: column;
        height: 100%;
      }
      /* Тут лишається тільки grid-специфічне (скид inline margin-bottom
         0.7rem із _event.html.erb) — сам фоновий блок і :has()-кольори тепер
         у базовому правилі вище файлу, діють на всіх шириностях. */
      .event-status-row {
        margin-bottom: 0 !important;
      }
      /* Дубль чіпа організатора: на телефоні показуємо ЦЕЙ (під статусом,
         по центру), ховаємо оригінал (зверху зліва картки, event-meta-desktop). */
      .event-meta-desktop {
        display: none !important;
      }
      .event-meta-phone > span:first-child {
        /* "Організатор:" — той самий розмір/товщина, що "Стать:"/"Статус:". */
        font-size: 0.72rem !important;
      }
      .event-meta-phone {
        display: flex !important;
        flex-direction: column;
        align-items: center;
        /* Вертикально теж по центру — flex:1 нижче розтягує сам блок на весь
           залишок висоти колонки, тож лейбл+чіп центруємо в ній, а не
           лишаємо притиснутими до верху. */
        justify-content: center;
        gap: 0.3rem;
        /* Пропорційно тіснішому стать↔учасників (0.1rem разом) — тут теж
           зменшено (було 0.7rem). Без margin-bottom: flex:1 нижче й так
           дотягує блок до самого низу колонки — зайвий margin лишив би там
           щілину, зсуваючи нижню межу від блоку учасників. */
        margin-top: 0.35rem;
        /* Той самий блок (фон/обводка/радіус), що й .event-status-row. */
        border-radius: 8px;
        padding: 0.35rem 0.4rem;
        background: rgba(8,81,184,0.08);
        border: 1px solid rgba(8,81,184,0.12);
        /* flex:1 — розтягується на залишок висоти .event-status-col (та сама
           роль, що й .event-gender-row у .event-count-col), щоб нижня межа
           блоку організатора збігалась з нижньою межею блоку учасників. */
        flex: 1;
      }
      /* Капсула організатора в цьому блоці — вища (25px→34px), ава
         пропорційно більша (16px→22px), щоб не губилась у вищій капсулі. */
      .event-meta-phone .event-organizer-chip-3d {
        height: 34px !important;
      }
      .event-meta-phone .event-organizer-chip-3d [data-user-avatar] {
        width: 22px !important;
        height: 22px !important;
      }
      /* .event-actions сама — grid-area:actions у ЗОВНІШНІЙ сітці .event-side
         (count/status/actions вище), і водночас лишається grid-контейнером
         для СВОЇХ дітей з ІНШОЮ, ніж на десктопі (база вище файлу),
         розкладкою: тут Ред.+Скас. окремим рядком, Деталі+дія — іншим
         (на десктопі Деталі ділить рядок саме з Ред./Скас.).
         Порядок у спільному рядку: дія (Чат / Подати заявку) ЛІВОРУЧ, Деталі
         ПРАВОРУЧ — міняється лише порядок area, розмітка (_event.html.erb)
         лишається як є. */
      .event-actions {
        grid-area: actions;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas: "action details";
      }
      .event-actions--has-editcancel {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas: "editcancel editcancel" "action details";
      }
      /* Закладка й тут праворуч від «Деталі», у тому самому рядку. Ширину
         віддає ЛИШЕ «Деталі»: перша колонка жорстко дорівнює тому, чим була
         половина рядка без зірки (100% мінус один gap, навпіл), тож кнопка
         дії (Чат / Подати заявку) лишається рівно такою, як була. Зірці —
         свої 38px, «Деталі» забирає що лишилось. */
      .event-actions--has-bookmark {
        grid-template-columns: calc((100% - 0.45rem) / 2) minmax(0, 1fr) 38px;
        grid-template-areas: "action details bookmark";
      }
      /* Тут Ред./Скас. — половина картки (не 38px квадрат, як на десктопі) —
         тексту вистачає місця, повертаємо лейбл назад і відступ іконки перед
         ним (базове margin-right:0 вище файлу — лише для беззтекстового
         десктопного квадрата, тут текст є, і без відступу він зліпився б з іконкою). */
      .event-actions--has-editcancel .event-actions-editcancel .event-btn-label {
        display: inline;
      }
      .event-actions--has-editcancel .event-actions-editcancel .event-btn svg {
        margin-right: 0.3rem !important;
      }
    }
    @media (max-width: 600px) {
      .events-summary, .event-detail-grid {
        grid-template-columns: minmax(0, 1fr);
      }
    }

    /* === АДАПТИВ: планшет (≤768px) === */
    @media (max-width: 768px) {
      /* Рядок фільтра-дій: кнопки переносяться на наступний рядок */
      .filter-actions {
        flex-wrap: wrap;
        gap: 0.6rem;
      }
      .filter-actions > div:last-child {
        flex-wrap: wrap;
      }
      .filter-actions .event-btn {
        font-size: 0.78rem;
        padding: 0.4rem 0.9rem;
        min-height: 32px;
      }
    }

    /* === АДАПТИВ: 1189px і нижче (до 981px) — проміжна розкладка між
       десктопом (1190+, база вище файлу) і "981px і нижче" запитом далі.
       Герой розтягнутий на всю ширину зліва (там, де на десктопі був герой+
       статистика разом), останні переглянуті — справа зверху, статистика —
       під переглянутими: "form stats" у тому самому ряду сітки. align-items:
       stretch на .events-main-grid (базове правило файлу) тут НЕ працює:
       інлайн align-items:flex-start у events/index.html.erb переважає клас
       (вищий пріоритет інлайну), а чіпати сам інлайн-контейнер небезпечно —
       це вплинуло б і на десктопну (1190+) розкладку aside, яку не просили
       міняти. align-self на дитині переважає align-items предка незалежно
       від цього.
       Три вимоги одночасно (звідси й уся складність нижче):
       1) висота КАРТКИ статистики стала (не стрибає між ~245 і ~291px залежно
          від того, чи .filter-actions переносить кнопки фільтра в 2 рядки на
          вужчому кінці діапазону, ~981-1100px) — align-self:end (не stretch)
          лишає картку природної висоти (плитки на підлозі 4.5rem нижче) і
          просто притискає її до низу рядка 2 (низ картки = низ форми).
       2) відступ останні-переглянуті→статистика = відступ герой→форма (обидва
          — рівно grid-gap). align-self:end (п.1) сам собою лишає порожній
          простір НАД статистикою, коли форма вища за неї (саме на вужчому
          кінці діапазону) — без додаткової правки цей відступ більший за
          grid-gap.
       3) на 1133px і ширше (де форма вже в 1 рядок і майже дорівнює
          статистиці) усе виглядає як зараз (aside ≈ висота героя) — видима
          зміна лише там, де форма справді вища за статистику.
       Розв'язок п.2 — aside "вилазить" нижче власного рядка 1 рівно на
       різницю (висота форми − висота статистики), замикаючи той порожній
       простір власним тілом замість порожнечі. Порахувати різницю висот ДВОХ
       ІНШИХ сусідів чистий CSS не вміє — рахує events_page_filters.js
       (syncAsideHeight) і передає через custom-property --rv-extra-height на
       самому aside; тут лише формула height:calc(220px + var(--rv-extra-
       height,0px)) — 0px за замовчуванням (поки JS не встиг відпрацювати),
       тобто aside просто дорівнює висоті героя, як і раніше. grid-template-
       rows:220px auto — рядок 1 ЗАФІКСОВАНО на 220px (замість auto): інакше
       grid просто розтягнув би сам рядок 1 під вищий aside (auto-рядки
       рівняються на найвищого учасника) і потягнув би рядок 2/форму вниз за
       собою. Фіксована висота розв'язує рядок 1 від вмісту aside, і aside
       спокійно "звисає" нижче межі рядка — grid не обрізає дітей, що
       перевищують трек, за замовчуванням.
       .bento-glass-card усередині aside — flex:1;min-height:0 (НЕ height:
       100%): на height:100% дитина резолвиться як auto й фолбечиться на
       природний розмір вмісту, коли висота предка ще не визначена в момент
       заміру (тут вона вже визначена — aside має конкретний calc() — але
       ланцюжок лишили той самий, що довів свою надійність раніше). Власний
       список гортається (flex:1;min-height:0;overflow-y:auto на .rv-list,
       inline, events/index.html.erb), не фіксованих 202px. */
    @media (max-width: 1189px) {
      .events-main-grid {
        grid-template-columns: minmax(0, 1fr) 310px;
        grid-template-rows: 220px auto;
        grid-template-areas:
          "hero  aside"
          "form  stats";
      }
      .events-stats-card {
        align-self: end;
      }
      /* Та сама підлога, що й у 980px запиті нижче — без неї плитки тут
         стискаються до природного мінімуму (~62px, ще нижче за мобільну
         підлогу), бо картка природної (не розтягнутої) висоти. */
      .events-summary-card {
        min-height: 4.5rem;
      }
      /* height:calc(...) — формула замість простого заповнення рядка 1:
         aside може вилізти НИЖЧЕ 220px власного рядка (--rv-extra-height,
         events_page_filters.js, коментар вище файлу). !important — як і
         раніше, перебиває inline height:100% (events/index.html.erb). */
      .events-main-grid > aside {
        height: calc(220px + var(--rv-extra-height, 0px)) !important;
        min-height: 0 !important;
        display: flex !important;
        flex-direction: column !important;
      }
      .events-main-grid > aside .bento-glass-card {
        flex: 1;
        min-height: 0;
        max-height: none !important;
        position: static !important;
      }
    }

    /* === АДАПТИВ: 980px і нижче — герой/статистика/останні переглянуті ===
       Діє від 980px аж до найвужчого телефону (єдиний дизайн для всього
       діапазону — 1189-981px вище має ІНШИЙ, проміжний дизайн, запит вище).
       [статистика | останні переглянуті] в 2 колонки під героєм (на всю
       ширину), нижче — фільтри на всю ширину. Герой/статистика/форма/aside —
       усі ЗАВЖДИ прямі діти .events-main-grid (без вкладених обгорток, без
       display:contents — той підхід ламав живий (drag) resize в Chrome:
       картки застрягали на старій ширині composite-шару й просто обрізались
       предком, замість стискатись з екраном; DPR>1 підсилював баг). Тут
       міняється лише grid-template-columns/areas самого контейнера. */
    @media (max-width: 980px) {
      .events-main-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas:
          "hero hero"
          "stats aside"
          "form form";
      }
      .events-hero-card {
        /* Вище за природну висоту — за проханням, більше повітря під заголовком. */
        min-height: 220px;
      }
      /* Заголовки статистики й останніх переглянутих — по центру з 980px і
         вужче (раніше лише на телефоні ≤640px — той запит нижче більше не
         дублює цей клас, цей ≤980px охоплює й телефон теж). */
      .events-title-center {
        text-align: center;
      }
      /* Заголовок "Статистика подій" рівно на тій самій висоті, що "Останні
         переглянуті" поруч (obidva картки — однаковий inline padding-top
         1.5rem, той самий ряд сітки) — нічого зайвого чіпати не треба.
         Більший відступ від заголовка до самих плиток. */
      .events-summary {
        margin-top: 0.75rem;
      }
      /* Плитки — вищі (padding 0.65rem inline замалий) і всі 4 однакової
         висоти: min-height — спільна підлога на кожну, а grid-рядки плиток
         (.events-summary, 2 ряди по 2) за замовчуванням align-content:stretch
         розтягуються порівну, тож обидва ряди виходять однаково високими,
         не лише кожна пара в своєму ряду. flex:1 на .events-summary (базове
         правило вище файлу) — плитки заповнюють картку до самого низу,
         відступ знизу лишається рівно padding картки (той самий, що зліва). */
      .events-summary-card {
        min-height: 4.5rem;
      }
      /* Останні переглянуті — рівно така сама висота, що й статистика (обидві
         в тому самому ряду сітки, "stats aside" — align-items:stretch за
         замовчуванням вирівнює висоту одна з одною), власний список
         гортається (flex:1;min-height:0;overflow-y:auto на .rv-list,
         events/index.html.erb, — щойно висота картки обмежена, це нарешті
         спрацьовує; без обмеження список ріс би замість гортатись). */
      /* align-self:stretch + flex-ланцюжок, НЕ height:100% — 7 реальних подій
         в localStorage (не порожній список) розкрили реальний баг: height:100%
         на елементі з ЩЕ НЕВИЗНАЧЕНОЮ висотою ряду резолвиться як auto й
         фолбечиться на ПРИРОДНИЙ розмір вмісту (увесь нескручений список,
         ~510px на 7 подій), а не виключається з розрахунку — тож роздував
         висоту ряду (а тоді й статистику, "стрейчнуту" до нього).
         align-self:stretch на самому <aside> — двофазний механізм (спершу
         трек за МІНІМАЛЬНИМ внеском дітей, ПОТІМ розтяг), але сама
         .bento-glass-card ВСЕРЕДИНІ теж мала height:100% — той самий фолбек
         на природний розмір повторювався на рівень нижче (за тим самим
         принципом: аside ЩЕ не мав визначеної висоти в момент, коли картка
         міряла свою "природну"). Тому <aside> — сам flex-колонка, а картка —
         flex:1 замість height:100% (flex:1 з flex-basis:0 — той самий
         двофазний принцип, не резолвиться в "природний" розмір на
         невизначеному контейнері); .rv-list усередині (inline,
         events/index.html.erb) вже flex:1;min-height:0 — ланцюжок довершено,
         повний список ніде не "просочується" в розрахунок висоти ряду. */
      .events-main-grid > aside {
        align-self: stretch;
        height: auto !important;
        min-height: 0 !important;
        display: flex !important;
        flex-direction: column !important;
      }
      .events-main-grid > aside .bento-glass-card {
        flex: 1;
        min-height: 0;
        max-height: none !important;
        position: static !important;
      }
    }

    /* === АДАПТИВ: телефони (≤640px) — статистика/останні переглянуті одна
       під одною =================================================
       Пробували вузьку фіксовану колонку (134px) для статистики поруч з
       останніми переглянутими — на реальних телефонах виглядало незграбно
       (дві вузькі напів-стиснуті картки одна біля одної). Простіше і
       надійніше: обидві на всю ширину, одна під одною (Статистика зверху,
       Останні переглянуті знизу) — стандартний мобільний патерн, який не
       ламається від довжини вмісту. Вище 640 — 2 колонки, симетрично
       ростуть до 980 (правило 981px-блоку вище). */
    @media (max-width: 640px) {
      .events-main-grid {
        /* minmax(0, 1fr), НЕ голий 1fr: голий fr-трек має неявний min-width:
           auto (min-content), тобто трек НЕ стискається нижче мінімального
           вмісту дитини (наприклад, довшого тексту в "Останні переглянуті"
           після кліку по картці) — картка тоді розпирає трек і вилазить за
           контейнер. Саме це й був той самий "блоки не стискаються, а
           обрізаються" баг, що ловився нестабільно (залежав від вмісту, а
           не від самого ресайзу). minmax(0, 1fr) прибирає floor. grid-
           template-rows:auto скидає "220px auto" (запит 1189px вище файлу —
           той медіа-запит теж діє тут, ≤640 ⊂ ≤1189): там 220px — висота
           героя в рядку 1, але тут у рядку 1 вже статистика (герой
           прибраний нижче), не має сенсу мати той самий поріг. Без скидання
           статистика (align-self:end, той самий запит) висіла притиснутою
           до низу примусового 220px рядка — над карткою лишалась порожнеча
           (стільки ж, скільки картці бракує до 220px). */
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto;
        grid-template-areas:
          "stats"
          "aside"
          "form";
      }
      /* Герой («Усі події») на телефоні прибрано — прохання користувача,
         вивільняє екран під статистику/останні переглянуті одразу. */
      .events-hero-card {
        display: none !important;
      }
      /* Центрування заголовків — тепер у ≤980px запиті вище (охоплює й цю
         ширину теж), тут більше не дублюємо.
         align-self:start скидає :end (запит 1189px вище файлу, теж діє тут) —
         з auto-рядком (вище) різниці вже нема (картка й так заповнює свій
         рядок повністю), лишаємо явно для ясності.
         Відступ заголовок→плитки зменшено (був 1rem gap контейнера + 0.5rem
         margin-bottom заголовка = 1.5rem разом, як у «Останніх переглянутих»
         поруч, — за проханням тут менше, тому більше НЕ підганяємо під той
         самий відступ: gap лишається базовим inline 0.85rem, margin
         заголовка — 0, як був). */
      .events-stats-card {
        align-self: start;
        padding: 1.5rem 0.6rem !important;
      }
      /* Плитки статистики — назад в один рядок (4 колонки) з меншими
         відступами всередині картки, замість 2×2. margin-top:0 скидає
         0.75rem (запит ≤980px вище файлу — той, ширший поріг, без нижньої
         межі, ловить і телефон теж): тут відступ уже дає сам flex-gap
         картки, той margin лишень непомітно доклеював зайве зверху плиток. */
      .events-summary {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 0.4rem !important;
        margin-top: 0;
      }
      .events-summary-card {
        padding: 0.4rem 0.2rem !important;
        /* Скидає min-height:4.5rem (запит ≤980px вище файлу — той, ширший
           поріг, без нижньої межі, ловить і телефон теж) — тут плитки й так
           вузькі (4 в ряд), розтягувати їх ще й високими зайве. */
        min-height: 0 !important;
      }
      .events-summary-card strong {
        font-size: 1.05rem !important;
      }
      .events-summary-card span {
        font-size: 0.56rem !important;
        margin-top: 0.15rem !important;
      }
      /* На телефоні aside сам у своєму рядку сітки (grid-template-areas
         вище: "stats"/"aside"/"form" — три окремі рядки), сусіда для
         підгонки висоти нема, тож flex:1-ланцюжок і contain:size (запити
         вище файлу й events_filters.css — розраховані рівно на "підженися
         під сусіда" в 981/980px розкладках) тут ЗАЙВІ й шкідливі: без
         сусіда, що дає реальну висоту рядку, весь ланцюжок auto-висот
         схлопується в ~0 (flex:1 нічого не розтягує, contain:size ховає
         природний вміст від розрахунку висоти aside/картки). Повертаємо
         природний розмір — картка сама заввишки під h2 + список (список
         обмежений max-height нижче, це і є "3.5 картки" — картка ~54.86px +
         0.2rem/3.19px gap → 3 повні + половина 4-ї ≈ 202px), aside просто
         під неї підлаштовується. */
      .events-main-grid > aside .bento-glass-card {
        flex: none;
      }
      .rv-list {
        contain: none !important;
        max-height: 202px;
      }
    }

    /* === АДАПТИВ: телефон (≤620px) === */
    @media (max-width: 620px) {
      /* Рядок дій фільтра: складаємо вертикально, контроли на всю ширину,
         щоб поле сортування (240px) і кнопки не випирали за панель. */
      .filter-actions {
        flex-direction: column !important;
        align-items: stretch !important;
      }
      .filter-actions > div {
        width: 100% !important;
        flex-wrap: wrap;
        justify-content: flex-start;
      }
      .filter-actions .filter-field {
        width: 100% !important;
      }
      .filter-actions .event-btn {
        flex: 1 1 140px;
      }
    }

    .person-avatar {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      background: #0851b8;
      color: #fff;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-weight: 900;
      box-shadow: inset 0 0 0 2px rgba(255,255,255,0.35), 0 8px 18px rgba(8,81,184,0.22);
    }
    .person-hobby {
      border-radius: 999px;
      background: rgba(8,81,184,0.08);
      border: 1px solid rgba(8,81,184,0.12);
      color: #0851b8;
      padding: 0.24rem 0.52rem;
      font-size: 0.72rem;
      font-weight: 900;
    }

        /* === ПРЕМІУМ ДИЗАЙН БЛОКІВ (BENTO GLASS STYLE) === */
        .bento-glass-card {
          position: relative;
      background: rgba(255, 255, 255, 0.75) !important;
      backdrop-filter: blur(16px) !important;
      -webkit-backdrop-filter: blur(16px) !important;
      border: 1px solid rgba(255, 255, 255, 0.9) !important;
      border-radius: 1.75rem !important;
      box-shadow: 0 12px 36px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255,255,255,1) !important;
      overflow: hidden;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    .bento-glass-card:hover {
      transform: none !important;
      box-shadow: 0 16px 40px rgba(8, 81, 184, 0.08), inset 0 1px 0 rgba(255,255,255,1) !important;
    }
    .bento-circle-deco {
      position: absolute;
      border-radius: 50%;
      pointer-events: none;
      z-index: 1;
    }
    .bento-glass-content {
      position: relative;
      z-index: 2;
    }
    
    /* Оновлення полів вводу (фільтрів) */
    .filter-field input {
      font-family: var(--font-body) !important;
      border-radius: 12px !important;
      background: rgba(255, 255, 255, 0.75) !important;
      border: 1px solid rgba(8, 81, 184, 0.12) !important;
      box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.02), 0 2px 8px rgba(8, 81, 184, 0.04) !important;
      color: #1f241d !important;
      font-weight: 700 !important;
      transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
    }
    .filter-field input[type="date"], .filter-field input[type="time"] {
      cursor: pointer !important;
    }
    
    /* ПРИМУСОВЕ НАСЛІДУВАННЯ ДИЗАЙНУ ТА ШРИФТУ MULISH ДЛЯ ВНУТРІШНІХ ЕЛЕМЕНТІВ КАЛЕНДАРЯ Й ГОДИННИКА */
    .filter-field input[type="date"]::-webkit-datetime-edit,
    .filter-field input[type="date"]::-webkit-datetime-edit-fields-wrapper,
    .filter-field input[type="date"]::-webkit-datetime-edit-text,
    .filter-field input[type="date"]::-webkit-datetime-edit-minute,
    .filter-field input[type="date"]::-webkit-datetime-edit-hour,
    .filter-field input[type="date"]::-webkit-datetime-edit-day,
    .filter-field input[type="date"]::-webkit-datetime-edit-month,
    .filter-field input[type="date"]::-webkit-datetime-edit-year,
    .filter-field input[type="time"]::-webkit-datetime-edit,
    .filter-field input[type="time"]::-webkit-datetime-edit-fields-wrapper,
    .filter-field input[type="time"]::-webkit-datetime-edit-text,
    .filter-field input[type="time"]::-webkit-datetime-edit-minute,
    .filter-field input[type="time"]::-webkit-datetime-edit-hour {
      font-family: var(--font-body) !important;
      font-weight: 700 !important;
      color: #1f241d !important;
      font-size: 0.86rem !important;
    }
    .filter-field input:not(.time-manual-input):focus,
    .filter-field select:focus {
      background: #ffffff !important;
      border-color: #0851b8 !important;
      box-shadow: 0 0 0 4px rgba(8, 81, 184, 0.15), 0 6px 16px rgba(8, 81, 184, 0.1) !important;
      transform: translateY(-1px);
    }
    .filter-field label {
      font-family: var(--font-body) !important;
      color: #2b352a !important;
      font-weight: 900 !important;
      letter-spacing: 0.04em !important;
      text-shadow: 0 1px 3px rgba(255, 255, 255, 0.9);
    }

    /* Іконки категорій (бейджі ігор з попапу хобі page2) */
    .game-icon {
      display: inline-flex; align-items: center; justify-content: center;
      width: 22px; height: 22px; border-radius: 6px;
      font-size: 0.6rem; font-weight: 900; letter-spacing: -0.02em;
      flex-shrink: 0; box-shadow: 0 1px 3px rgba(0,0,0,0.25);
    }
    .game-icon-img {
      width: 22px; height: 22px; border-radius: 6px; object-fit: cover;
      flex-shrink: 0; box-shadow: 0 1px 3px rgba(0,0,0,0.25); background: #fff;
      display: inline-block; vertical-align: middle;
    }
    .custom-select-trigger .custom-select-value { display: inline-flex; align-items: center; gap: 0.6rem; min-width: 0; overflow: hidden; }
    .custom-select-trigger .custom-select-value > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .custom-select-group-title {
      font-size: 0.68rem; font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase;
      color: #0851b8; padding: 0.55rem 0.85rem 0.25rem; opacity: 0.8;
    }
    .custom-select-group-title:first-child { padding-top: 0.25rem; }

    /* === КАСТОМНІ ВИПАДАЮЧІ СПИСКИ === */
    .custom-select-wrapper { position: relative; user-select: none; width: 100%; font-family: var(--font-body) !important; }
    .custom-select-trigger {
      font-family: var(--font-body) !important;
      display: flex; justify-content: space-between; align-items: center;
      min-height: 40px; padding: 0.4rem 0.75rem; font-size: 0.86rem;
      border-radius: 8px; background: rgba(255, 255, 255, 0.75);
      border: 1px solid rgba(8, 81, 184, 0.12); color: #1f241d; font-weight: 700;
      box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.02), 0 2px 8px rgba(8, 81, 184, 0.04);
      cursor: pointer; transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    }
    .custom-select-trigger.open {
      background: #ffffff; border-color: #0851b8;
      box-shadow: 0 0 0 4px rgba(8, 81, 184, 0.15), 0 6px 16px rgba(8, 81, 184, 0.1);
      transform: translateY(-1px);
    }
    .custom-select-trigger svg { transition: transform 0.3s ease; }
    .custom-select-trigger.open svg { transform: rotate(180deg); }
    
    /* .custom-select-options і нижче .custom-picker-popup: transition — ЯВНИЙ
       список (opacity/visibility/transform), НЕ transition:all. edit_event.js
       (_positionPanel) телепортує ЦЕЙ САМИЙ елемент у document.body й перемикає
       position:absolute→fixed + нові top/left/right/width/max-height — усе
       ІНШИМИ, не тут переліченими властивостями. transition:all підхопив би і
       цей стрибок координат теж, і getBoundingClientRect() одразу після
       (fake_scrollbar.js reposition(), MutationObserver-мікротаск) читав би
       ПРОМІЖНУ, ще не доїхану точку — повзунок ставав не там, де насправді
       малюється панель. */
    .custom-select-options {
      position: absolute; top: 100%; left: 0; right: 0;
      margin-top: 10px; /* ТОЙ САМИЙ ЗБІЛЬШЕНИЙ ВІДСТУП ВІД ПОЛЯ */
      background: #ffffff; /* Глухий білий колір, щоб нічого не просвічувалося */
      border: 1px solid rgba(8, 81, 184, 0.15);
      border-radius: 14px; /* ЗАОКРУГЛЕНІ КРАЯ */
      box-shadow: 0 16px 40px rgba(8, 81, 184, 0.15);
      opacity: 0; visibility: hidden; pointer-events: none;
      transform: translateY(-10px);
      transition: opacity 0.25s cubic-bezier(0.165, 0.84, 0.44, 1), visibility 0.25s cubic-bezier(0.165, 0.84, 0.44, 1), transform 0.25s cubic-bezier(0.165, 0.84, 0.44, 1);
      z-index: 9999; overflow-y: auto; overflow-x: hidden; max-height: 320px; padding: 0.35rem; display: flex; flex-direction: column; gap: 2px;
    }
    /* Категорія — багато довших назв (з іконками) + чекбокси, значно ширше
       вмісту за саме поле "Всі категорії" у вузьких колонках фільтра. right:0
       (звідси, за замовчуванням) прив'язував би ширину меню точно до поля;
       auto + min-width дають меню рости під власний вміст, не обмежуючись
       шириною поля. JS (events_page_filters.js, positionPopupToFit) клампить
       у межі екрана, якщо так виросле меню не влазить праворуч. */
    #options-events-hobby {
      right: auto;
      min-width: 280px;
    }
    .custom-select-options.open {
      opacity: 1; visibility: visible; pointer-events: all; transform: translateY(0);
    }
    .custom-select-option {
      padding: 0.6rem 0.85rem; font-size: 0.84rem; font-weight: 700; color: #4a5648;
      border-radius: 10px; cursor: pointer; transition: all 0.2s;
      display: flex; align-items: center; gap: 0.6rem;
    }
    .custom-select-option:hover, .custom-select-option.selected {
      background: rgba(8, 81, 184, 0.08); color: #0851b8;
    }

    /* === СТИЛІ КАСТОМНОГО КАЛЕНДАРЯ ТА ГОДИННИКА === */
    .custom-picker-popup {
      position: absolute; top: 100%; left: 0; right: 0; min-width: 260px;
      margin-top: 10px; background: #ffffff; border: 1px solid rgba(8, 81, 184, 0.15);
      border-radius: 14px; box-shadow: 0 16px 40px rgba(8, 81, 184, 0.15);
      opacity: 0; visibility: hidden; pointer-events: none;
      transform: translateY(-10px);
      transition: opacity 0.25s cubic-bezier(0.165, 0.84, 0.44, 1), visibility 0.25s cubic-bezier(0.165, 0.84, 0.44, 1), transform 0.25s cubic-bezier(0.165, 0.84, 0.44, 1);
      z-index: 9999; padding: 0.8rem; font-family: var(--font-body) !important;
    }
    .custom-picker-popup.open { opacity: 1; visibility: visible; pointer-events: all; transform: translateY(0); }
    
    .cal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.6rem; font-weight: 900; color: #1f241d; font-size: 0.88rem; }
    .cal-btn { background: none; border: none; color: #0851b8; font-weight: 900; cursor: pointer; padding: 0.2rem 0.5rem; border-radius: 6px; font-size: 1rem; }
    .cal-btn:hover { background: rgba(8, 81, 184, 0.08); }
    .cal-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; font-size: 0.72rem; font-weight: 800; color: #4a5648; margin-bottom: 0.4rem; }
    .cal-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
    .cal-day { padding: 0.4rem 0; text-align: center; font-size: 0.82rem; font-weight: 700; border-radius: 8px; cursor: pointer; color: #1f241d; transition: all 0.15s; }
    .cal-day:hover:not(.empty) { background: rgba(8, 81, 184, 0.08); color: #0851b8; }
    .cal-day.empty { cursor: default; }
    .cal-day.selected { background: #0851b8 !important; color: #ffffff !important; }
    .cal-day.today { border: 1px dashed #0851b8; }

    /* === СТИЛІ КАСТОМНОГО ГОДИННИКА (УНІФІКОВАНО З PAGE2) === */
    .time-picker-popup {
      min-width: 0 !important;
      width: auto !important;
      left: 0 !important;
      right: auto !important;
      transform: translateY(-10px) !important;
      padding-left: 0 !important;
      padding-right: 0 !important;
      padding-top: 0.8rem !important;
      padding-bottom: 0.8rem !important;
      border: 1px solid rgba(8, 81, 184, 0.15) !important;
      border-radius: 14px !important;
      background: #ffffff !important;
    }
    .time-picker-popup.open {
      transform: translateY(0) !important;
    }
    .time-picker-popup > div:first-child { 
      justify-content: center !important; gap: 0 !important; padding: 0 !important;
    }
    .time-picker-channels { 
      display: flex !important; gap: 0 !important; height: 180px !important; padding: 0.2rem 0 !important; justify-content: center !important; width: auto !important; border: none !important;
    }
    .time-channel { 
      width: 55px !important; flex: none !important; overflow-y: auto !important; display: flex !important; flex-direction: column !important; gap: 3px !important; padding-right: 3px !important; margin: 0 !important; max-height: 100% !important; border: none !important; outline: none !important; box-shadow: none !important;
      -ms-overflow-style: auto !important;
    }
    
    .time-cell { padding: 0.4rem 0 !important; text-align: center !important; font-size: 0.84rem !important; font-weight: 700 !important; border-radius: 6px !important; cursor: pointer !important; color: #4a5648 !important; transition: all 0.15s !important; margin: 0 !important; }
    .time-cell:hover { background: rgba(8, 81, 184, 0.08) !important; color: #0851b8 !important; }
    .time-cell.selected { background: #0851b8 !important; color: #fff !important; }

    /* Кастомний скролбар для останніх переглянутих */

    /* Оновлення карток "Останні переглянуті" та "Статистика" — Повна прозорість без розмиття */
    .recent-view-card, .events-summary-card {
      background: rgba(255, 255, 255, 0.35) !important; /* Робимо фон майже прозорим */
      border: 1px solid rgba(255, 255, 255, 0.4) !important;
      border-radius: 14px !important;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03) !important;
      backdrop-filter: none !important; /* Повністю прибираємо замилювання */
      -webkit-backdrop-filter: none !important;
      transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
    }
    /* Додано ефект підняття та світіння карток при наведенні */
    .recent-view-card:hover, .events-summary-card:hover {
      background: #ffffff !important;
      border-color: rgba(8, 81, 184, 0.25) !important;
      box-shadow: 0 10px 24px rgba(8, 81, 184, 0.12), inset 0 1px 1px rgba(255, 255, 255, 1) !important;
      transform: translateY(-2px);
    }
    .events-summary-card strong {
      text-shadow: 0 2px 8px rgba(8, 81, 184, 0.15);
    }


    /* === ОНОВЛЕННЯ events === */
    /* (1) повна непрозорість полів і блоків у Статистиці, Фільтрах, Останніх переглянутих */
    .events-summary-card, .recent-view-card { background: #ffffff !important; border-color: rgba(8,81,184,0.12) !important; }
    #event-filter-panel .custom-select-trigger,
    #event-filter-panel .filter-field input,
    #event-filter-panel .filter-field select { background: #ffffff !important; }
    /* .filter-result-count білий фон видалено — тепер це plain-текст біля кнопки
       "Показати всі фільтри" (index.html.erb), не капсула на секції фільтрів. */
    /* (Дубльовані стилі часу видалені, оскільки вони тепер об'єднані вище) */
    #filter-reset-btn:disabled { opacity: 0.45; cursor: not-allowed; pointer-events: none; }

/* НАДІЙНЕ ПРИТИСКАННЯ ФУТЕРА ДО НИЗУ СТОРІНКИ */
    body {
      display: flex !important;
      flex-direction: column !important;
      min-height: 100vh !important;
    }
    .site-shell {
      flex: 1 0 auto !important;
      display: flex !important;
      flex-direction: column !important;
    }
    .content, .page-content {
      flex: 1 0 auto !important;
      width: 100% !important;
    }
    .footer-frame {
      flex-shrink: 0 !important;
      margin-top: auto !important;
    }

/* ── Bug fixes ──────────────────────────────────────────────────────────────── */

/* Bug 7: Фільтри — гарантуємо visible overflow, щоб ms-panel не обрізався.
   bento-glass-card має overflow:hidden; цей блок overrides це для форм-фільтрів. */
#event-filter-panel,
.event-filter-panel {
  overflow: visible !important;
}

/* Bug 2: Зменшуємо border-radius на мобільних пристроях. */
@media (max-width: 600px) {
  .bento-glass-card {
    border-radius: 1rem !important;
  }
  .event-pill {
    border-radius: 6px;
  }
  .event-card {
    border-radius: 0.85rem;
  }
}
/* ─── Кнопка «Поділитись» на сторінці події (events/_details) ────────────────
   Кругла іконкова кнопка у верхньому правому куті картки. Нативний шеринг
   (event_share.js): системний аркуш на телефоні / копіювання посилання на ПК.
   Стан .is-copied — коротке підтвердження «Скопійовано» (керує JS). */
.event-share-btn {
  position: absolute;
  top: 1.4rem;
  right: 1.4rem;
  z-index: 3;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid rgba(8, 81, 184, 0.15);
  border-radius: 50%;
  background: rgba(8, 81, 184, 0.06);
  color: #0851b8;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.05s ease-out, box-shadow 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.event-share-btn:hover {
  background: rgba(8, 81, 184, 0.12);
  box-shadow: 0 4px 12px rgba(8, 81, 184, 0.15);
}
.event-share-btn:active {
  transform: scale(0.92);
}
/* Кнопка «Додати в календар» — той самий круглий вигляд, що «Поділитись», але
   ліворуч від неї (обидві абсолютні у верхньому правому куті картки). */
.event-calendar-btn {
  position: absolute;
  top: 1.4rem;
  right: 4rem;
  z-index: 3;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid rgba(8, 81, 184, 0.15);
  border-radius: 50%;
  background: rgba(8, 81, 184, 0.06);
  color: #0851b8;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.05s ease-out, box-shadow 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.event-calendar-btn:hover {
  background: rgba(8, 81, 184, 0.12);
  box-shadow: 0 4px 12px rgba(8, 81, 184, 0.15);
}
.event-calendar-btn:active {
  transform: scale(0.92);
}
/* Третя кнопка у ряду верхнього правого кута: «Google Calendar» — ще лівіше за
   .ics-кнопку (share=1.4rem, .ics=4rem, gcal=6.6rem). Заголовок картки має
   padding-right достатній, щоб не наїжджати на цей ряд. */
.event-calendar-btn--gcal {
  right: 6.6rem;
}
/* Кнопка-тумблер «Зберегти»/«Збережено» (закладка «цікаво») у футері деталей.
   Off — контурна зірка на світлому тлі; on (--on) — залита синім, як активний стан. */
.event-bookmark-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  font-weight: 800;
  padding: 0.55rem 1.1rem;
  min-height: 42px;
  border-radius: 10px;
  border: 1px solid rgba(8, 81, 184, 0.25);
  background: rgba(8, 81, 184, 0.06);
  color: #0851b8;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.event-bookmark-btn:hover {
  background: rgba(8, 81, 184, 0.12);
  box-shadow: 0 4px 12px rgba(8, 81, 184, 0.15);
}
.event-bookmark-btn:active {
  transform: scale(0.96);
}
.event-bookmark-btn--on {
  background: #0851b8;
  border-color: #0851b8;
  color: #fff;
}
.event-bookmark-btn--on:hover {
  background: #06429a;
}
/* Зірка-закладка у куті картки події (events/_event). Картці треба position:
   relative як контекст для абсолютного розміщення (за замовчуванням її нема).
   Off — контурна зірка; on (--on) — залита синім кружечком. */
.event-card {
  position: relative;
}
/* Квадрат 38px — рівно як Ред./Скас. у сусідній картці організатора: та сама
   висота (.event-btn min-height:38px, global.css) і той самий радіус 8px.
   Ширину дає власна 38px-колонка сітки, тож width:100%. Решта вигляду
   (рамка/тінь/ховер) — від .event-btn--ghost із розмітки; тут лишається
   тільки те, що специфічне для закладки: розмір, нульовий padding під саму
   іконку й залитий стан --on. */
.event-card-bookmark {
  width: 100%;
  height: 38px;
  padding: 0;
  color: #0851b8;
  -webkit-tap-highlight-color: transparent;
}
.event-card-bookmark--on {
  background: #0851b8;
  border-color: #0851b8;
  color: #fff;
}
.event-card-bookmark--on:hover {
  background: #06429a;
}
/* Підтвердження копіювання: кнопка зеленіє на ~1.6 с (клас чіпляє JS). */
.event-share-btn.is-copied {
  background: rgba(39, 174, 96, 0.14);
  border-color: rgba(39, 174, 96, 0.4);
  color: #27ae60;
}

/* Пагінація — той самий вигляд, що .pagination-row/.pagination-btn/
   .pagination-ellipsis у "Мої події" кабінету (cabinet.css); дубльовано тут,
   бо /events не підключає cabinet.css. */
.pagination-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.5rem;
  width: 100%;
}
.pagination-btn {
  min-width: 28px;
  height: 28px;
  padding: 0 0.4rem;
  border: 1px solid rgba(8, 81, 184, 0.15);
  background: #fff;
  color: #4a5648;
  border-radius: 6px;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 800;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}
.pagination-btn:hover:not(:disabled) {
  background: rgba(8, 81, 184, 0.05);
  color: #0851b8;
  border-color: #0851b8;
}
.pagination-btn.active {
  background: #0851b8;
  color: #fff;
  border-color: #0851b8;
}
.pagination-btn:disabled {
  opacity: 0.4;
  cursor: default;
}
/* "Знайдено: N" — 1-в-1 "Показано: N" у "Мої події" кабінету (.filter-result-count,
   cabinet.css): звичайний жирний текст, без капсули/рамки/тіні. */
.filter-result-count {
  color: #0851b8;
  font-size: 0.84rem;
  font-weight: 900;
  white-space: nowrap;
}
.pagination-ellipsis {
  min-width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #889286;
  font-weight: 800;
  font-size: 0.78rem;
  user-select: none;
}