/**
 * fancybox.css — Стили галереи изображений
 *
 * Расположение: /fancybox/fancybox.css
 * Подключение: /bitrix/templates/empty/header.php
 *
 * BEM-методология:
 *   - Блок: .gallery
 *   - Элементы: .gallery__grid, .gallery__item
 *
 * Адаптивная сетка:
 *   - Мобильные (<640px): 2 колонки
 *   - Планшеты (640-1023px): 3 колонки
 *   - Десктоп (≥1024px): 4 колонки
 */

/* Блок: gallery — контейнер галереи */
.gallery {
    width: 100%;
}

/* Элемент: gallery__grid — CSS Grid сетка */
.gallery__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);  /* Мобильные: 2 колонки */
    gap: 16px;                               /* Отступ между элементами */
}

/* Планшеты: 3 колонки */
@media (min-width: 640px) {
    .gallery__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Десктоп: 4 колонки */
@media (min-width: 1024px) {
    .gallery__grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Элемент: gallery__item — ячейка с изображением */
.gallery__item {
    aspect-ratio: 1;              /* Квадратная пропорция 1:1 */
    overflow: hidden;             /* Скрываем выходящие за границы части */
    border-radius: 4px;           /* Скруглённые углы */
    background-color: #f0f0f0;    /* Фон-заглушка до загрузки изображения */
}

/* Ссылка внутри ячейки занимает всё пространство */
.gallery__item a {
    display: block;
    width: 100%;
    height: 100%;
}

/* Изображение: заполняет ячейку с сохранением пропорций */
.gallery__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;            /* Обрезка по центру при несовпадении пропорций */
    transition: transform 0.3s ease;  /* Плавная анимация при наведении */
}

/* Эффект при наведении: лёгкое увеличение */
.gallery__item:hover img {
    transform: scale(1.05);
}