/* Landing page slider + — i2t3 component styles
 * Same slider functionality as the Bootstrap "landing page slider" (the section
 * also carries the .i2t3-landing-slider class to inherit the shared base look),
 * with cosmetic skins on top: style variants, nav-button shapes and a shadow.
 * Driven by the global Bootstrap carousel (no own JS).
 */

.i2t3-slider-plus--shadow .carousel { box-shadow: 0 1rem 3rem rgba(0, 0, 0, .25); }

/* Style: boxed — contained, rounded slider */
.i2t3-slider-plus--style-boxed .carousel {
    border-radius: 1rem;
    overflow: hidden;
}
.i2t3-slider-plus--style-boxed { padding-inline: clamp(0px, 4vw, 4rem); }

/* Style: fullwidth — edge-to-edge, break out of any container padding/margin */
.i2t3-slider-plus--style-fullwidth {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

/* Style: minimal — left-aligned, narrower caption.
 * Minimal forces a left caption; the caption-alignment field is hidden for this
 * style (displayCond) and the template omits the --caption-* class, so there is
 * no conflicting rule here. */
.i2t3-slider-plus--style-minimal .carousel-caption {
    right: auto;
    left: 5%;
    max-width: 32rem;
    text-align: left;
}

/* Caption alignment (only emitted when style != minimal) */
.i2t3-slider-plus--caption-left .carousel-caption {
    right: auto; left: 5%; max-width: 36rem; text-align: left;
}
.i2t3-slider-plus--caption-right .carousel-caption {
    left: auto; right: 5%; max-width: 36rem; text-align: right;
}
.i2t3-slider-plus--caption-center .carousel-caption {
    text-align: center;
}

/* Dark overlay — scrim behind the caption so white text stays readable on
 * light background images. Applied via the .slider-overlay class on .carousel. */
.carousel.slider-overlay .carousel-item { position: relative; }
.carousel.slider-overlay .carousel-item::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, .15), rgba(0, 0, 0, .55));
    pointer-events: none;
    z-index: 1;
}
.carousel.slider-overlay .carousel-caption { z-index: 2; }

/* ── Navigation arrow styles ────────────────────────────────────────────── */

/* Default — give the bare Bootstrap arrows a subtle dark pill on hover so the
 * "default" option is a real, distinct style rather than a CSS no-op. */
.i2t3-slider-plus--nav-default .carousel-control-prev,
.i2t3-slider-plus--nav-default .carousel-control-next {
    width: 8%;
    transition: background .2s ease, opacity .2s ease;
}
.i2t3-slider-plus--nav-default .carousel-control-prev:hover,
.i2t3-slider-plus--nav-default .carousel-control-next:hover {
    background: rgba(0, 0, 0, .25);
    opacity: 1;
}

/* Shared geometry for the boxed shapes (circle / square / light / outline) */
.i2t3-slider-plus--nav-circle .carousel-control-prev,
.i2t3-slider-plus--nav-circle .carousel-control-next,
.i2t3-slider-plus--nav-square .carousel-control-prev,
.i2t3-slider-plus--nav-square .carousel-control-next,
.i2t3-slider-plus--nav-light .carousel-control-prev,
.i2t3-slider-plus--nav-light .carousel-control-next,
.i2t3-slider-plus--nav-outline .carousel-control-prev,
.i2t3-slider-plus--nav-outline .carousel-control-next {
    width: 3.25rem;
    height: 3.25rem;
    margin: auto 1rem;
    opacity: 1;
}

/* Circle / Square — filled dark button */
.i2t3-slider-plus--nav-circle .carousel-control-prev,
.i2t3-slider-plus--nav-circle .carousel-control-next,
.i2t3-slider-plus--nav-square .carousel-control-prev,
.i2t3-slider-plus--nav-square .carousel-control-next {
    background: rgba(0, 0, 0, .45);
}
.i2t3-slider-plus--nav-circle .carousel-control-prev,
.i2t3-slider-plus--nav-circle .carousel-control-next { border-radius: 50%; }
.i2t3-slider-plus--nav-square .carousel-control-prev,
.i2t3-slider-plus--nav-square .carousel-control-next { border-radius: .35rem; }
.i2t3-slider-plus--nav-circle .carousel-control-prev:hover,
.i2t3-slider-plus--nav-circle .carousel-control-next:hover,
.i2t3-slider-plus--nav-square .carousel-control-prev:hover,
.i2t3-slider-plus--nav-square .carousel-control-next:hover { background: var(--i2t3-primary, #0d6efd); }

/* Light — translucent white circle, dark arrow (for use over photos) */
.i2t3-slider-plus--nav-light .carousel-control-prev,
.i2t3-slider-plus--nav-light .carousel-control-next {
    background: rgba(255, 255, 255, .75);
    border-radius: 50%;
}
.i2t3-slider-plus--nav-light .carousel-control-prev-icon,
.i2t3-slider-plus--nav-light .carousel-control-next-icon {
    filter: invert(1) grayscale(100%);
}
.i2t3-slider-plus--nav-light .carousel-control-prev:hover,
.i2t3-slider-plus--nav-light .carousel-control-next:hover {
    background: #fff;
}

/* Outline — transparent square with a hairline border (Karma double-chevron feel) */
.i2t3-slider-plus--nav-outline .carousel-control-prev,
.i2t3-slider-plus--nav-outline .carousel-control-next {
    background: transparent;
    border: 2px solid rgba(255, 255, 255, .7);
    border-radius: .35rem;
}
.i2t3-slider-plus--nav-outline .carousel-control-prev:hover,
.i2t3-slider-plus--nav-outline .carousel-control-next:hover {
    background: rgba(255, 255, 255, .15);
    border-color: #fff;
}