/* ============================================================
   Журнал — страница поста (screen-journal-post.php, хендофф экран 10).
   Уникальные блоки: vk-post-*. Общие компоненты (vk-btn, vk-section и т.д.)
   не переопределяются — статья использует свою читательскую типографику.
   ============================================================ */

/* ---- Хлебные крошки ---- */
.vk-post-crumbs{padding:20px var(--pad) 0;font:400 13px var(--ff-sans);color:var(--ink-5)}

/* ---- Заголовок статьи ---- */
.vk-post-head{max-width:760px;margin:0 auto;padding:32px 24px 8px;text-align:center}
.vk-post-eyebrow{font:600 12px var(--ff-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--terracotta-ink);margin-bottom:16px}
.vk-post-title{font:500 46px/1.12 var(--ff-serif);letter-spacing:-.02em;margin:0 0 18px;text-wrap:balance}
.vk-post-meta{display:flex;gap:18px;justify-content:center;font:400 13px var(--ff-sans);color:var(--ink-55)}

/* ---- Обложка (фото-заглушка vk_photo_slot, высоту задаёт обёртка) ---- */
.vk-post-cover{margin:24px var(--pad) 0;height:420px;display:grid}

/* ---- Тело статьи ---- */
.vk-post-body{max-width:680px;margin:0 auto;padding:44px 24px 20px}
.vk-post-lead{font:400 20px/1.6 var(--ff-sans);color:var(--graphite);margin:0 0 24px}
.vk-post-p{font:400 17px/1.75 var(--ff-sans);color:rgba(46,52,56,.82);margin:0 0 20px}
.vk-post-h2{font:500 28px/1.2 var(--ff-serif);letter-spacing:-.01em;margin:36px 0 16px}

/* ---- Палитра статьи ---- */
.vk-post-palette{background:var(--surface);border-radius:14px;padding:22px 24px;margin:28px 0}
.vk-post-palette__label{font:500 11px var(--ff-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-5);margin-bottom:14px}
.vk-post-palette__row{display:flex;gap:10px;align-items:center}
.vk-post-palette__sw{width:52px;height:52px;border-radius:10px;flex:none}
.vk-post-palette__sw--light{box-shadow:inset 0 0 0 1px var(--line-12)}
.vk-post-palette__caption{font:400 12.5px/1.5 var(--ff-sans);color:var(--ink-55);margin-left:6px;flex:1;min-width:0}

/* ---- Цитата ---- */
.vk-post-quote{border-left:3px solid var(--terracotta);padding:6px 0 6px 22px;margin:28px 0;font:italic 500 22px/1.45 var(--ff-serif);color:var(--graphite)}

/* ---- CTA-карточка цвета ---- */
.vk-post-cta{display:flex;align-items:center;gap:18px;background:var(--graphite);color:var(--surface);border-radius:16px;padding:20px 24px;margin:28px 0}
.vk-post-cta__sw{width:60px;height:60px;border-radius:12px;flex:none}
.vk-post-cta__info{flex:1;min-width:0}
.vk-post-cta__name{font:600 16px var(--ff-sans)}
.vk-post-cta__meta{font:400 12.5px var(--ff-sans);color:rgba(251,249,245,.65)}
.vk-post-cta__btn{
  display:inline-flex;flex:none;background:var(--terracotta);color:var(--surface);
  font:600 14px var(--ff-sans);padding:12px 22px;border-radius:10px;transition:background .18s;
}
.vk-post-cta__btn:hover{background:var(--terracotta-ink)}

/* ---- Автор ---- */
.vk-post-author{
  max-width:680px;margin:0 auto;padding:8px 24px 40px;display:flex;align-items:center;gap:16px;
  border-top:1px solid var(--line-12);border-bottom:1px solid var(--line-12);
}
.vk-post-author__avatar{width:52px;height:52px;border-radius:50%;flex:none}
.vk-post-author__name{font:600 15px var(--ff-sans)}
.vk-post-author__bio{font:400 13px/1.5 var(--ff-sans);color:var(--ink-6)}

/* ---- Читайте также ---- */
.vk-post-related{padding:40px var(--pad) 64px}
.vk-post-related__title{font:500 24px/1.1 var(--ff-serif);letter-spacing:-.01em;margin:0 0 24px}
.vk-post-related__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.vk-post-related__card{display:block;background:var(--surface);border-radius:16px;overflow:hidden;transition:box-shadow .2s}
.vk-post-related__card:hover{box-shadow:0 18px 44px rgba(46,52,56,.2)}
.vk-post-related__media{height:180px}
.vk-post-related__body{padding:16px 20px 20px}
.vk-post-related__eyebrow{font:600 11px var(--ff-sans);letter-spacing:.12em;text-transform:uppercase;color:var(--terracotta-ink);margin-bottom:7px}
.vk-post-related__name{font:600 16px/1.35 var(--ff-sans);text-wrap:pretty}

/* ============================================================
   Адаптив — ≤1024 (хендофф: «планшетной отдельной версии нет,
   используем десктопную, колонка чтения центрируется, читайте-также в 2 колонки»)
   ============================================================ */
@media (max-width:1024px){
  .vk-post-related__grid{grid-template-columns:repeat(2,1fr)}
}

/* ============================================================
   Адаптив — ≤600 (мобайл: обложка и блоки на всю ширину с полями
   var(--pad)=16px; H1 ~30px; «Читайте также» — 1 колонка)
   ============================================================ */
@media (max-width:600px){
  .vk-post-crumbs{padding:16px var(--pad) 0}

  .vk-post-head{max-width:none;margin:0;padding:16px var(--pad) 0;text-align:left}
  .vk-post-eyebrow{font-size:11px;margin-bottom:12px}
  .vk-post-title{font-size:30px;line-height:1.14;margin-bottom:14px}
  .vk-post-meta{justify-content:flex-start;gap:12px;font-size:12px;margin-bottom:16px}

  .vk-post-cover{margin:0 var(--pad) 20px;height:220px}

  .vk-post-body{max-width:none;padding:0 var(--pad) 20px}
  .vk-post-lead{font-size:17px;margin-bottom:18px}
  .vk-post-p{font-size:15.5px;line-height:1.7}
  .vk-post-h2{font-size:22px;margin:28px 0 12px}

  .vk-post-palette{padding:16px;border-radius:12px;margin:0 0 20px}
  .vk-post-palette__label{font-size:10.5px;letter-spacing:.1em;margin-bottom:10px}
  .vk-post-palette__row{gap:8px}
  .vk-post-palette__sw{width:40px;height:40px;border-radius:9px}
  .vk-post-palette__caption{font-size:11.5px}

  .vk-post-quote{font-size:18px;line-height:1.4;padding-left:18px;margin:24px 0}

  .vk-post-cta{gap:12px;border-radius:14px;padding:16px;margin:0}
  .vk-post-cta__sw{width:48px;height:48px;border-radius:10px}
  .vk-post-cta__name{font-size:14px}
  .vk-post-cta__meta{font-size:11px}
  .vk-post-cta__btn{font-size:12px;padding:10px 14px;border-radius:9px}

  .vk-post-author{max-width:none;padding:20px var(--pad) 24px}

  .vk-post-related{padding:32px var(--pad) 48px}
  .vk-post-related__title{font-size:20px;margin-bottom:18px}
  .vk-post-related__grid{grid-template-columns:1fr;gap:14px}
}