/* Masonry images — i2t3 component styles
 * Multi-image masonry layout via native CSS columns. Optional lightbox uses the
 * globally loaded GLightbox (class "glightbox"); no own JS.
 *
 * Hover effect ported faithfully from Karma's `.thumb-info.thumb-info-centered-icons`:
 * on hover the image zooms (scale 1.1), a dark overlay fades in and a round
 * magnifier button slides in from the centre. Controlled per element via
 * `i2t3_masonryimg_hover_style` (overlay-icon | overlay | zoom | none).
 */

.i2t3-masonry {
    column-count: var(--i2t3-masonry-cols, 3);
    column-gap: 1rem;
}
.i2t3-masonry__item {
    break-inside: avoid;
    margin: 0 0 1rem;
}

/* Thumb wrapper: clips the zoom and hosts the overlay/icon (the figure itself
 * must not clip, otherwise break-inside:avoid columns behave oddly). */
.i2t3-masonry__thumb {
    display: block;
    position: relative;
    overflow: hidden;
    border-radius: .35rem;
    text-decoration: none;
}
.i2t3-masonry__media {
    display: block;
    position: relative;
    overflow: hidden;
    border-radius: .35rem;
}
.i2t3-masonry__img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: .35rem;
    transition: transform 0.3s ease;
    will-change: transform;
}
.i2t3-masonry__caption {
    font-size: .85rem;
    color: var(--i2t3-text-muted, #6c757d);
    margin-top: .25rem;
}

/* Dark overlay (Karma: .thumb-info-wrapper:after, var(--dark-rgba-80)) */
.i2t3-masonry__overlay {
    position: absolute;
    inset: 0;
    background: rgba(33, 37, 41, 0.8);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 1;
    border-radius: .35rem;
    pointer-events: none;
}

/* Centred magnifier button (Karma: .thumb-info-centered-icons .thumb-info-action) */
.i2t3-masonry__action {
    position: absolute;
    top: 50%;
    left: 0;
    right: auto;
    width: 100%;
    height: 45px;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transform: translate3d(0, -70%, 0);
    transition: transform 0.2s ease-out, opacity 0.2s ease-out;
    z-index: 2;
    pointer-events: none;
}
.i2t3-masonry__action-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    color: #fff;
    background: var(--bs-primary, #0d6efd);
    transition: transform 0.1s ease;
}
.i2t3-masonry__action-icon svg {
    display: block;
}

/* Hover behaviour, scoped to the selected style ------------------------------ */

/* overlay-icon + overlay: dark overlay fades in */
.i2t3-masonry--hover-overlay-icon .i2t3-masonry__thumb:hover .i2t3-masonry__overlay,
.i2t3-masonry--hover-overlay .i2t3-masonry__thumb:hover .i2t3-masonry__overlay {
    opacity: 1;
}

/* overlay-icon + zoom: image zooms (Karma: img scale(1.1)) */
.i2t3-masonry--hover-overlay-icon .i2t3-masonry__thumb:hover .i2t3-masonry__img,
.i2t3-masonry--hover-zoom .i2t3-masonry__thumb:hover .i2t3-masonry__img {
    transform: scale(1.1, 1.1);
}

/* overlay-icon only: magnifier button slides into centre */
.i2t3-masonry--hover-overlay-icon .i2t3-masonry__thumb:hover .i2t3-masonry__action {
    opacity: 1;
    transform: translate3d(0, -50%, 0);
}
.i2t3-masonry--hover-overlay-icon .i2t3-masonry__action-icon:hover {
    transform: scale(1.15, 1.15);
}

/* Responsive: clamp columns to the chosen value so a 2-column gallery never
 * gets inflated, while still narrowing wide galleries on small screens.
 * Karma's hard override to 2 / 1 ignored the user's choice — fixed here with
 * min(). */
@media (max-width: 767.98px) {
    .i2t3-masonry { column-count: min(var(--i2t3-masonry-cols, 3), 2); }
}
@media (max-width: 480px) {
    .i2t3-masonry { column-count: 1; }
}