/* ============================================================
   LATAM MOVE — news.css
   Компоненты новостного профиля (news.latammove.com).
   Подключается per-page через frontmatter
   `extraCss: /assets/css/news.css` — механизм `meta.hbs`, так же
   работает invest.css. Макет, по которому это собрано, и
   обоснование каждого блока — `LATAMMOVE\_proto-news\README.md`
   (дизайн одобрен владельцем 2026-11-12) и аудит SEO/GEO рядом.

   🔴 ПОЧЕМУ ОТДЕЛЬНЫЙ ФАЙЛ, А НЕ ДОПИСКА В main.css:
   main.css отдаётся ВСЕМ трём живым сайтам. Любая правка в нём —
   риск уровня T2 на три прода разом. Отдельный файл новостного
   профиля не может сломать latammove.com, invest. и paraguay.,
   потому что они его не загружают.

   Ни одного нового цвета, шрифта или радиуса: всё из :root
   main.css. Прямые углы, золотые волосяные линии, подъём на 4px
   при наведении — те же приёмы, что у .invest-card и .cluster-card.
   ============================================================ */

/* ---------- 1 · Страновой переключатель (главная) ---------- */
.news-countries{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--c-border);border:1px solid var(--c-border);
}
.news-country{
  display:flex;align-items:center;gap:14px;background:var(--c-white);
  padding:20px 24px;transition:background .3s var(--ease);position:relative;
}
.news-country__flag{width:26px;height:19px;flex:none;border:1px solid var(--c-border)}
.news-country__name{font-family:var(--font-serif);font-size:19px;font-weight:600;color:var(--c-navy)}
.news-country__count{display:block;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--c-text-muted);margin-top:3px}
a.news-country::after{content:"→";margin-left:auto;color:var(--c-gold);transition:transform .3s var(--ease)}
a.news-country:hover{background:var(--c-off-white)}
a.news-country:hover::after{transform:translateX(4px)}
a.news-country.is-current{background:var(--c-off-white);box-shadow:inset 0 -2px 0 var(--c-gold)}
/* страна без материалов НЕ ссылка: пустой страницы не существует вовсе */
.news-country--soon{opacity:.55}
.news-country--soon .news-country__count{color:var(--c-text-muted)}

/* ---------- 2 · Главный материал дня ---------- */
.news-lead{
  display:grid;grid-template-columns:1.45fr 1fr;gap:1px;
  background:var(--c-border);border:1px solid var(--c-border);
  transition:border-color .3s var(--ease);
}
.news-lead:hover{border-color:var(--c-border-gold)}
.news-lead__main{background:var(--c-white);padding:clamp(28px,3.5vw,44px);display:flex;flex-direction:column}
.news-lead__title{font-family:var(--font-serif);font-size:clamp(24px,2.8vw,36px);font-weight:600;line-height:1.18;color:var(--c-navy);margin:14px 0 16px;max-width:30ch}
.news-lead__desc{font-size:16px;line-height:1.7;color:var(--c-text-muted);max-width:60ch}
.news-lead__foot{margin-top:auto;padding-top:24px;display:flex;flex-wrap:wrap;gap:16px 24px;align-items:center}
.news-lead__side{background:var(--c-off-white);padding:clamp(24px,3vw,36px);border-left:2px solid var(--c-gold)}
/* Карточка без «контекста дня» (Р-96 сработал не в каждый день) — одна колонка.
   Правая колонка не пустует: её просто нет. */
.news-lead--solo{grid-template-columns:1fr}
.news-lead__side h3{font-family:var(--font-serif);font-size:17px;font-weight:600;color:var(--c-navy);margin-bottom:12px}
.news-lead__side p{font-size:14px;line-height:1.7;color:var(--c-text-muted)}
.news-lead__side p+p{margin-top:10px}

/* ---------- 2a · Карточка как самостоятельная запись ----------
   Аудит 2026-11-12: карточка ленты была просто `<a>` со `<span>`-заголовком —
   у страницы не было ни одной записи с собственным заголовком и машинной
   датой. Теперь каждая карточка это `<article>` с `<h3>` и `<time datetime>`.
   Обёртка `<article>` становится элементом сетки, поэтому карточке нужен
   `flex:1` — иначе она перестанет растягиваться до высоты строки и сетка
   развалится по высоте. */
.news-grid>article{display:flex}
.news-grid>article>.news-card{flex:1}

/* ---------- 3 · Лента страны (газетная колонка даты) ---------- */
.news-feed{border-top:1px solid var(--c-border)}
.news-item{
  display:grid;grid-template-columns:150px minmax(0,1fr) 180px;gap:clamp(16px,2.5vw,32px);
  padding:26px 0;border-bottom:1px solid var(--c-border);
  transition:background .25s var(--ease);
}
.news-item:hover{background:var(--c-white)}
.news-item.is-hidden{display:none}
.news-item__date{font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--c-text-muted);padding-top:3px}
.news-item__date b{display:block;font-family:var(--font-serif);font-size:22px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--c-navy)}
.news-item__title{display:block;font-family:var(--font-serif);font-size:21px;font-weight:600;line-height:1.3;color:var(--c-navy)}
.news-item:hover .news-item__title{color:var(--c-gold)}
.news-item__desc{font-size:14.5px;line-height:1.65;color:var(--c-text-muted);margin-top:8px;max-width:70ch}
.news-item__tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.news-item__aside{text-align:right;font-size:12px;color:var(--c-text-muted);padding-top:4px}
.news-item__cat{display:block;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--c-navy)}
.news-item__src{display:block;margin-top:8px;overflow-wrap:anywhere}

/* ---------- 4 · Теги и фильтр ---------- */
.news-tag{
  font-size:12px;font-weight:500;color:var(--c-text-muted);
  border:1px solid var(--c-border);padding:3px 10px;background:var(--c-white);
  transition:border-color .25s var(--ease),color .25s var(--ease);
}
/* hover тегов — ниже, в блоке нейтрализации `.prose a`: держать его в двух
   местах значило бы развести правила при первой правке */
/* 🔴 Фильтр — прогрессивное улучшение, и скрыт ДО включения скриптом.
   Лента целиком отрендерена на сервере; без JS посетитель не теряет ни
   одного материала, он лишь не получает фильтра. Чипс без JS был бы
   кнопкой, которая ничего не делает. */
.news-filter[hidden]{display:none}
.news-filter{
  display:flex;flex-wrap:wrap;gap:8px;align-items:center;
  padding-bottom:22px;
}
.news-filter__label{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--c-text-muted);margin-right:6px}
.news-filter__empty{font-size:14px;color:var(--c-text-muted);padding:20px 0}
/* счётчик в чипсе: число ставит скрипт по факту, а не редактор руками */
.filter-chip__n{font-size:11px;font-weight:600;color:var(--c-text-muted);margin-left:7px;vertical-align:1px}
.filter-chip.is-active .filter-chip__n{color:rgba(255,255,255,.7)}

/* ---------- 5 · «Что это значит» — несущий блок материала ---------- */
/* Это то, что отличает материал от перевода (Р-А), поэтому он обязан быть
   самым заметным блоком страницы — заметнее заголовков h2 внутри .prose. */
.news-meaning{
  background:var(--c-navy);color:#fff;padding:clamp(28px,3.5vw,44px);
  border-left:3px solid var(--c-gold);margin:2.2em 0;
}
.news-meaning__eyebrow{font-size:12px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--c-gold-bright);display:block;margin-bottom:14px}
.news-meaning h2{font-family:var(--font-serif);font-size:clamp(22px,2.4vw,30px);font-weight:600;color:#fff;margin:0 0 16px}
.news-meaning p{font-size:17px;line-height:1.7;color:rgba(255,255,255,.88);margin:0}
.news-meaning p+p{margin-top:.9em}
/* подвал панели: призыв подписаться на канал.
   🔑 Ссылка, а НЕ кнопка — и это несущее решение, а не вкусовщина. Сразу под
   панелью стоят два маршрута услуг (`news-inline-cta`), и это дорогая
   конверсия. Золотая кнопка здесь перетягивала бы внимание на дешёвую.
   Приём тот же, что у `.link-arrow` в main.css: разъезжающийся gap вместо
   сдвига блока — геометрия не меняется, значит дрожи на краю быть не может. */
/* селектор с тегом намеренно: правило `.news-meaning p+p` выше имеет
   специфичность (0,1,2) и перебило бы одиночный класс (0,1,0) — отступ
   подвала схлопнулся бы до .9em */
.news-meaning p.news-meaning__foot{border-top:1px solid rgba(255,255,255,.14);margin-top:26px;padding-top:20px}
/* 🔴 СЕЛЕКТОР С ТЕГОМ `a` ОБЯЗАТЕЛЕН — иначе ссылки НЕ ВИДНО.
   Все эти блоки автор пишет в теле материала, то есть они оказываются
   внутри `.prose`, а там работает `main.css`:
       .prose a{color:var(--c-navy);border-bottom:1px solid var(--c-border-gold)}
   Специфичность `.prose a` — (0,1,1), одиночного класса — (0,1,0), и класс
   проигрывает. На тёмной панели это давало navy #0A2540 поверх navy-фона:
   ссылка пропадала целиком и проявлялась только под курсором, потому что
   `.prose a:hover` красит её в золото. Найдено владельцем 2026-11-12.
   Лечение — две формы в одном правиле: `a.класс` (0,1,1) бьёт `.prose a`
   порядком файлов, а `.prose a.класс` (0,2,1) бьёт его специфичностью и
   потому не зависит от порядка подключения вовсе. */
a.news-meaning__cta,.prose a.news-meaning__cta{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-sans);font-size:15px;font-weight:500;color:var(--c-gold-bright);
  border-bottom:1px solid var(--c-border-gold);padding-bottom:5px;
  transition:gap .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease);
}
.news-meaning__cta svg{width:17px;height:17px;flex:none}
.news-meaning__cta .arr{transition:transform .3s var(--ease)}
a.news-meaning__cta:hover,.prose a.news-meaning__cta:hover{gap:14px;color:#fff;border-color:var(--c-gold)}
.news-meaning__cta:hover .arr{transform:translateX(4px)}

/* Тот же механизм портил ещё два блока внутри `.prose`, молча и не так
   заметно: у карточек-маршрутов нижняя рамка становилась золотой вместо
   общей серой, а у тегов под текстом появлялось золотое подчёркивание. */
a.news-route,.prose a.news-route{border:1px solid var(--c-border)}
a.news-route:hover,.prose a.news-route:hover{border-color:var(--c-gold)}
a.news-tag,.prose a.news-tag{color:var(--c-text-muted);border:1px solid var(--c-border)}
a.news-tag:hover,.prose a.news-tag:hover{color:var(--c-navy);border-color:var(--c-gold)}

/* контекст дня (Р-96) — рамка, а не инверсия: это оговорка, не вывод */
.news-context{
  background:var(--c-white);border:1px solid var(--c-border);
  border-left:2px solid var(--c-gold);padding:20px 24px;font-size:15px;
  line-height:1.7;color:var(--c-text-muted);margin:2em 0;
}
.news-context b{color:var(--c-navy)}

/* ---------- 6 · Воронка: inline в материале ---------- */
/* Ставится СРАЗУ после «Что это значит» — там, где читатель уже понял,
   что новость касается его денег, и ещё не ушёл со страницы. */
.news-inline-cta{border-top:1px solid var(--c-border-gold);border-bottom:1px solid var(--c-border-gold);padding:28px 0;margin:2.4em 0}
.news-inline-cta__head{font-family:var(--font-serif);font-size:20px;font-weight:600;color:var(--c-navy);margin-bottom:6px}
.news-inline-cta__note{font-size:13px;color:var(--c-text-muted);margin-bottom:20px}
.news-inline-cta__grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.news-route{
  display:flex;flex-direction:column;gap:6px;background:var(--c-white);
  border:1px solid var(--c-border);padding:20px 22px;
  transition:border-color .3s var(--ease),transform .3s var(--ease);
}
.news-route:hover{border-color:var(--c-gold);transform:translateY(-3px)}
.news-route__title{font-family:var(--font-serif);font-size:17px;font-weight:600;color:var(--c-navy)}
.news-route__desc{font-size:13.5px;line-height:1.6;color:var(--c-text-muted)}
.news-route__more{font-size:13px;font-weight:500;color:var(--c-gold);margin-top:4px}
.news-route__more::after{content:" ↗"}

/* ---------- 7 · Воронка: широкая полоса (главная и хаб) ---------- */
.news-funnel{background:var(--c-navy-deep);color:#fff}
.news-funnel__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:clamp(28px,3vw,40px)}
.funnel-card{
  display:flex;flex-direction:column;gap:10px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);
  padding:28px;transition:border-color .3s var(--ease),transform .3s var(--ease);
}
.funnel-card:hover{border-color:var(--c-border-gold);transform:translateY(-4px)}
.funnel-card__title{font-family:var(--font-serif);font-size:20px;font-weight:600;color:#fff}
.funnel-card__desc{font-size:14px;line-height:1.65;color:rgba(255,255,255,.7);flex:1}
.funnel-card__more{font-size:13px;font-weight:500;color:var(--c-gold-bright)}
.funnel-card__more::after{content:" ↗"}

/* ---------- 8 · «Готовится» — страны без материалов ---------- */
.news-soon{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.news-soon__card{background:var(--c-white);border:1px dashed var(--c-border);padding:26px 28px}
.news-soon__title{font-family:var(--font-serif);font-size:19px;font-weight:600;color:var(--c-navy);display:flex;align-items:center;gap:10px}
.news-soon__desc{font-size:14px;line-height:1.65;color:var(--c-text-muted);margin-top:10px}

/* ---------- 9 · Как сделана лента (E-E-A-T) ---------- */
.news-about{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,40px)}
.news-about__item{border-top:2px solid var(--c-border-gold);padding-top:18px}
.news-about__item h3{font-family:var(--font-serif);font-size:17px;font-weight:600;color:var(--c-navy);margin-bottom:8px}
.news-about__item p{font-size:14px;line-height:1.7;color:var(--c-text-muted)}

/* ---------- 8a · Полоса-перехватчик под поднимающимися карточками ----------
   🔴 БЕЗ НЕЁ КАРТОЧКА ДРОЖИТ. Найдено владельцем на макете 2026-11-12.

   Механика отказа: `transform:translateY(-3px)` на `:hover` поднимает
   карточку. Если курсор стоит в её нижних 3 px, после подъёма он
   оказывается НИЖЕ карточки — `:hover` снимается, карточка падает назад
   под курсор, `:hover` возвращается. Цикл крутится с частотой перехода
   .3s, и выглядит это как дрожь. На верхнем и боковых краях этого не
   бывает: там подъём уводит границу ОТ курсора, а не из-под него.

   Лечение: прозрачный псевдоэлемент на 6 px ниже карточки. Он остаётся
   частью её области наведения и накрывает освободившуюся полосу, поэтому
   `:hover` не рвётся. Уменьшать подъём или снимать переход не нужно —
   приём «подъём на 4 px» фирменный и остаётся как есть.

   ⚠️ Тот же дефект заложен в `main.css` у `.invest-card`, `.cluster-card`,
   `.news-card`, `.service-card` и `.fab` — это общий приём, мои компоненты
   лишь его унаследовали. Здесь он погашен и для `.news-card`, потому что
   `news.css` грузится только новостным профилем. Остальные три сайта
   лечатся той же парой строк в `main.css` — см. Р-112 в README. */
.news-route,.funnel-card,.news-card{position:relative}
.news-route::after,.funnel-card::after,.news-card::after{
  content:"";position:absolute;left:0;right:0;bottom:-6px;height:6px;
}

/* ---------- 9a · Подписка на канал ---------- */
/* 🔴 Отдельная полоса, а НЕ ссылка внутри карточки ленты. Карточка целиком
   это один <a>; второй <a> внутри — невалидная вложенность, а Safari и
   скринридеры ведут себя на ней непредсказуемо. Плюс карточка потеряла бы
   единственную цель клика: читателю пришлось бы попадать в мелкий значок
   вместо всей карточки.
   🔴 Числа подписчиков здесь нет и не будет: канал молодой, а выдуманные и
   невыгодные метрики доверия в проекте одинаково запрещены. */
.news-subscribe{
  display:flex;flex-wrap:wrap;gap:20px 32px;align-items:center;justify-content:space-between;
  background:var(--c-white);border:1px solid var(--c-border);border-left:2px solid var(--c-gold);
  padding:clamp(22px,2.6vw,32px);
}
.news-subscribe__title{font-family:var(--font-serif);font-size:20px;font-weight:600;color:var(--c-navy)}
.news-subscribe__note{font-size:14px;line-height:1.6;color:var(--c-text-muted);margin-top:6px;max-width:62ch}
.news-subscribe__actions{display:flex;flex-wrap:wrap;gap:12px}
.news-subscribe .btn svg{width:18px;height:18px;flex:none}
/* тёмный вариант — в конце материала, где полоса соседствует с .prose */
.news-subscribe--dark{background:var(--c-navy);border-color:var(--c-navy-soft);border-left-color:var(--c-gold)}
.news-subscribe--dark .news-subscribe__title{color:#fff}
.news-subscribe--dark .news-subscribe__note{color:rgba(255,255,255,.7)}

/* ---------- 10 · Атрибуция источника ---------- */
.news-attr{font-size:13px;color:var(--c-text-muted)}
.news-attr a{color:var(--c-text-muted);border-bottom:1px solid var(--c-border)}
.news-attr a:hover{color:var(--c-gold)}
.post-hero .news-attr{color:rgba(255,255,255,.62);margin-top:18px}
.post-hero .news-attr a{color:var(--c-gold-bright);border-bottom-color:var(--c-border-gold)}

/* ---------- 11 · Хлебная крошка обратно в хаб ---------- */
.news-back{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--c-gold-bright)}
.news-back::before{content:"←";transition:transform .3s var(--ease)}
.news-back:hover::before{transform:translateX(-4px)}

/* ---------- Адаптив (точки те же, что в main.css) ---------- */
@media (max-width:1024px){
  .news-lead{grid-template-columns:1fr}
  .news-lead__side{border-left:0;border-top:2px solid var(--c-gold)}
  .news-item{grid-template-columns:110px minmax(0,1fr)}
  .news-item__aside{grid-column:2;text-align:left;padding-top:0;margin-top:10px}
  .news-funnel__grid{grid-template-columns:1fr}
  .news-about{grid-template-columns:1fr}
}
@media (max-width:768px){
  .news-countries{grid-template-columns:1fr}
  .news-item{grid-template-columns:1fr;gap:6px}
  .news-item__date{display:flex;align-items:baseline;gap:8px}
  .news-item__date b{display:inline;font-size:18px}
  .news-inline-cta__grid{grid-template-columns:1fr}
  .news-soon{grid-template-columns:1fr}
}