/**
 * ps-article.css — таблицы и мелочи в теле статьи (.post-rich).
 *
 * Тема стилизует в статьях h2/h3/p/a/ul/ol/blockquote, но НЕ таблицы:
 * в main.css на них есть только `border-collapse` и `td,th { padding: 0 }`,
 * поэтому markdown-таблица рендерится слипшимся текстом без рамок.
 * Новые статьи содержат по 1–2 таблицы, отсюда этот файл.
 *
 * Подключается в packages/loader.php на is_singular('post'). Больше нигде
 * не применяется: все селекторы вложены в .post-rich.
 */

.post-rich .post-table {
  margin: 1.5rem 0;
  overflow-x: auto;                /* длинная таблица скроллится внутри себя, */
  -webkit-overflow-scrolling: touch; /* а не растягивает страницу на мобильном */
}

.post-rich .post-table table {
  width: 100%;
  min-width: 30rem;
  border-collapse: collapse;
  font-size: .95rem;
  line-height: 1.4;
}

.post-rich .post-table th,
.post-rich .post-table td {
  padding: .7rem .9rem;
  text-align: left;
  vertical-align: top;
  border: 1px solid rgba(0, 0, 0, .12);
}

.post-rich .post-table thead th {
  background: rgba(235, 74, 0, .07);   /* акцент темы, приглушённый */
  font-weight: 700;
  white-space: nowrap;
}

.post-rich .post-table tbody tr:nth-child(even) td {
  background: rgba(0, 0, 0, .02);
}

@media screen and (max-width: 767px) {
  .post-rich .post-table table { min-width: 26rem; font-size: .9rem; }
  .post-rich .post-table th,
  .post-rich .post-table td { padding: .55rem .6rem; }
  .post-rich .post-table thead th { white-space: normal; }
}

/* Видео-пример в теле статьи.
 *
 * Ролики-примеры — те же файлы, что играют на лендингах, все сняты 16:9.
 * Постеры у карточек своего формата (4:3 и 1,58:1), поэтому object-fit: cover:
 * само видео совпадает с рамкой и не обрезается, а постер заполняет её без
 * чёрных полей по краям.
 *
 * aspect-ratio держит место под плеер до загрузки постера — страница не
 * дёргается. preload="none" в разметке: до нажатия «play» не тянется ни один
 * мегабайт.
 */

.post-rich figure.post-video {
  margin: 1.75rem 0;
  /* custom_ne.css:23 держит `.w-richtext figure {max-width: 60%}` — это для
     картинок в тексте. Общий файл не трогаем, поэтому свой блок расширяем
     селектором подлиннее: видео должно занимать всю колонку текста. */
  max-width: 100%;
}

.post-rich .post-video__player {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: #000;
  border-radius: .75rem;
}

.post-rich .post-video figcaption {
  margin-top: .6rem;
  font-size: .9rem;
  line-height: 1.45;
  opacity: .7;
}