/* =============================================================================
   evK_Aldingen_Post_Slider – Stylesheet v1.1.4
   Autor: Ralf Fischer
   Fixes v1.1.2:
   - Höhere CSS-Spezifität für Swiper-Overrides (Pagination, Navigation)
   - Swiper Custom Properties explizit überschreiben
   - Box-Abstand: links vom Pfeil freihalten via margin-left
   - Hintergrundbild: brightness erhöht (weniger dunkel)
   - Frosted Glass: mehr Weiß-Anteil → weniger Fremdfarben-Tint
   ============================================================================= */

/* -----------------------------------------------------------------------------
   Swiper Custom Properties – MÜSSEN vor allen anderen Regeln stehen
   ----------------------------------------------------------------------------- */
.evk-post-slider {
    /* Pagination ans untere Zentrum */
    --swiper-pagination-bottom:          12px;
    --swiper-pagination-color:           #ffffff;
    --swiper-pagination-bullet-inactive-color:   rgba(255,255,255,0.5);
    --swiper-pagination-bullet-inactive-opacity: 1;
    --swiper-pagination-bullet-size:     10px;
    --swiper-pagination-bullet-horizontal-gap: 5px;

    /* Navigation */
    --swiper-navigation-color:           #ffffff;
    --swiper-navigation-size:            18px;
    --swiper-navigation-sides-offset:    14px;
}

/* -----------------------------------------------------------------------------
   Avada Full-Width Fix
   ----------------------------------------------------------------------------- */
.evk-slider-wrapper {
    width: 100%;
    overflow: hidden;
    margin-left:  calc(-1 * var(--awb-container-padding-left,  20px));
    margin-right: calc(-1 * var(--awb-container-padding-right, 20px));
}

.fusion-builder-live .evk-slider-wrapper {
    margin-left: 0;
    margin-right: 0;
    overflow: hidden;
}

/* -----------------------------------------------------------------------------
   Slider-Container
   ----------------------------------------------------------------------------- */
.evk-post-slider {
    width: 100%;
    height: var(--evk-height, 520px);
}

/* -----------------------------------------------------------------------------
   Slide – Basis
   ----------------------------------------------------------------------------- */
.evk-slide {
    position: relative;
    overflow: hidden;
}

/* Fix: brightness(0.88) statt 0.78 → weniger dunkel */
.evk-slide__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    will-change: transform;
    transition: transform 8s ease-out;
    filter: brightness(0.88) blur(3px);
    transform: scale(1.04);  /* blur-Rand-Fix */
}

.swiper-slide-active .evk-slide__bg {
    transform: scale(1.08);
}

.evk-slide__bg--fallback {
    background: linear-gradient(135deg, #3d2a4f 0%, #2a1a3a 100%);
    filter: none;
    transform: none;
}

/* Dezente Vignette */
.evk-slide__overlay {
    position: absolute;
    inset: 0;
    background: radial-gradient(
        ellipse at center,
        rgba(0,0,0,0)    40%,
        rgba(0,0,0,0.25) 100%
    );
    pointer-events: none;
}

/* -----------------------------------------------------------------------------
   Frosted Glass Content-Box
   Fix: mehr Weiß-Anteil (0.30 statt 0.22) → Fremdfarben werden übertönt
   Fix: left berechnet sich aus Pfeil-Breite + Offset → kein Überlappen
   ----------------------------------------------------------------------------- */
.evk-slide__content {
    position: absolute;
    z-index: 2;
    bottom: 3.5rem;
    /* Pfeil ist bei ~14px + ~44px Breite = ~60px → Box startet bei 72px */
    left: 72px;

    width: fit-content;
    min-width: 300px;
    max-width: min(520px, calc(100% - 144px)); /* 72px beidseitig */

    display: flex;
    flex-direction: column;

    /* Fix: höherer Weiß-Anteil für konsistenten Tint */
    background: rgba(250, 246, 252, 0.30);
    backdrop-filter: blur(18px) saturate(1.8);
    -webkit-backdrop-filter: blur(18px) saturate(1.8);

    border: 1px solid rgba(255,255,255,0.40);
    border-radius: 6px;
    box-shadow:
        0 4px 28px rgba(0,0,0,0.20),
        inset 0 1px 0 rgba(255,255,255,0.35);

    padding: 1.6rem 2rem;

    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.55s ease 0.25s, transform 0.55s ease 0.25s;
}

.swiper-slide-active .evk-slide__content {
    opacity: 1;
    transform: translateY(0);
}

/* Lila Akzentlinie links */
.evk-slide__content::before {
    content: '';
    position: absolute;
    left: 0;
    top: 1rem;
    bottom: 1rem;
    width: 4px;
    background: #6d2b6e;
    border-radius: 0 2px 2px 0;
}

/* -----------------------------------------------------------------------------
   Typografie
   ----------------------------------------------------------------------------- */
.evk-slide__date {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: #6d2b6e;
    margin-bottom: 0.5rem;
}

.evk-slide__title {
    font-size: clamp(1.1rem, 2.4vw, 1.75rem);
    font-weight: 700;
    line-height: 1.25;
    margin: 0 0 0.6rem 0;
    color: #2a0a2e;
}

.evk-slide__title a {
    color: inherit;
    text-decoration: none;
}
.evk-slide__title a:hover,
.evk-slide__title a:focus {
    color: #6d2b6e;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* -----------------------------------------------------------------------------
   CTA-Button
   ----------------------------------------------------------------------------- */
.evk-slide__cta {
    display: inline-block;
    margin-top: auto;
    align-self: flex-start;
    padding: 0.45rem 1.2rem;
    background-color: #6d2b6e;
    border: 2px solid #6d2b6e;
    border-radius: 3px;
    color: #ffffff;
    text-decoration: none;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.evk-slide__cta:hover,
.evk-slide__cta:focus {
    background-color: transparent;
    color: #6d2b6e;
    outline: none;
}

/* -----------------------------------------------------------------------------
   Swiper Navigation – erhöhte Spezifität
   ----------------------------------------------------------------------------- */
.evk-post-slider.swiper .swiper-button-prev,
.evk-post-slider.swiper .swiper-button-next {
    color: #ffffff;
    background: rgba(109,43,110,0.50);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    transition: background 0.2s;
    top: 44%;
    transform: translateY(-50%);
}

.evk-post-slider.swiper .swiper-button-prev:hover,
.evk-post-slider.swiper .swiper-button-next:hover {
    background: rgba(109,43,110,0.85);
}

.evk-post-slider.swiper .swiper-button-prev::after,
.evk-post-slider.swiper .swiper-button-next::after {
    font-size: 0.95rem;
    font-weight: 700;
}

/* -----------------------------------------------------------------------------
   Swiper Pagination – erhöhte Spezifität + text-align für Zentrierung
   ----------------------------------------------------------------------------- */
.evk-post-slider.swiper .swiper-pagination {
    position: absolute !important;
    bottom: 12px !important;
    left: 50% !important;
    right: auto !important;
    width: auto !important;
    transform: translateX(-50%) !important;
    white-space: nowrap;
    pointer-events: none;
}

.evk-post-slider.swiper .swiper-pagination-bullet {
    pointer-events: auto;
    display: inline-block;
    width: 10px;
    height: 10px;
    background: rgba(255,255,255,0.50) !important;
    opacity: 1 !important;
    border-radius: 50%;
    transition: background 0.2s, transform 0.2s;
}

.evk-post-slider.swiper .swiper-pagination-bullet-active {
    background: #ffffff !important;
    transform: scale(1.25);
}

/* -----------------------------------------------------------------------------
   Responsive
   ----------------------------------------------------------------------------- */
@media (max-width: 900px) {
    .evk-post-slider {
        height: 400px;
    }
    .evk-slide__content {
        bottom: 3rem;
        left: 60px;
        max-width: calc(100% - 120px);
        min-width: 240px;
        padding: 1.2rem 1.4rem;
    }
}

@media (max-width: 600px) {
    .evk-post-slider {
        height: 420px;
    }
    .evk-slide__content {
        bottom: 2.8rem;
        left: 1rem;
        width: calc(100% - 2rem);
        max-width: 100%;
        min-width: unset;
        padding: 0.9rem 1rem;
    }
    /* Schriftgröße auf Mobile explizit begrenzen */
    .evk-slide__content .evk-slide__title {
        font-size: 1.25rem !important;
        line-height: 1.3;
        margin-bottom: 0.6rem;
    }
    .evk-slide__content .evk-slide__date {
        font-size: 0.68rem;
        margin-bottom: 0.3rem;
    }
    /* Button nicht strecken */
    .evk-slide__content .evk-slide__cta {
        align-self: flex-start;
        font-size: 0.8rem;
        padding: 0.4rem 1rem;
    }
    .evk-post-slider.swiper .swiper-button-prev,
    .evk-post-slider.swiper .swiper-button-next {
        display: none;
    }
    .evk-post-slider.swiper .swiper-pagination {
        bottom: 6px !important;
    }
}

/* -----------------------------------------------------------------------------
   Fallback: kein backdrop-filter
   ----------------------------------------------------------------------------- */
@supports not (backdrop-filter: blur(1px)) {
    .evk-slide__content {
        background: rgba(248,244,252,0.94);
    }
}