/* ============================================================
   Qalqan Media — AI-лента новостей (FS-003)
   Подключается ПОСЛЕ /assets/css/site.css и использует его переменные:
   --navy, --blue, --blue-brand, --paper-*, --ink*, --line*, --radius.
   Новых цветов почти нет: только состояние «предупреждение» (USWDS gold)
   и бейджи уровня доверия на основе фирменных синих.
   Mobile first. Без inline-стилей (CSP сайта: style-src 'self').
   ============================================================ */

:root {
  --warn-bg: #faf3d1;
  --warn-line: #ffbe2e;
  --trust-a: var(--navy);
  --trust-b: var(--blue);
  --skeleton: #e6e8ea;
  --skeleton-hi: #f3f4f5;
  --measure: 44rem;
}

/* ------------------------------------------------ общие улучшения */
.news-h, .article-head h1, .sec-news .sec-h { text-wrap: balance; } /* только блоки ленты: остальной сайт не трогаем */
.news-sum, .article-lead, .article-flow p { text-wrap: pretty; }
.news-time, .article-meta { font-variant-numeric: tabular-nums; }
:lang(kk) .article-flow, :lang(kk) .news-sum { hyphens: auto; }

/* ------------------------------------------------ лента на главной */
.news-feed { display: grid; gap: .85rem; margin: 0 0 1rem; }
@media (min-width: 48rem) { .news-feed { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Карточка целиком кликабельна через растянутую ссылку заголовка —
   один фокусируемый элемент на карточку, без вложенных ссылок. */
.news-feed .news-item {
  position: relative; display: flex; flex-direction: column; gap: .35rem;
  transition: border-color var(--t), background var(--t), box-shadow var(--t);
}
.news-feed .news-item:hover { background: #f6f9fc; border-color: var(--blue); }
.news-feed .news-item:focus-within { box-shadow: 0 0 0 .25rem var(--cyan); }
.news-feed .news-h a::after { content: ''; position: absolute; inset: 0; }
.news-feed .news-h a:focus-visible { outline: none; }
.news-feed .news-item:hover .news-h a { text-decoration: underline; }

/* Первая новость — главная: на всю ширину, крупнее, с толстой линейкой. */
.news-item.is-top { border-left-width: 6px; padding: 1.25rem 1.4rem; }
@media (min-width: 48rem) { .news-item.is-top { grid-column: 1 / -1; } }
.news-item.is-top .news-h { font-size: clamp(1.3rem, 3.2vw, 1.6rem); line-height: 1.2; }
.news-item.is-top .news-sum { font-size: 1.0625rem; -webkit-line-clamp: 4; line-clamp: 4; }

.news-top-row { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .6rem; }
.news-top-row .news-cat { margin: 0; }
.chip {
  display: inline-block; font-size: .75rem; font-weight: 700; letter-spacing: .04em;
  color: var(--ink-2); background: var(--paper-2); border: 1px solid var(--line);
  border-radius: var(--radius); padding: .05rem .45rem; line-height: 1.5;
}
.news-feed .news-sum {
  color: var(--ink-2);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden;
}
.news-feed .news-meta { margin: auto 0 0; padding-top: .35rem; color: var(--muted); }
.ai-mark { display: inline-flex; align-items: center; gap: .3rem; color: var(--muted); }
.ai-mark::before {
  content: ''; width: .7rem; height: .8rem; background: var(--blue-brand);
  clip-path: polygon(50% 0, 100% 18%, 100% 55%, 50% 100%, 0 55%, 0 18%); /* щит Qalqan */
}

.feed-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.25rem; }

/* Состояния виджета: загрузка, ошибка, пусто (методология, Блок 2.1) */
.news-item.is-skeleton { pointer-events: none; min-height: 8.5rem; }
.sk-line { display: block; height: .85rem; border-radius: 2px; margin: .45rem 0; background: var(--skeleton); }
.sk-line.w-30 { width: 30%; } .sk-line.w-90 { width: 90%; } .sk-line.w-70 { width: 70%; }
@media (prefers-reduced-motion: no-preference) {
  .sk-line {
    background: linear-gradient(90deg, var(--skeleton) 25%, var(--skeleton-hi) 50%, var(--skeleton) 75%);
    background-size: 200% 100%; animation: sk 1.4s ease-in-out infinite;
  }
  @keyframes sk { from { background-position: 200% 0; } to { background-position: -200% 0; } }
}
.feed-notice {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem;
  background: var(--warn-bg); border: 1px solid var(--warn-line); border-left: 6px solid var(--warn-line);
  border-radius: var(--radius); padding: .75rem 1rem; margin: 0 0 1rem; color: var(--ink);
}
.feed-notice p { margin: 0; }

/* ------------------------------------------------ страница новости */
.preview-banner {
  background: var(--warn-bg); border-bottom: 3px solid var(--warn-line);
  color: var(--ink); font-weight: 700; text-align: center; padding: .6rem var(--pad); margin: 0;
}

.article { padding-block: 1.5rem 3rem; } /* padding-block: боковые отступы даёт .wrap */
.article-grid { display: grid; gap: 2rem; }
@media (min-width: 62rem) {
  .article-grid { grid-template-columns: minmax(0, var(--measure)) minmax(16rem, 1fr); gap: 3.5rem; align-items: start; }
  .article-aside { position: sticky; top: calc(68px + 1.5rem); }
}

.article-head { max-width: var(--measure); }
.article-head .kicker { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.article-head h1 { font-size: clamp(1.75rem, 5.2vw, 2.6rem); line-height: 1.12; margin: 0 0 1rem; }
.article-head h1::after { content: ''; display: block; width: 5rem; height: 4px; background: var(--blue-brand); margin-top: 1rem; }
.article-lead { font-size: clamp(1.125rem, 2.4vw, 1.3rem); color: var(--ink-2); line-height: 1.5; margin: 0 0 1.25rem; }
.article-meta { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; font-size: .9375rem; color: var(--muted); margin: 0 0 1.25rem; }
.article-meta dt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.article-meta dd { margin: 0; }

/* Плашка ИИ: тот же язык, что .launch-note сайта, но компактнее. */
.ai-note {
  display: flex; gap: .75rem; align-items: flex-start;
  background: var(--paper-3); border: 1px solid var(--blue-light); border-left: 6px solid var(--blue-brand);
  border-radius: var(--radius); padding: .85rem 1rem; margin: 0 0 2rem; font-size: .9375rem; color: var(--ink-2);
}
.ai-note::before {
  content: ''; flex: none; width: 1.1rem; height: 1.3rem; margin-top: .1rem; background: var(--blue-brand);
  clip-path: polygon(50% 0, 100% 18%, 100% 55%, 50% 100%, 0 55%, 0 18%);
}
.ai-note p { margin: 0; }
.ai-note strong { color: var(--navy); }
.mt-badge {
  display: inline-block; margin-left: .35rem; padding: 0 .4rem; border-radius: var(--radius);
  background: var(--paper); border: 1px solid var(--line-strong); font-size: .8125rem; font-weight: 700; color: var(--ink-2);
}

/* Формула «угроза → анализ → решение» — нумерованные шаги, как .steps на сайте. */
.article-flow { counter-reset: flow; display: grid; gap: 1.5rem; margin: 0 0 2rem; max-width: var(--measure); }
.flow-step { counter-increment: flow; position: relative; padding-left: 3rem; }
.flow-step::before {
  content: counter(flow); position: absolute; left: 0; top: .1rem;
  width: 2rem; height: 2rem; border-radius: 50%; background: var(--blue-brand); color: #fff;
  display: grid; place-items: center; font-size: .875rem; font-weight: 700;
}
.flow-step::after { content: ''; position: absolute; left: calc(1rem - 1px); top: 2.4rem; bottom: -1.2rem; width: 2px; background: var(--line); }
.flow-step:last-child::after { display: none; }
.flow-step h2 { font-size: 1.1875rem; margin: .2rem 0 .4rem; }
.flow-step p:last-child { margin-bottom: 0; }

.todo { max-width: var(--measure); margin: 0 0 2rem; }
.todo > h2 { font-size: clamp(1.3rem, 3.5vw, 1.6rem); }
.todo > h2::after { content: ''; display: block; width: 3.5rem; height: 4px; background: var(--blue-brand); margin-top: .6rem; }
.todo-grid { display: grid; gap: var(--gap); }
@media (min-width: 40rem) { .todo-grid.has-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.todo-card { background: var(--paper-2); border-top: 4px solid var(--blue-brand); border-radius: var(--radius); padding: 1rem 1.15rem; }
.todo-card h3 { font-size: .8125rem; letter-spacing: .12em; text-transform: uppercase; color: var(--blue-brand); margin: 0 0 .5rem; }
.todo-card .result-list { margin: 0; }
.todo-card .result-list li { color: var(--ink); }
.todo-card .result-list p { margin: 0; }

/* Боковая колонка: источники и темы */
.aside-block { border-top: 4px solid var(--blue-brand); padding-top: .85rem; margin-bottom: 1.75rem; }
.aside-block h2 { font-size: .8125rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 0 0 .75rem; }
.source-list { margin: 0; display: grid; gap: .75rem; }
.source-list li { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: .1rem .6rem; align-items: start; }
.source-list a { font-weight: 600; overflow-wrap: anywhere; }
.source-list .src-meta { grid-column: 2; font-size: .875rem; color: var(--muted); }
.trust {
  grid-row: span 2; display: grid; place-items: center; width: 1.6rem; height: 1.6rem; margin-top: .1rem;
  border-radius: var(--radius); color: #fff; font-size: .8125rem; font-weight: 700;
}
.trust-A { background: var(--trust-a); }
.trust-B { background: var(--trust-b); }
.trust-C { background: var(--paper); color: var(--ink-2); border: 1px solid var(--line-strong); }

.article-foot { max-width: var(--measure); border-top: 1px solid var(--line); padding-top: 1.25rem; }

/* ------------------------------------------------ архив */
.archive-list { display: grid; gap: .85rem; margin: 0; }
.archive-list .news-item { content-visibility: auto; contain-intrinsic-size: auto 9rem; }

@media print {
  .preview-banner, .feed-actions, .article-aside .tags { display: none !important; }
  .article-grid { display: block; }
  .flow-step::after { display: none; }
  .source-list a::after { content: ' (' attr(href) ')'; font-weight: 400; }
}