/* ------------------------------------------------------------------
   ЛЕНТА БЛОГА · написана ПО ЭТАЛОНУ, а не собрана зеркалом кита.

   Пакета Claude Design у этой секции нет вовсе - решение владельца
   07.09.2026 дословно: «можешь даже без Claude design попробовать,
   просто сразу верстать и натягивать». Источником правды стал сам
   эталон; числа сняты живьём и лежат в docs/konkurent/blog-zamer.md,
   каждое с указанием набора.

   Цена решения названа вслух: правило проекта «стили секции - зеркало,
   руками не правятся» для ЭТОЙ секции снято, инструмента adopt-feed.php
   не существует. Значит правку этого файла не перетирает пересборка -
   но и защиты от расхождения с макетом больше нет. Прецедент рядом:
   site-contacts.css выведен из цепочки зеркал по той же причине.

   ШАГ СЕТКИ ЭТАЛОНА - 6px, А НЕ 4px. Замерено тремя независимыми
   числами: `p-5` = 30, `w-8` = 48, `gap-6` = 36. Поэтому `gap-4` = 24,
   `gap-8` = 48, `gap-12` = 72, `py-12` = 72, `py-16` = 96. Лестница
   ШИРИН при этом обычная, в rem: `max-w-2xl` = 672, `max-w-xl` = 576.

   ЧТО ЗАМЕРЕНО И ЧТО ВЫБРАНО - разное, и смешивать их нельзя.
     замерено: все отступы, зазоры, ширины колонок, радиус 16, вуаль
               карточки rgba(0,0,0,.047), линия 1px rgb(50,52,61),
               кегли заголовков секции (61.04 у A, 31.25 у В), кегль
               пилюли 12.8, прозрачность портретного кадра .8 -> 1;
     выбрано:  кегли ЗАГОЛОВКА КАРТОЧКИ и выдержки - у эталона они не
               снимались. Взяты со своей лестницы (25 / 16), и это
               объявленное решение, а не замер.

   Порог узости - контейнерный запрос по ширине БУМАГИ, как во всём
   слое: 1040 отвечает эталонному `@desktop`, 700 - его `@tablet`.
   Базовые правила - самая широкая ступень, узкие идут перекрытием;
   это порядок соседних китов, а не свой.

   RTL: только логические свойства, физических нет ни одного.
   ------------------------------------------------------------------ */

.ls-feed {
  /* Мера и поля контейнера - замер эталона: 1536 при поле 24. */
  --ls-feed-max: 1536px;
  --ls-feed-gut: 24px;

  /* Поля секции по вертикали: py-16 на широкой, py-12 на узкой. */
  --ls-feed-pad: 96px;

  /* Зазор «голова - список»: gap-12 на широкой, gap-8 на узкой. */
  --ls-feed-gap: 72px;

  /* Сетка карточек: gap-4 у наборов A/Б/В, gap-3 у портретной. */
  --ls-feed-cols: repeat(2, minmax(0, 1fr));
  --ls-feed-cg: 24px;

  /* Карточка. Радиус едет общей лестницей угла, как у всех китов. */
  --ls-feed-r: calc(16px * var(--ls-r-k, 1));
  --ls-feed-card-pad: 30px;

  /*
   * ФОН КАРТОЧКИ - ВУАЛЬ, А НЕ ЦВЕТ, и это главный замер набора.
   * `rgba(0,0,0,0.047)` не изменился ни на светлой плоскости, ни на
   * тёмной: карточка это 4.7% чёрного ПОВЕРХ фона секции, поэтому она
   * годится на любом фоне по построению. Дай мы ей роль палитры - у
   * её цвета завёлся бы второй хозяин, и на своём фоне секции она
   * разошлась бы с ним молча.
   */
  --ls-feed-veil: rgba(0, 0, 0, .047);

  /* Типографика. Кегли секции замерены, кегли карточки выбраны. */
  --ls-feed-h2: 61.04px;
  --ls-feed-h2-lh: 1.15;
  --ls-feed-lead: 20px;
  --ls-feed-t: 25px;
  --ls-feed-x: 16px;
  --ls-feed-meta: 12.8px;

  --ls-feed-ink: var(--ls-ink, #23201c);
  --ls-feed-muted: var(--ls-muted, #6d675f);
  --ls-feed-line: rgb(50, 52, 61);

  position: relative;
  padding-block: var(--ls-feed-pad);
  background: var(--ls-paper, #f7f4ef);
  color: var(--ls-feed-ink);
}

/*
 * РИТМ СЕКЦИИ У КАЖДОГО ДИЗАЙНА СВОЙ - ЗАМЕР ВТОРОГО ЗАХОДА, а не общее правило.
 *
 * Первая редакция несла один ритм на всех, снятый с набора A. Замер на странице `Blog`
 * эталона показал три разных: у В отступы в полтора раза крупнее (`gap-16 py-20 @tablet:py-24`
 * против `gap-8 py-12 @tablet:gap-12 @tablet:py-16`), а у Г зазор не растёт с планшета
 * (`@tablet:gap-8`). Числа при шаге сетки эталона 6px.
 */
.ls-feed[data-set="C"] {
  --ls-feed-pad: 144px;
  --ls-feed-gap: 96px;
}

.ls-feed[data-set="D"] {
  --ls-feed-gap: 48px;
}

/*
 * У НАБОРОВ В И Г ЗАГОЛОВОК СЕКЦИИ ВДВОЕ МЕЛЬЧЕ - 31.25 против 61.04, замерено у обоих.
 * Первый заход поставил Г крупный по аналогии с A, и это была ошибка переноса.
 */
.ls-feed[data-set="C"],
.ls-feed[data-set="D"] {
  --ls-feed-h2: 31.25px;
  --ls-feed-h2-lh: 1.25;
}

/*
 * ЧЕРНИЛО НАСЛЕДУЕТСЯ, А НЕ БЕРЁТСЯ У ПАЛИТРЫ ПОВТОРНО.
 *
 * Свой фон секции печатается инлайном ВМЕСТЕ с пересчитанным чернилом
 * (`sc_site_blog_render()`), и на тёмном кружке оно переворачивается в
 * почти белое - ровно так же, как у эталона (замер: `rgb(5,6,13)` на
 * светлом против `rgb(251,252,253)` на `#727272`). Возьми любой узел
 * внутри цвет у `--ls-ink` напрямую - переворот до него не доехал бы, и
 * на тёмном фоне остался бы чёрный текст. Поэтому внутри секции цвет
 * только наследуется; исключение одно - приглушённый тон, и он взят
 * прозрачностью от того же наследуемого цвета, а не своей ролью.
 */
.ls-feed *,
.ls-feed *::before,
.ls-feed *::after {
  box-sizing: border-box;
}

.ls-feed__ct {
  display: flex;
  flex-direction: column;
  gap: var(--ls-feed-gap);
  inline-size: 100%;
  max-inline-size: var(--ls-feed-max);
  margin-inline: auto;
  padding-inline: var(--ls-feed-gut);
}

/* ==================================================================
   ГОЛОВА · четыре формы, по одной на набор
   ================================================================== */

.ls-feed__head {
  display: flex;
  flex-direction: column;
}

.ls-feed__headIn {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-inline-size: 0;
}

.ls-feed__h {
  margin: 0;
  font-family: var(--ls-head-face, inherit);
  font-size: var(--ls-feed-h2);
  line-height: var(--ls-feed-h2-lh);
  font-weight: 600;
  color: inherit;
}

.ls-feed__p {
  margin: 0;
  font-family: var(--ls-text-face, system-ui);
  font-size: var(--ls-feed-lead);
  line-height: 1.4;
  color: inherit;
  opacity: .78;
}

/*
 * ВТОРАЯ ПОЛОВИНА ГОЛОВЫ - КНОПКА, И ОНА ПРИЖАТА К НИЗУ ВМЕСТЕ С НАБОРОМ Б.
 * Замер эталона: кнопка 169x56, у головы `items-end`; у набора Г она в строке по центру.
 */
.ls-feed__headSide {
  display: flex;
  /* Вторая половина забирает остаток и прижимает кнопку к внешнему краю: у эталона голова
     это ДВЕ колонки, а не текст с довеском. Горизонтальное положение кнопки замером не
     снято - прижатие к краю это наше решение, названное вслух. */
  flex: 1 1 auto;
  align-items: center;
  justify-content: flex-end;
}

.ls-feed__more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: 56px;
  padding-inline: 30px;
  border: 1px solid currentColor;
  border-radius: var(--ls-r-pill, 999px);
  font-family: var(--ls-text-face, system-ui);
  font-size: var(--ls-feed-x);
  line-height: 1.2;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity .2s ease;
}

.ls-feed__more:hover {
  opacity: .7;
}

.ls-feed__more:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* A - узкая колонка 672. */
.ls-feed__head[data-head="plain"] .ls-feed__headIn {
  max-inline-size: 672px;
}

/*
 * Б - на широкой две колонки, прижатые к НИЗУ, текстовая половина уже
 * (576 против 672). Отличие набора Б от A этим и исчерпывается: карточка
 * у них одна и та же, и вторую разметку ей заводить нельзя.
 */
.ls-feed__head[data-head="split"] {
  flex-direction: row;
  align-items: flex-end;
  gap: 48px;
}

.ls-feed__head[data-head="split"] .ls-feed__headIn {
  flex: 1 1 50%;
  max-inline-size: 576px;
}

/* В - заголовок слева, абзац справа, зазор 36. */
.ls-feed__head[data-head="two"] .ls-feed__headIn {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 36px;
  align-items: start;
  max-inline-size: none;
}

.ls-feed__head[data-head="two"] .ls-feed__h {
  font-size: 31.25px;
  line-height: 1.25;
}

/* Г - в строку по центру, текст в колонке 576 с тесным зазором. */
.ls-feed__head[data-head="row"] {
  flex-direction: row;
  align-items: center;
  gap: 36px;
}

.ls-feed__head[data-head="row"] .ls-feed__headIn {
  gap: 12px;
  max-inline-size: 576px;
}

/* ==================================================================
   СПИСОК · сетка, строка, портрет
   ================================================================== */

.ls-feed__grid {
  display: grid;
  grid-template-columns: var(--ls-feed-cols);
  gap: var(--ls-feed-cg);
}

/*
 * ОСЬ «КОЛОНКИ» ДОБАВЛЯЕТ ТОЛЬКО ШИРОКУЮ СТУПЕНЬ - это замер, а не
 * упрощение. У эталона `2 columns` и `3 columns` отличаются ровно одним
 * классом `@desktop:grid-cols-3`; узкие ширины у обоих значений идут
 * одинаково. Значит это не два вида сетки, а одна лестница с
 * необязательной третьей ступенью.
 */
.ls-feed__grid[data-cols="3"] {
  --ls-feed-cols: repeat(3, minmax(0, 1fr));
}

/* Портретная сетка: три колонки и зазор МЕНЬШЕ, чем у карточек. */
.ls-feed__grid[data-gap="tight"] {
  --ls-feed-cols: repeat(3, minmax(0, 1fr));
  --ls-feed-cg: 18px;
}

.ls-feed__list {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* ==================================================================
   КАРТОЧКА · одна на сеточный и строчный вид
   ================================================================== */

.ls-feed__card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-block-size: 0;
  overflow: hidden;
  border-radius: var(--ls-feed-r);
  background: var(--ls-feed-veil);
  color: inherit;
  text-decoration: none;
  transition: box-shadow .2s ease;
}

.ls-feed__card:hover {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1);
}

.ls-feed__card:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/*
 * КАДР ПЕЧАТАЕТСЯ ТОЛЬКО ПРИ НАСТОЯЩЕЙ МИНИАТЮРЕ, поэтому правила
 * писаны от самого узла, а не от места в порядке: карточка без снимка
 * обязана выглядеть законченной, а не потерявшей первую строку.
 */
.ls-feed__shot {
  position: relative;
  display: block;
  inline-size: 100%;
  flex: 0 0 auto;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.ls-feed__shot img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  display: block;
}

.ls-feed__body {
  display: flex;
  min-block-size: 0;
  flex: 1 1 auto;
  flex-direction: column;
  padding: var(--ls-feed-card-pad);
}

.ls-feed__lines {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ls-feed__t {
  font-family: var(--ls-head-face, inherit);
  font-size: var(--ls-feed-t);
  line-height: 1.3;
  font-weight: 600;
}

.ls-feed__x {
  font-family: var(--ls-text-face, system-ui);
  font-size: var(--ls-feed-x);
  line-height: 1.5;
  opacity: .78;

  /* Выдержка обрезается тремя строками: карточки одного ряда обязаны
     быть одной высоты, а длина выдержки у статьи ничем не ограничена. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ls-feed__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-block-start: auto;
  padding-block-start: 36px;
  font-family: var(--ls-text-face, system-ui);
  font-size: var(--ls-feed-meta);
  line-height: 1.4;
  opacity: .7;
}

.ls-feed__when {
  white-space: nowrap;
}

/*
 * СТРОЧНЫЙ ВИД - ТА ЖЕ КАРТОЧКА, ДРУГАЯ ОБЁРТКА. Замерено: класс
 * внутреннего узла у эталона в обоих видах совпадает знак в знак,
 * меняются только направление и ширина кадра. Кадр получает потолок
 * 288 (`18rem`) и отношение 16:10, которое держится всегда.
 */
.ls-feed__list .ls-feed__card {
  flex-direction: row;
  align-items: stretch;
  inline-size: 100%;
}

.ls-feed__list .ls-feed__shot {
  inline-size: 288px;
  max-inline-size: min(100%, 18rem);
  flex: 0 0 auto;
}

/* ==================================================================
   СТРОКИ · набор В
   ================================================================== */

.ls-feed__rows {
  display: flex;
  flex-direction: column;
}

/*
 * ЛИНИЯ - ОТДЕЛЬНЫЙ УЗЕЛ, А НЕ ГРАНИЦА СТРОКИ, и это замер эталона:
 * `div.w-full` высотой 1px. Граница на строке дала бы линию и снизу
 * последней либо потребовала бы правила `:last-child` - то есть смысл
 * держался бы на порядке, а не на разметке.
 */
.ls-feed__line {
  display: block;
  block-size: 1px;
  inline-size: 100%;
  background: var(--ls-feed-line);
  opacity: .35;
}

.ls-feed__row {
  display: flex;
  align-items: flex-start;
  gap: 48px;
  padding-block: 48px;
  padding-inline: 24px;
  color: inherit;
  text-decoration: none;
}

.ls-feed__row:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.ls-feed__no {
  flex: 0 0 auto;
  inline-size: 48px;
  font-family: var(--ls-text-face, system-ui);
  font-size: var(--ls-feed-meta);
  line-height: 1.4;
  opacity: .55;
}

.ls-feed__rowIn {
  display: flex;
  min-inline-size: 0;
  flex-direction: column;
  gap: 12px;
}

.ls-feed__rt {
  font-family: var(--ls-head-face, inherit);
  font-size: var(--ls-feed-t);
  line-height: 1.3;
  font-style: italic;
  font-weight: 500;
  opacity: .85;
  transition: opacity .2s ease;
}

.ls-feed__row:hover .ls-feed__rt {
  opacity: 1;
}

.ls-feed__rx {
  font-family: var(--ls-text-face, system-ui);
  font-size: var(--ls-feed-x);
  line-height: 1.5;
  opacity: .6;

  /* Ровно две строки - замер эталона (`line-clamp-2`), а не выбор. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ==================================================================
   ПОРТРЕТ · набор Г
   ================================================================== */

.ls-feed__port {
  display: flex;
  flex-direction: column;
  color: inherit;
  text-decoration: none;
}

.ls-feed__port:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/*
 * СКРУГЛЁН САМ СНИМОК, А НЕ КАРТОЧКА - замер эталона. Карточка здесь
 * вообще не залита: у портретного набора нет ни вуали, ни поля.
 */
.ls-feed__pshot {
  position: relative;
  display: block;
  inline-size: 100%;
  aspect-ratio: 3 / 4;
  max-block-size: 516px;
  overflow: hidden;
  border-radius: var(--ls-feed-r);
  opacity: .8;
  transition: opacity .2s ease;
}

.ls-feed__port:hover .ls-feed__pshot {
  opacity: 1;
}

.ls-feed__pshot img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  display: block;
}

.ls-feed__pmeta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-block-start: 24px;
  font-family: var(--ls-text-face, system-ui);
  font-size: var(--ls-feed-meta);
  line-height: 1.4;
  opacity: .7;
}

.ls-feed__pt {
  padding-block-start: 18px;
  font-family: var(--ls-head-face, inherit);
  font-size: var(--ls-feed-t);
  line-height: 1.3;
  font-weight: 600;
}

/* ==================================================================
   ПУСТАЯ ЛЕНТА
   ================================================================== */

.ls-feed__none {
  margin: 0;
  font-family: var(--ls-text-face, system-ui);
  font-size: var(--ls-feed-x);
  line-height: 1.5;
  opacity: .6;
}

/* ==================================================================
   УЗОСТЬ · 1040 отвечает `@desktop` эталона, 700 - его `@tablet`
   ================================================================== */

@container ls (max-width: 1040px) {
  .ls-feed {
    --ls-feed-h2: 48.83px;
    --ls-feed-h2-lh: 1.18;
  }

  /* Третья ступень колонок - широкая, и на этом пороге она снимается. */
  .ls-feed__grid[data-cols="3"],
  .ls-feed__grid[data-gap="tight"] {
    --ls-feed-cols: repeat(2, minmax(0, 1fr));
  }

  /* Головы Б и Г складываются в колонку - у эталона это `@desktop`. */
  .ls-feed__head[data-head="split"],
  .ls-feed__head[data-head="row"] {
    flex-direction: column;
    align-items: stretch;
  }

  .ls-feed__head[data-head="split"] .ls-feed__headIn {
    flex: 1 1 auto;
  }

  .ls-feed__pmeta {
    padding-block-start: 36px;
  }

  .ls-feed__pt {
    padding-block-start: 24px;
  }
}

@container ls (max-width: 700px) {
  .ls-feed {
    --ls-feed-pad: 72px;
    --ls-feed-gap: 48px;
    --ls-feed-h2: 39.06px;
    --ls-feed-h2-lh: 1.2;
    --ls-feed-lead: 18px;
  }

  /* У В на узкой поля 120 при зазоре 96 - `py-20 gap-16` эталона. */
  .ls-feed[data-set="C"] {
    --ls-feed-pad: 120px;
    --ls-feed-gap: 96px;
  }

  .ls-feed[data-set="C"],
  .ls-feed[data-set="D"] {
    --ls-feed-h2: 25px;
    --ls-feed-h2-lh: 1.3;
  }

  .ls-feed__grid,
  .ls-feed__grid[data-cols="3"],
  .ls-feed__grid[data-gap="tight"] {
    --ls-feed-cols: minmax(0, 1fr);
  }

  .ls-feed__head[data-head="split"] {
    gap: 24px;
  }

  /* На узкой кнопка перестаёт быть островом справа и встаёт во всю ширину. */
  .ls-feed__more {
    inline-size: 100%;
  }

  .ls-feed__head[data-head="two"] .ls-feed__headIn {
    grid-template-columns: minmax(0, 1fr);
    gap: 48px;
  }

  .ls-feed__head[data-head="two"] .ls-feed__h {
    font-size: 25px;
    line-height: 1.3;
  }

  /*
   * В УЗКОЙ ШИРИНЕ СТРОЧНЫЙ ВИД - ТА ЖЕ КОЛОНКА, ЧТО И СЕТОЧНЫЙ, и это
   * замер, а не облегчение: строкой карточка эталона становится только
   * с планшета. Кадр здесь возвращает себе полную ширину.
   */
  .ls-feed__list .ls-feed__card {
    flex-direction: column;
  }

  .ls-feed__list .ls-feed__shot {
    inline-size: 100%;
    max-inline-size: none;
  }

  .ls-feed__row {
    gap: 24px;
    padding-block: 36px;
    padding-inline: 0;
  }

  .ls-feed__pshot {
    aspect-ratio: 1 / 1;
  }
}