/* Random image — i2t3 component styles
 * Cycles through a set of images. The figures are stacked on top of each other
 * inside .i2t3-randomimage__stage; only .is-active is shown. In "transition"
 * mode the swap is animated (fade/zoom/slide). Without JS the first image (the
 * server-rendered .is-active) is shown. Optional uniform crop and rounded.
 */

.i2t3-randomimage__title { margin-bottom: 1rem; }

/* Stage: the active image defines the height, the others are absolutely
 * positioned on top so the cross-fade has no layout jump. */
.i2t3-randomimage__stage { position: relative; }
.i2t3-randomimage__item { margin: 0; }
.i2t3-randomimage__img { max-width: 100%; height: auto; display: block; }

.i2t3-randomimage__item:not(.is-active) {
    position: absolute;
    inset: 0;
}
.i2t3-randomimage__item:not(.is-active) {
    opacity: 0;
    pointer-events: none;
}
.i2t3-randomimage__item.is-active {
    position: relative;
    opacity: 1;
}

/* Default mode: no JS / reduced-motion still shows exactly one image.
 * The hard hide avoids stacking artifacts when transitions are off. */
.i2t3-randomimage--default .i2t3-randomimage__item:not(.is-active),
.i2t3-randomimage--lightbox .i2t3-randomimage__item:not(.is-active) {
    visibility: hidden;
}

/* Transition mode: animate the swap. */
.i2t3-randomimage--transition .i2t3-randomimage__item {
    transition: opacity .6s ease, transform .6s ease;
}
.i2t3-randomimage--anim-zoom .i2t3-randomimage__item:not(.is-active) { transform: scale(1.06); }
.i2t3-randomimage--anim-zoom .i2t3-randomimage__item.is-active { transform: scale(1); }
.i2t3-randomimage--anim-slide .i2t3-randomimage__item:not(.is-active) { transform: translateX(2rem); }
.i2t3-randomimage--anim-slide .i2t3-randomimage__item.is-active { transform: translateX(0); }

/* Rounded corners (default on). */
.i2t3-randomimage--rounded .i2t3-randomimage__img { border-radius: .5rem; }

/* Uniform crop — faithful to Karma (.random-images-section--same-size 16/9). */
.i2t3-randomimage--samesize .i2t3-randomimage__img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

@media (prefers-reduced-motion: reduce) {
    .i2t3-randomimage--transition .i2t3-randomimage__item { transition: none; }
}