/* Start:/local/templates/main/components/bitrix/news/articles_v5/showcase.css?178997891132348*/
/* Витрина раздела «Статьи» — перенос макета V5 на боевой сайт.
   Источник: leads/vita-house-articles/v5/index.html, вкладка «01 Издание».

   Про имена. Витрина тащит за собой ходовые имена (.chip, .meta, .cover,
   .field, .sel, .btn, .icon, .sect), и часть из них на сайте уже занята:
   .btn — 90 правил, .icon — 92, .sect — 15, .sel — 8. Поэтому вместо
   переименования каждого класса вся витрина завёрнута в .vh-show, а
   правила получили его приставкой: .vh-show .btn весит (0,2,0) и
   перебивает сайтовое (0,1,0), при этом за пределы витрины не выходит.
   Имена макета сохранены один в один — так проще сверять с макетом.

   На странице статьи приём другой (там классы переименованы в .ap-*):
   блоков было меньше, и переименование читалось честнее. Менять уже
   проверенную страницу ради единообразия не стали.

   .container не переносим: у сайта своя, и она совпадает с макетом —
   1350px, отступы 30/20px. */

.vh-show {
	--blue: #0023f5;
	--blue-dk: #001dc8;
	--ink: #363636;          /* Main Black */
	--ink-2: #363636;
	--ink-3: #3f3f3f;        /* Main Grey 90% */
	--muted: #6b6b6b;
	--bg: #f7f7f7;           /* Main Grey 10% */
	--white: #fff;
	--line: #ececec;
	--line-2: #cacaca;       /* Main Grey 30% */
	--chip: #e6e6e6;
	--chip-2: #f7f7f7;
	--tint: #ebedfe;
	--rank-3: #8e8e8e;       /* Main Grey 60% — номер у мест 4–10 */
	--rad: 16px 4px 16px 4px;
	--rad-sm: 8px 2px 8px 2px;
	--btn-rad: 4px;

	/* Переменные объявлены здесь, а не на :root: --blue и --white на сайте
	   уже есть и означают другое. Внутри витрины они перекрыты нашими,
	   наружу это не выходит. */
}

/* --- сброс макета --------------------------------------------------------
   У макета свой сброс, у сайта свой, и они разные. Там, где макет
   полагался на своё правило или на значение браузера по умолчанию, сайт
   ставил другое — отсюда разъезжались отступы заголовков и абзацев в
   карточках, начертание ссылок и положение текста в поле поиска.
   Ниже — сброс макета один в один, в границах витрины. Все перенесённые
   правила весят (0,2,0) и этот сброс перекрывают, так что собственные
   значения макета он не трогает. */

.vh-show,
.vh-show * { box-sizing: border-box; }

.vh-show {
	font-size: 15px;
	line-height: 1.5;
	font-weight: 400;
	color: var(--ink);
	letter-spacing: normal;   /* сайт держит на body -0.3px, в макете обычное */
}

.vh-show img { max-width: 100%; display: block; vertical-align: baseline; }
.vh-show a { color: inherit; text-decoration: none; font-weight: inherit; }
.vh-show button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }
.vh-show input,
.vh-show select { font: inherit; color: inherit; }

/* Отступы заголовков и абзацев. Макет их не задавал и жил на браузерных,
   сайт же обнуляет margin у h1–h6 и p. Без этого заголовок и лид карточки
   слипались с соседями. Правило слабее любого перенесённого (0,1,1 против
   0,2,0), поэтому там, где макет отступ называет, побеждает макет. */
.vh-show h2,
.vh-show h3,
.vh-show p { margin: 1em 0; }

/* Поле поиска и стрелки карусели: макет не сбрасывал внутренние отступы
   элементов формы, сайт сбрасывает. Возвращаем браузерные значения. */
.vh-show .field input { padding: 1px 2px; }
.vh-show .v1-car__nav { padding: 1px 6px; }

/* svg: сайт ставит display:block и vertical-align:middle. В макете значки
   строчные, и в строке меты число стоит рядом со значком, а не под ним. */
.vh-show svg { display: inline; vertical-align: baseline; }

/* Кнопка. Межстрочное и межбуквенное макет не задавал — они наследовались
   от body (1.5 и обычное). Сайт же пишет их прямо в .btn, а заданное
   свойство побеждает наследуемое независимо от веса селектора, поэтому
   называем значения явно. */
.vh-show .btn { line-height: 1.5; letter-spacing: normal; }

.vh-show .icon {width:18px;height:18px;flex:none;fill:currentColor;stroke:none;}
.vh-show .lead {font-size:16px;color:var(--ink-2);max-width:66ch;margin:10px 0 0;}
.vh-show .lead--wide {max-width:none;}
.vh-show .chip {
  display:inline-flex;align-items:center;height:40px;padding:4px 15px 0;
  border-radius:20px;background:var(--chip);font-size:15px;font-weight:600;
  white-space:nowrap;transition:.18s;
}
.vh-show .chip:hover {background:#dadada;}
.vh-show .chip[aria-pressed="true"] {background:var(--blue);color:#fff;}
.vh-show .chip i {font-style:normal;font-size:12px;font-weight:600;color:var(--muted);margin-left:6px;}
.vh-show .chip[aria-pressed="true"] i {color:rgba(255,255,255,.72);}
.vh-show .chip--sm {height:27px;padding:2px 8px 0;font-size:13px;line-height:18px;background:var(--chip-2);border-radius:20px;font-weight:400;}
.vh-show .chip--cat {
  height:26px;padding:2px 11px 0;border-radius:20px;
  font-size:12.5px;line-height:16px;font-weight:700;letter-spacing:.005em;
  background:#e6e6e6;color:#3f3f3f;
}
.vh-show .chip--cat:hover {filter:brightness(.97);}
.vh-show .chip--cat[data-c="cadastre"] {background:#dee1e8;color:#3d5179;}
.vh-show .chip--cat[data-c="law"] {background:#d8e3e9;color:#1b5775;}
.vh-show .chip--cat[data-c="replan"] {background:#dbe4e7;color:#205967;}
.vh-show .chip--cat[data-c="geo"] {background:#dde9e4;color:#15613f;}
.vh-show .chip--cat[data-c="urban"] {background:#dfe4db;color:#415924;}
.vh-show .chip--cat[data-c="consult"] {background:#ebe7e2;color:#6a563a;}
.vh-show .chip--cat[data-c="neutral"] {background:#e6e6e6;color:#4a4a4a;}
.vh-show .chip--cat {border:1px solid #8e8e8e;border-radius:20px;}
.vh-show .chip--cat[data-c="cadastre"] {border-color:#677898;}
.vh-show .chip--cat[data-c="law"] {border-color:#50809b;}
.vh-show .chip--cat[data-c="replan"] {border-color:#5c8590;}
.vh-show .chip--cat[data-c="geo"] {border-color:#579575;}
.vh-show .chip--cat[data-c="urban"] {border-color:#6f845b;}
.vh-show .chip--cat[data-c="consult"] {border-color:#9b886c;}
.vh-show .chip--cat[data-c="neutral"] {border-color:#8e8e8e;}
.vh-show .chip--flt[data-c="cadastre"] {background:#dee1e8;}
.vh-show .chip--flt[data-c="law"] {background:#d8e3e9;}
.vh-show .chip--flt[data-c="replan"] {background:#dbe4e7;}
.vh-show .chip--flt[data-c="geo"] {background:#dde9e4;}
.vh-show .chip--flt[data-c="urban"] {background:#dfe4db;}
.vh-show .chip--flt[data-c="consult"] {background:#ebe7e2;}
.vh-show .chip--flt[data-c="neutral"] {background:#e6e6e6;}
.vh-show .chip--flt[data-c="cadastre"]:hover {background:#d2d6e0;}
.vh-show .chip--flt[data-c="law"]:hover {background:#c9d8e0;}
.vh-show .chip--flt[data-c="replan"]:hover {background:#ccd9dd;}
.vh-show .chip--flt[data-c="geo"]:hover {background:#cfe0d9;}
.vh-show .chip--flt[data-c="urban"]:hover {background:#d3dbcd;}
.vh-show .chip--flt[data-c="consult"]:hover {background:#e0dad2;}
.vh-show .chip--flt[data-c="neutral"]:hover {background:#dadada;}
.vh-show .chip--flt[aria-pressed="true"] {background:var(--blue);}
.vh-show .btn {
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:48px;padding:2px 28px 0;border-radius:var(--btn-rad);
  font-size:15px;font-weight:600;border:1px solid transparent;transition:.18s;white-space:nowrap;
}
.vh-show .btn--blue {background:var(--blue);color:#fff;border-color:var(--blue);}
.vh-show .btn--blue:hover {background:var(--blue-dk);border-color:var(--blue-dk);}
.vh-show .btn--out {border-color:var(--ink);color:var(--ink);}
.vh-show .btn--out:hover {background:var(--ink);color:#fff;}
.vh-show .btn--white {background:var(--white);border-color:var(--white);color:var(--ink);}
.vh-show .btn--white:hover {background:var(--bg);border-color:var(--bg);color:var(--ink);}
.vh-show .btn--gray {background:var(--bg);border-color:var(--bg);}
.vh-show .btn--gray:hover {background:#ededed;border-color:#ededed;}
.vh-show .btn--sm {height:40px;padding:2px 20px 0;font-size:14px;}
.vh-show .meta {display:flex;align-items:center;gap:14px;font-size:14px;color:var(--muted);flex-wrap:wrap;}
.vh-show .v1-grid .meta {gap:10px;font-size:13px;}
.vh-show .v1-grid .meta__read .icon {display:none;}
.vh-show .meta span {display:inline-flex;align-items:center;gap:5px;}
.vh-show .meta__author {font-weight:600;}
.vh-show .meta__read {opacity:.75;}
.vh-show .meta__rank {flex:none;margin-left:1px;}
.vh-show .meta__rank img {width:16px;height:16px;
  filter:drop-shadow(0 0 .6px rgba(43,51,63,.55));}
.vh-show .meta__rank svg {display:none;}
.vh-show .meta .icon {width:16px;height:16px;opacity:.75;}
/* Рамка обложки — квадрат. В макете стоял прямоугольник 16/10, и до сих пор
   стоял он: раздел рисовали под фотографии.

   Обложки оказались другими. Из 126 файлов 52 — ровный квадрат (44 штуки
   1024×1024 и 8 штук 1254×1254), и это как раз то, что редакция рисует
   сейчас: плакат с крупным заголовком сверху и подписью помельче внизу. В
   рамке 16/10 квадрат терял 37,5% высоты — всю нижнюю подпись целиком.
   Считали по всем обложкам: при 16/10 срез по высоте в среднем 22%, у 63
   файлов больше 20%. При 5/4 квадрат всё ещё теряет ровно ту же нижнюю
   пятую часть. Ноль даёт только квадратная рамка.

   Плата — срез по ширине: в среднем 18%, у 64 файлов больше 20%. Обмен
   сознательный. Широкие обложки — покупные фотографии 1700×1133 и 1344×768,
   у них сюжет в середине, и потеря краёв смысла не уносит. У плаката низ —
   это текст, и его потеря видна сразу.

   `object-position:center top` оставляем: на широких обложках он теперь не
   работает (режется ширина, а не высота), но нужен для тех немногих файлов,
   что выше квадрата, — там заголовок по-прежнему сверху.

   Карточка от этого становится выше; на созвоне 01.09.2026 это оговорено
   отдельно и признано некритичным.

   Фон остаётся ради статей, где файла обложки нет вовсе. */
.vh-show .cover {
  width:100%;aspect-ratio:1/1;object-fit:cover;object-position:center top;
  border-radius:var(--rad);background:#eceef0;
}
.vh-show .count {font-size:14px;color:var(--muted);}
.vh-show .count b {color:var(--ink);font-weight:600;}
/* Пустая выдача. Стоит сразу под строкой поиска — там, где человек ждёт
   ответа, и там, куда не достают плавающие виджеты сайта и плашка cookie:
   внизу страницы они закрывали сообщение целиком. Отсюда и умеренные
   отступы: блок должен помещаться в экран вместе со строкой поиска.

   Плашка держит свою ширину и стоит по центру. Раньше она растягивалась
   на все 1290px витрины, а текст оставался колонкой в 504px (max-width
   у абзаца): фраза переносилась посреди себя, вокруг оставалось поле
   пустой белизны, и сообщение читалось как обрубленное и втиснутое.
   Теперь ширину задаёт сама плашка, а текст занимает её целиком. */
.vh-show .empty {
  background:var(--white);border-radius:var(--rad);padding:34px 30px 30px;
  margin:22px auto 0;max-width:640px;text-align:center;
}
.vh-show .empty h3 {font-size:22px;font-weight:600;margin:0 0 8px;}
.vh-show .empty p {color:var(--muted);margin:0 0 22px;}
.vh-show .field {
  display:flex;align-items:center;gap:10px;background:var(--white);
  border:1px solid var(--line);border-radius:var(--btn-rad);padding:0 16px;height:52px;
}
.vh-show .field .icon {width:20px;height:20px;fill:var(--blue);}
.vh-show .field input {border:0;outline:0;background:none;flex:1;min-width:0;font-size:16px;height:100%;}
.vh-show .field input::placeholder {color:var(--muted);}
.vh-show .field__clear {color:var(--muted);font-size:13px;padding:6px;display:none;}
.vh-show .field__clear.on {display:block;}
/* Живой поиск (03.09.2026): пока идёт запрос, выдача приглушается. Класс
   вешается с задержкой 180 мс — см. showcase.js, на быстром ответе мигание
   заметнее самой паузы. Строка поиска не гасится: человек в ней печатает. */
.vh-show.is-loading #artHead,
.vh-show.is-loading #artNote,
.vh-show.is-loading #artBody {opacity:.55;transition:opacity .12s;}
.vh-show .sel {
  height:48px;border-radius:2px;background:var(--bg);border:0;padding:4px 34px 0 12px;
  font-size:15px;font-weight:600;appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%23363636' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;
}
.vh-show .sect {padding-top:34px;padding-bottom:70px;}
.vh-show .tagrow {display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px;}
.vh-show .tagrow::-webkit-scrollbar {display:none;}
@media (min-width:1101px) {
  .vh-show .tagrow {flex-wrap:wrap;overflow:visible;}
}
.vh-show .v1-topics {margin:20px 0 0;}
.vh-show .v1-tools {display:flex;gap:14px;align-items:center;margin:22px 0 0;flex-wrap:wrap;}
.vh-show .v1-tools .field {flex:1;min-width:260px;}
/* Шапка остаётся прямоугольником 16/10, хотя карточки стали квадратными.
   Это не забытая правка: шапка — баннер во всю ширину, квадрат высотой в
   1350 пикселей увёл бы под сгиб вообще всё остальное. И терять там нечего:
   нижнюю треть картинки всё равно закрывает затемнение с заголовком. */
.vh-show .v1-cover {
  position:relative;display:flex;align-items:flex-end;overflow:hidden;
  border-radius:var(--rad);aspect-ratio:16/10;margin:26px 0 0;background:var(--ink);
}
/* Обложка первого материала заполняет баннер, как в макете. Прижим к верху
   по той же причине, что и на карточках: у плакатов заголовок набран сверху
   и при обрезе от центра уходит первым. */
.vh-show .v1-cover__img {
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center top;
}
.vh-show .v1-cover::after {
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(180deg, rgba(9,10,16,0) 0%, rgba(9,10,16,.10) 34%,
                            rgba(9,10,16,.63) 76%, rgba(9,10,16,.82) 100%),
    linear-gradient(90deg,  rgba(9,10,16,.34) 0%, rgba(9,10,16,.10) 58%,
                            rgba(9,10,16,0) 100%);
}
.vh-show .v1-cover__in {
  position:relative;z-index:1;width:100%;padding:150px 48px 40px;color:#fff;
}
.vh-show .v1-cover__k {
  display:inline-flex;align-items:center;height:26px;padding:2px 11px 0;border-radius:20px;
  background:var(--blue);color:#fff;font-size:11px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;
}
.vh-show .v1-cover h2 {
  font-size:clamp(27px,3.5vw,52px);line-height:1.06;font-weight:600;
  letter-spacing:-.03em;margin:16px 0 12px;max-width:19ch;
}
.vh-show .v1-cover h2 a {color:#fff;}
.vh-show .v1-cover h2, .vh-show .v1-cover .v1-cover__in {text-shadow:0 1px 18px rgba(9,10,16,.55);}
.vh-show .v1-cover p {color:rgba(255,255,255,.88);font-size:16px;max-width:58ch;margin:0 0 20px;}
.vh-show .v1-cover .meta {color:rgba(255,255,255,.9);}
.vh-show .v1-cover .meta .icon {opacity:1;}
.vh-show .v1-colls {margin:44px 0 0;}
.vh-show .v1-colls__lb {
  display:flex;align-items:baseline;gap:16px;margin:0 0 10px;
  font-size:13px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
}
.vh-show .v1-colls__lb::after {content:"";flex:1;height:1.5px;background:#8e8e8e;}
/* Колонок ровно столько, сколько подборок: их число задаёт конфигурация
   (сейчас пять), и жёсткое repeat(4,1fr) оставило бы пятую одну в ряду. */
.vh-show .v1-colls__row {display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;}
.vh-show .v1-coll {
  display:flex;flex-direction:column;gap:2px;text-align:left;
  
  background:var(--white);border:1px solid #cacaca;border-radius:10px;
  padding:11px 13px 10px;transition:.18s;
}
.vh-show .v1-coll:hover {border-color:var(--blue);}
/* Заголовок, число материалов и пояснение — всегда три отдельные строки.
   Раньше это была строка с переносом: у длинных названий счётчик уезжал
   вниз сам, у короткого «Спор или суд» оставался рядом с заголовком, и
   пять плашек читались по-разному. Столбец делает их одинаковыми. */
.vh-show .v1-coll__t {display:flex;flex-direction:column;align-items:flex-start;gap:3px;}
.vh-show .v1-coll__t b {font-size:15px;font-weight:600;letter-spacing:-.015em;line-height:1.2;}
.vh-show .v1-coll__t i {
  font-style:normal;font-size:11.5px;font-weight:700;color:var(--blue);
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.vh-show .v1-coll__d {font-size:12.5px;color:var(--muted);line-height:1.3;}
.vh-show .v1-coll[aria-pressed="true"] {background:var(--blue);border-color:var(--blue);color:#fff;}
.vh-show .v1-coll[aria-pressed="true"] .v1-coll__d {color:rgba(255,255,255,.88);}
.vh-show .v1-coll[aria-pressed="true"] .v1-coll__t i {color:#fff;}
/* «Свежее»: крупная карточка и столбик мелких рядом.

   `align-items:stretch` вместо `start` и сетка вместо flex в столбике — так
   столбик ровно повторяет высоту крупной карточки: `minmax(min-content,1fr)`
   раздаёт свободное место поровну между рядами, но сжать ряд ниже его
   содержимого не может. Раньше столбик заканчивался заметно выше нижнего
   края крупной карточки, и справа оставалась дыра. */
.vh-show .v1-rail {display:grid;grid-template-columns:1.55fr 1fr;gap:34px;align-items:stretch;}
.vh-show .v1-big__t {font-size:27px;line-height:1.22;font-weight:600;letter-spacing:-.025em;margin:14px 0 10px;}
.vh-show .v1-big:hover .v1-big__t {color:var(--blue);}
.vh-show .v1-big p {color:var(--ink-2);font-size:15px;margin:0 0 12px;}
.vh-show .v1-side {display:grid;grid-auto-rows:minmax(min-content,1fr);gap:22px;min-height:0;}
.vh-show .v1-mini {display:grid;grid-template-columns:136px 1fr;gap:16px;align-items:start;}
.vh-show .v1-mini .cover {border-radius:var(--rad-sm);}
.vh-show .v1-mini__t {font-size:16px;line-height:1.35;font-weight:600;letter-spacing:-.01em;margin:0 0 7px;}
.vh-show .v1-mini:hover .v1-mini__t {color:var(--blue);}
.vh-show .v1-mini__t a {padding-block:7px;}
.vh-show .v1-top {background:var(--white);border-radius:var(--rad);padding:24px 30px 22px;}
.vh-show .v1-top__car {position:relative;}
.vh-show .v1-pods {
  display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 32px) / 3);
  gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  scrollbar-width:none;
}
.vh-show .v1-pods::-webkit-scrollbar {display:none;}
.vh-show .v1-pods:focus-visible {outline:2px solid var(--blue);outline-offset:4px;border-radius:14px;}
.vh-show .v1-pod {
  scroll-snap-align:start;
  display:grid;align-content:start;gap:10px;
  padding:22px 22px 20px;border-radius:14px;
  background:var(--bg);border:1px solid transparent;
  transition:border-color .15s, background .15s;
}
.vh-show .v1-pod:hover {background:#fff;border-color:var(--line-2);}
.vh-show .v1-pod__hd {
  display:flex;align-items:center;justify-content:center;
  height:38px;line-height:1;
}
.vh-show .v1-pod__n {
  font-size:26px;font-weight:700;line-height:1;color:var(--rank-3);
  font-variant-numeric:tabular-nums;
}
.vh-show .v1-pod__t {font-size:19px;font-weight:600;line-height:1.3;letter-spacing:-.018em;}
.vh-show .v1-pod:hover .v1-pod__t {color:var(--blue);}
.vh-show .v1-pod__tag {font-size:12.5px;color:var(--muted);}
.vh-show .v1-rank__badge {display:block;line-height:0;cursor:help;}
.vh-show .v1-rank__badge img {width:34px;height:34px;
  filter:drop-shadow(0 0 .8px rgba(43,51,63,.55));}
.vh-show .v1-car__nav {
  position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  display:flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:50%;
  background:var(--white);border:1px solid var(--line-2);
  box-shadow:0 6px 20px -8px rgba(43,51,63,.45);
  transition:opacity .18s, border-color .18s;
}
.vh-show .v1-car__nav svg {width:10px;height:16px;fill:none;stroke:var(--ink);stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;}
.vh-show .v1-car__nav:hover {border-color:var(--blue);}
.vh-show .v1-car__nav:hover svg {stroke:var(--blue);}
.vh-show .v1-car__nav--prev {left:-20px;}
.vh-show .v1-car__nav--next {right:-20px;}
.vh-show .v1-car__nav[disabled] {opacity:.32;cursor:default;box-shadow:none;}
.vh-show .v1-car__nav[disabled]:hover {border-color:var(--line-2);}
.vh-show .v1-car__nav[disabled]:hover svg {stroke:var(--ink);}
.vh-show .v1-grid {display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.vh-show .v1-card {
  display:grid;grid-template-rows:subgrid;grid-row:span 5;
  gap:12px;align-content:start;
  background:var(--white);border-radius:var(--rad);padding:16px 18px 20px;
}
@supports not (grid-template-rows:subgrid) {
  .vh-show .v1-card {display:flex;flex-direction:column;}
}
.vh-show .v1-card:nth-child(even) {background:#efefef;--muted:#6b6b6b;}
.vh-show .v1-card .cover {border-radius:var(--rad-sm);}
.vh-show .v1-card__t {
  font-size:19px;line-height:1.35;font-weight:600;transition:.25s;letter-spacing:-.02em;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.vh-show .v1-card:hover .v1-card__t {color:var(--blue);}
.vh-show .v1-card__x {
  color:var(--ink-2);font-size:14px;line-height:1.55;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
/* Полоса между названием и темами. Та же, что делит витрину («Все
   материалы» — .v1-sep::after), только светлее: внутри карточки линия в
   #8e8e8e спорит с текстом. Живёт на ряду тем, а не отдельным элементом, —
   в subgrid карточки (grid-row:span 5) лишний ребёнок сдвинул бы ряды. Нет
   тем — нет и линии, потому что весь ряд не печатается. */
.vh-show .v1-card__tags {
  display:flex;gap:6px;flex-wrap:wrap;align-items:center;
  border-top:1.5px solid var(--line-2);padding-top:12px;
}
.vh-show .v1-ph {position:relative;display:block;}
/* Высота ряда с обложкой задана самой обёрткой, а не картинкой. Обложки
   ленивые (loading=lazy): у нижнего ряда они приходят после первой раскладки,
   и Safari не пересчитывает ряды subgrid, когда вырастает картинка, — обложка
   вылезает из своего ряда и накрывает автора, название и анонс (клиент,
   21.09.2026, 13" MacBook; на 15" ряд успевал загрузиться до раскладки).
   Квадрат на обёртке известен до загрузки, картинка лишь заполняет его;
   overflow:hidden — страховка: даже если ряд посчитан неверно, обрежется
   обложка, а не текст. */
.vh-show .v1-card .v1-ph {aspect-ratio:1/1;overflow:hidden;border-radius:var(--rad-sm);}
.vh-show .v1-card .v1-ph .cover {height:100%;}
/* Плашка рубрики лежит поверх обложки, как в макете. Абсолютное положение
   внутри `.v1-ph` — это ещё и способ не попасть в subgrid карточки: плашка
   не считается её шестым ребёнком и не сдвигает ряд.

   Тень, а не обводка: обложки разной светлоты, и на светлом кадре синяя
   плашка без неё сливается с небом или снегом. */
.vh-show .v1-card__k, .vh-show .v1-big__k {
  position:absolute;top:10px;left:10px;z-index:1;
  display:inline-flex;align-items:center;padding:3px 9px;border-radius:20px;
  background:var(--blue);color:#fff;font-size:10.5px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;
  box-shadow:0 2px 12px rgba(9,10,16,.45);
}
.vh-show .v1-big__k {top:14px;left:14px;font-size:11px;padding:4px 11px;}
.vh-show .v1-card .cover {transition:.3s;}
.vh-show .v1-card:hover .cover {opacity:.9;}
.vh-show .v1-more {display:flex;justify-content:center;margin-top:46px;}
.vh-show .v1-sep {
  display:flex;align-items:baseline;gap:16px;margin:64px 0 26px;
  font-size:13px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
}
.vh-show .v1-sep::after {content:"";flex:1;height:1.5px;background:#8e8e8e;}
.vh-show .v1-sep--first {margin-top:10px;}
/* Мелких карточек шаблон печатает пять (настройка `fresh_minis`), а
   показываем столько, сколько влезает рядом с крупной, не свисая ниже неё.
   Считали по нынешней вёрстке: миниатюра квадратная, 136 пикселей, плюс 22
   между карточками. Пять таких — 768 пикселей; крупная карточка ниже этого
   становится где-то на 1200 пикселях ширины окна, и там пятая уже свисала
   бы. Прячем вёрсткой, а не выборкой: одно и то же число карточек в
   разметке проще проверять, а лишние не тянут ни запроса, ни картинки —
   загрузка у них ленивая. */
@media (max-width:1279px) {
  .vh-show .v1-side .v1-mini:nth-child(n+5) {display:none;}
}
@media (max-width:1100px) {
  /* Здесь столбик уже не столбик: рельс распался на одну колонку, и мелкие
     встают под крупной карточкой. Пять подряд читаются как ещё одна лента,
     поэтому оставляем три — как было до правки. */
  .vh-show .v1-side .v1-mini:nth-child(n+4) {display:none;}
  .vh-show .v1-cover__in {padding:110px 24px 28px;}
  .vh-show .v1-colls__row {grid-template-columns:repeat(2,1fr);}
  /* Подборок нечётное число — последняя занимает ряд целиком. Иначе она
     стоит в половине ряда, а вторая половина пустует, и ряд читается как
     недоделанный. */
  .vh-show .v1-colls__row > :last-child:nth-child(odd) {grid-column:1 / -1;}
  .vh-show .v1-rail {grid-template-columns:1fr;gap:30px;}
  .vh-show .v1-grid {grid-template-columns:repeat(2,1fr);gap:18px;}
  .vh-show .v1-pods {grid-auto-columns:calc((100% - 16px) / 2);}
}
@media (max-width:700px) {
  .vh-show .v1-cover {display:block;aspect-ratio:auto;border-radius:var(--rad-sm);}
  /* Узко — картинка и текст встают друг под друга, рамка та же 16/10. */
  .vh-show .v1-cover__img {
    position:static;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:center top;
  }
  .vh-show .v1-cover::after {display:none;}
  .vh-show .v1-cover__in {padding:18px 18px 22px;background:var(--ink);}
  .vh-show .v1-cover h2 {max-width:none;}
  .vh-show .v1-cover p {display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
  .vh-show .v1-colls__row {grid-template-columns:repeat(2,1fr);gap:8px;}
  .vh-show .v1-coll {padding:9px 11px 8px;}
  .vh-show .v1-coll__t b {font-size:14px;}
  .vh-show .v1-coll__d {display:none;}
  .vh-show .v1-grid {grid-template-columns:1fr;gap:14px;}
  .vh-show .v1-card {padding:14px 15px 18px;}
  .vh-show .v1-tools .field {min-width:100%;}
  .vh-show .v1-tools .sel {width:100%;}
  .vh-show .v1-top {padding:18px 18px 16px;}
  .vh-show .v1-pods {grid-auto-columns:calc(100% - 34px);gap:12px;}
  .vh-show .v1-car__nav {display:none;}
  .vh-show .v1-pod {padding:16px 18px 15px;gap:8px;}
  .vh-show .v1-pod__hd {height:32px;}
  .vh-show .v1-pod__t {font-size:17px;}
  .vh-show .v1-pod__n {font-size:22px;}
  .vh-show .v1-rank__badge svg {width:26px;height:24.7px;}
  .vh-show .v1-rank__badge img {width:28px;height:28px;}
  .vh-show .v1-mini {grid-template-columns:104px 1fr;gap:13px;}
}
.vh-show .v1-card__go {
  display:inline-block;align-self:start;padding:3px 8px;border-radius:3px;
  background:var(--blue);color:#fff;font-size:10.5px;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;
}
.vh-show .v1-card[data-open], .vh-show .v1-big[data-open], .vh-show .v1-mini[data-open] {cursor:pointer;}
@media (max-width:1100px) {
  .vh-show .sel {max-width:100%;}
  .vh-show .lead {font-size:15px;}
  .vh-show .sect {padding-top:22px;padding-bottom:48px;}
}

/* End */


/* Start:/local/templates/main/components/bitrix/breadcrumb/main/style.min.css?1777383014467*/
.bx-breadcrumb{margin:10px 0}.bx-breadcrumb i{color:#b5bdc2;line-height:13px;font-size:12px;vertical-align:middle;margin-right:5px}.bx-breadcrumb .bx-breadcrumb-item{float:left;margin-bottom:10px;white-space:nowrap;line-height:13px;vertical-align:middle;margin-right:10px}.bx-breadcrumb .bx-breadcrumb-item span{font-family:"Open Sans",Arial,"Helvetica Neue",Helvetica,sans-serif;font-size:13px;white-space:normal}.bx-breadcrumb .bx-breadcrumb-item a{border-bottom:0}
/* End */
/* /local/templates/main/components/bitrix/news/articles_v5/showcase.css?178997891132348 */
/* /local/templates/main/components/bitrix/breadcrumb/main/style.min.css?1777383014467 */