/* ==========================================================================
   Блог: страница материала — /blog/<slug>

   Лента блога своего файла не требует: там общий кирпич .news-card из
   base.css. Здесь — только то, чего в системе ещё не было: длинный текст
   статьи, таблица внутри него и переходы к соседним материалам.

   Задача та же, что у юридических документов (legal.css): читаемость
   длинного текста. Поэтому и приём тот же — колонка ограничена по длине
   строки, заголовки отделены воздухом, никаких карточек внутри текста.
   Статью читают подряд, а не сканируют глазами по блокам.
   ========================================================================== */

.post {
  display: grid;
  gap: 32px;
  align-items: start;
}

/* Ячейке сетки по умолчанию нельзя стать уже своего содержимого, а в статье
   есть таблица со строками, которые не переносятся. Без этого правила она
   распирала колонку до 734px на экране 390px, и горизонтально ехала вся
   страница, а не таблица внутри своей рамки. */
.post > * {
  min-width: 0;
}

/* На широком экране рядом с текстом встаёт колонка с датой и переходами:
   иначе строка растягивается на 1240px и читать её невозможно. */
@media (min-width: 1000px) {
  .post {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 320px);
    gap: 56px;
  }
}

/* ---------- Кадр материала ----------
   16:10 — та же пропорция, что у карточки в ленте: открывая статью,
   человек должен узнать картинку, которую только что видел в списке. */
.post__cover {
  margin: 0 0 28px;
  aspect-ratio: 16 / 10;
  background: var(--c-800);
  border: 1px solid var(--card-bd);
  border-top: 2px solid var(--accent);
  border-radius: var(--radius);
  overflow: hidden;
}

.post__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- Текст ----------
   Колонка текста кончается там, где начинается правая: 816px при
   контейнере 1240px, это 96 знаков в строке. Дальше её не растягиваем.
   Читаемая мера — 45–90 знаков: глаз держит строку, пока может вернуться
   в начало следующей одним движением, а после сотни знаков начинает
   промахиваться и перечитывать ту же строку. До правого края контейнера
   вышло бы 140 знаков — это уже неудобно, особенно светлым по тёмному.

   Выпускать за колонку таблицу — пробовали, вернули обратно: она повисает
   в стороне от текста, к которому относится. Всё в статье стоит в одной
   колонке. */
.post__body {
  max-width: none;
}

.post__body h2 {
  margin: 36px 0 14px;
  font-size: clamp(1.25rem, 2vw, 1.5rem);
}

.post__body > h2:first-child {
  margin-top: 0;
}

.post__body p {
  margin: 0 0 16px;
  line-height: 1.65;
  color: var(--text-dim);
}

.post__body a {
  color: var(--gold);
  border-bottom: 1px solid var(--gold-line);
}

.post__body a:hover {
  border-bottom-color: var(--gold);
}

.post__body ul {
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

.post__body ul li {
  position: relative;
  padding-left: 18px;
  line-height: 1.6;
  color: var(--text-dim);
}

/* Квадратный маркер терракотой — та же разметка, что у списков на разделах.
   Это графика, а не текст: контраст 3,75:1 для неё в норме. */
.post__body ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 6px;
  height: 6px;
  background: var(--accent);
}

/* ---------- Таблица внутри статьи ----------
   В двух материалах есть настоящие таблицы. Сначала строки в них не
   переносились, и таблица уезжала за край колонки: читать её можно было
   только горизонтальной прокруткой, а половина столбцов пряталась под
   обрезом. Теперь ячейки переносятся по словам и таблица целиком стоит
   в своей колонке. Прокрутка остаётся страховкой для телефона, где шесть
   столбцов не помещаются при любом переносе, — едет таблица внутри рамки,
   а не страница. */
.post__table {
  margin: 0 0 22px;
  overflow-x: auto;
  border: 1px solid var(--card-bd);
  border-top: 2px solid var(--accent);
  border-radius: var(--radius);
  background: var(--card-bg);
}

.post__table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
}

.post__table th,
.post__table td {
  padding: 12px 16px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--card-bd);
}

.post__table th {
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-mute);
  background: var(--card-inner);
}

.post__table td {
  color: var(--text-dim);
}

.post__table tr:last-child td {
  border-bottom: 0;
}

/* Первый столбец — название строки, он и держит смысл таблицы. */
.post__table td:first-child {
  color: var(--text);
  font-weight: 600;
}

/* ---------- Колонка справа ---------- */
.post__aside {
  display: grid;
  gap: 16px;
}

/* Колонка стоит на месте, а не едет за прокруткой. Липкой она была, чтобы
   кнопка расчёта всегда была на виду, но рядом с длинной статьёй это
   читалось так, будто блок сползает вниз по странице. */

.post__meta {
  padding: 20px;
  background: var(--card-bg);
  border: 1px solid var(--card-bd);
  border-top: 2px solid var(--accent);
  border-radius: var(--radius);
  display: grid;
  gap: 6px;
}

.post__meta dt {
  font-family: var(--font-display);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-mute);
}

.post__meta dd {
  margin: 0 0 10px;
  font-variant-numeric: tabular-nums;
}

.post__meta dd:last-child {
  margin-bottom: 0;
}

/* ---------- Соседние материалы ---------- */
.post__nav {
  display: grid;
  gap: 10px;
}

.post__nav-link {
  display: grid;
  gap: 5px;
  padding: 16px 18px;
  background: var(--card-bg);
  border: 1px solid var(--card-bd);
  border-radius: var(--radius);
  transition: border-color 0.22s var(--ease), transform 0.22s var(--ease);
}

.post__nav-link:hover {
  border-color: var(--gold);
  transform: translateY(-2px);
}

.post__nav-key {
  font-family: var(--font-display);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}

.post__nav-title {
  font-size: 0.9375rem;
  line-height: 1.35;
  color: var(--text-dim);
}

.post__nav-link:hover .post__nav-title {
  color: var(--text);
}

/* ---------- Ролики на RuTube ----------
   Карточка ролика: обложка с кнопкой проигрывания, под ней заголовок,
   фраза и переход. Вся карточка — одна ссылка, поэтому внутри только
   span: вложенный блочный тег в <a> ломает разметку, а скринридер
   получил бы три ссылки вместо одной.

   Плеер не встраивается фреймом намеренно — почему, написано
   в partials/video-data.php. */
.videos {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}

/* Две карточки во всю ширину контейнера — как все остальные блоки сайта.
   Пустая третья колонка выглядела дырой справа.

   Но карточка при этом ГОРИЗОНТАЛЬНАЯ: обложка слева фиксированной доли,
   текст справа. Так блок занимает всю ширину, а сам кадр остаётся мелким.
   Это третий подход к одному месту: сначала были две карточки в столбик
   с обложкой 588px во всю ширину карточки («вызывающе большие»), потом
   три колонки с пустой третьей («дыра справа»). Горизонтальная карточка
   закрывает обе претензии разом. */
@media (min-width: 560px) { .videos { grid-template-columns: repeat(2, 1fr); } }

.video-card {
  background: var(--card-bg);
  border: 1px solid var(--card-bd);
  border-top: 2px solid var(--accent);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color 0.22s var(--ease), transform 0.22s var(--ease);
}

.video-card:hover,
.video-card:focus-within {
  border-color: var(--gold);
  transform: translateY(-3px);
}

.video-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

/* Горизонтальная раскладка: обложка слева, текст справа. Доля обложки — 42%,
   чтобы кадр читался, но не забирал карточку себе.

   Порог 900px. Сначала он стоял на 1200 — тогда обложка тянулась на высоту
   карточки и на узком десктопе обрезалась в портрет. Теперь обложка держит
   свои 16:9 и не растягивается, так что обрезать нечего, а вертикальная
   карточка на 1024px делала первый экран на 121 пиксель выше окна:
   кадр во всю ширину карточки — это 268 пикселей высоты вместо 112. */
@media (min-width: 900px) {
  .video-card__link {
    flex-direction: row;
    align-items: stretch;
  }

  /* Обложка держит СВОЮ пропорцию 16:9 и не тянется на высоту карточки.
     Это важно: исходник у роликов ровно 1280×720, и в коробке 16:9 кадр
     виден целиком — ничего не срезается.

     Пока коробка растягивалась по высоте (aspect-ratio: auto), она
     превращалась в 4:3, и object-fit съедал бока: у первого ролика
     от «МОБИЛЬНАЯ» оставалось «ОБИЛЬНАЯ», заголовок там написан прямо
     на кадре. Прижатие к левому краю спасало только первый ролик
     и резало второй.

     Карточка выше обложки, потому что высоту задаёт текст справа —
     поэтому кадр центруется по вертикали, а не липнет к верху. */
  .video-card__cover {
    flex: 0 0 42%;
    align-self: center;
    margin: 14px 0 14px 14px;
    border-radius: var(--radius);
  }
}

.video-card__cover {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  background: var(--c-900);
  overflow: hidden;
}

.video-card__cover img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Кнопка проигрывания. Золото — цвет действия, и это действие: нажатие
   уводит на ролик. Треугольник сдвинут на пару пикселей вправо: у него
   центр тяжести не совпадает с геометрическим центром, и без сдвига
   он кажется смещённым влево. */
.video-card__play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--gold);
  color: var(--c-900);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
  transition: transform 0.22s var(--ease);
}

.video-card__play svg { width: 18px; height: 20px; margin-left: 2px; }

.video-card:hover .video-card__play { transform: translate(-50%, -50%) scale(1.08); }

.video-card__length {
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding: 3px 8px;
  border-radius: var(--radius);
  background: rgba(0, 0, 0, 0.72);
  font-family: var(--font-display);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--c-100);
  font-variant-numeric: tabular-nums;
}

.video-card__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px;
  flex: 1;
}

.video-card__title {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.15;
}

.video-card__text {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--text-dim);
}

.video-card__more {
  margin-top: auto;
  padding-top: 8px;
}

.video-card:hover .video-card__title,
.video-card:hover .video-card__more { color: var(--gold); }

@media (prefers-reduced-motion: reduce) {
  .video-card,
  .video-card__play { transition: none; }
  .video-card:hover,
  .video-card:focus-within { transform: none; }
  .video-card:hover .video-card__play { transform: translate(-50%, -50%); }
}