/* ============================================================================
   FEED INSERT ENGINE — оформление трёх блоков внутри ленты.

   ГДЕ ОНИ ЖИВУТ. Это обычные flex-дети .pub-list, стоящие МЕЖДУ публикациями и
   скроллящиеся вместе с лентой. Ни overlay, ни popup, ни modal, ни fixed, ни
   sticky здесь нет и быть не может — блок обязан вести себя как часть потока.

   ЦВЕТ БЕРЁТСЯ У ЛЕНТЫ, А НЕ ЗАДАЁТСЯ ЗАНОВО. Все поверхности выведены из
   токенов --pub-* (их объявляет body.pub-feed-open в pub-feed.css). Поэтому блок
   тёмный в тёмной ленте и светлый в светлой — своей темы у него нет. Ни одного
   захардкоженного фона или цвета текста ниже нет.

   ВЫСОТА — ГЛАВНОЕ ОГРАНИЧЕНИЕ. Ни один блок не занимает экран целиком:
   карусели ≈40–45%, реклама ≈52% вьюпорта. Пропорция медиа считается от ШИРИНЫ,
   поэтому у неё дополнительно стоит потолок в vh — иначе на низком экране
   карточка раздувается.

   Адаптив по стандарту проекта: desktop-first, брейкпоинты 1100/767/420,
   резиновая сетка и clamp() вместо per-breakpoint хардкодов.
   ========================================================================== */

.pins {
  /* Поверхность блока чуть отличается от карточки публикации — человек должен
     видеть, что это не публикация, но узнавать тот же материал. */
  --pins-bg: color-mix(in srgb, var(--pub-panel) 92%, var(--pub-ink) 8%);
  --pins-card: color-mix(in srgb, var(--pub-surface) 90%, var(--pub-ink) 10%);
  --pins-bd: var(--pub-bd);
  --pins-accent: var(--pub-brand2, #f5872e);
  --pins-radius: 18px;
  /* ПЛОТНОСТЬ — ОБЩАЯ ДЛЯ ТРЁХ БЛОКОВ. Все отступы и высоты ниже выведены из этих
     четырёх величин, поэтому друзья, каналы и реклама дышат одинаково: одинаковая
     шапка, одинаковые поля, одинаковый шаг. Разъехаться они могут только вместе. */
  /* ВНЕШНИЕ ПОЛЯ РАЗНЫЕ ПО СТОРОНАМ, И ЭТО НАМЕРЕННО. Сверху поле держит шапку —
     там воздух работает. По бокам и снизу он только отодвигал содержимое от края
     коробки, поэтому там оставлен минимум: 6 точек по бокам и 5 снизу на телефоне.
     Меньше нельзя — граница блока начнёт задевать границу карточки.

     ЭТО ЕДИНСТВЕННЫЙ ИСТОЧНИК РАССТОЯНИЯ ОТ КРАЯ. Карусель по горизонтали своего
     поля не добавляет (padding: … 0 …), у карточек нет margin — расстояние от края
     блока до первой карточки равно ровно --pins-pad-x, и сложения полей нет нигде.
     Величины общие на три блока: друзья, каналы и реклама не могут разъехаться. */
  --pins-pad: clamp(8px, 2.1vw, 10px);       /* сверху */
  --pins-pad-x: clamp(6px, 1.6vw, 8px);      /* слева и справа */
  --pins-pad-b: clamp(5px, 1.4vw, 7px);      /* снизу */
  /* Шаг между шапкой и каруселью (и между карточкой рекламы и «Скрыть рекламу»).
     Карточки начинаются почти сразу за подписью, но не касаются её. */
  --pins-gap: clamp(4px, 1.1vw, 5px);
  --pins-card-pad: 4px;        /* внутреннее поле карточки: человека, канала и рекламы */
  --pins-cta-h: 32px;          /* видимая высота главной кнопки; палец добирает ::after */
  --pins-link-h: 18px;

  display: flex;
  flex-direction: column;
  gap: var(--pins-gap);
  box-sizing: border-box;
  padding: var(--pins-pad) var(--pins-pad-x) var(--pins-pad-b);
  background: var(--pins-bg);
  border: 1px solid var(--pins-bd);
  border-radius: var(--pins-radius);
  box-shadow: var(--pub-shadow);
  color: var(--pub-ink);
  max-height: 78vh;
  overflow: hidden;

  /* РАСКЛАДКА СЧИТАЕТСЯ ОТ ШИРИНЫ БЛОКА, А НЕ ЭКРАНА. Лента живёт в колонке: на широком
     мониторе её ширина остаётся телефонной. Правила по ширине ЭКРАНА включали двухколоночную
     рекламу в колонке 348px, и текст уезжал за край — это видно на замере. Контейнерные
     запросы спрашивают ровно то, что нужно: сколько места у самого блока. */
  container-type: inline-size;
  container-name: pins;
}

@supports not (background: color-mix(in srgb, red 50%, blue)) {
  /* Движки без color-mix получают простые сплошные поверхности из тех же токенов. */
  .pins { --pins-bg: var(--pub-panel); --pins-card: var(--pub-surface); }
}

/* ─────────────── шапка блока ─────────────── */

.pins__head { display: flex; align-items: center; gap: 8px; min-height: 30px; }

.pins__icon {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--pins-accent);
}
.pins__icon::before {
  content: '';
  display: block;
  background: currentColor;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center;  mask-position: center;
  -webkit-mask-size: contain;     mask-size: contain;
}
/* Друзья — глиф в круглой подложке; каналы и реклама — открытый оранжевый знак.
   Так же, как на утверждённых макетах. */
.pins__icon--friends {
  width: 28px; height: 28px; border-radius: 999px;
  background: var(--pins-card);
  border: 1px solid var(--pins-bd);
}
.pins__icon--friends::before { width: 15px; height: 15px; }
.pins__icon--channels, .pins__icon--ad { width: 22px; height: 22px; }
.pins__icon--channels::before, .pins__icon--ad::before { width: 22px; height: 22px; }

.pins__icon--friends::before {
  -webkit-mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E");
}
.pins__icon--channels::before {
  -webkit-mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M12 2.6l2.9 6 6.6.9-4.8 4.6 1.2 6.5-5.9-3.1-5.9 3.1 1.2-6.5-4.8-4.6 6.6-.9z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M12 2.6l2.9 6 6.6.9-4.8 4.6 1.2 6.5-5.9-3.1-5.9 3.1 1.2-6.5-4.8-4.6 6.6-.9z'/%3E%3C/svg%3E");
}
.pins__icon--ad::before {
  -webkit-mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M3.5 9.2v5.6c0 .6.5 1.1 1.1 1.1h1.7l5.6 3.9c.5.4 1.2 0 1.2-.6V4.8c0-.6-.7-1-1.2-.6L6.3 8.1H4.6c-.6 0-1.1.5-1.1 1.1z'/%3E%3Cpath d='M16.6 8.6a4.6 4.6 0 0 1 0 6.8' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round'/%3E%3Cpath d='M19.2 5.8a8.4 8.4 0 0 1 0 12.4' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M3.5 9.2v5.6c0 .6.5 1.1 1.1 1.1h1.7l5.6 3.9c.5.4 1.2 0 1.2-.6V4.8c0-.6-.7-1-1.2-.6L6.3 8.1H4.6c-.6 0-1.1.5-1.1 1.1z'/%3E%3Cpath d='M16.6 8.6a4.6 4.6 0 0 1 0 6.8' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round'/%3E%3Cpath d='M19.2 5.8a8.4 8.4 0 0 1 0 12.4' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round'/%3E%3C/svg%3E");
}

.pins__headtext { min-width: 0; flex: 1 1 auto; }
.pins__title {
  margin: 0;
  /* Вставка — ВСПОМОГАТЕЛЬНЫЙ блок, а не публикация. Заголовок здесь не доминирующий
     heading, а спокойная подпись: 500 — потолок жирности, кегль ниже подписи автора
     публикации, межстрочный минимальный (строка всё равно одна). */
  font-size: clamp(12px, 3.1vw, 13px); font-weight: 500; line-height: 1.05;
  color: var(--pub-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pins__sub {
  margin: 0;
  font-size: clamp(10px, 2.5vw, 10.5px); font-weight: 400; line-height: 1.15;
  color: var(--pub-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pins__all {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 3px;
  border: 0; background: none; padding: 0 2px; cursor: pointer;
  /* ЦВЕТ ТЕМЫ, А НЕ АКЦЕНТ. В тёмной теме белый, в светлой — основной тёмный: оранжевый
     остаётся за кнопками действия. Акцент появляется только при наведении. */
  color: var(--pub-ink); font-size: clamp(11.5px, 3vw, 12.5px); font-weight: 400;
  text-decoration: none; white-space: nowrap;
  position: relative;
}
/* Полоса касания: сама ссылка «Показать все» — строка в 15-17px, а палец требует 44.
   -15px по вертикали даёт 45 даже на 360px, где кегль наименьший (там с -14px выходило
   43 — замер поймал недобор в одну точку). */
.pins__all::after { content: ''; position: absolute; inset: -15px -10px; }
.pins__all:hover { color: var(--pins-accent); }

/* ─────────────── горизонтальная карусель ───────────────
   Скролл НАТИВНЫЙ. Своего перетаскивания здесь нет намеренно: в ленте уже живёт
   указательный жест галереи публикации, и второй самодельный драг рядом с ним
   дрался бы за одно и то же касание.
   overscroll-behavior-x:contain обязателен — без него свайп до края в iOS-PWA
   срывается в системный жест «назад». */
.pins__track {
  display: flex; gap: 8px;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x proximity;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* ПО ГОРИЗОНТАЛИ У КАРУСЕЛИ ПОЛЯ НЕТ — оно уже задано блоком (--pins-pad-x), и
     второе такое же сложилось бы с ним. Вертикальные две точки нужны, чтобы граница
     карточки не съедалась переполнением при прокрутке. */
  padding: 1px 0 2px;
  scroll-padding-left: 0;
}
.pins__track::-webkit-scrollbar { display: none; }

.pins-person, .pins-chan {
  position: relative; flex: 0 0 auto; box-sizing: border-box;
  display: flex; flex-direction: column; align-items: center;
  /* ВНУТРЕННЕЕ ПОЛЕ КАРТОЧКИ — 4px по кругу, один источник на друзей и каналы.
     Расстояния между строками внутри держат собственные margin элементов, а не
     общее поле: увеличивать padding ради одного зазора значит раздувать все четыре. */
  padding: var(--pins-card-pad);
  background: var(--pins-card);
  border: 1px solid var(--pins-bd);
  border-radius: 14px;
  scroll-snap-align: start;
  text-align: center;
}
/* НИ ОДИН элемент карточки не сжимается по высоте.
   Колонка с фиксированной высотой по умолчанию ужимает детей, и замер на живой ленте
   показал ровно это: имя получало 9px вместо 17, подпись 10px — текст выглядел
   обрезанным по горизонтали. Высота карточки подобрана так, чтобы естественная сумма
   помещалась с запасом, а не выдавливалась. */
.pins-person > *, .pins-chan > * { flex: 0 0 auto; max-width: 100%; }
/* Высота — min-height, а не height: длинное имя, отсутствие описания или другой язык
   не должны ни обрезать содержимое, ни оставлять пустой хвост. Карточка растёт от
   содержимого, а число ниже — её естественный минимум. */
.pins-person { width: 158px; min-height: 174px; }
.pins-chan   { width: 158px; min-height: 166px; }

.pins-person__x {
  position: absolute; top: 3px; right: 3px;
  width: 22px; height: 22px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 999px; background: transparent;
  color: var(--pub-muted); font-size: 18px; cursor: pointer;
}
/* Тач-таргет добирается псевдоэлементом: визуально крестик маленький, палец попадает. */
.pins-person__x::after { content: ''; position: absolute; inset: -11px; }
.pins-person__x:hover { color: var(--pub-ink); }

.pins-person__av, .pins-chan__av, .pins-person__via {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; overflow: hidden; flex: 0 0 auto;
  background: var(--pub-line); color: var(--pub-ink); font-weight: 600;
}
.pins-person__av { width: 48px; height: 48px; font-size: 16px; }
.pins-chan__av   { width: 44px; height: 44px; font-size: 15px; }
.pins-person__av img, .pins-chan__av img, .pins-person__via img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}

.pins-person__name, .pins-chan__name {
  margin: 3px 0 0;
  font-size: 13px; font-weight: 500; line-height: 1.15; color: var(--pub-ink);
  max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pins-person__handle {
  margin: 0; font-size: 11px; font-weight: 400; line-height: 1.2; color: var(--pub-muted);
  max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pins-person__mutual, .pins-chan__desc, .pins-chan__meta {
  margin: 1px 0 0; font-size: 10.5px; font-weight: 400; line-height: 1.22; color: var(--pub-muted);
  max-width: 100%; overflow: hidden;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
}
.pins-person__mutual {
  -webkit-line-clamp: 1; line-clamp: 1;
  white-space: nowrap; text-overflow: ellipsis;
}
.pins-chan__meta {
  -webkit-line-clamp: 1; line-clamp: 1;
  white-space: nowrap; text-overflow: ellipsis;
}

.pins-person__vias { display: flex; justify-content: center; margin-top: 2px; min-height: 18px; }
.pins-person__via {
  width: 18px; height: 18px; font-size: 8.5px;
  border: 2px solid var(--pins-card);
  background: color-mix(in srgb, var(--pub-line) 70%, var(--pub-ink) 30%);
}
.pins-person__via + .pins-person__via { margin-left: -8px; }

/* ─────────────── действия ───────────────
   Радиус кнопки — как на макете: скруглённый прямоугольник, не капсула.
   Высота видимой части 40px, а полоса касания добирается до 44px псевдоэлементом:
   карточка карусели маленькая, и кнопка в 44px делала бы её заметно выше. */
.pins__cta {
  position: relative;
  margin-top: auto; width: 100%; min-height: var(--pins-cta-h, 34px);
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 9px; cursor: pointer;
  background: linear-gradient(140deg, var(--pub-brand, #e8651c), var(--pub-brand2, #f5872e));
  color: #fff; font-size: 12.5px; font-weight: 600;
  padding: 0 10px;
}
/* Кнопка ниже, полоса касания прежняя: 32 видимых + 6 сверху и снизу = 44. */
.pins__cta::after { content: ''; position: absolute; left: 0; right: 0; top: -6px; bottom: -6px; }
.pins__cta:disabled { cursor: default; opacity: .9; }
.pins__cta:disabled::after { display: none; }
.pins__cta.is-done {
  background: none; border: 1px solid var(--pins-bd); color: var(--pub-muted);
}

.pins__link {
  position: relative;
  margin-top: 2px; min-height: var(--pins-link-h, 18px);
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: none; padding: 0 8px; cursor: pointer;
  /* ЦВЕТ ТЕМЫ, А НЕ БЛЁКЛО-СЕРЫЙ. Белый в тёмной теме, тёмный в светлой; чуть приглушён
     прозрачностью, чтобы не спорить с именем, но принадлежит основной палитре. */
  color: var(--pub-ink); opacity: .8;
  font-size: 11.5px; font-weight: 400; text-decoration: none;
}
.pins__link::after { content: ''; position: absolute; left: -8px; right: -8px; top: -13px; bottom: -13px; }
.pins__link:hover { opacity: 1; }
/* «Открыть» у канала — та же ссылка темы, оранжевым она быть не должна. */
.pins__link--accent { color: var(--pub-ink); }
.pins__link--accent:hover { color: var(--pub-ink); opacity: 1; }

/* Подпись вместо шапки: ни иконки, ни крупного заголовка. Прижата к верху блока —
   после удаления шапки её отступ занимать не должен. */
.pins-ad__cap {
  margin: 0;
  font-size: clamp(10px, 2.6vw, 11px); font-weight: 400; line-height: 1.15;
  color: var(--pub-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ─────────────── рекламный блок: ОДНА большая карточка ───────────────
   Две маленькие рядом на телефоне читаются как рекламная сетка — этого здесь нет
   намеренно. Карточка собрана как на макете: медиа с меткой «Реклама», под ним
   название, описание, предложение и широкая кнопка. */
.pins-ad {
  display: flex; flex-direction: column;
  background: var(--pins-card);
  border: 1px solid var(--pins-bd);
  border-radius: 14px;
  overflow: hidden;
}
.pins-ad__media {
  position: relative;
  /* Высота зарезервирована ДО загрузки картинки: размеры креатива известны с сервера,
     поэтому лента не дёргается, когда изображение доезжает.

     ПОТОЛОК В ПИКСЕЛЯХ, А НЕ В vh. Привязка к высоте экрана давала непредсказуемый кадр:
     на 390x844 медиа выходило 110px при ширине карточки 366 — полоска 3.3:1 вместо
     нормального кадра. Теперь пропорция 16:9 работает как задумано, а потолок ограничивает
     её только на широкой колонке. Короткий экран — отдельным правилом ниже. */
  /* ПРОПОРЦИЯ 2:1, а не 16:9. На эталоне кадр объявления заметно шире кинематографического
     и занимает меньше высоты блока; 16:9 при ширине карточки 339 давало 190 точек и делало
     рекламу самым высоким из трёх блоков. 2:1 — настоящий кадр, а не полоска, и держит
     блок в одном ряду с друзьями и каналами. */
  /* ШИРИНА ЗАДАНА ЯВНО, И ЭТО НЕ ИЗБЫТОЧНО.
     Ниже стоят ОДНОВРЕМЕННО пропорция и потолок высоты. Когда потолок срабатывает,
     пропорция и растяжение по поперечной оси начинают спорить, и движки решают спор
     по-разному: Chromium оставляет ширину растянутой (рамка 379 при карточке 379),
     WebKit выводит её из пропорции и УЖЕ ЗАЖАТОЙ высоты — 160 × 2 = 320. На iPhone это
     давало 59px пустого фона справа от кадра при полной ширине кнопки под ним; замер
     воспроизведён: без растяжения рамка 320 из 379, с явной шириной — 379 и 0 пустоты.
     Явная ширина снимает сам спор: выводить поперечный размер больше не из чего. */
  width: 100%;
  aspect-ratio: 2 / 1; max-height: 160px;
  background: var(--pub-line); overflow: hidden;
}
.pins-ad__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pins-ad__chip {
  position: absolute; top: 8px; left: 8px;
  display: inline-flex; align-items: center; height: 21px; padding: 0 9px;
  border-radius: 999px;
  background: rgba(12, 16, 22, .72);
  color: #fff; font-size: 11px; line-height: 1;
  backdrop-filter: saturate(140%) blur(6px);
  -webkit-backdrop-filter: saturate(140%) blur(6px);
}

/* Поля внутренней карточки минимальны: кнопка должна доходить почти до её краёв. */
/* Те же 4px, что у карточек карусели: медиа доходит до краёв само (оно вне текста),
   а текст и кнопка отступают от границы карточки ровно на внутреннее поле. */
.pins-ad__body { padding: var(--pins-card-pad) var(--pins-card-pad) 0; min-width: 0; }
.pins-ad__name {
  margin: 0; font-size: clamp(12.5px, 3.2vw, 13.5px); font-weight: 500; line-height: 1.15;
  color: var(--pub-ink); overflow-wrap: anywhere;
}
.pins-ad__desc {
  margin: 2px 0 0; font-size: clamp(10.5px, 2.7vw, 11.5px); font-weight: 400; line-height: 1.25;
  color: var(--pub-muted); font-weight: 400;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
  overflow: hidden;
}
.pins-ad__offer {
  display: flex; align-items: center; gap: 6px;
  margin: 4px 0 0; font-size: clamp(10.5px, 2.7vw, 11.5px); line-height: 1.2;
  color: var(--pins-accent); font-weight: 400;
  min-width: 0;
}
.pins-ad__offer::before {
  content: ''; flex: 0 0 auto; width: 13px; height: 13px;
  background: currentColor;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: contain;     mask-size: contain;
  -webkit-mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.6 13.4 12 22l-9-9V3h10z'/%3E%3Ccircle cx='7.5' cy='7.5' r='1.4' fill='%23000'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.6 13.4 12 22l-9-9V3h10z'/%3E%3Ccircle cx='7.5' cy='7.5' r='1.4' fill='%23000'/%3E%3C/svg%3E");
}
.pins-ad__offer span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.pins-ad__cta {
  position: relative;
  /* Боковые поля кнопки равны внутреннему полю карточки — не больше: иначе «Подробнее»
     перестала бы занимать почти всю ширину, ради чего поля и уменьшались. */
  margin: 5px var(--pins-card-pad) var(--pins-card-pad); min-height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 10px; text-decoration: none;
  background: linear-gradient(140deg, var(--pub-brand, #e8651c), var(--pub-brand2, #f5872e));
  color: #fff; font-size: 13px; font-weight: 600;
}
/* Кнопка рекламы тоже компактная: 34 видимых, полоса касания добирает до 44. */
.pins-ad__cta::after { content: ''; position: absolute; left: 0; right: 0; top: -5px; bottom: -5px; }

.pins__hide {
  position: relative;
  align-self: center; min-height: 18px; padding: 0 12px;
  /* ОТРИЦАТЕЛЬНЫХ ПОЛЕЙ ЗДЕСЬ НЕТ. Раньше строка подтягивалась к карточке минусовым
     margin поверх общего шага блока — два правила боролись за одно расстояние. Теперь
     расстояние сверху даёт шаг блока (--pins-gap), снизу — нижнее поле (--pins-pad-b),
     и оба видны в одном месте. */
  margin: 0;
  border: 0; background: none; cursor: pointer;
  color: var(--pub-muted); font-size: 11.5px; font-weight: 400;
}
/* 18 видимых + 13 сверху и снизу = 44: после уменьшения строки замер показал 42. */
.pins__hide::after { content: ''; position: absolute; inset: -13px 0; }
.pins__hide:hover { color: var(--pub-ink); }

/* ═══════════════ РЕКЛАМА — ОДНА КАРТОЧКА, А НЕ КАРТОЧКА В КАРТОЧКЕ ═══════════════
 *
 * ЧТО БЫЛО НЕ ТАК. Друзьям и каналам рамка блока нужна: внутри неё лежит РЯД карточек,
 * и рамка объясняет, что они — одна подборка. У рекламы карточка ровно одна, и рамка
 * вокруг одной карточки превращалась во вторую рамку: замер на 390px показал блок 366
 * с фоном, границей 0.8px и скруглением 18, а внутри него — карточку 352 со своим фоном,
 * своей границей и скруглением 14. Человек видел пустую полосу по кругу и рекламу уже
 * соседних публикаций.
 *
 * ЭТАЛОН — ОКНО «ПРЕДПРОСМОТР ОБЪЯВЛЕНИЯ». Там рамки нет вовсе: подпись, изображение во
 * всю ширину, текст и кнопка лежат прямо на поверхности. Здесь то же самое, только
 * поверхностью служит сама карточка ленты.
 *
 * ГЕОМЕТРИЯ ВЗЯТА У ОБЫЧНОЙ КАРТОЧКИ, А НЕ ПРИДУМАНА: .pcard в pub-feed.css — padding:0,
 * изображение до краёв, у секций своё поле 14px («единая контентная сетка»). Реклама
 * встаёт в тот же ряд и той же ширины.
 *
 * Правила ниже касаются ТОЛЬКО .pins--ad. Друзья и каналы не затронуты ни одним из них. */

.pins--ad {
  /* Поля блока убраны: изображение обязано доходить до краёв карточки. Расстояния
     держат сами секции — ровно как у .pcard. */
  padding: 0;
  /* Скругление и поверхность — карточки ленты, а не блока-подборки. */
  border-radius: var(--pub-radius, 16px);
  /* Медиа лежит первым и упирается в верхние углы: без обрезки они были бы квадратными. */
  overflow: hidden;
}

/* Внутренняя карточка перестаёт быть карточкой: поверхность теперь одна — внешняя. */
.pins--ad .pins-ad {
  background: none;
  border: 0;
  border-radius: 0;
  overflow: visible;
}

/* Подпись «Партнёрское предложение для вас» — на контентной сетке карточки. */
.pins--ad .pins-ad__cap {
  padding: 8px 14px 6px;
}

/* Изображение во всю ширину карточки. Скругление ему больше не нужно: верхние углы
   подрезает сама карточка, нижних у него нет — под ним текст. */
.pins--ad .pins-ad__media {
  border-radius: 0;
}

/* Текст — на той же сетке 14px, что подпись публикации в обычной карточке. */
.pins--ad .pins-ad__body {
  padding: 10px 14px 0;
}

/* Кнопка занимает ширину контентной сетки, а не поле в 4px. */
.pins--ad .pins-ad__cta {
  margin: 10px 14px 12px;
}

/* «Скрыть рекламу» — внутри той же карточки, отдельной строкой снизу. */
.pins--ad .pins__hide {
  margin: 0 0 10px;
}

/* ─────────────── адаптив ───────────────
   Мобильный эталон задан выше. Ниже — только то, что реально меняется. */

@container pins (min-width: 520px) {
  /* Шире сам блок — видно больше карточек, высота не растёт. */
  .pins-person { width: 164px; min-height: 176px; }
  .pins-chan   { width: 164px; min-height: 168px; }
  /* Реклама остаётся ОДНОЙ карточкой: выбор кампании и учёт показов рассчитаны на
     одну — превращать её в сетку из двух значило бы менять бизнес-логику. Здесь
     меняется только раскладка: медиа слева, текст справа. */
  .pins-ad {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    grid-template-areas: 'media body' 'media cta';
    align-items: start;
  }
  .pins-ad__media { grid-area: media; aspect-ratio: 4 / 3; max-height: none; height: 100%; }
  /* Широкая раскладка — исключение: текст лежит РЯДОМ с кадром, а не под ним, и 4px
     прижали бы его вплотную к изображению. Здесь поле работает как колонка. */
  /* СЕЛЕКТОР ИЗ ДВУХ КЛАССОВ — не украшение, а вес. Базовые правила рекламной карточки
     ниже (.pins--ad .pins-ad__*) специфичнее одиночного класса, и без этого уточнения
     они выигрывали бы у контейнерного запроса независимо от порядка: широкая раскладка
     молча получала бы мобильные поля. */
  .pins--ad .pins-ad__body { grid-area: body; padding: 12px 14px 6px; }
  .pins-ad__desc  { -webkit-line-clamp: 3; line-clamp: 3; }
  .pins--ad .pins-ad__cta  { grid-area: cta; margin: 10px 14px 14px; align-self: end; }
}

@container pins (max-width: 340px) {
  /* Узкая колонка: две карточки целиком и краешек третьей — так видно, что карусель
     прокручивается, и ни одна карточка не выглядит обрезанной. */
  .pins-person { width: 138px; min-height: 170px; }
  .pins-chan   { width: 138px; min-height: 162px; }
}

@supports not (container-type: inline-size) {
  /* Движки без контейнерных запросов остаются на мобильной раскладке — она
     безопасна при любой ширине: одна колонка ничего не обрезает. */
  .pins { container-type: normal; }
}

@media (max-height: 700px) {
  /* КОРОТКИЙ ЭКРАН (старые телефоны, разложенная клавиатура). Дело не в ширине:
     та же карточка занимает заметно бо́льшую долю экрана. Бюджет вставки — не больше
     55% высоты экрана (max_insert_vh).

     Ужимается ОБВЯЗКА и аватар; текст, кнопка и ссылка размеров не меняют. Высота
     карточки задана через min-height, поэтому содержимое не сжимается — тот старый
     дефект, когда имя схлопывалось до 9px, вернуться не может. */
  /* Поля берутся из тех же переменных: ужимается ТОЛЬКО верх, боковые и нижнее уже
     минимальны, а два независимых набора чисел разъехались бы при первой же правке. */
  .pins { padding-top: 7px; }
  /* У РЕКЛАМЫ ПОЛЕЙ НЕТ НИ НА КАКОМ ЭКРАНЕ: она сама и есть карточка, изображение обязано
     доходить до краёв. Правило выше уменьшает верхнее поле блока-подборки — рекламу оно
     задевать не должно. */
  .pins--ad { padding-top: 0; }
  .pins-ad__media { max-height: 120px; }
  /* Ужатие кнопки на коротком экране: селектор из двух классов, иначе базовое правило
     рекламной карточки перебивает его по специфичности и margin остаётся прежним. */
  .pins--ad .pins-ad__cta { margin: 4px 14px 10px; min-height: 32px; }
  /* Аватар и минимум карточки ещё меньше: на коротком экране высота дороже всего. */
  .pins-person { min-height: 164px; }
  .pins-chan   { min-height: 158px; }
  .pins-person__av { width: 42px; height: 42px; font-size: 14px; }
  .pins-chan__av   { width: 40px; height: 40px; font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .pins__track { scroll-behavior: auto; }
}