/**
 * Lumina Theme — gallery-justified.css
 * Justified Grid для core/gallery с классом .is-style-lumina-justified
 *
 * Фиксированная высота строки, ширина изображений масштабируется
 * так, чтобы строка заполнялась полностью (стиль Google Photos / Flickr).
 *
 * Базовая раскладка через flex; точные размеры рассчитываются
 * gallery-justified.js и задаются инлайн.
 */

.wp-block-gallery.is-style-lumina-justified {
    display: flex !important;
    flex-wrap: wrap;
    gap: 4px;
    align-items: flex-start;
}

.wp-block-gallery.is-style-lumina-justified figure,
.wp-block-gallery.is-style-lumina-justified li {
    margin: 0;
    overflow: hidden;
    flex-shrink: 0;
    /* width и height задаются через JS */
}

.wp-block-gallery.is-style-lumina-justified figure img,
.wp-block-gallery.is-style-lumina-justified li img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.wp-block-gallery.is-style-lumina-justified figure:hover img,
.wp-block-gallery.is-style-lumina-justified li:hover img {
    transform: scale(1.03);
}

/* Подпись */
.wp-block-gallery.is-style-lumina-justified figcaption {
    font-size: var(--wp--preset--font-size--xs);
    color: var(--wp--preset--color--contrast-3);
    padding: var(--wp--preset--spacing--xs) 0;
    text-align: center;
    width: 100%;
}

/* ── Fallback без JS ─────────────────────────────────────────────────────── */

/* Если JS не выполнился — показываем адаптивную сетку */
.wp-block-gallery.is-style-lumina-justified:not([data-justified-init]) figure,
.wp-block-gallery.is-style-lumina-justified:not([data-justified-init]) li {
    width: calc( 33.333% - 4px );
    height: 200px;
}

/* ── Адаптив ─────────────────────────────────────────────────────────────── */

@media ( max-width: 600px ) {
    .wp-block-gallery.is-style-lumina-justified {
        flex-direction: column;
    }

    .wp-block-gallery.is-style-lumina-justified figure,
    .wp-block-gallery.is-style-lumina-justified li {
        width: 100% !important;
        height: 200px !important;
    }
}