/*
 * Карточка материала - блок Приложения А.
 *
 * Снято с макета Figma (файл Fhm9rBfdGGsbSq9FIakt2v) 18.08.2026:
 *   0:2714  лента центральной колонки - картинка 149,6×80 слева, отступ 14,
 *           заголовок Golos Text 18px, дата 10px #9b9b9b прижата к низу;
 *           шаг между карточками 110 при высоте 80, то есть отбивка 30
 *   0:2712  главный материал - картинка 380×214 сверху, заголовок 20px DemiBold
 *   0:2822  «Фото дня» / «Видео дня» - картинка 256×145, заголовок 12px,
 *           дата 10px #838383
 *   0:2682  список новостей левой колонки - без картинки, заголовок 12px,
 *           дата 10px, промежуток 6
 *   0:367   мобильная лента - без картинки, дата СВЕРХУ, заголовок в 2 строки
 *
 * Радиус картинки везде 6px, пропорция близка к 16:9 (149,6/80, 256/145,
 * 380/214) - берём 16/9 и не плодим варианты.
 *
 * 🛑 Локальный сброс обязателен: блок живёт на страницах СТАРОЙ вёрстки, где
 * общий base.css не подключён (он снёс бы их собственную вёрстку - см.
 * assets/legacy.js). Всё, что нужно карточке, объявляем у себя, под префиксом.
 */

.it-card,
.it-card * {
    box-sizing: border-box;
}

.it-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--sp-8);
    margin: 0;
    padding: 0;
    font-family: var(--font-main);
}

/* ---------- Картинка ---------- */

.it-card__media {
    position: relative;
    display: block;
    overflow: hidden;
    flex-shrink: 0;
    width: 100%;
    margin: 0;
    border-radius: var(--r-6);
    background: var(--c-surface);
    aspect-ratio: 16 / 9;
}

.it-card__img {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    object-fit: cover;
}

/* ---------- Текст ---------- */

.it-card__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: var(--sp-4);
    min-width: 0;
}

.it-card__title {
    margin: 0;
    color: var(--c-text-black);
    font-size: var(--fs-16);
    font-weight: var(--fw-regular);
    line-height: 1.25;
}

.it-card__title a {
    color: inherit;
    text-decoration: none;
}

/* Кликабельна вся карточка: ссылка заголовка растягивается на её площадь.
   Отдельные ссылки внутри (рубрика) поднимаются над этим слоем ниже. */
.it-card__title a::after {
    position: absolute;
    inset: 0;
    content: '';
}

.it-card:hover .it-card__title a {
    color: var(--c-accent);
}

/* Краткий анонс. В макете карточки его нет, но на внутренних страницах он
   есть - показывается по параметру show_announce. Ограничиваем тремя
   строками, иначе длинные анонсы ломают ритм ленты. */
.it-card__text {
    display: -webkit-box;
    overflow: hidden;
    margin: 0;
    color: var(--c-text-muted);
    font-size: var(--fs-12);
    line-height: 1.4;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.it-card__views {
    position: relative;
    padding-left: 20px;
}

/* Значок глаза. Рисунок задан маской, а цвет - обычным фоном, поэтому значок
   всегда того же цвета, что и само число (в том числе при наведении).
   Раньше здесь был овал из рамки: на месте значка получалась линза без
   зрачка и глазом не читалась (замечание Дмитрия 19.08.2026). */
.it-card__views::before {
    position: absolute;
    top: 50%;
    left: 0;
    width: 14px;
    height: 14px;
    background-color: currentcolor;
    content: '';
    transform: translateY(-50%);
    -webkit-mask: var(--icon-eye) center / contain no-repeat;
    mask: var(--icon-eye) center / contain no-repeat;
}

.it-card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--sp-8) var(--sp-12);
    margin: 0;
    color: var(--c-text-meta);
    font-size: var(--fs-12);
    line-height: 1.2;
}

.it-card__cat {
    position: relative;
    z-index: 1;
    color: var(--c-accent);
    text-decoration: none;
}

.it-card__cat:hover {
    text-decoration: underline;
}

/* Точка между датой и рубрикой - как в макете (узел 0:83). Ставится только
   когда рубрика идёт сразу за датой: у карточек без даты разделять нечего. */
.it-card__meta time + .it-card__cat::before {
    margin-right: var(--sp-8);
    color: var(--c-text-meta);
    content: '·';
}

/*
 * ---------- Вариант: строка (лента центральной колонки) ----------
 * Картинка слева фиксированной ширины, текст занимает остальное. На мобильной
 * картинка меньше - иначе на 350px контента заголовку остаётся полторы строки.
 */

.it-card--row {
    flex-direction: row;
    gap: var(--sp-12);
}

.it-card--row .it-card__media {
    width: 120px;
}

/* Кегль плавный: 14px на 1000, 18px на кадре макета 1280 (решение Дмитрия
   20.08.2026). Раньше стояло 14px и отдельное десктопное правило на 18 -
   между ними была ступенька ровно на пороге десктопа. */
.it-card--row .it-card__title {
    font-size: var(--fs-card-title);
    line-height: 1.2;
}

/* Дата прижата к нижнему краю карточки (решение Дмитрия 19.08.2026): высоту
   строки задаёт картинка слева, и при заголовке в одну-две строки под датой
   оставался пустой хвост. Раньше здесь стояла фиксированная отбивка от
   заголовка - на длинном заголовке она совпадала с макетом, на коротком нет. */
.it-card--row .it-card__meta {
    margin-top: auto;
}

/*
 * ---------- Вариант: главный материал ----------
 * Картинка крупнее, заголовок 22px начертанием Medium (сверено с макетом
 * 17.09.2026, узел 4132:133 - было 20px Demibold, в макете 22px Medium).
 */

.it-card--lead .it-card__title {
    font-size: var(--fs-lead-title);
    font-weight: var(--fw-medium);
    line-height: 1.2;
}

/*
 * Блок главного материала. В макете под ним чёрная линия в 2px на всю ширину
 * колонки (узел 0:2677) - она отделяет главный материал от следующего блока.
 */

/* Линия - отдельная полоска, а не рамка блока: в макете (узел 0:2677) у неё
   скруглённые концы (радиус 10), рамкой такого не сделать. Отступы по 20px
   сверху и снизу - расстояния до карточки и до заголовка «Новости» в макете
   ровно такие. */
.it-lead::after {
    display: block;
    height: 2px;
    margin: var(--sp-20) 0;
    border-radius: var(--r-10);
    background: var(--c-text-black);
    content: '';
}

/*
 * ---------- Главный материал на мобильной (узел 0:75 макета 0:6) ----------
 *
 * Там он собран иначе, чем на десктопе: заголовок НАД картинкой, под
 * картинкой строка «дата · рубрика», и чёрной линии под блоком нет вовсе
 * (проверено по отрисовке макета - сразу под датой начинается «Вопрос-ответ»).
 */
@media (max-width: 999px) {
    /* 🛑 `display: contents` у тела карточки - чтобы заголовок и строка с датой
       стали элементами одной колонки вместе с картинкой: только так картинку
       можно поставить МЕЖДУ ними, не трогая разметку (она общая с десктопом и
       стоит в двух десятках мест). */
    .it-card--lead {
        display: flex;
        flex-direction: column;
    }

    .it-card--lead .it-card__body {
        display: contents;
    }

    .it-card--lead .it-card__title {
        order: 1;
    }

    .it-card--lead .it-card__media {
        order: 2;
    }

    .it-card--lead .it-card__meta {
        order: 3;
    }

    .it-lead::after {
        display: none;
    }
}

/* На десктопе строка «дата · рубрика» у главного материала не показывается:
   в десктопном макете её нет, а разметка одна на оба размера. */
@media (min-width: 1000px) {
    .it-card--lead .it-card__meta {
        display: none;
    }
}

/* 🛑 Блока «остальные главные материалы» здесь БЫЛО - и он убран 18.08.2026
   по замечанию Дмитрия: в макете главный материал ровно один. Выборка
   findSliderArticles по-прежнему берёт до четырёх (столько помечает
   редакция), показывается первый.

   Ниже - варианты карточки. */

/*
 * ---------- Вариант: плитка правой колонки («Фото дня», «Видео дня») ----------
 */

.it-card--tile .it-card__title {
    font-size: var(--fs-12);
    line-height: 1.35;
}

.it-card--tile .it-card__meta {
    color: var(--c-text-secondary);
    font-size: var(--fs-10);
}

/*
 * ---------- Вариант: без картинки (список новостей) ----------
 */

.it-card--plain {
    gap: var(--sp-4);
}

.it-card--plain .it-card__title {
    font-size: var(--fs-12);
    line-height: 1.35;
}

.it-card--plain .it-card__meta {
    font-size: var(--fs-10);
}

/*
 * ---------- Список карточек ----------
 * Отбивка между карточками из макета: 30px в ленте, 20px в списке новостей.
 */

.it-cards {
    display: flex;
    flex-direction: column;
    gap: var(--sp-30);
    margin: 0;
    padding: 0;
    list-style: none;
}

.it-cards > li {
    margin: 0;
    padding: 0;
    list-style: none;
}

.it-cards > li::before {
    content: none;
}

/* Список внутренних страниц (рубрики, теги, поиск): карточки разделены
   ОТСТУПОМ, без линий. Линии я сначала поставил по образцу старой вёрстки -
   в макете их нет ни в одном списке материалов (замечание Дмитрия
   18.08.2026), там всё держится на отбивке. */
.it-cards--list {
    gap: var(--sp-32);
}

/* Список новостей левой колонки (25.09.2026, узел 0:2682 - см. комментарий
   в шапке файла): отбивка 20px, как в макете, вместо общих 30px ленты. */
.it-cards--news {
    gap: var(--sp-20);
}

/* Рекламная врезка в ленте главной (28.08.2026, разбор - rubrics.html.twig).
   Картинки на старом сайте горизонтальные 600×100 - по центру, без обрезки. */
.it-cards__banner {
    text-align: center;
}

.it-cards__banner-inner img {
    display: inline-block;
    max-width: 100%;
    height: auto;
    border-radius: var(--r-6);
}

/* Список без картинок (новости левой колонки): в макете шаг 65 при высоте
   элемента 45 - отбивка 20, а не 24 как в ленте с картинками. */
.it-cards--compact {
    gap: var(--sp-20);
}

/* Лента главной: вставки между карточками (блок фетв, рекламный баннер)
   живут отдельными элементами списка и своих отступов от карточек не имеют -
   отбивку задаёт сам список. */
.it-cards__insert {
    margin: var(--sp-8) 0;
}

.it-cards__insert img {
    max-width: 100%;
    height: auto;
}

/*
 * ---------- Мобильная лента главной (макет 0:88, снято 20.08.2026) ----------
 *
 * На мобильной карточка ленты перестаёт быть строкой: картинка встаёт на всю
 * ширину, под ней заголовок 22px Medium, ниже дата. Числа макета: картинка
 * 350×250 с радиусом 4, от неё до заголовка 15, от заголовка до даты 12,
 * между карточками 30.
 *
 * ⚠️ Пропорцию картинки брать из ФАЙЛОВ, а не из конфига размеров: в
 * `ArticlePreviewTypes` у большого превью записано 440×260 (1,69), а сервер
 * отдаёт 440×301 (1,46) - проверено на шести материалах ленты 20.08.2026.
 * Поэтому макетные 350/250 (1,4) обрезают всего 4% высоты, а не 17% ширины,
 * как выходило по конфигу.
 *
 * 🛑 Правила ограничены `.it-cards--feed` - лентой главной. Списки внутренних
 * страниц (`.it-cards--list`) в макете устроены иначе (узел 0:339: дата
 * сверху, заголовок под ней, картинки нет вовсе) и трогать их этим правилом
 * нельзя.
 */
@media (max-width: 999px) {
    .it-cards--feed .it-card--row {
        flex-direction: column;
        gap: var(--sp-15);
    }

    .it-cards--feed .it-card--row .it-card__media {
        width: 100%;
        border-radius: var(--r-4);
        /* пропорция из макета - 350×250 */
        aspect-ratio: 350 / 250;
    }

    .it-cards--feed .it-card--row .it-card__title {
        font-size: var(--fs-22);
        font-weight: var(--fw-medium);
        line-height: 1.25;
    }

    .it-cards--feed .it-card--row .it-card__body {
        gap: var(--sp-12);
    }

    /* Прижимать дату к низу больше не к чему: высоту карточки задаёт не
       картинка сбоку, а сам текст. */
    .it-cards--feed .it-card--row .it-card__meta {
        margin-top: 0;
    }
}

/* ---------- Десктоп ---------- */

@media (min-width: 1000px) {
    .it-cards.it-cards--compact {
        gap: var(--sp-20);
    }

    .it-card--row {
        gap: 14px;
    }

    /* В макете картинка занимает 33% ширины карточки (149,6 из 452,6). Держим
       ту же долю, а не фиксированные 150px: колонки на сайте разной ширины -
       лента главной около 560px, список рубрики около 960px, и фиксированное
       число в широкой колонке смотрится маркой. Потолок 220px - чтобы
       картинка не перетягивала на себя всю карточку. */
    .it-card--row .it-card__media {
        width: clamp(120px, 33%, 220px);
        /* пропорция из макета - 149,6×80 */
        aspect-ratio: 150 / 80;
    }

    .it-card--row .it-card__meta {
        font-size: var(--fs-10);
    }
}