/* Landing-Pageslider — i2t3 component styles
 *
 * Selectors target the i2t3-* classes emitted by I2t3LandingPageslider.html.
 * Ported from ns_theme_bootstrap's .landingslider rules and rewritten so the
 * theme.bundle.css landingslider selectors are no longer needed.
 */

.i2t3-landing-slider { position: relative; }
.i2t3-landing-slider .carousel { position: relative; }

.i2t3-landing-slider .carousel-item {
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    height: 210px;
    position: relative;
    width: 100%;
}

.i2t3-landing-slider .carousel-item.video-slide { height: 100%; }

.i2t3-landing-slider .carousel-caption {
    align-items: center;
    bottom: auto;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    left: 50%;
    margin: 0 auto;
    max-width: 100%;
    position: absolute;
    text-align: center;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    z-index: 2;
}

.i2t3-landing-slider .carousel-caption .h2,
.i2t3-landing-slider .carousel-caption h1,
.i2t3-landing-slider .carousel-caption h2,
.i2t3-landing-slider .carousel-caption p { margin-bottom: 15px; }
.i2t3-landing-slider .carousel-caption .lead,
.i2t3-landing-slider .carousel-caption p { font-size: 19px; font-weight: 300; line-height: 26px; }

/* Force white on headings + paragraphs inside captions — Bootstrap's
 * .h1..h6 rule uses --bs-heading-color which is the body color, so a
 * plain inherit from .carousel-caption gets overridden. */
.i2t3-landing-slider .carousel-caption,
.i2t3-landing-slider .carousel-caption .h1,
.i2t3-landing-slider .carousel-caption .h2,
.i2t3-landing-slider .carousel-caption .h3,
.i2t3-landing-slider .carousel-caption .h4,
.i2t3-landing-slider .carousel-caption h1,
.i2t3-landing-slider .carousel-caption h2,
.i2t3-landing-slider .carousel-caption h3,
.i2t3-landing-slider .carousel-caption h4,
.i2t3-landing-slider .carousel-caption p {
    color: #fff;
}

.i2t3-landing-slider .carousel-caption .btn {
    background-color: var(--i2t3-primary, #0d6efd);
    border: 0;
    color: #fff;
    margin-top: 0;
}
.i2t3-landing-slider .carousel-caption .btn:hover {
    background-color: #fff;
    color: var(--i2t3-primary, #0d6efd);
}

.i2t3-landing-slider .carousel-indicators { bottom: 30px; z-index: 3; }
.i2t3-landing-slider .carousel-indicators li::marker { font-size: 0; }

/* Overlay variant (slider-overlay class on .carousel). Color mirrors
 * nitsan's ns_theme_bootstrap landingslider — a dark blue at 65%
 * opacity, generous enough that any background photo recedes behind
 * the caption text. Switch off via the i2t3_slider_overlay checkbox
 * on the slider CE. */
.i2t3-landing-slider .carousel.slider-overlay .carousel-item::before {
    background-color: rgba(18, 34, 65, 0.65);
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1;
}

/* Caption typography — large, light weight, white. Matches the
 * nitsan landingslider feel (clamp scales to viewport so small
 * screens get smaller headings). */
.i2t3-landing-slider .carousel-caption h1,
.i2t3-landing-slider .carousel-caption h2,
.i2t3-landing-slider .carousel-caption .h1,
.i2t3-landing-slider .carousel-caption .h2 {
    font-size: clamp(1.75rem, 4vw, 3.5rem);
    font-weight: 300;
    line-height: 1.15;
    margin-bottom: 1.25rem;
}
.i2t3-landing-slider .carousel-caption h1 strong,
.i2t3-landing-slider .carousel-caption h2 strong {
    font-weight: 700;
}

/* Responsive heights */
@media (min-width: 576px) {
    .i2t3-landing-slider .carousel-item { height: 290px; }
    .i2t3-landing-slider .carousel-caption { padding: 0 37px; max-width: 290px; }
}
@media (min-width: 768px) {
    .i2t3-landing-slider .carousel-item { height: 420px; }
    .i2t3-landing-slider .carousel-caption { max-width: 420px; padding: 0 28px; }
    .i2t3-landing-slider .carousel-caption p,
    .i2t3-landing-slider .carousel-caption .lead { font-size: 22px; line-height: 30px; }
    .i2t3-landing-slider .carousel-caption .h2,
    .i2t3-landing-slider .carousel-caption h1,
    .i2t3-landing-slider .carousel-caption h2,
    .i2t3-landing-slider .carousel-caption p { margin-bottom: 35px; }
}
@media (min-width: 992px) {
    .i2t3-landing-slider .carousel-item { height: 600px; }
    .i2t3-landing-slider .carousel-caption { max-width: 800px; }
    .i2t3-landing-slider .carousel-caption .btn { margin-top: 25px; }
}
@media (min-width: 1200px) {
    .i2t3-landing-slider .carousel-item { height: 800px; }
}