/* =========================================================
 * i2t3 Image Gallery — uniform thumbnails, filter bar, captions.
 * Thumbnails are forced to a uniform size via CSS (aspect-ratio +
 * object-fit) so they look right even without server-side image
 * processing (GraphicsMagick/ImageMagick).
 * ========================================================= */

.i2t3-imagegallery__filters {
    gap: .5rem;
    border: 0;
    flex-wrap: wrap;
}
.i2t3-imagegallery__filters .nav-link {
    cursor: pointer;
}
.i2t3-imagegallery__filters .nav-link.active {
    font-weight: 600;
    color: var(--i2t3-primary, var(--bs-primary, #0d6efd));
}

.i2t3-imagegallery__figure {
    overflow: hidden;
}
.i2t3-imagegallery__img {
    display: block;
    width: 100%;
    height: auto; /* override the height="..." attribute so aspect-ratio applies */
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: transform .3s ease;
}
.i2t3-imagegallery__link:hover .i2t3-imagegallery__img {
    transform: scale(1.05);
}
.i2t3-imagegallery__caption {
    padding: .5rem 0;
    font-size: .9rem;
    color: var(--bs-secondary-color, #6c757d);
}
.i2t3-imagegallery__cell.is-hidden {
    display: none;
}

/* Masonry style: CSS columns, natural image ratio. */
.i2t3-imagegallery--masonry .i2t3-imagegallery__grid {
    display: block;
    column-count: 3;
    column-gap: 1rem;
}
@media (max-width: 768px) {
    .i2t3-imagegallery--masonry .i2t3-imagegallery__grid { column-count: 2; }
}
.i2t3-imagegallery--masonry .i2t3-imagegallery__cell {
    width: 100%;
    max-width: 100%;
    break-inside: avoid;
    margin-bottom: 1rem;
}
.i2t3-imagegallery--masonry .i2t3-imagegallery__img {
    aspect-ratio: auto;
}

/* Scroller style: one horizontal row of thumbnails to scroll/swipe through;
 * click opens the lightbox (GLightbox, like the other styles). No filter bar.
 * Space-saving preview — e.g. a onepager teaser linking to the full gallery. */
.i2t3-imagegallery--scroller .i2t3-imagegallery__scroller {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    padding-bottom: .75rem;
    scrollbar-width: thin;
    scrollbar-color: var(--i2t3-primary, #0d6efd) transparent;
}
.i2t3-imagegallery--scroller .i2t3-imagegallery__scroller::-webkit-scrollbar {
    height: 8px;
}
.i2t3-imagegallery--scroller .i2t3-imagegallery__scroller::-webkit-scrollbar-thumb {
    background: var(--i2t3-primary, #0d6efd);
    border-radius: 4px;
}
.i2t3-imagegallery--scroller .i2t3-imagegallery__cell {
    flex: 0 0 auto;
    width: clamp(200px, 28vw, 280px);
    scroll-snap-align: start;
}
.i2t3-imagegallery--scroller .i2t3-imagegallery__img {
    border-radius: .5rem;
}