/* =====================================================================
   VEKTOR IT — Single post (кейсы), скоуп .vkt-post
   Общие .vkt-section/.vkt-container — из style.css (не дублировать).
   Правка владельца (живой макет): двухколонник — шапка (H1) во всю
   ширину контейнера, слева контент во всю ширину своей колонки (НЕ
   ~70ch — снято по прямой правке), справа сайдбар («Другие кейсы» +
   слот лидмагнита). Форма-заглушка .vkt-form — в конец левой колонки.
   ===================================================================== */

.vkt-post__header {
  margin-bottom: var(--space-5);
}
/* H1 кейса: длинные слова (напр. «топливозаправщиков») при крупном кегле
   не имеют точек разрыва в кириллице → перенос по символам + адаптивный
   кегль, иначе на 375 заголовок распирает вьюпорт. Фикс Н2 2026-07-13. */
.vkt-post__header h1 {
  overflow-wrap: break-word;
  word-break: break-word;
  font-size: clamp(28px, 7vw, var(--text-2xl));
}

/* Хлебные крошки (Yoast или фолбэк) — мелкие, приглушённые, ссылки кликабельны */
.vkt-post__crumbs {
  display: block;
  margin-bottom: var(--space-4);
  font-size: var(--text-2xs);
  color: var(--color-ink-muted);
}
.vkt-post__crumbs a {
  color: var(--color-ink-muted);
  text-decoration: underline;
}
.vkt-post__crumbs a:hover {
  color: var(--color-accent);
}

/* ── Обложка статьи (featured image, владелец 2026-07-28: «чтобы было
   видно в статье») ───────────────────────────────────────────────────── */
.vkt-post__cover {
  margin: 0 0 var(--space-6);
}
/* Селектор с > нужен ради веса: ниже идёт `.vkt-post__body img { margin: 32px 0 }`
   с тем же весом, но объявленное позже правило побеждает. Отступ картинки
   схлопывается наружу (у figure нет ни padding, ни border) и сдвигает обложку
   вниз на 32px — при этом computed margin-top у самой figure остаётся 0,
   и по её стилям причину не найти. Из-за этого сайдбар начинался выше обложки.
   Вертикальные отступы задаёт figure, картинке они не нужны. */
.vkt-post__body > .vkt-post__cover img,
.vkt-post__cover img {
  margin: 0;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-card);
}

/* ── Двухколонник ──────────────────────────────────────────────────── */
.vkt-post__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--space-8);
  align-items: start;
}
@media (max-width: 900px) {
  .vkt-post__layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Грид-элемент без явного min-width тянется по min-content контента
   (длинные строки, картинки без width) — распирает колонку за вьюпорт
   на мобиле (тот же баг, что таблица Перегруза Ф4a). */
.vkt-post__body,
.vkt-post__sidebar {
  min-width: 0;
}

/* Сайдбар едет с читателем (владелец 2026-09-28).
   Липнет сам грид-элемент, а не блок внутри него: у .vkt-post__related
   высота равна высоте aside, внутри него липнуть просто некуда.
   Отступ сверху = высота залипшей шапки (76px) + воздух; под админ-баром
   добавляются его 32px. Ниже 901px колонка одна - липкость не нужна.
   max-height + overflow страхуют на будущее: если в сайдбар добавят
   лидмагнит и он перерастёт экран, низ блока останется доступным,
   а не уедет под край окна. */
@media (min-width: 901px) {
  .vkt-post__sidebar {
    position: sticky;
    top: calc(76px + var(--space-4));
    align-self: start;
    max-height: calc(100vh - 76px - var(--space-6));
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .admin-bar .vkt-post__sidebar {
    top: calc(76px + var(--space-4) + 32px);
    max-height: calc(100vh - 76px - 32px - var(--space-6));
  }
}

.vkt-post__body > h2 {
  margin-top: var(--space-8);
}

.vkt-post__body > h3 {
  margin-top: var(--space-7);
}

.vkt-post__body > p,
.vkt-post__body > ul,
.vkt-post__body > ol {
  margin: 0 0 var(--space-5);
}

.vkt-post__body ul,
.vkt-post__body ol {
  padding-left: var(--space-6);
}

.vkt-post__body li {
  margin-bottom: var(--space-2);
}

.vkt-post__body li > ol,
.vkt-post__body li > ul {
  margin-top: var(--space-2);
}

.vkt-post__body strong {
  color: var(--color-ink);
}

/* the_content() наследует серый дефолт GeneratePress на p/li/td — приводим
   к канон-токену ink (владелец: текст статьи не должен быть разнотонным). */
.vkt-post__body {
  color: var(--color-ink);
}
.vkt-post__body p,
.vkt-post__body li,
.vkt-post__body td,
.vkt-post__body h2,
.vkt-post__body h3 {
  color: var(--color-ink);
}

/* Изображения classic-editor (alignnone/aligncenter — единственные в текущих
   3 постах, alignleft/alignright добавлены на случай будущих кейсов) */
.vkt-post__body img {
  border-radius: var(--radius-card);
  margin: var(--space-6) 0;
}
.vkt-post__body .alignnone {
  display: block;
  margin: var(--space-6) 0;
}
.vkt-post__body .aligncenter {
  display: block;
  margin: var(--space-6) auto;
}
.vkt-post__body .alignleft {
  float: left;
  margin: var(--space-2) var(--space-5) var(--space-3) 0;
}
.vkt-post__body .alignright {
  float: right;
  margin: var(--space-2) 0 var(--space-3) var(--space-5);
}

/* [caption] шорткод — WP оборачивает в div.wp-caption с инлайн шириной
   картинки; сажаем на 100% колонки, иначе распирает .vkt-post__body */
.vkt-post__body .wp-caption {
  max-width: 100% !important;
  margin: var(--space-6) 0;
}
.vkt-post__body .wp-caption img {
  margin: 0;
}
.vkt-post__body .wp-caption-text {
  font-size: var(--text-2xs);
  color: var(--color-ink-muted);
  text-align: center;
  margin-top: var(--space-2);
}

/* Таблица характеристик (кейс шахты) — ловушка h-scroll на мобиле
   (урок Перегруза Ф4a): table как block-контейнер со своим скроллом,
   внутренняя table-разметка ячеек сохраняется браузером. */
.vkt-post__body table {
  display: block;
  overflow-x: auto;
  max-width: 100%;
  margin: 0 0 var(--space-5);
  border-collapse: collapse;
  font-size: var(--text-2xs);
}
.vkt-post__body td {
  border: 1px solid var(--color-border);
  padding: var(--space-2) var(--space-3);
}

/* ── Декор-пасс статей: вынесенные цифры + заголовок таблиц (владелец 2026-07-28) ── */
.vkt-post__body th {
  background: var(--color-bg-light);
  color: var(--color-ink);
  font-weight: 700;
  text-align: left;
  border: 1px solid var(--color-border);
  padding: var(--space-2) var(--space-3);
}
.vkt-post__body .vkt-stat-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin: 0 0 var(--space-6);
}
.vkt-post__body .vkt-stat {
  flex: 1 1 180px;
  padding: var(--space-4) var(--space-5);
  background: var(--color-bg-light);
  border-radius: var(--radius-control);
  border-left: 3px solid var(--color-accent);
}
.vkt-post__body .vkt-stat__value {
  display: block;
  font-family: var(--font-head);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-navy);
  line-height: 1.15;
}
.vkt-post__body .vkt-stat__label {
  display: block;
  font-size: var(--text-2xs);
  color: var(--color-ink-muted);
  margin-top: var(--space-1);
}

/* FAQ-аккордеон в статьях - продублировано 1:1 из front-page.css (там
   enqueue только на is_front_page(), сюда не доезжает - тот же приём,
   что .vkt-form выше). JS «одна открыта» - общий data-vkt-faq в main.js,
   подключён site-wide, доп. подключения не требует. */
.vkt-post__body .vkt-faq__item { border-bottom: 1px solid var(--color-border); }
.vkt-post__body .vkt-faq__item summary {
  list-style: none;
  cursor: pointer;
  padding-block: var(--space-5);
  font-weight: 700;
  font-family: var(--font-head);
  font-size: var(--text-md);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
}
.vkt-post__body .vkt-faq__item summary h3 { margin: 0; font-size: inherit; }
.vkt-post__body .vkt-faq__item summary::-webkit-details-marker { display: none; }
.vkt-post__body .vkt-faq__chevron { flex: none; transition: transform .2s; }
.vkt-post__body .vkt-faq__item[open] .vkt-faq__chevron { transform: rotate(180deg); }
.vkt-post__body .vkt-faq__item p { color: var(--color-ink-muted); padding-bottom: var(--space-5); margin: 0; }
@media (prefers-reduced-motion: reduce) { .vkt-post__body .vkt-faq__chevron { transition: none; } }

/* ── CTA-форма в конец статьи (заглушка) ─────────────────────────────── */
.vkt-post__cta {
  margin-top: var(--space-9);
  padding: var(--space-6);
  background: var(--color-bg-light);
  border-radius: var(--radius-card);
}
.vkt-post__cta h2 {
  margin-top: 0;
}
.vkt-post__cta > p {
  margin: 0 0 var(--space-5);
}

/* .vkt-form — компонент из front-page.css (там enqueue только на
   is_front_page(), сюда не доезжает) — продублирован 1:1 по значениям,
   не выдуман заново (rules/design.md «Консистентность»). */
.vkt-form { display: flex; flex-direction: column; gap: var(--space-4); }
.vkt-form label { font-size: var(--text-2xs); font-weight: 700; margin-bottom: var(--space-1); display: block; }
.vkt-form input[type="text"],
.vkt-form input[type="tel"] {
  width: 100%;
  min-height: 44px;
  padding-inline: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  font-family: var(--font-body);
  font-size: var(--text-base);
  background: var(--color-white);
  color: var(--color-ink);
}
.vkt-form__consent { display: flex; align-items: flex-start; gap: var(--space-3); font-size: var(--text-2xs); color: var(--color-ink-muted); }
.vkt-form__consent input[type="checkbox"] { width: 20px; height: 20px; flex: none; margin-top: 2px; }
.vkt-form__consent a { color: var(--color-ink-muted); text-decoration: underline; }
.vkt-form__note { font-size: var(--text-2xs); color: var(--color-ink-muted); }

/* ── Сайдбар: «Другие кейсы» ──────────────────────────────────────────── */
.vkt-post__related {
  background: var(--color-bg-light);
  border-radius: var(--radius-card);
  padding: var(--space-5);
}
.vkt-post__related h2 {
  font-size: var(--text-lg);
  margin-top: 0;
  margin-bottom: var(--space-4);
}
.vkt-post__related-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.vkt-post__related-card {
  display: block;
  padding: var(--space-4);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  color: var(--color-ink);
  font-weight: 700;
  text-decoration: none;
}
.vkt-post__related-card:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}