/* Gallery (Basic) — i2t3 component styles.
   The grid is plain Bootstrap (.row.g-3 + .col-md-*); these rules only style
   the figure/thumbnail that the template actually renders. The column count
   is driven by the per-element i2t3_images_per_row field, not by CSS media
   queries, so there is no second, conflicting column model here. */

.i2t3-gallery-section { padding: 2rem 0; }

/* Uniform thumbnails: the f:image height="450c" is overridden so a fixed 4:3
   aspect-ratio applies regardless of the source ratio; hover zooms the image
   inside the clipped figure. */
.i2t3-gallery__figure {
    position: relative;
    overflow: hidden;
    border-radius: 6px;
}
.i2t3-gallery__link {
    display: block;
    position: relative;
    overflow: hidden;
}
.i2t3-gallery__img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: transform .3s ease;
}
.i2t3-gallery__link:hover .i2t3-gallery__img {
    transform: scale(1.05);
}

/* Dark hover overlay to signal the thumbnail is clickable (opens lightbox). */
.i2t3-gallery__link::after {
    content: "";
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0);
    transition: background-color .2s ease;
    pointer-events: none;
}
.i2t3-gallery__link:hover::after {
    background-color: rgba(0, 0, 0, .2);
}

/* Optional caption below the tile (i2t3_gallery_show_caption). */
.i2t3-gallery__caption {
    padding: .5rem 0;
    font-size: .9rem;
    color: var(--bs-secondary-color, #6c757d);
    text-align: center;
}
.i2t3-gallery__caption-title {
    display: block;
    font-weight: 600;
    color: var(--bs-body-color, #212529);
}
.i2t3-gallery__caption-text {
    display: block;
}