/* ===== NEWS PAGE (only) — CLEAN ===== */
/* Каркас НЕ трогаем: только контент внутри main. */

/* News-page kicker — uppercase category label above an article element.
   Used by news.js renderer. Was previously in main.css; moved here as
   it's news-page-specific and not used on other pages. */
.news-kicker {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--weight-black);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-text-primary);
  text-align: center;
  margin-bottom: var(--space-4);
}

:root{
  /* Ширины */
  --news-title-max: 980px;
  --news-text-max: 980px;
  --news-rail-max: 1200px;         /* ширина "ленты" (фото/линия/правый блок) */
  --news-right-col: 290px;

  /* Отступы (крути тут) */
  --news-shift-x: -12px; /* сдвиг/отступ по X для всей News-ленты */

  --news-title-mt: 26px;
  --news-title-mb: 35px;            /* воздух после заголовка */

  --news-byline-mt: 0px;
  --news-byline-mb: 14px;           /* воздух после даты до источников */
  --news-sources-mb: 30px;          /* воздух после источников до тела */

  --news-hero-mt: 0px;             /* верхний отступ фото (обычно 0) */
  --news-hero-mb: 0px;             /* воздух под фото до линии/блока */

  --after-hero-pt: 25px;           /* воздух от фото до линии/блока */
  --after-grid-gap: 34px;          /* зазор между линией и правым блоком */
  --after-line-mt: 0px;           /* вертикальное выравнивание линии к блоку */

  /* ===== ЛИНИИ (крути тут) — ОДНИМ МЕСТОМ ДЛЯ ВЕРХНЕЙ И НИЖНЕЙ ===== */
  --news-line-h: 1px;                 /* толщина обеих линий */
  --news-line-color: rgba(0,0,0,.18); /* цвет обеих линий */

  /* ===== STORY BOX (линия + текст + линия) — крутилки воздуха ===== */
  --news-story-before: 0px;   /* воздух ДО верхней линии (внутри блока) */
  --news-story-top: 24px;     /* воздух от верхней линии ДО текста */
  --news-story-bottom: 24px;  /* воздух от текста ДО нижней линии */
  --news-story-after: 18px;   /* воздух ПОСЛЕ нижней линии (внутри блока) */

  /* Типографика/цвет */
  --news-title-color: #2a2a2a;
  --news-title-underline-thick: 2px;
  --news-title-underline-offset: 2px;

  --byline-color: rgba(0,0,0,.58);
  --brand-color: rgba(0,0,0,.55);
  --date-color: #111;

  --date-mt: 6px;
}

/* Чтобы футер был внизу на News */
body.news-page{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
body.news-page main{
  flex: 1;
}

body.news-page main.main{
  padding-top: var(--news-main-pad-top);
}

/* ЕДИНАЯ КРУТИЛКА X: применяется ко всем .wrap на странице News */
body.news-page main .wrap{
  padding-left: calc(var(--wrap-pad-x, 0px) + var(--news-wrap-pad-x));
  padding-right: calc(var(--wrap-pad-x, 0px) + var(--news-wrap-pad-x));
}

body.news-page .wrap.news-wrap{
  margin-bottom: 0;
  padding-bottom: 0;
}

body.news-page .wrap.news-wrap + .wrap{
  margin-top: 0;
  padding-top: 0;
}

/* NEWS: отключаем уменьшение логотипов при sticky */
body.news-page{
  --logo-scale-stuck: 1;
  --tg-scale-stuck: 1;
  --tg-lift-stuck: 0px;
}

/* Subpage logo sizing handled in components/_header.css (39px shared rule) */

/* ===== Title ===== */
body.news-page .news-title{
  max-width: var(--news-title-max);
  margin: var(--news-title-mt) auto var(--news-title-mb);
  text-align: center;

  font-family: "Playfair Display", serif;
  font-size: 44px;
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.02em;

  color: var(--news-title-color);

  text-decoration-line: underline;
  text-decoration-thickness: var(--news-title-underline-thick);
  text-underline-offset: var(--news-title-underline-offset);
  text-decoration-skip-ink: auto;

  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ===== Byline ===== */
body.news-page .news-byline{
  max-width: var(--news-title-max);
  margin: var(--news-byline-mt) auto var(--news-byline-mb);
  text-align: center;
  color: var(--byline-color);
}

body.news-page .news-brand,
body.news-page .news-date-line{
  font-family: "Source Serif 4", serif;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.04em;
}

body.news-page .news-brand{
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--brand-color);
}

/* Метка «обновлено» в byline — появляется только у UPDATED-кластеров.
   Тонкая третья строка под датой, в духе FT updated-tag, не ломает
   ритм byline у обычных (non-updated) кластеров. */
body.news-page .news-updated-mark{
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-top: 6px;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
  letter-spacing: 0;
  color: var(--color-text-secondary);
}
/* .refresh-icon size inherited from components/_cards.css (14×14, no opacity) */

body.news-page .news-date-line{
  color: var(--date-color);
  margin-top: var(--date-mt);
}

/* ===== Hero image (wide rail) ===== */
body.news-page .news-hero-slot{
  max-width: var(--news-rail-max);
  margin: var(--news-hero-mt) auto var(--news-hero-mb);
}

body.news-page .news-hero-slot img{
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}

/* Article-page hero photo block — premium <figure> with credit caption.
   Injected by news.js when cluster.image_url is non-empty. The figure
   replaces the previous bare <img> pattern: photo + visible credit line
   beneath it, matching NYT / FT attribution conventions. Filter treatment
   (saturate desaturation per Azbuka VI) comes from components/_cards.css
   via the shared .news-hero-img selector. */
body.news-page .news-hero-figure{
  margin: 0 0 var(--space-6);
}

/* Forced 16:9 aspect-ratio + object-fit:cover (2026-05-17). Заменено с
   width:100%; height:auto (natural aspect ratio). Причина: часть
   источников (Лента — video-grab из соцсетей) подаёт портретные кадры,
   которые на article page занимали огромную vertical real estate и
   читались как technical artefact (видео-фрейм с воздухом по краям),
   а не как editorial intent. Forced 16:9 унифицирует look — landscape
   без изменений, portrait cropped centered. Trade-off: для редкого
   случая когда фотограф намеренно снял портрет, мы тоже cropim — но
   editorial intent в потоке агрегатора (не оригинальной редакции) и так
   вторичен. Source-extraction приоритет: RIA tier=5 даёт editorial
   _1920x1080_ landscape native, Лента tier=3 — что есть. */
body.news-page .news-hero-img{
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}

body.news-page .news-hero-credit{
  margin-top: var(--space-2);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  letter-spacing: 0.01em;
  color: var(--color-text-muted);
}

/* ===== Text column ===== */
body.news-page .news-text{
  max-width: var(--news-text-max);
  margin: 16px auto 0;
}

/* ===== After-hero: line + right block ===== */
body.news-page .news-after-hero{
  max-width: var(--news-rail-max);
  margin: 0 auto;
  padding-top: var(--after-hero-pt);
}

body.news-page .news-after-grid{
  display: grid;
  grid-template-columns: 1fr var(--news-right-col);
  gap: var(--after-grid-gap);
  align-items: start;
}

/* ========================= */
/*  ЛИНИИ — ЕДИНЫЙ ЭЛЕМЕНТ   */
/* ========================= */
body.news-page .news-line{
  height: var(--news-line-h);
  background: var(--news-line-color);
  border: 0;
}

/* Mobile */
@media (max-width: 900px){
  body.news-page .news-after-grid{
    grid-template-columns: 1fr;
  }
}

/* NEWS: убираем системный padding у wrap С ФОТО */
body.news-page main > .wrap:not(.news-wrap){
  padding-top: 0;
  padding-bottom: 0;
}

/* ===== AFTER HERO: линия + текст (слева) + "Главное" (справа) ===== */
/* ВАЖНО: тут раньше было 380px и gap 40px — это и делало правый блок шире, чем на index */
body.news-page .news-after-grid{
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--news-right-col);
  gap: var(--after-grid-gap);
  align-items: start;
}

body.news-page .side-headlines{
  margin-top: 0;
}

body.news-page .news-main-col{ min-width: 0; }

/* текст строго по ширине линии (левая колонка) */
body.news-page .news-body{
  padding: 0;
  margin: 0;
}

body.news-page .news-body .news-text{
  margin: 0 0 24px;
}

/* параграфы */
body.news-page .news-text p{
  margin: 0 0 18px;
}

@media (max-width: 980px){
  body.news-page .news-after-grid{
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

/* ========================================= */
/*  ЦЕЛЬНЫЙ БЛОК: верхняя линия + текст + низ */
/* ========================================= */
body.news-page .news-story{
  padding-top: var(--news-story-before);
  padding-bottom: var(--news-story-after);
}

body.news-page .news-story #newsBottom{
  padding-top: var(--news-story-top);
  padding-bottom: var(--news-story-bottom);
  margin: 0;
}

/* воздух после вертикального блока и до футера */
body.news-page .news-after-hero{
  margin-bottom: 48px; /* крути тут */
}

/* Подпись под фото (иконка + источник) */
body.news-page .news-photo-credit{
  display: flex;
  align-items: center;
  gap: 8px;

  margin-top: 10px;      /* воздух от фото до подписи */
  margin-bottom: 0px;  /* воздух от подписи до верхней линии */

  font-family: "Source Serif 4", serif;
  font-size: 13px;
  line-height: 1.2;
  color: #555;
}

/* иконка фотоаппарата */
body.news-page .news-photo-credit img{
  width: 16px;
  height: 16px;
  display: block;
  opacity: 0.7;
}

/* Источники: ряд логотипов под byline, перед телом новости.
   Атрибуция явная и видимая, в духе AN/GN/Knewz/FT. Тонкая линия снизу —
   ровно по ширине ряда логотипов (width: fit-content), даёт визуальный
   «постамент» и адаптивно сужается/расширяется при разном числе источников. */
body.news-page .news-sources{
  width: fit-content;
  max-width: var(--news-title-max);
  margin: 0 auto var(--news-sources-mb);
  padding: 0 28px 20px;
  border-bottom: 1px solid rgba(0,0,0,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 28px;
}

body.news-page .news-source-logo,
body.news-page .news-source-logo.no-link{
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  line-height: 0;             /* убираем лишний vertical-align */
}

body.news-page .news-source-logo.no-link{
  cursor: default;
}

body.news-page .news-source-logo img{
  height: 38px;
  width: 38px;
  display: block;
  border-radius: 6px;
  opacity: 1;
  transition: opacity 120ms ease;
}

/* кликабельные — поднимаются до полной непрозрачности на hover */
body.news-page a.news-source-logo:hover img{
  opacity: 1;
}

/* некликабельные источники — приглушены, визуальный сигнал «не ссылка» */
body.news-page .news-source-logo.no-link img{
  opacity: .55;
}

/* legacy-класс для старого external-icon — оставлен на случай старого кэша */
body.news-page .news-source-external{ display: none; }

@media (min-width: 768px) and (max-width: 1024px){

  :root{
    --wrap-max: 1040px;
    --wrap-pad-x: 20px;
    --leftbar-w: 0px;

    --logo-scale-stuck: 1;
    --logo-down: 0px;

    --t-topics-pad-y: 12px;
    --t-topics-pad-x: 16px;
    --t-topics-gap: 28px;

    --t-menu-btn: 48px;
    --t-burger-w: 24px;
    --t-burger-h: 18px;
    --t-burger-line-h: 3px;
    --t-burger-line-2-top: 7px;
    --t-burger-line-3-top: 14px;

    --t-logo-pad-top: 0px;
    --t-logo-pad-bottom: 4px;
    --t-logo-img-h: 47px;
    --t-wrap-pad-top: 12px;

    --news-title-max: 100%;
    --news-text-max: 100%;
    --news-rail-max: 100%;
    --news-right-col: 230px;

    --news-shift-x: 0px;
    --news-wrap-pad-x: 0px;
    --news-main-pad-top: 12px;

    --news-title-mt: 18px;
    --news-title-mb: 20px;

    --news-byline-mt: 0px;
    --news-byline-mb: 10px;
    --news-sources-mb: 22px;

    --news-hero-mt: 0px;
    --news-hero-mb: 0px;

    --after-hero-pt: 16px;
    --after-grid-gap: 18px;
    --after-line-mt: 0px;

    --news-story-before: 0px;
    --news-story-top: 18px;
    --news-story-bottom: 18px;
    --news-story-after: 12px;

    --date-mt: 6px;
  }

  .left-bar{ display:none; }
  .logo-bar::before{ left: 0; }

  .topics{
    padding: var(--t-topics-pad-y) var(--t-topics-pad-x);
    gap: var(--t-topics-gap);
    justify-content: center;
  }

  .menu-btn{ width: var(--t-menu-btn); height: var(--t-menu-btn); }
  .menu-btn .burger{ width: var(--t-burger-w); height: var(--t-burger-h); }
  .menu-btn .burger span{ height: var(--t-burger-line-h); }
  .menu-btn .burger span:nth-child(2){ top: var(--t-burger-line-2-top); }
  .menu-btn .burger span:nth-child(3){ top: var(--t-burger-line-3-top); }

  .logo-bar .brand-block .logo-inner{
    padding: var(--t-logo-pad-top) 0 var(--t-logo-pad-bottom) 0;
  }

  .logo-bar .brand-block .logo-inner img{
    height: var(--t-logo-img-h);
    transform: none;
  }

  body.news-page main.main{
    padding-top: var(--news-main-pad-top);
  }

  body.news-page main .wrap{
    padding-left: calc(var(--wrap-pad-x, 0px) + var(--news-wrap-pad-x));
    padding-right: calc(var(--wrap-pad-x, 0px) + var(--news-wrap-pad-x));
  }

  body.news-page .wrap.news-wrap{
    max-width: var(--wrap-max);
    margin-bottom: 0;
    padding-bottom: 0;
  }

  body.news-page .wrap.news-wrap + .wrap{
    margin-top: 0;
    padding-top: 0;
  }

  body.news-page .news-article{
    padding: 0;
  }

  body.news-page .news-title{
    max-width: var(--news-title-max);
    margin: var(--news-title-mt) auto var(--news-title-mb);
    text-align: center;
    font-size: 31px;
    line-height: 1.08;
    letter-spacing: -0.02em;
    text-decoration-thickness: 2px;
    text-underline-offset: 2px;
  }

  body.news-page .news-byline{
    max-width: var(--news-title-max);
    margin: var(--news-byline-mt) auto var(--news-byline-mb);
  }

  body.news-page .news-brand{
    font-size: 13px;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: 0.03em;
  }

  body.news-page .news-date-line{
    margin-top: var(--date-mt);
    font-size: 12px;
    line-height: 1.25;
    letter-spacing: 0.03em;
  }

  body.news-page .news-hero-slot{
    max-width: var(--news-rail-max);
    margin: var(--news-hero-mt) auto var(--news-hero-mb);
  }

  body.news-page .news-hero-slot img,
  body.news-page .news-image{
    width: 100%;
    /* aspect-ratio: 16/9 + object-fit: cover уже задано на base селекторе
       (см. строки 176-180). Здесь только display reaffirmation для
       responsive контекста. height не задаём — aspect-ratio управляет. */
    display: block;
  }

  body.news-page .news-photo-credit{
    margin-top: 8px;
    margin-bottom: 0;
    font-size: 12px;
    line-height: 1.2;
  }

  body.news-page .news-photo-credit img{
    width: 14px;
    height: 14px;
  }

  body.news-page .news-after-hero{
    max-width: var(--news-rail-max);
    margin: 0 auto 32px;
    padding-top: var(--after-hero-pt);
  }

  body.news-page .news-after-grid{
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--news-right-col);
    gap: var(--after-grid-gap);
    align-items: start;
  }

  body.news-page .news-main-col{
    min-width: 0;
  }

  body.news-page .news-story{
    padding-top: var(--news-story-before);
    padding-bottom: var(--news-story-after);
  }

  body.news-page .news-story #newsBottom{
    padding-top: var(--news-story-top);
    padding-bottom: var(--news-story-bottom);
    margin: 0;
  }

  body.news-page .news-body{
    padding: 0;
    margin: 0;
  }

  body.news-page .news-text{
    max-width: 100%;
    margin: 0;
    font-size: 14px;
    line-height: 1.35;
    letter-spacing: -0.02em;
  }

  body.news-page .news-text p{
    margin: 0 0 16px;
    font-size: 14px;
    line-height: 1.35;
  }

  body.news-page .news-body-text .dropcap{
    font-size: 58px;
    line-height: 0.84;
    padding: 0 7px 0 0;
  }

  body.news-page .news-sources{
    gap: 20px;
    padding: 0 20px 16px;
  }

  body.news-page .news-source-logo img{
    height: 32px;
    width: 32px;
  }

  body.news-page .side-headlines{
    padding: 0;
    padding-top: 0;
    margin-top: 0;
    position: static;
    top: auto;
    align-self: start;
    height: auto;
    box-shadow: none;
    transform: none;
    border: 1px solid rgba(0,0,0,.18);
    background: #fff;
  }

  body.news-page .side-headlines-title{
    font-size: 16px;
    padding: 12px 0;
  }

  body.news-page .side-headlines .side-item{
    gap: 4px;
    margin: 0 0 4px 0;
    padding: 8px;
  }

  body.news-page .side-headlines .side-num{
    font-size: 14px;
    line-height: 1.5;
    width: 0;
    flex: 0 0 16px;
  }

  body.news-page .side-headlines .side-link{
    font-size: 12px;
    line-height: 1.25;
    flex: 1 1 auto;
    min-width: 0;
    margin-left: 0;
    padding-left: 0;
  }

  body.news-page .wrap{
    box-sizing: border-box;
  }  
}

@media (max-width: 767px){

  body.news-page main .wrap{
    padding-left: var(--wrap-pad-x);
    padding-right: var(--wrap-pad-x);
  }
  body.news-page .news-title,
  body.news-page .news-byline,
  body.news-page .news-text,
  body.news-page .news-hero-slot,
  body.news-page .news-after-hero{
    max-width: 100%;
  }
}

/* DROP CAP — первая АЛФАВИТНАЯ буква первого абзаца.
   Реализация: news.js оборачивает первую letter в <span class="dropcap">,
   пропуская ведущую пунктуацию (кавычки «», скобки, etc.). Это решает
   баг гигантской открывающей кавычки, которая возникала при ::first-letter
   (CSS-спецификация включает ведущую пунктуацию в псевдо-элемент). */
body.news-page .news-body-text .dropcap{
  float: left;
  font-family: "Playfair Display", serif;
  font-weight: 800;
  font-size: 72px;
  line-height: 0.85;
  padding: 0 8px 0 0;
  color: #111;
}