/* ═══════════════════════════════════════════════════════════════════════════
   БЛИЖАЙШИЕ СОБЫТИЯ — вид карточки и экрана. Разметку строит
   core/sobytiya.js (карточка, подвал), здесь только вид.

   ПОДКЛЮЧАЮТ ДВА ЭКРАНА: главный экран приложения (app/glavnaya.html,
   раздел «Ближайшие события» — три карточки) и экран всех событий
   (docs/sobytiya.html). Вид карточки в обоих местах обязан совпадать —
   отсюда общий файл, как у ленты (core/lenta.css).

   ИМЕНА КЛАССОВ. Все начинаются с sob-: файл подключён к главному экрану,
   а там живут свои короткие имена (.k, .ik, .tx), и общее короткое имя
   в общем файле — мина: страница-хозяин про него не знает (так однажды
   лента покрасила чужие карточки, см. шапку core/lenta.css).
   Имена .sob-shapka и .sob-vse НЕ ЗАНЯТЫ здесь нарочно: это строка
   заголовка раздела на главной, она живёт в самой главной.

   ДВЕ ПАЛИТРЫ, ОДИН ФАЙЛ. У главного экрана своя палитра (--kart, --kayma,
   --ink, --ink-2, --ink-3, --syn, --ik-fon), у отдельных экранов — роли
   core/tokeny.css. Здесь берутся ИМЕНА-МОСТЫ (--kart, --ink, --syn,
   --kayma): tokeny.css объявляет их поверх ролей M3, а главная —
   перекрывает своими значениями. Одно правило, оба экрана, обе темы.
   --ik-fon в tokeny.css нет, поэтому у него запасное значение прямо здесь.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Список карточек ──────────────────────────────────────────────────────
   Просвет между карточками несёт САМА КАРТОЧКА (.sob-kart + .sob-kart), а не
   контейнер. Причина простая: на главной раздел собирает другой экран и
   кладёт карточки в свой узел как умеет — если бы просвет держал контейнер,
   там карточки слиплись бы в одну плиту, и два места разошлись бы видом.
   Правило по соседству работает в любом узле, а двойного отступа не даёт:
   первой карточке в пачке добавлять нечего. */
.sob-set{list-style:none;margin:0;padding:0}
.sob-kart + .sob-kart{margin-top:10px}
/* НА ШИРОКОМ ЭКРАНЕ КАРТОЧКИ СТОЯТ РЯДОМ. Столбиком они превращались в
   полосы: 3408 px ширины при 336 px чернил (10 %), а средняя колонка
   растягивалась на 3306. Сетка кладёт их по 340+ и держит их ширину
   разумной. Просвет между карточками при этом несёт сетка, а соседский
   margin-top снимаем — иначе к нему добавится ещё и gap. */
/* auto-FILL, а не auto-fit. Разница видна только когда колонок больше, чем
   карточек, — а у нас это каждый месяц с одним-двумя событиями: auto-fit
   схлопывает пустые колонки, и оставшиеся карточки разъезжаются на всю
   полосу. Замерено на 2560: в «Сентябре» 5 событий — карточка 341 px, в
   «Октябре» 2 события — те же карточки по 691 px. Один экран, один вид
   карточки, ширина вдвое разная и зависит от того, сколько событий выпало
   на месяц. auto-fill держит колонку 340+ независимо от числа карточек. */
/* КАРТОЧКИ В РЯДУ — ОДНОГО РОСТА. Здесь стояло align-items:start, и каждая
   карточка была ростом со своё содержимое: у события с одной строкой
   описания 92, у соседнего с двумя — 110. В столбик это незаметно, а рядом
   ряд получался ступенькой. Растягивать карточку безопасно: внутри неё всё
   прижато к верху (.sob-kart{align-items:start}), лишняя высота уходит в
   поле под текстом, а не размазывает строки. */
@media (min-width:900px){
  .sob-set{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));
    gap:10px;align-items:stretch}
  .sob-set .sob-kart + .sob-kart{margin-top:0}
}

/* ── Ряд одинаковых карточек · .sob-set--ravno ────────────────────────────
   ЗАЧЕМ ОТДЕЛЬНОЕ ИМЯ. На главной сайта раздел «Ближайшие события» просит
   ровно три ближайших и ставит их одним рядом — там карточки обязаны быть
   одной высоты и одной меры на ЛЮБОЙ ширине (владелец, 10.09.2026:
   «карточки разного размера, надо одинаковые»). Одного stretch для этого
   мало: в один столбец (телефон) каждая строка сетки меряется сама по
   себе, и ступенька остаётся. Ровняет её grid-auto-rows:1fr — все строки
   получают высоту самой высокой.
   ПОЧЕМУ НЕ ВСЕМУ ФАЙЛУ. На экране всех событий карточек бывает семь и
   больше, месячными пачками; там 1fr подтянул бы КАЖДУЮ карточку месяца
   под самую высокую (описание в две строки плюс пометки цены и записи) и
   налил бы пустого поля на весь экран. Три карточки главной — случай
   особый, и имя у него своё.
   ТРИ КОЛОНКИ, А НЕ auto-fill. Число карточек здесь известно заранее, и
   auto-fill на 900–1300 давал бы две колонки: две карточки в первом ряду,
   одна во втором и дыра рядом с ней.
   ПОЧЕМУ 1120, А НЕ 1000. На 1000 полоса сайта даёт 952 px, по 310 на
   карточку, — и описание «Ночного бала» переставало помещаться в две
   строки: содержимому нужно 54 px, показано 36, конец фразы срезался
   многоточием (замерено scrollHeight против clientHeight). С 1120 полоса
   встаёт на всю свою меру (1072), карточка получает 350 px, и то же
   описание ложится в две строки целиком. Ниже 1120 карточки идут
   столбиком во всю ширину — там места на строку хватает с запасом. */
.sob-set--ravno{display:grid;gap:10px;grid-template-columns:minmax(0,1fr);
  grid-auto-rows:1fr;align-items:stretch}
/* Просвет держит сетка. Соседский margin-top (он живёт выше, для столбика
   без сетки) добавился бы к gap и дал бы 20 между карточками на телефоне. */
.sob-set--ravno .sob-kart + .sob-kart{margin-top:0}
/* НА ПЛАНШЕТЕ — ДВЕ КОЛОНКИ, А НЕ ТЕЛЕФОННАЯ. Ниже 1120 ряд шёл в один
   столбец на любой ширине, и на планшете это давало карточку-перекладину:
   замерено 720×92 при 768, 852×92 при 900, 1071×92 при 1119 — отношение до
   11,6:1, при том что описание внутри упёрто в --stroka-max (525) и дальше
   не растёт, а стрелка перехода уезжает от текста на 200–550 px.
   ТО ЖЕ СОБЫТИЕ РЯДОМ СТОИТ ИНАЧЕ. Экран всех событий (.sob-set выше)
   раскладывается по 340+ с 900: при 1024 там карточка 483, а на главной та
   же самая — 976. Один вид карточки, два разных экрана, ширина вдвое.
   ПОЧЕМУ 768 И ПОЧЕМУ ДВЕ. Полоса при 768 даёт 720, минус зазор — по 355 на
   карточку. Это шире 350, на которых ниже посчитано, что описание «Ночного
   бала» ложится в две строки целиком; проверено замером scrollHeight против
   clientHeight по всей полосе 768–1119 — нигде не срезается. Трёх колонок
   здесь не бывает: при 768 они дали бы по 233, и описание ушло бы в
   многоточие — ровно тот случай, что описан ниже про 1000.
   ПРО ДЫРУ В ПОСЛЕДНЕМ РЯДУ. Карточек три, и третья остаётся в ряду одна.
   Это меньшая из двух потерь: пустое место сбоку от одной карточки против
   пустого места внутри каждой из трёх. Растягивать третью на обе колонки
   нельзя — карточки в этом ряду обязаны быть одной меры. */
@media (min-width:768px) and (max-width:1119.98px){
  .sob-set--ravno{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:1120px){
  .sob-set--ravno{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* ── Карточка ────────────────────────────────────────────────────────────
   Три колонки: дата, содержимое, знак перехода. Дата слева и крупно — по
   ней список читают глазами, а не по именам: «что у меня на этой неделе».
   Вся карточка — одна цель нажатия (48+ по высоте с запасом), поэтому
   внутри нет ни кнопок, ни вложенных ссылок. */
.sob-kart{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:start;
  padding:12px 14px;border-radius:18px;background:var(--kart);border:1px solid var(--kayma);
  color:inherit;text-decoration:none}
.sob-kart:active{filter:brightness(.97)}
/* Карточка без своей страницы ссылкой не является — и нажатие ей не
   отвечает: обещать переход нечем. */
.sob-kart--bez{cursor:default}
.sob-kart--bez:active{filter:none}

/* Дата, содержимое и знак перехода ложатся по колонкам сами: своих
   grid-row у них нет нарочно — с ними стрелка уезжала в первую колонку и
   схлопывалась в ноль ширины (найдено пробой на 412 dp). */
.sob-den{display:flex;flex-direction:column;align-items:center;justify-content:center;
  width:48px;min-height:48px;padding:5px 0;border-radius:14px;
  background:var(--ik-fon,var(--surface-container-high))}
.sob-den b{font:600 21px/1 var(--ya-font-display,system-ui,sans-serif);
  color:var(--syn);font-variant-numeric:tabular-nums}
.sob-den i{margin-top:2px;font:500 11px/1.2 var(--ya-font-display,system-ui,sans-serif);
  font-style:normal;color:var(--ink-3)}

.sob-telo{min-width:0;display:flex;flex-direction:column}
/* Имя события переносится, а не режется: событие узнают по имени. */
.sob-imya{font:var(--type-title-m);color:var(--ink);text-wrap:balance;overflow-wrap:anywhere}
/* Тихая строка: тип · срок · город · время. Пустых полей в ней не бывает —
   их не кладёт сам сборщик строки (core/sobytiya.js). */
.sob-stroka{margin-top:2px;font:var(--type-label-s);color:var(--ink-3);overflow-wrap:anywhere}
/* Описание — короткой строкой: в списке нужен намёк, подробности живут на
   странице события. Двумя строками, дальше многоточие. */
.sob-o{margin-top:6px;font:var(--type-body-s);color:var(--ink-2,var(--on-surface-variant));
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  overflow-wrap:anywhere;
  /* Две строки перестают быть двумя строками, когда строка вмещает 128
     знаков: описание вытягивалось в одну ленту через весь монитор.
     Предел строки — общий токен, чтобы число не расходилось по файлам. */
  max-width:var(--stroka-max)}
/* Пометки — цена и порядок записи, когда они названы на сайте. Обводкой, а
   не заливкой: заливка спорила бы с датой, а это второстепенное. */
.sob-pometki{margin-top:8px;display:flex;flex-wrap:wrap;gap:6px}
.sob-pometki em{font-style:normal;font:var(--type-label-s);padding:2px 9px;border-radius:999px;
  border:1px solid var(--kayma);color:var(--ink-3)}

.sob-strelka{align-self:center;color:var(--ink-3);display:flex}
.sob-strelka svg{flex:0 0 auto;width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}

/* ── Метка месяца (экран всех событий) ───────────────────────────────────
   Тихая, как заголовки разделов главной, с волосяной чертой до края —
   она разделяет, а не объявляет. */
.sob-mesyac{display:flex;align-items:center;gap:10px;margin:18px 2px 8px;
  font:var(--type-label-m);letter-spacing:var(--track-label,.08em);text-transform:uppercase;
  color:var(--ink-3)}
.sob-mesyac:first-child{margin-top:2px}
.sob-mesyac::after{content:"";flex:1;height:1px;background:var(--kayma)}

/* ── Спросить о событии ─────────────────────────────────────────────────
   Телефон оргкомитета: у большинства событий своей страницы нет, и это
   единственный способ спросить. Строка ростом 48 — цель для пальца. */
.sob-svyaz{padding:14px 16px;border-radius:18px;background:var(--kart);border:1px solid var(--kayma)}
/* Короб с одним телефоном занимал всю полосу: 1358×72 при 252 px чернил —
   восемнадцатая часть залита, остальное пустая плита под сеткой событий.
   По содержимому он читается карточкой связи, а не подвалом страницы.
   Только с 900: на телефоне короб во всю ширину — это и есть карточка. */
@media (min-width:900px){
  .sob-svyaz{width:max-content;max-width:100%}
}
.sob-svyaz-t{font:var(--type-title-m);color:var(--ink)}
.sob-tel{display:flex;align-items:center;gap:12px;min-height:48px;margin-top:2px;
  color:inherit;text-decoration:none}
/* Ширина по содержимому, а не по коробу: на 2560 строка телефона тянулась на
   1358 px при 131 px чернил — нажимаемой становилась пустота через весь
   экран, и глаз не связывал знак слева с номером. Высоту 48 не трогаем,
   цель для пальца остаётся. На телефоне строку не сужаем нарочно: там
   широкая цель по всей карточке — не пустота, а удобство. */
@media (min-width:900px){
  .sob-tel{width:max-content;max-width:100%}
}
.sob-tel:active{opacity:.6}
.sob-tel svg{flex:0 0 19px;width:19px;height:19px;stroke:var(--syn);fill:none;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.sob-tel b{font:var(--type-label-l);color:var(--ink);font-variant-numeric:tabular-nums}
.sob-tel em{display:block;font-style:normal;font:var(--type-body-s);color:var(--ink-3)}

/* ── Честная строка и пустой случай ─────────────────────────────────── */
/* Честная строка стояла в 91 знак поперёк всей полосы; она набрана мелко и
   от этого читалась хуже всего на странице. Предел строки + середина. */
.sob-otkuda{font:var(--type-body-s);color:var(--ink-3);text-align:center;text-wrap:pretty;
  max-width:var(--stroka-max);margin-inline:auto}
.sob-net{padding:18px 16px;border-radius:18px;background:var(--kart);border:1px solid var(--kayma);
  font:var(--type-body-m);color:var(--ink-2,var(--on-surface-variant));text-wrap:pretty}