/* ==========================================================================
   Страница «Статьи». Значения из Figma: 05 · Статьи · Desktop 1440.
   Лента 1440×3226, фон #f8f0e0; колонки 800 + 400, зазор 40.
   ========================================================================== */

.v-afeed{background:var(--cream-100);padding:88px 0 100px}
.v-afeed__inner{display:flex;gap:40px;max-width:var(--page-w);margin-inline:auto;
  padding-inline:var(--gutter);align-items:flex-start}
.v-afeed__posts{flex:1 1 800px;min-width:0;display:flex;flex-direction:column;gap:24px}
.v-afeed__side{flex:0 0 400px;display:flex;flex-direction:column;gap:24px;position:sticky;top:112px}

/* ── Карточка материала ────────────────────────────────────────────────
   800 шириной, r20, фон #fdfaf3, обводка #e3d2b4, поля 28/28/24/28. */
.v-post-card{display:flex;flex-direction:column;padding:28px 28px 24px;border-radius:20px;
  background:var(--cream-50);box-shadow:inset 0 0 0 1px var(--cream-300)}

.v-post-card__author{display:flex;align-items:center;gap:12px;color:inherit}
.v-post-card__avatar{display:flex;align-items:center;justify-content:center;flex:0 0 46px;
  width:46px;height:46px;border-radius:var(--r-pill);background:var(--crimson-600);
  font-size:15px;font-weight:700;line-height:1;color:var(--cream-100)}
.v-post-card__who{display:flex;flex-direction:column;gap:2px;min-width:0}
.v-post-card__name{font-size:17px;line-height:1.3;font-weight:600;color:var(--ink-950)}
.v-post-card__date{font-size:13px;line-height:1.3;color:var(--text-muted)}

.v-post-card__title{margin:18px 0 0;font-family:var(--font-display);font-weight:700;
  font-size:26px;line-height:1.18;color:var(--ink-950)}
.v-post-card__title a{color:inherit}
.v-post-card__title a:hover{color:var(--crimson-600)}
.v-post-card__lead{margin:18px 0 0;font-size:17px;line-height:1.66;color:var(--ink-800)}

/* Вложение-фотография: 744×380, r14. */
.v-post-card__media{position:relative;display:block;margin-top:18px;height:380px;
  border-radius:14px;overflow:hidden;background:var(--ink-800)}
.v-post-card__media img{width:100%;height:100%;object-fit:cover;display:block}
.v-post-card__play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  display:flex;align-items:center;justify-content:center;width:76px;height:76px;
  border-radius:var(--r-pill);background:var(--crimson-600);color:var(--cream-100)}
.v-post-card__media.is-video:hover .v-post-card__play{background:var(--crimson-500)}
.v-post-card__badge{position:absolute;right:16px;bottom:16px;display:inline-flex;align-items:center;
  height:29px;padding:0 12px;border-radius:8px;background:var(--ink-950);
  font-size:13px;line-height:1;font-weight:600;color:var(--cream-100)}

/* Вложение-аудио: полоса 744×96 на тёмном, r14. */
.v-post-card__audio{display:flex;align-items:center;gap:16px;margin-top:18px;height:96px;
  padding:0 22px;border-radius:14px;background:var(--ink-800)}
.v-post-card__play-sm{display:flex;align-items:center;justify-content:center;flex:0 0 44px;
  width:44px;height:44px;border-radius:var(--r-pill);background:var(--gold-500);color:var(--ink-950)}
.v-post-card__track{flex:1 1 auto;display:flex;flex-direction:column;gap:10px;min-width:0}
.v-post-card__track-title{font-size:15px;line-height:1.3;font-weight:600;color:var(--cream-100);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v-post-card__bar{position:relative;height:3px;border-radius:2px;background:rgba(227,167,51,.45);
  cursor:pointer;touch-action:none}
/* Попасть пальцем в полосу в три пикселя нельзя — расширяем область нажатия */
.v-post-card__bar::after{content:"";position:absolute;left:0;right:0;top:-14px;bottom:-14px}
.v-post-card__bar i{display:block;height:100%;width:0;border-radius:2px;background:var(--gold-500)}
.v-post-card__time{flex:0 0 auto;font-size:15px;line-height:1.3;font-weight:500;color:var(--cream-100)}
.v-post-card__dl{flex:0 0 auto;display:flex;color:var(--gold-500)}
.v-post-card__audio .v-arow__vol{flex:0 0 auto}

/* Проигрыватель в карточке статьи стоит на светлом фоне, поэтому плашка тёмная.
   Класс .v-arow из библиотеки рассчитан на тёмную секцию и подключается позже —
   возвращаем свои цвета более точным правилом. */
.v-post-card__audio.v-arow{background:var(--ink-800);box-shadow:none}
.v-post-card__play-sm.v-arow__play{background:var(--gold-500);color:var(--ink-950)}
.v-post-card__play-sm.v-arow__play:hover{background:var(--gold-400)}

.v-post-card__tags{margin:18px 0 0;font-size:15px;line-height:1.3;font-weight:600;color:var(--gold-500)}

/* В макете полоса действий — блок высотой 100 с разделителем на 18 выше. */
.v-post-card__foot{display:flex;align-items:center;gap:28px;margin-top:18px;
  padding-top:18px;box-sizing:border-box;
  box-shadow:inset 0 1px 0 var(--cream-200);font-size:15px;line-height:1.3}
.v-post-card__stat{display:inline-flex;align-items:center;gap:8px;font-weight:500;color:var(--text-muted)}
.v-post-card__share{display:inline-flex;align-items:center;gap:8px;margin-left:auto;
  font-weight:500;color:var(--text-muted)}
.v-post-card__share:hover{color:var(--ink-900)}
.v-post-card__download{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--crimson-600)}
.v-post-card__download:hover{color:var(--crimson-500)}

/* ── Правая колонка ────────────────────────────────────────────────────
   Блоки 400 шириной, r20, поля 26/24, фон #fdfaf3, обводка #e3d2b4. */
.v-side{padding:26px 24px;border-radius:20px;background:var(--cream-50);
  box-shadow:inset 0 0 0 1px var(--cream-300)}
.v-side__title{margin:0;font-family:var(--font-display);font-weight:700;font-size:20px;
  line-height:1.25;color:var(--ink-950)}
.v-side__title--light{color:var(--cream-100);line-height:1.18}

.v-side__tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.v-side__tag{display:inline-flex;align-items:center;gap:8px;height:37px;padding:0 14px;
  border-radius:var(--r-pill);background:var(--cream-100);transition:background-color .16s ease}
.v-side__tag:hover{background:var(--cream-200)}
.v-side__tag-label{font-size:15px;line-height:1.3;font-weight:600;color:var(--ink-800)}
.v-side__tag-count{font-size:13px;line-height:1.3;font-weight:700;color:var(--text-muted)}

.v-side__list{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-direction:column;gap:20px}
.v-side__row{display:flex;gap:14px}
.v-side__num{flex:0 0 28px;font-family:var(--font-display);font-weight:700;font-size:15px;
  line-height:1.3;color:var(--gold-500)}
.v-side__link{display:flex;flex-direction:column;gap:4px;min-width:0;color:inherit}
.v-side__link-title{font-size:16px;line-height:1.38;font-weight:600;color:var(--ink-950);overflow-wrap:break-word}
.v-side__link-title:hover{color:var(--crimson-600)}
.v-side__link:hover .v-side__link-title{color:var(--crimson-600)}
.v-side__link-tag{font-size:13px;line-height:1.3;font-weight:600;color:var(--text-muted)}

.v-side--cta{padding:28px 24px;background:var(--crimson-600);box-shadow:none}
.v-side__text{margin:16px 0 0;font-size:15px;line-height:1.6;color:rgba(248,240,224,.86)}
.v-side__btn{display:inline-flex;align-items:center;gap:10px;height:47px;margin-top:16px;
  padding:0 22px;border-radius:var(--r-pill);background:var(--gold-500);
  font-size:15px;line-height:1.3;font-weight:600;color:var(--ink-950);
  transition:background-color .16s ease}
.v-side__btn:hover{background:var(--gold-400)}

/* ── Адаптив ───────────────────────────────────────────────────────────*/
@media (max-width:1279px){
  .v-afeed__inner{flex-direction:column}
  .v-afeed__side{flex:1 1 auto;width:100%;position:static;
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .v-afeed__posts{width:100%}
}
@media (max-width:1023px){
  .v-afeed{padding:56px 0 72px}
  .v-post-card__media{height:auto;aspect-ratio:744/380}
  .v-post-card__title{font-size:clamp(20px,3.4vw,26px)}
}
@media (max-width:767px){
  .v-afeed__side{grid-template-columns:minmax(0,1fr)}
  .v-post-card{padding:20px 18px 18px}
  .v-post-card__foot{height:auto;padding-bottom:6px;flex-wrap:wrap;gap:16px}
  .v-post-card__share{margin-left:0}
  .v-post-card__audio{height:auto;padding:16px;flex-wrap:wrap}
  .v-post-card__track{flex:1 1 100%;order:3}
}

/* Выбранный хештег в сайдбаре и строка «читают сейчас» с просмотрами. */
.v-side__tag.is-active{background:var(--crimson-600);color:var(--cream-50)}
.v-side__tag.is-active .v-side__tag-count{color:var(--cream-50);opacity:.8}
.v-side__link-foot{display:flex;align-items:center;gap:12px;flex-wrap:wrap}

/* Хештеги — теперь ссылки на свой раздел с отбором по метке. */
.v-post-card__tag{color:inherit}
.v-post-card__tag:hover{color:var(--crimson-600)}
.v-side__tag-link{color:inherit}
.v-side__tag-link:hover{color:var(--crimson-600)}
.v-tag-sep{opacity:.6}