/** * @file cards.css — карточки мероприятий (режим просмотра «Карточка», шаблон node--event--card.html.twig) и сетка .ee-cards. * Одна и та же карточка в расписании, каталоге направления и блоках. Телефон — одна колонка (карточка в строку: обложка слева), 768 px — две, от 1024 — три, от 1280 — четыре. * Цвета и скругления — токены theme.css; кнопки — css/buttons.css. */ .ee-cards > .view-content, .ee-cards .view-content { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; } @media (min-width: 48rem) { .ee-cards > .view-content, .ee-cards .view-content { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; } } @media (min-width: 64rem) { .ee-cards > .view-content, .ee-cards .view-content { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* ИСПРАВЛЕНО 2026-09-29 (координатор нашёл фактом Playwright: на ≥80rem жёсткие 4 колонки давали карточку 282px — на 18px/6% УЖЕ заявленного оператором минимума --ee-card-min:300px, токен на этой ширине игнорировался полностью). Заменено на ту же формулу auto-fill+minmax(--ee-card-min), что уже работает с 40rem — колонка никогда не становится уже card-min, число колонок подстраивается (на container=1200px с gap=1.5rem это теперь 3 колонки по ~384px, не 4 по 282px — при текущих 1200px/300px/24px гэпе 4 колонки по ≥300px арифметически не помещаются: 4×300+3×24=1272px > 1200px. Если оператору нужны именно 4 колонки на десктопе — нужно либо поднять --ee-container, либо снизить --ee-card-min/gap; выбор — за оператором, отдельным решением. */ @media (min-width: 80rem) { .ee-cards > .view-content, .ee-cards .view-content { grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--ee-card-min)), 1fr)); } } /* ИСПРАВЛЕНО 2026-09-29, ВЕРСИЯ 3 (в тот же день: версия 1 — gap:0 «впритык»; версия 2 — gap:20px/поле:10px по первому прочтению фрагментов оператора, но при проверке на РЕАЛЬНОМ вьюпорте 1280px не влезало — см. полную арифметику, включая находку про ненулевой margin у body, в докблоке рядом в engine.css). Гэп между карточками — 16px, тот же, что у .views-view-grid — сведено к цифре, которая реально помещается на всех трёх проверенных ширинах (1280/1440/1920), не только на бумаге. */ @media (min-width: 80rem) { .ee-cards > .view-content, .ee-cards .view-content { gap: 1rem; } } /* ИСПРАВЛЕНО 2026-09-29: независимая проверка нашла причину жалобы «карточки в один сжатый ряд» на /meropriyatiya — модуль Infinite Scroll (views_infinite_scroll, подключён тем же утром к events_listing) оборачивает ВСЕ строки представления в свой div.views-infinite-scroll-content-wrapper — доказано curl реального HTML: структура стала .view-content > div.views-infinite-scroll-content-wrapper > div (обёртка строки) > article.ee-card, то есть обёртка строки ушла на 1 уровень глубже. Правило ниже использует child-комбинатор (>), поэтому вместо обёрток строк оно ошибочно попадало на САМУ обёртку infinite-scroll (единственный прямой потомок .view-content) — весь список сжимался в одну flex-ячейку. Тот же приём, что уже есть в engine.css:92 (».views-view-grid .views-row {display:contents}»), но там работает descendant-селектор (не зависит от глубины вложенности), здесь — child- комбинатор, поэтому обёртку убираем из потока (display:contents передаёт её детей в грид-контекст .view-content по спецификации CSS Grid), И расширяем сами правила flex/stretch через :is() на тот же новый уровень, чтобы карточки по-прежнему растягивались на всю ячейку грида, как без Infinite Scroll. praktiki/mastera (Grid-стиль Views, не .ee-cards) — проверила отдельно: там все правила в engine.css descendant-based (.views-view-grid .views-row/.views-col), они не зависят от глубины вложенности — Infinite Scroll там ничего не ломает. */ .ee-cards .view-content > .views-infinite-scroll-content-wrapper { display: contents; } .ee-cards .view-content > .views-row { display: contents; } /* ДОПРАВЛЕНО 2026-09-29 (сразу за фиксом выше): первая версия использовала :is() — не сработала, доказано диагностикой через реальный getComputedStyle() (Chrome headless --dump-dom с инъекцией диагностического