/* ==========================================================================
 * Widget: Hero Slider
 * BEM: .wb-hero-slider, .wb-hero-slider__element, .wb-hero-slider__element--modifier
 * Colours and typography via Elementor global tokens.
 * ========================================================================== */

.wb-hero-slider {
    position: relative;
    width: 100%;
    overflow: hidden;
    /* Transparent so the parent container's per-slide background shows through. */
    background-color: transparent;
}

.wb-hero-slider.wb-hero-slider--js-ready {
    
}

.wb-hero-slider__slides {
    width: 100%;
    position: relative;
}

/* --------------------------------------------------------------------------
 * Slides
 * -------------------------------------------------------------------------- */

.wb-hero-slider__slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    align-items: stretch;
    pointer-events: none;
    user-select: none;
}

.wb-hero-slider__slide--active {
    position: relative;
    pointer-events: auto;
}

/* --------------------------------------------------------------------------
 * Content column (left side)
 * -------------------------------------------------------------------------- */

.wb-hero-slider__content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 0 0 auto;
    width: 100%;
    max-width: 560px;
    padding: var(--section-padding-padding-section-large, 7rem) var(--page-padding-padding-global, 5%) var(--wb-spacing-xl, 3rem);
}

.wb-hero-slider__tagline {
    display: block;
    margin-bottom: var(--wb-spacing-md, 1.5rem);
}

.wb-hero-slider__title-highlight {
    display: block;
    font-weight: 700;
    margin-bottom: 0 !important;
}

.wb-hero-slider__title {
    margin-top: 0;
    margin-bottom: 0;
}

.wb-hero-slider__description {
    margin-top: var(--wb-spacing-md, 1.5rem);
    margin-bottom: 0;
}

.wb-hero-slider__buttons {
    margin-top: var(--wb-spacing-lg, 2rem);
}

/* --------------------------------------------------------------------------
 * Media column (right side)
 * -------------------------------------------------------------------------- */

.wb-hero-slider__media {
    position: relative;
    flex: 1 1 0%;
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    justify-content: center;
    min-height: 400px;
}

.wb-hero-slider__image-text {
    position: absolute;
    font-size: clamp(75px, 10vw, 150px);
    font-weight: 900;
    line-height: 1.2;
    white-space: nowrap;
    pointer-events: none;
    z-index: 0;
}

.wb-hero-slider__image-wrapper {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    max-height: 55vh;
}

body .wb-hero-slider__image-wrapper .wb-hero-slider__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transform: translateY(23%);
}

.wb-hero-slider__logo {
    z-index: 2;
    position: absolute;
    top: 25%;
}

.wb-hero-slider__logo img {
    display: block;
    max-height: 24px;
    width: auto;
}

/* --------------------------------------------------------------------------
 * Controls (dots + arrows)
 * -------------------------------------------------------------------------- */

.wb-hero-slider__controls {
    position: relative;
    z-index: 10;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--wb-spacing-md, 1.5rem) var(--page-padding-padding-global, 5%) var(--wb-spacing-lg, 2rem);
}

/* Dots */
.wb-hero-slider__dots {
    display: flex;
    align-items: center;
}

.wb-hero-slider__dots > *:not(:last-child) {
    margin-right: var(--wb-spacing-xs, 0.5rem);
}

.wb-hero-slider__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--e-global-color-text, #0b0006);
    opacity: 0.25;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: opacity 0.3s ease, transform 0.3s ease, background-color 0.6s ease;
}

.wb-hero-slider__dot:hover {
    opacity: 0.5;
}

.wb-hero-slider__dot--active {
    opacity: 1;
    transform: scale(1.3);
}

/* Arrows */
.wb-hero-slider__arrows {
    display: flex;
}

.wb-hero-slider__arrows > *:not(:last-child) {
    margin-right: var(--wb-spacing-sm, 1rem);
}

.wb-hero-slider__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid var(--color-scheme-1--border, var(--e-global-color-border, rgba(0,0,0,0.1)));
    background-color: var(--color-scheme-1--foreground, var(--e-global-color-foreground, #fff));
    color: var(--e-global-color-text, #0b0006);
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    padding: 0;
}

.wb-hero-slider__arrow:hover {
    background-color: var(--e-global-color-text, #0b0006);
    color: var(--color-scheme-1--foreground, #fff);
}

.wb-hero-slider__arrow svg {
    width: 24px;
    height: 24px;
}

/* --------------------------------------------------------------------------
 * CSS Animations (per-element, class-toggled by JS)
 * -------------------------------------------------------------------------- */

/* Hidden state for all animatable elements */
.wb-hero-slider__slide [data-slide-animation] {
    opacity: 0;
    transition-property: opacity, transform;
    transition-duration: 500ms;
    transition-timing-function: ease-in-out;
}

/* Visible state (toggled by JS) */
.wb-hero-slider__slide [data-slide-animation].wb-slide-animation-active {
    opacity: 1;
    transform: none !important;
}

/* Animation types — define initial (hidden) transforms */
.wb-hero-slider__slide [data-slide-animation="fade"] {
    /* opacity only, no transform */
}

.wb-hero-slider__slide [data-slide-animation="slide-up"] {
    transform: translateY(30px);
}

.wb-hero-slider__slide [data-slide-animation="slide-down"] {
    transform: translateY(-30px);
}

.wb-hero-slider__slide [data-slide-animation="slide-left"] {
    transform: translateX(-30px);
}

.wb-hero-slider__slide [data-slide-animation="slide-right"] {
    transform: translateX(30px);
}

.wb-hero-slider__slide [data-slide-animation="zoom-in"] {
    transform: scale(0.8);
}

.wb-hero-slider__slide [data-slide-animation="zoom-out"] {
    transform: scale(1.2);
}

.wb-hero-slider__slide [data-slide-animation="rotate-in"] {
    transform: rotate(-180deg);
}

.wb-hero-slider__slide [data-slide-animation="bounce"] {
    transform: scale(0);
}

/* No animation */
.wb-hero-slider__slide [data-slide-animation="none"] {
    opacity: 1;
    transform: none;
    transition: none;
}

/* --------------------------------------------------------------------------
 * Responsive
 * -------------------------------------------------------------------------- */

@media (max-width: 991px) {
    .wb-hero-slider__content {
        max-width: 480px;
    }

    .wb-hero-slider__media {
        min-height: 320px;
    }
}

@media (max-width: 767px) {
    .wb-hero-slider__slide {
        flex-direction: column;
    }

    .wb-hero-slider__content {
        max-width: 100%;
        padding-bottom: var(--wb-spacing-lg, 2rem);
    }

    .wb-hero-slider__media {
        min-height: 250px;
    }

    .wb-hero-slider__image-text {
        font-size: clamp(50px, 20vw, 75px);
    }

    .wb-hero-slider__arrow {
        width: 40px;
        height: 40px;
    }

    .wb-hero-slider__arrow svg {
        width: 20px;
        height: 20px;
    }
}