/*!
 * Hero-Slider — Theme-Modifier für .wpcs-carousel
 *
 * Wiederverwendet die Hero-Optik aus WPCarSync/css/modern/style.css und die
 * Carousel-Pfeile/Dots aus WPCarSync/css/modern/ui.css. Diese Datei liefert
 * nur die Slider-spezifischen Overrides:
 *   - innere .wpcs-hero ohne eigenes Padding/Border (sonst doppelt mit Wrapper)
 *   - CTA-Container im Slide
 *   - Button-Wrapping auf Mobile
 *
 * Alle Werte über CSS-Variablen aus dem Plugin (--wpcs-*).
 */

.wpcs-carousel--hero {
    padding: var(--wpcs-space-xl) 0;
    margin-bottom: var(--wpcs-space-xl);
    border-bottom: 1px solid var(--wpcs-color-border);
}

.wpcs-carousel--hero .swiper {
    overflow: hidden;
}

/* Innere Hero im Slide: kein eigenes Padding/Border — Wrapper übernimmt das. */
.wpcs-carousel--hero .wpcs-hero,
.wpcs-carousel--hero .wpcs-hero--slide {
    padding: 0;
    margin: 0;
    border: 0;
}

/* CTA: Button mit Abstand zum Body. */
.wpcs-hero__cta {
    margin-top: var(--wpcs-space-md);
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* Pflichttext / Disclaimer unter dem Slide-Content (Kleingedrucktes). */
.wpcs-hero__disclaimer {
    margin-top: var(--wpcs-space-md);
    margin-bottom: 0;
    font-family: var(--wpcs-font-body);
    font-size: var(--wpcs-text-xs);
    line-height: 1.5;
    color: var(--wpcs-color-text-muted);
}

/* Pfeile unten-links nebeneinander statt mittig links/rechts.
   Linker Pfeil bündig zur Carousel-Edge (= linke Edge der Text-Spalte im
   boxed Hero), rechter Pfeil mit kleinem Abstand daneben. */
.wpcs-carousel--hero .wpcs-carousel__nav {
    top: auto;
    bottom: var(--wpcs-space-md);
    transform: none;
}
.wpcs-carousel--hero .wpcs-carousel__nav--prev {
    left: 0;
    right: auto;
}
.wpcs-carousel--hero .wpcs-carousel__nav--next {
    left: calc(var(--wpcs-form-height) + var(--wpcs-space-sm));
    right: auto;
}

/* Dots zentriert unter dem Slider, etwas Luft nach oben. */
.wpcs-carousel--hero .wpcs-carousel__dots {
    margin-top: var(--wpcs-space-md);
}

@media (max-width: 768px) {
    .wpcs-carousel--hero {
        padding: var(--wpcs-space-lg) 0;
    }
    .wpcs-hero__cta {
        flex-direction: column;
    }
    .wpcs-hero__cta .wpcs-btn {
        width: 100%;
        justify-content: center;
    }
}