/* ============================================================
   Hero Slider
   ============================================================ */

.hero-slider {
    position: relative;
    width: 100%;
    max-width: 1920px;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;

    @media (width > 1920px) {
        border-bottom-left-radius: 12px;
        border-bottom-right-radius: 12px;
        overflow: clip;
    }
}

/* Static placeholder behind all slides */
.hero-slider__placeholder {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-color: #1D1D1B;
    pointer-events: none;
}

.hero-slider__placeholder-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 70%;
    display: block;
}

/* swiper-wrapper needs z-index to sit above placeholder */
.hero-slider .swiper-wrapper {
    position: relative;
    z-index: 1;
}

/* ---- Slide base ---- */

.hero-slider__slide {
    height: clamp(500px, 75vh, 1000px);
    position: relative;
    overflow: hidden;
}

/* ---- Background image (Variante 1 + 2) ---- */

.hero-slider__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
    display: block;
}

/* ---- Text-Overlay (optional, gesteuert via ACF text-bg-overlay) ---- */

.hero-slider__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.55) 0%, transparent 65%);
    pointer-events: none;
}

@media (max-width: 1024px) {
    .hero-slider__overlay {
        background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, transparent 60%);
    }
}

/* ---- Content overlay (Variante 1 only) ---- */

.hero-slider__content {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
}

.hero-slider__inner {
    width: 100%;
    max-width: var(--inner-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: 10rem;
    padding-right: 10rem;
    padding-top: 5rem;
    display: flex;
    align-items: center;
    gap: 2rem;
}

/* Nur Foreground-Bild, kein Text → linksbündig */
.hero-slider__inner--fg-only {
    justify-content: flex-start;
}

.hero-slider__inner--fg-only .hero-slider__product {
    justify-content: flex-start;
    max-width: 55%;
}

.hero-slider__inner--fg-only .hero-slider__product-img {
    filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.2));
}

/* ---- Text block (left) ---- */

.hero-slider__text {
    flex: 1;
    max-width: 600px;
}


.hero-slider__headline {
    /* line-height via tailwind-overwrites.css (text-8xl) */
}

/* ---- Product image (right) ---- */

.hero-slider__product {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    max-width: 700px;
}

.hero-slider__product-img {
    max-height: clamp(220px, 50vh, 600px);
    width: auto;
    max-width: 100%;
    object-fit: contain;
    display: block;
    filter: drop-shadow(2px 4px 8px rgba(0, 0, 0, 0.55))
}

/* ---- Navigation arrows ---- */

.hero-slider .swiper-button-prev,
.hero-slider .swiper-button-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 3.125rem;
    height: 3.125rem;
    margin-top: 0;
}

.hero-slider .swiper-button-prev {
    left: max(1rem, calc((100% - var(--inner-width)) / 2 + 1rem));
}

.hero-slider .swiper-button-next {
    right: max(1rem, calc((100% - var(--inner-width)) / 2 + 1rem));
}

.hero-slider__nav {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.hero-slider__nav:hover {
    opacity: 0.8;
}

.hero-slider__nav::after {
    display: none;
}

/* ---- Pagination dots ---- */

.hero-slider {
    --swiper-pagination-color: var(--color-brand-primary);
    --swiper-pagination-bullet-inactive-color: #fff;
    --swiper-pagination-bullet-inactive-opacity: 0.5;
    --swiper-pagination-bottom: 1.25rem;
}

.hero-slider__pagination {
    display: none;
}

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

@media (max-width: 1024px) {
    .hero-slider__slide {
        height: clamp(560px, 75vh, 700px);
    }

    .hero-slider__inner {
        padding: 4rem 2rem;
        flex-direction: column-reverse;
        justify-content: center;
        align-items: center;
        gap: 1.5rem;
    }

    .hero-slider__content {
        align-items: flex-end;
    }

    .hero-slider__text {
        max-width: 100%;
        text-align: center;
    }

    .hero-slider__product {
        max-width: 90%;
    }

    .hero-slider__product-img {
        max-height: clamp(180px, 28vh, 340px);
        max-width: 100%;
    }

    .hero-slider__inner--fg-only .hero-slider__product {
        max-width: 90%;
    }

    .hero-slider .swiper-button-prev {
        left: 0.5rem;
    }

    .hero-slider .swiper-button-next {
        right: 0.5rem;
    }
}

@media (max-width: 768px) {
    .hero-slider .swiper-button-prev,
    .hero-slider .swiper-button-next {
        display: none;
    }

    .hero-slider__pagination {
        display: block;
    }
}

/* ---- Fächer-Effekt (fan-display) ---- */

.hero-slider__product--fan {
    position: relative;
    isolation: isolate;
    max-width: 460px;
    transform: rotate(-8deg) translateX(-9%);
}

.hero-slider__product--fan .hero-slider__product-img {
    position: relative;
    z-index: 1;
    max-height: clamp(160px, 30vh, 360px);
    max-width: 76%;
    margin: 0 auto;
}

.hero-slider__product--fan::before,
.hero-slider__product--fan::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--fan-img);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center bottom;
    transform-origin: 50% 100%;
    pointer-events: none;
}

.hero-slider__product--fan::after {
    transform: rotate(8deg) translate(13%, -7%);
    z-index: 0;
    filter: drop-shadow(2px 4px 8px rgba(0, 0, 0, 0.55))
}

.hero-slider__product--fan::before {
    transform: rotate(16deg) translate(22%, -5%);
    z-index: -1;
    filter: drop-shadow(2px 4px 8px rgba(0, 0, 0, 0.55))
}

@media (max-width: 1024px) {
    .hero-slider__product--fan {
        max-width: 320px;
        margin-bottom: 2rem;
    }

    .hero-slider__product--fan .hero-slider__product-img {
        max-height: clamp(130px, 22vh, 260px);
    }
}