/* ==========================================================================
 * Widget: Text-Image-Static
 * BEM: .wb-text-image-static, .wb-text-image-static__element
 * Vertical layout: tagline + title + description + image.
 * All colours use CSS variables from Elementor global tokens or geniova.css.
 * ========================================================================== */

/* --------------------------------------------------------------------------
 * Main container + content (merged)
 * -------------------------------------------------------------------------- */

.wb-text-image-static {
    width: 100%;
}

.wb-text-image-static__content {
    max-width: var(--container-container-large, 80rem);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* Spacing via global: [class*="__tagline"] mb 8x, [class*="__title"] mb 12x */
.wb-text-image-static .wb-text-image-static__description {
    margin-bottom: 0;
}

/* --------------------------------------------------------------------------
 * Image
 * -------------------------------------------------------------------------- */

.wb-text-image-static__image-inner {
    width: 100%;
    margin-top: var(--spacing-16x, 2rem);
    overflow: hidden;
    border-radius: var(--_ui-styles---radius--medium, 8px);
}

.wb-text-image-static__image {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* --------------------------------------------------------------------------
 * Media container (carousel mode)
 * -------------------------------------------------------------------------- */

.wb-text-image-static__media-container {
    width: 100%;
    margin-top: var(--spacing-16x, 2rem);
    position: relative;
}

.wb-text-image-static__single-image {
    display: block;
}

.wb-text-image-static__carousel {
    display: none;
    position: relative;
    width: 100%;
}

@media (min-width: 992px) {
    .wb-text-image-static__media-container[data-carousel-desktop="1"] .wb-text-image-static__single-image {
        display: none;
    }
    .wb-text-image-static__media-container[data-carousel-desktop="1"] .wb-text-image-static__carousel {
        display: block;
    }
    .wb-text-image-static__media-container[data-carousel-desktop="0"] .wb-text-image-static__single-image {
        display: block;
    }
    .wb-text-image-static__media-container[data-carousel-desktop="0"] .wb-text-image-static__carousel {
        display: none;
    }
}

@media (max-width: 991px) {
    .wb-text-image-static__media-container[data-carousel-mobile="1"] .wb-text-image-static__single-image {
        display: none;
    }
    .wb-text-image-static__media-container[data-carousel-mobile="1"] .wb-text-image-static__carousel {
        display: block;
    }
    .wb-text-image-static__media-container[data-carousel-mobile="0"] .wb-text-image-static__single-image {
        display: block;
    }
    .wb-text-image-static__media-container[data-carousel-mobile="0"] .wb-text-image-static__carousel {
        display: none;
    }
}

.wb-text-image-static__carousel-viewport {
    overflow: hidden;
    width: 100%;
    border-radius: var(--_ui-styles---radius--medium, 8px);
}

.wb-text-image-static__carousel-track {
    display: flex;
    transition: transform 0.5s ease;
    gap: 0;
}

.wb-text-image-static__carousel-slide {
    flex: 0 0 100%;
    min-width: 100%;
}

.wb-text-image-static__carousel-img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

.wb-text-image-static__carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    cursor: pointer;
    background: var(--_primitives---opacity--white-90);
    border: none;
    border-radius: 50%;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease, opacity 0.3s ease;
    box-shadow: 0 2px 8px var(--_primitives---opacity--neutral-darkest-15);
}

.wb-text-image-static__carousel-arrow:hover {
    background: var(--color-scheme-1--foreground);
}

.wb-text-image-static__carousel-arrow--prev {
    left: var(--spacing-8x, 1rem);
}

.wb-text-image-static__carousel-arrow--next {
    right: var(--spacing-8x, 1rem);
}

.wb-text-image-static__carousel-arrow-icon {
    width: 16px;
    height: 16px;
    color: var(--color-scheme-1--text);
    display: flex;
    align-items: center;
    justify-content: center;
}

.wb-text-image-static__carousel-arrow-icon svg {
    width: 100%;
    height: 100%;
}

.wb-text-image-static__carousel-dots {
    display: flex;
    justify-content: center;
    margin-top: var(--spacing-12x, 1.5rem);
    padding: var(--spacing-4x, 0.5rem) 0;
}

.wb-text-image-static__carousel-dots > *:not(:last-child) {
    margin-right: var(--spacing-4x, 0.5rem);
}

.wb-text-image-static__carousel-dots .wb-text-image-static__carousel-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--_primitives---opacity--neutral-darkest-20);
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
    border: none;
    padding: 0;
}

.wb-text-image-static__carousel-dots .wb-text-image-static__carousel-dot:hover {
    background-color: var(--_primitives---opacity--neutral-darkest-40);
}

.wb-text-image-static__carousel-dots .wb-text-image-static__carousel-dot--active {
    background-color: var(--color-scheme-1--text);
    transform: scale(1.2);
}

/* ==========================================================================
 * RESPONSIVE — Tablet/Mobile (<=991px) — Carousel peek
 * ========================================================================== */

@media (max-width: 991px) {
    .wb-text-image-static {
        padding-left: var(--spacing-16x, 2rem);
        padding-right: var(--spacing-16x, 2rem);
    }

    /* Carousel: mobile peek + bleed (same as text-image) */
    .wb-text-image-static__media-container {
        overflow: visible;
    }

    .wb-text-image-static__carousel {
        overflow: hidden;
        width: calc(100% + 5vw + 1rem);
        max-width: none;
        margin-left: 0;
        margin-right: calc(-5vw - 1rem);
    }

    .wb-text-image-static__carousel-viewport {
        overflow: visible;
        width: 100%;
    }

    .wb-text-image-static__carousel-track {
        gap: var(--spacing-8x, 1rem);
    }

    /* Each slide shows ~64px of next (slide = 100% - 4rem) */
    .wb-text-image-static__carousel-slide {
        flex: 0 0 calc(100% - 4rem);
        min-width: calc(100% - 4rem);
    }
}

@media (max-width: 767px) {
    .wb-text-image-static {
        padding-left: var(--spacing-8x, 1rem);
        padding-right: var(--spacing-8x, 1rem);
    }

    .wb-text-image-static__carousel-arrow {
        width: 40px;
        height: 40px;
    }

    .wb-text-image-static__carousel-arrow--prev {
        left: var(--spacing-4x, 0.5rem);
    }

    .wb-text-image-static__carousel-arrow--next {
        right: var(--spacing-4x, 0.5rem);
    }

    .wb-text-image-static__carousel-dots {
        margin-top: var(--spacing-8x, 1rem);
    }
}