/**
 * @file: template/css/components/content-gallery.css
 * @description: ЕДИНЫЙ БЕМ-компонент фото-сеток для ВСЕХ галерей сайта:
 *               1) авто-группировка подряд идущих фото (news-photo-grid.js)
 *                  в новостях/коллективах/проектах/страницах;
 *               2) шорткод альбома CKEditor (render_gallery_embeds в
 *                  app/functions/functions.php) — вставляет .content-gallery
 *                  c классом .fotografii (листание Magnific Popup через main.js).
 *               Отдельный блок — не пересекается со старыми стилями
 *               .fotografii .items-col .item (media.css).
 * @dependencies: template/js/news-photo-grid.js, app/functions/functions.php
 * @created: 2026-09-24
 */

/* Сетка — динамическая на flex: базовая плитка ~180px, число колонок в ряду
   зависит от ширины контейнера, а ПОСЛЕДНИЙ РАСТЯГИВАЕТСЯ на всю ширину
   (flex-grow). Поэтому «дырки» справа нет ни при каком сочетании ширины и
   числа фото (например: 3 фото в 2 колонки → 3-е на всю строку).
   Grid+auto-fit так не умел: дорожка схлопывалась только если она была
   пустая во ВСЕХ рядах. */
.content-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 10px 0;
}

/* Ячейка сетки (бывший legacy-div, класс .item с JS снят) */
.content-gallery__item {
    flex: 1 1 180px;
    margin: 0;
    min-width: 0;
}

/* Ссылка-плитка 4:3 с обрезкой фото */
.content-gallery__item .image-popup {
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 4px;
    background: #fff;
    text-decoration: none;
}

.content-gallery__item .image-popup img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.content-gallery__item .image-popup:hover img {
    transform: scale(1.05);
}

/* Адаптивность — число колонок считает auto-fill, здесь только уменьшаем зазор */
@media (max-width: 768px) {
    .content-gallery {
        gap: 6px;
    }
}

@media (max-width: 480px) {
    .content-gallery {
        gap: 4px;
    }
}

/* Тёмная тема (конвенция: html[data-theme="dark"] + !important) */
html[data-theme="dark"] .content-gallery__item .image-popup {
    background: #333 !important;
}

/* Шорткод-альбом несёт доп. класс .fotografii (хук листания main.js),
   но у legacy .fotografii есть padding — обнуляем, чтобы альбом выравнивался
   в одну ширину с остальным контентом (специфичность 0,2,0 > 0,1,0). */
.content-gallery.fotografii {
    padding: 0;
}