/* Cascading image — i2t3 component styles
 * 1-3 staggered, overlapping images beside text. Pure CSS (no JS). On small
 * screens the images stack normally.
 */

.i2t3-cascadingimage__stack {
    position: relative;
    padding: 1.5rem 0;
}

.i2t3-cascadingimage__img {
    /* Karma ns-cascadingimage default variant (custom.scss .cascading-section--default):
     * all images the SAME size, never shrinking. */
    width: 100%;
    aspect-ratio: 4 / 3;
    max-height: 250px;
    object-fit: cover;
    object-position: center;
    border-radius: .5rem;
    display: block;
}

/* Box shadow toggle */
.i2t3-cascadingimage--shadow .i2t3-cascadingimage__img {
    box-shadow: 0 .75rem 2rem rgba(0, 0, 0, .18);
}

/* Popup link below the text */
.i2t3-cascadingimage__popup-link {
    margin-top: .5rem;
    color: var(--i2t3-ca-accent, #0d6efd);
    text-decoration: none;
    font-weight: 600;
}
.i2t3-cascadingimage__popup-link:hover { text-decoration: underline; }

/* lg+: equal-size images in an overlapping cascade (staggered left/right/centre).
 * Flex + negative margins so the stack self-sizes for 1/2/3 images and never
 * collapses or bleeds out of the column. All three are the SAME size. */
@media (min-width: 992px) {
    .i2t3-cascadingimage__stack { display: flex; flex-direction: column; }
    .i2t3-cascadingimage__img { width: 68%; }
    .i2t3-cascadingimage__img--1 { align-self: flex-start; }
    .i2t3-cascadingimage__img--2 { align-self: flex-end; margin-top: -14%; }
    .i2t3-cascadingimage__img--3 { align-self: center; margin-top: -14%; }
}

/* Below lg: images stack normally, full width */
@media (max-width: 991.98px) {
    .i2t3-cascadingimage__img + .i2t3-cascadingimage__img { margin-top: 1rem; }
}

.i2t3-cascadingimage__text > :last-child {
    margin-bottom: 0;
}

/* Rounded toggle */
.i2t3-cascadingimage--rounded .i2t3-cascadingimage__img { border-radius: 1rem; }

/* Style: dots — dotted accent behind the stack */
.i2t3-cascadingimage--style-dots .i2t3-cascadingimage__stack::before {
    content: "";
    position: absolute;
    width: 8rem;
    height: 8rem;
    right: -1rem;
    bottom: -1rem;
    background-image: radial-gradient(var(--i2t3-ca-accent, #0d6efd) 2px, transparent 2px);
    background-size: 1rem 1rem;
    opacity: .5;
    z-index: -1;
}

/* nodots (Karma) — hide the dot decoration in the dots variant */
.i2t3-cascadingimage--nodots.i2t3-cascadingimage--style-dots .i2t3-cascadingimage__stack::before { display: none; }

/* Style: color — accent block behind the stack */
.i2t3-cascadingimage--style-color .i2t3-cascadingimage__stack::before {
    content: "";
    position: absolute;
    inset: 1rem -1rem -1rem 1rem;
    background: var(--i2t3-ca-accent, #0d6efd);
    border-radius: 1rem;
    opacity: .15;
    z-index: -1;
}

/* Entrance animations are handled by the shared scroll-reveal system
 * (.i2t3-animate + data-animation on each image; fires on scroll-into-view,
 * staggered via data-delay). See Resources/Public/Css/animations.css. */