/* ============================================================
   Экран: Журнал (лента) — хендофф §06, десктоп #5a.
   Уникальные блоки: vk-jr-*. Чипы/токены/секции — общие классы из main.css.
   ============================================================ */

/* ---- Заголовок ленты ---- */
.vk-jr-head{
  display:flex;justify-content:space-between;align-items:flex-end;gap:24px;
  padding:52px var(--pad) 6px;
}
.vk-jr-title{font:500 52px/1.05 var(--ff-serif);letter-spacing:-.02em;margin:0}
.vk-jr-tags{font:400 14px var(--ff-sans);color:var(--ink-55)}

/* ---- Чипы-рубрики (используют общий .vk-chip / .is-active) ---- */
.vk-jr-chips{display:flex;gap:10px;flex-wrap:wrap;padding:24px var(--pad) 34px}

/* ---- Надрубрика (общая для featured и карточек сетки) ---- */
.vk-jr-eyebrow{font:600 11px var(--ff-sans);letter-spacing:.12em;text-transform:uppercase;color:var(--terracotta-ink)}

/* ---- Featured-пост ---- */
.vk-jr-featured{display:grid;grid-template-columns:7fr 5fr;gap:24px;padding:0 var(--pad);align-items:stretch}
.vk-jr-featured__media{min-height:380px;display:grid}
.vk-jr-featured__card{background:var(--surface);border-radius:16px;padding:34px 36px;display:grid;gap:14px;align-content:center}
.vk-jr-featured__title{font:500 30px/1.2 var(--ff-serif);letter-spacing:-.01em;text-wrap:balance;margin:0}
.vk-jr-featured__lead{font:400 15px/1.6 var(--ff-sans);color:var(--ink-62);margin:0}
.vk-jr-featured__palette{display:flex;gap:6px;align-items:center}
.vk-jr-featured__sw{width:28px;height:28px;border-radius:8px;flex:none}
.vk-jr-featured__palette-label{font:400 12px var(--ff-sans);color:var(--ink-5);margin-left:4px}
.vk-jr-featured__link{font:600 14px var(--ff-sans);color:var(--terracotta-ink)}
.vk-jr-featured__link:hover{color:var(--terracotta)}

/* ---- Сетка статей ---- */
.vk-jr-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;padding:24px var(--pad) 64px}
.vk-jr-card{display:block;background:var(--surface);border-radius:16px;overflow:hidden;transition:box-shadow .2s}
.vk-jr-card:hover{box-shadow:0 18px 44px rgba(46,52,56,.2)}
.vk-jr-card__media{height:180px}
.vk-jr-card__body{padding:18px 22px 22px}
.vk-jr-card__body .vk-jr-eyebrow{margin-bottom:8px}
.vk-jr-card__title{font:600 17px/1.35 var(--ff-sans);text-wrap:pretty;margin:0}

/* ============================================================
   Адаптив
   ============================================================ */
@media (max-width:1024px){
  .vk-jr-featured{grid-template-columns:1fr}
  .vk-jr-featured__media{min-height:260px}
  .vk-jr-grid{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:600px){
  .vk-jr-head{flex-direction:column;align-items:flex-start;gap:10px;padding:32px var(--pad) 6px}
  .vk-jr-title{font-size:38px}
  .vk-jr-chips{padding:20px var(--pad) 24px}
  .vk-jr-featured{padding:0 var(--pad)}
  .vk-jr-featured__card{padding:26px 24px}
  .vk-jr-grid{grid-template-columns:1fr;gap:14px;padding:16px var(--pad) 48px}
}