/*
 * Плиточные сетки медиа - видеогалерея (/video/, /video/{раздел}/) и
 * фоторепортажи (/photo/). 22.08.2026.
 *
 * Макета у этих страниц нет (внутренних страниц в Figma нет вовсе), поэтому
 * блок собран из уже утверждённого: пропорции кадра и круглая кнопка
 * воспроизведения - от карточки Хузур ТВ на главной (`.it-tv__media`,
 * `.it-tv__play`), заголовок под кадром - от карточки материала, фильтр
 * разделов над сеткой - те же пилюли `tags_filter`, что на служебных
 * страницах.
 *
 * 🛑 Файл общий для видео и фото намеренно. Сначала он был сделан только под
 * видео (`video-grid.css`, классы `it-video*`), а через час понадобилась почти
 * такая же сетка для фоторепортажей - две похожие сетки разошлись бы при
 * первой же правке. Различия между ними вынесены в модификаторы: пропорция
 * кадра и предел ширины плитки зависят от того, какие превью лежат на диске.
 *
 * 🛑 Локальный сброс обязателен: страницы живут на старой вёрстке, где общий
 * base.css не подключён.
 */

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

/*
 * 🛑 Верхняя граница трека - `1fr`, а не фиксированный размер. С
 * `minmax(200px, 320px)` браузер считает число колонок по МАКСИМУМУ, и на
 * узкой колонке остаётся одна плитка при половине пустого места - разбор
 * в навыке css-html-guidelines.
 */
.it-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--sp-20);
    margin: 0 0 var(--sp-30);
    padding: 0;
    list-style: none;
}

@media (max-width: 699px) {
    .it-tiles {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: var(--sp-16);
    }
}

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

/* 🛑 У списков старой вёрстки маркер рисуется через ::before - снимаем, иначе
   перед каждым видео стоит точка. */
.it-tiles li::before {
    content: none;
}

.it-tile {
    display: block;
    color: var(--c-text);
    text-decoration: none;
}

/* Кадр 16:9 - ровно пропорция превью YouTube (mqdefault, 320×180). Картинка
   растягивается по ширине плитки, `object-fit` подстраховывает на случай
   превью другой пропорции. */
.it-tile__media {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: var(--r-4);
    background: var(--c-brown-light);
}

.it-tile__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Кнопка воспроизведения - тот же вид, что у кадра Хузур ТВ, но меньше:
   плитки в сетке вдвое у́же карточки канала. */
.it-tile__play {
    position: absolute;
    top: 50%;
    left: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    transform: translate(-50%, -50%);
}

.it-tile__play::after {
    content: "";
    display: block;
    margin-left: 3px;
    border-style: solid;
    border-width: 8px 0 8px 13px;
    border-color: transparent transparent transparent var(--c-accent);
}

.it-tile:hover .it-tile__play {
    background: var(--c-white);
}

.it-tile__title {
    display: block;
    margin-top: var(--sp-8);
    font-family: var(--font-main);
    font-size: var(--fs-14);
    font-weight: 500;
    line-height: 1.3;
}

.it-tile:hover .it-tile__title {
    color: var(--c-accent);
}

/* 🛑 Медиазапрос идёт ПОСЛЕ базовых правил, а не перед ними: специфичность у
   селекторов внутри @media та же самая, поэтому выигрывает то, что ниже по
   файлу. Поставленный выше блок молча не сработал бы.
   На телефоне плитка вдвое у́же (кадр 160×90 против 272×153), и кнопка прежнего
   размера занимала половину его высоты. */
@media (max-width: 699px) {
    .it-tile__play {
        width: 32px;
        height: 32px;
    }

    .it-tile__play::after {
        margin-left: 2px;
        border-width: 6px 0 6px 10px;
    }
}

/*
 * ---------- Фоторепортажи (/photo/) ----------
 *
 * 🛑 Плитка не шире 200px: превью репортажей лежат на диске ровно 200×133
 * (проверено по самому файлу - в имени указано `200x134`), других размеров у
 * них нет, и растянутая плитка дала бы размытую картинку. У видео такого
 * предела нет: превью YouTube отдаёт 320×180.
 *
 * Отсюда и пропорция кадра 3:2 вместо 16:9 у видео - ровно как у превью.
 */
.it-tiles--photo {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}

.it-tiles--photo .it-tile {
    max-width: 200px;
}

.it-tiles--photo .it-tile__media {
    aspect-ratio: 3 / 2;
}

/* Дата над заголовком - тем же серым и кеглем, что подписи под карточками
   материалов. */
.it-tile__date {
    display: block;
    margin-top: var(--sp-8);
    color: var(--c-text-meta);
    font-family: var(--font-main);
    font-size: var(--fs-12);
    line-height: 1.2;
}

.it-tile__date + .it-tile__title {
    margin-top: var(--sp-4);
}

@media (max-width: 699px) {
    .it-tiles--photo {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    }
}

/*
 * ---------- Книги (/book/list) ----------
 *
 * Кадр 1:1,414 - пропорция, в которой отсканированы обложки (874×1240 у
 * большинства книг). Обрезка `outbound` в фильтре `book_cover` даёт ровно её,
 * так что на сетке обложки стоят одной высотой без подгонки.
 *
 * Обложка - не фотография в кадре, а лист: даём ей тень и тонкую рамку, иначе
 * светлые сканы сливаются с фоном страницы.
 */
.it-tiles--books {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}

.it-tiles--books .it-tile {
    max-width: 220px;
}

.it-tiles--books .it-tile__media {
    aspect-ratio: 1 / 1.414;
    border: 1px solid var(--c-line);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
    background: var(--c-sand-light);
}

.it-tiles--books .it-tile:hover .it-tile__media {
    box-shadow: 0 4px 14px rgba(0, 0, 0, .14);
}

/* Заглушка вместо обложки: у книги нет ни одной страницы на диске. Показываем
   название - оно информативнее пустого прямоугольника и битой картинки. */
.it-tile__stub {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: var(--sp-12);
    color: var(--c-text-meta);
    font-family: var(--font-main);
    font-size: var(--fs-12);
    line-height: 1.3;
    text-align: center;
}

@media (max-width: 699px) {
    .it-tiles--books {
        grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    }
}