/*
 * carousel.css  – v4  (Design-Update)
 * Ablageort: wp-content/themes/IHR-CHILD-THEME/carousel/carousel.css
 */

/* ═══════════════════════════════════════
   DESIGN-VARIABLEN  ← Hier anpassen
   ═══════════════════════════════════════ */
:root {
    --carousel-bg:           #2f4f52;
    --carousel-padding-top:  2.5rem;
    --carousel-padding-bot:  3.5rem;

    /* Titel – Script-Schrift wie im Design */
    --carousel-title-font:   Dancing Script;
    --carousel-title-color:  #ffffff;
    --carousel-title-size:   2.6rem;
    --carousel-title-style:  italic;
    --carousel-title-weight: 400;
    --carousel-title-mb:     2rem;

    /* Slides */
    --slide-radius:          18px;
    --slide-gap:             14px;

    /* Verhältnis ~100 : 72 : 52 – wie im Referenzbild */
    --slide-w-active:        360px;
    --slide-h-active:        440px;
    --slide-w-near:          260px;
    --slide-h-near:          320px;
    --slide-w-far:           170px;
    --slide-h-far:           230px;

    /* Pfeile */
    --arrow-bg:              #ffffff;
    --arrow-color:           #2f4f52;
    --arrow-size:            52px;
    --arrow-border-radius:   50%;
}

/* ═══════════════════════════════════════
   SEKTION
   ═══════════════════════════════════════ */
.bildergalerie-sektion {
    background:  var(--carousel-bg);
    padding:     var(--carousel-padding-top) 0 var(--carousel-padding-bot);
    overflow:    hidden;

    /* Breakout aus Astra-Content-Container */
    width:     100vw;
    position:  relative;
    left:      50%;
    transform: translateX(-50%);
}

.bildergalerie-sektion .galerie-titel {
    text-align:   center;
    font-family:  var(--carousel-title-font);
    font-size:    var(--carousel-title-size);
    font-style:   var(--carousel-title-style);
    font-weight:  var(--carousel-title-weight);
    color:        var(--carousel-title-color);
    margin:       0 0 var(--carousel-title-mb);
    line-height:  1.2;
    letter-spacing: 0.01em;
}

/* ═══════════════════════════════════════
   SWIPER
   ═══════════════════════════════════════ */
.bildergalerie-sektion .swiper {
    width:    100%;
    overflow: hidden;
    padding:  30px 0 40px;  /* Raum für box-shadow */
}

.bildergalerie-sektion .swiper-wrapper {
    align-items: center;
}

/* ═══════════════════════════════════════
   SLIDES – Staffelung nach Position
   ═══════════════════════════════════════ */

/* Standard (alle nicht-aktiven) = "near"-Größe */
.bildergalerie-sektion .swiper-slide {
    width:        var(--slide-w-near);
    height:       var(--slide-h-near);
    border-radius: var(--slide-radius);
    overflow:     hidden;
    flex-shrink:  0;
    align-self:   center;
    transition:   width 0.45s ease, height 0.45s ease, opacity 0.45s ease;
    cursor:       pointer;
    opacity:      0.75;
}

/* Aktiver (zentrierter) Slide */
.bildergalerie-sektion .swiper-slide-active {
    width:      var(--slide-w-active);
    height:     var(--slide-h-active);
    opacity:    1;
    cursor:     default;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
}

/* Direkt neben dem aktiven (prev/next) */
.bildergalerie-sektion .swiper-slide-prev,
.bildergalerie-sektion .swiper-slide-next {
    width:   var(--slide-w-near);
    height:  var(--slide-h-near);
    opacity: 0.85;
}

/* Äußerste sichtbare Slides – über data-Attribut gesteuert per JS */
.bildergalerie-sektion .swiper-slide[data-pos="far"] {
    width:   var(--slide-w-far);
    height:  var(--slide-h-far);
    opacity: 0.6;
}

.bildergalerie-sektion .swiper-slide img {
    width:          100%;
    height:         100%;
    object-fit:     cover;
    display:        block;
    pointer-events: none;
}

/* Weicher Fade an den Rändern */
.bildergalerie-sektion .swiper::before,
.bildergalerie-sektion .swiper::after {
    content:  '';
    position: absolute;
    top:      0;
    bottom:   0;
    width:    12%;
    z-index:  2;
    pointer-events: none;
}
.bildergalerie-sektion .swiper::before {
    left:       0;
    background: linear-gradient(to right, var(--carousel-bg), transparent);
}
.bildergalerie-sektion .swiper::after {
    right:      0;
    background: linear-gradient(to left, var(--carousel-bg), transparent);
}

/* ═══════════════════════════════════════
   PFEILE – unterhalb zentriert
   ═══════════════════════════════════════ */
.galerie-navigation {
    display:         flex;
    justify-content: center;
    gap:             1rem;
    margin-top:      2rem;
}

.galerie-navigation .galerie-btn {
    width:         var(--arrow-size);
    height:        var(--arrow-size);
    border-radius: var(--arrow-border-radius);
    background:    var(--arrow-bg);
    color:         var(--arrow-color);
    border:        none;
    font-size:     1.2rem;
    display:       flex;
    align-items:   center;
    justify-content: center;
    cursor:        pointer;
    transition:    opacity 0.2s, transform 0.15s;
    flex-shrink:   0;
    line-height:   1;
}
.galerie-navigation .galerie-btn:hover  { opacity: 0.82; transform: scale(1.07); }
.galerie-navigation .galerie-btn:active { transform: scale(0.95); }

/* ── Variante: Pfeile seitlich ── */
.bildergalerie-sektion.pfeile-seitlich .galerie-navigation { display: none; }
.bildergalerie-sektion.pfeile-seitlich { position: relative; }
.bildergalerie-sektion.pfeile-seitlich .galerie-btn-seitlich {
    position:      absolute;
    top:           50%;
    transform:     translateY(-50%);
    z-index:       10;
    width:         var(--arrow-size);
    height:        var(--arrow-size);
    border-radius: var(--arrow-border-radius);
    background:    var(--arrow-bg);
    color:         var(--arrow-color);
    border:        none;
    font-size:     1.2rem;
    display:       flex;
    align-items:   center;
    justify-content: center;
    cursor:        pointer;
    transition:    opacity 0.2s;
    line-height:   1;
}
.bildergalerie-sektion.pfeile-seitlich .galerie-btn-seitlich.prev { left: 20px; }
.bildergalerie-sektion.pfeile-seitlich .galerie-btn-seitlich.next { right: 20px; }
.bildergalerie-sektion.pfeile-seitlich .galerie-btn-seitlich:hover { opacity: 0.82; }

/* ═══════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════ */
@media (max-width: 900px) {
    :root {
        --slide-w-active:  260px;
        --slide-h-active:  320px;
        --slide-w-near:    190px;
        --slide-h-near:    250px;
        --slide-w-far:     140px;
        --slide-h-far:     200px;
        --carousel-title-size: 2.2rem;
        --arrow-size: 42px;
    }
}

@media (max-width: 560px) {
    :root {
        --slide-w-active:  200px;
        --slide-h-active:  260px;
        --slide-w-near:    140px;
        --slide-h-near:    190px;
        --slide-w-far:     100px;
        --slide-h-far:     150px;
        --carousel-title-size: 1.8rem;
        --arrow-size: 38px;
    }
}