/* IIT Companion - front-end gallery strip */

.iitc-gal {
    position: relative;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.iitc-gal::-webkit-scrollbar {
    display: none;
}

.iitc-gal-track {
    display: flex;
    gap: var(--iitc-gal-gap, 30px);
    padding: 0;
    margin: 0;
    width: max-content;
}

.iitc-gal-item {
    flex: 0 0 auto;
    /* Each slide fills its share of the viewport, minus its share of the gaps. */
    width: calc(
        (100vw - (var(--iitc-gal-gap, 30px) * (var(--iitc-gal-per, 5) - 1)))
        / var(--iitc-gal-per, 5)
    );
    max-width: 520px;
    scroll-snap-align: start;
}

/* Inside a constrained container the slide should follow the container, not
   the viewport; browsers supporting container query units get the better fit. */
@supports (width: 1cqw) {
    .iitc-gal {
        container-type: inline-size;
    }
    .iitc-gal-item {
        width: calc(
            (100cqw - (var(--iitc-gal-gap, 30px) * (var(--iitc-gal-per, 5) - 1)))
            / var(--iitc-gal-per, 5)
        );
    }
}

.iitc-gal-item img {
    display: block;
    width: 100%;
    height: var(--iitc-gal-h, 200px);
    object-fit: cover;
    border-radius: var(--iitc-gal-r, 0px);
    transition: transform 0.35s ease, filter 0.35s ease;
}

.iitc-gal-item a {
    display: block;
    text-decoration: none;
    border: 0;
}

.iitc-gal-item img:hover {
    transform: scale(1.03);
    filter: saturate(1.08);
}

@media (prefers-reduced-motion: reduce) {
    .iitc-gal {
        scroll-behavior: auto;
    }
    .iitc-gal-item img {
        transition: none;
    }
    .iitc-gal-item img:hover {
        transform: none;
    }
}