/* ==========================================================================
   MTV Media-Text-Block (Frontend)
   ========================================================================== */

/* --- Basislayout --------------------------------------------------------- */
.kss-mtv {
    display: flex;
    gap: var(--wp--preset--spacing--30, 1.5rem);
    align-items: stretch;
}

/* --- AOS overflow fix ---------------------------------------------------- */
.kss-media-text-variants {
    overflow-x: hidden;
    /* Verhindert horizontale Scrollbalken bei AOS Animationen */
}

/* Container für AOS-Animationen - verhindert vertikale Overflow-Issues */
.kss-media-text-variants .kss-mtv {
    position: relative;
    /* Erstellt einen Stacking-Context für AOS-Animationen */
}

/* AOS Viewport-Fix - verhindert vertikale Scrollbar durch fade-up/slide-up Animationen */
.kss-media-text-variants {
    position: relative;
    overflow: hidden;
    /* Clippt alle Inhalte an den Container-Grenzen */
    min-height: fit-content;
    /* Stellt sicher, dass der Container nicht kollabiert */
}

/* Stellt sicher, dass gestackte Inhalte sichtbar bleiben */
.kss-media-text-variants.is-edit {
    overflow: visible;
    /* Im Editor alles sichtbar lassen für Bearbeitung */
}

/* Zusätzliche AOS Sicherheitsregeln */
.kss-mtv [data-aos] {
    box-sizing: border-box;
    /* Stellt sicher, dass Padding/Border korrekt berechnet wird */
}

/* Spezifische Regeln für slide-Animationen um Overflow zu verhindern */
.kss-mtv [data-aos^="slide-right"],
.kss-mtv [data-aos^="slide-left"] {
    transform-origin: center;
    /* Bessere Kontrolle über Animationsausgangspunkt */
}

/* AOS Transform-Fix für Layout-Stabilität */
.kss-mtv [data-aos] {
    transform-style: preserve-3d;
    /* Verhindert, dass Transform-Animationen das Layout beeinträchtigen */
}

/* Flexbox-Stabilität für AOS-Elemente */
.kss-mtv .kss-mtv__media[data-aos],
.kss-mtv .kss-mtv__text[data-aos] {
    flex-shrink: 1;
    flex-grow: 0;
    /* Behält Flexbox-Verhalten bei */
}

/* Variante 2 AOS Flexbox-Stabilität */
.kss-mtv--variant2 .kss-mtv__text[data-aos],
.kss-mtv--variant2 .kss-mtv__image-bottom[data-aos],
.kss-mtv--variant2 .kss-mtv__solo-image[data-aos] {
    flex-shrink: 1;
    flex-grow: 0;
    box-sizing: border-box;
}

/* .kss-mtv__inner wird aktuell nicht genutzt */

/* --- Medienbereich ------------------------------------------------------- */
.kss-mtv__media {
    --kss-img-pos-x: 50%;
    --kss-img-pos-y: 50%;
    position: relative;
    overflow: hidden;
    width: 100%;
}

/* Bild mit "ausfüllend zuschneiden" */
.kss-mtv__media img[data-img-fill="1"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100% !important;
    /* überstimmt inline height:auto */
    object-fit: cover;
    object-position: var(--kss-img-pos-x) var(--kss-img-pos-y);
    display: block;
}

/* Normales Bild */
.kss-mtv__media img[data-img-fill="0"],
.kss-mtv__media img:not([data-img-fill]) {
    position: static;
    width: 100%;
    height: auto !important;
    object-fit: contain;
    display: block;
}

/* --- Textbereich --------------------------------------------------------- */
.kss-mtv__text {
    position: relative;
    z-index: 1;
    /* Flex-Container wird inline via JavaScript gesetzt (display: flex; flex-direction: column;) */
    /* justify-content wird dynamisch gesetzt: stretch (Standard), flex-start (oben), center (mitte), flex-end (unten) */
}

/* --- Layouts (Links/Rechts) --------------------------------------------- */
.kss-mtv.kss-mtv--left .kss-mtv__media {
    order: -1;
}

.kss-mtv.kss-mtv--right .kss-mtv__media {
    order: 1;
}

/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 768px) {

    /* Stapeln aktiv → Bild oben, beide Spalten volle Breite */
    .kss-mtv.kss-mtv--stacked {
        flex-direction: column;
    }

    .kss-mtv.kss-mtv--stacked .kss-mtv__media,
    .kss-mtv.kss-mtv--stacked .kss-mtv__text {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .kss-mtv.kss-mtv--stacked .kss-mtv__media {
        order: -1;
    }

    /* AOS Animationen im responsive Modus anpassen */
    .kss-mtv.kss-mtv--stacked [data-aos].kss-mtv__media,
    .kss-mtv.kss-mtv--stacked [data-aos].kss-mtv__text {
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
        /* Übersteuert alle AOS-bedingten Width-Änderungen */
    }

    /* Zusätzlich: Alle AOS-Elemente in gestacktem Layout */
    .kss-mtv.kss-mtv--stacked .kss-mtv__media[data-aos],
    .kss-mtv.kss-mtv--stacked .kss-mtv__text[data-aos] {
        width: 100% !important;
        max-width: 100% !important;
        flex-basis: auto !important;
    }
}

/* Feste Höhen, wenn Fill aktiv ist und gestapelt wird, damit der Container nicht kollabiert */
@media (max-width: 480px) {
    .kss-mtv.kss-mtv--imgfill.kss-mtv--stacked .kss-mtv__media {
        min-height: 300px;
    }
}

@media (min-width: 481px) and (max-width: 768px) {
    .kss-mtv.kss-mtv--imgfill.kss-mtv--stacked .kss-mtv__media {
        min-height: 450px;
    }
}

/* Hover-Effekt entfernt – keine Skalierung oder Transition */

/* ==========================================================================
   MTV Variante 2 - Spezifisches Layout (Frontend)
   ========================================================================== */

.kss-mtv--variant2 .kss-mtv__variant-inner {
    display: flex;
    gap: calc(var(--kss-page-layout-gap, 2rem) * 0.5);
    align-items: stretch;
    /* Beide Spalten gleich hoch */
}

/* --- Text und unteres Bild Container ------------------------------------ */
.kss-mtv--variant2 .kss-mtv__text-image-bottom-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    height: 100%;
    /* Passt sich an die Höhe des Solo-Images an */
}

/* --- Text Container ------------------------------------------------------ */
.kss-mtv--variant2 .kss-mtv__text {
    flex: 1 1 auto;
    /* Text nimmt den benötigten Platz */
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* --- Unteres Bild ------------------------------------------------------- */
.kss-mtv--variant2 .kss-mtv__image-bottom {
    width: 100%;
    flex: 0 1 auto;
    /* Bild schrumpft bei mehr Text */
    overflow: hidden;
    min-height: 80px;
    /* Kleinere Mindesthöhe */
    max-height: 300px;
    /* Maximale Höhe begrenzen */
}

.kss-mtv--variant2 .kss-mtv__image-bottom img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* --- Solo Bild rechts --------------------------------------------------- */
.kss-mtv--variant2 .kss-mtv__solo-image {
    min-height: 400px;
}

.kss-mtv--variant2 .kss-mtv__solo-image img {
    height: 100%;
    width: 100%;
    object-position: center;
    object-fit: cover;
    display: block;
}

/* --- Layouts Variante 2 (Links/Rechts) --------------------------------- */
.kss-mtv--variant2.kss-mtv--left .kss-mtv__text-image-bottom-container {
    order: -1;
}

.kss-mtv--variant2.kss-mtv--left .kss-mtv__solo-image {
    order: 1;
}

.kss-mtv--variant2.kss-mtv--right .kss-mtv__text-image-bottom-container {
    order: 1;
}

.kss-mtv--variant2.kss-mtv--right .kss-mtv__solo-image {
    order: -1;
}

/* --- Responsive Variante 2 ---------------------------------------------- */
@media screen and (max-width: 768px) {
    .kss-mtv--variant2 .kss-mtv__variant-inner {
        flex-direction: column;
        gap: 1.5rem;
    }

    /* Alle Container auf 100% Breite → Medienbreite-Einstellungen werden obsolet */
    .kss-mtv--variant2 .kss-mtv__text-image-bottom-container,
    .kss-mtv--variant2 .kss-mtv__solo-image {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    /* Reihenfolge: Solo-Bild → Text → Unteres Bild */
    .kss-mtv--variant2 .kss-mtv__solo-image {
        order: 2;
    }

    .kss-mtv--variant2 .kss-mtv__text-image-bottom-container {
        order: 0;
    }

    .kss-mtv--variant2 .kss-mtv__image-bottom {
        order: -1;
        max-height: 250px;
        /* Begrenzte Höhe auf Mobile */
    }

    /* Text bleibt in der Mitte */
    .kss-mtv--variant2 .kss-mtv__text {
        order: 0;
    }

    /* Solo-Bild Höhe auf Mobile reduzieren */
    .kss-mtv--variant2 .kss-mtv__solo-image {
        min-height: 250px;
        max-height: 350px;
    }

    /* AOS Animationen in Variante 2 responsive anpassen */
    .kss-mtv--variant2 .kss-mtv__text[data-aos],
    .kss-mtv--variant2 .kss-mtv__image-bottom[data-aos],
    .kss-mtv--variant2 .kss-mtv__solo-image[data-aos] {
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
    }
}

/* ========================================================================== 
   VARIANTE 3: 30/70 Fix-Layout mit Border Radius
   ========================================================================== */

/* --- Basis Layout Variante 3 -------------------------------------------- */
.kss-mtv--variant3 {
    border-radius: var(--kss-brand-border-radius-medium, var(--kss-brand-border-radius-default, 6px));
    overflow: hidden;
    display: flex;
    gap: 0;
    /* Kein Gap, da nahtlos aneinander */
}

/* Box Shadow für Variante 3 */
.kss-mtv--variant3.kss-mtv--shadow {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* --- Medienbereich Variante 3 (30%) ------------------------------------- */
.kss-mtv--variant3 .kss-mtv__media {
    width: 30%;
    min-width: 0;
    max-width: 100%;
    height: auto;
    min-height: 300px;
    /* Mindesthöhe für bessere Darstellung */
}

.kss-mtv--variant3 .kss-mtv__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    margin-top: calc(var(--kss-page-layout-gap, 2rem) * 0.5);
}

/* --- Textbereich Variante 3 (70%) --------------------------------------- */
.kss-mtv--variant3 .kss-mtv__text {
    width: 70%;
    min-width: 0;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--kss-page-layout-gap, 1.5rem);
    box-sizing: border-box;
}

/* Text Background Colors für Variante 3 */

.kss-mtv--variant3 .kss-mtv__media,
.kss-mtv--variant3 .kss-mtv__text {
    background-color: var(--kss-color-white);
    /* Default: Weiß */
}

.kss-mtv--variant3[data-text-bg="white"] .kss-mtv__media,
.kss-mtv--variant3[data-text-bg="white"] .kss-mtv__text {
    background-color: var(--kss-color-white);
    color: inherit;
}

.kss-mtv--variant3[data-text-bg="gray"] .kss-mtv__media,
.kss-mtv--variant3[data-text-bg="gray"] .kss-mtv__text {
    background-color: var(--kss-color-gray, #f3f4f6);
    color: inherit;
}

.kss-mtv--variant3[data-text-bg="dark"] .kss-mtv__media,
.kss-mtv--variant3[data-text-bg="dark"] .kss-mtv__text {
    background-color: var(--kss-color-black);
    color: #ffffff;
}

.kss-mtv--variant3[data-text-bg="primary"] .kss-mtv__media,
.kss-mtv--variant3[data-text-bg="primary"] .kss-mtv__text {
    background-color: var(--kss-primary-color, #0066cc);
    color: #ffffff;
}

.kss-mtv--variant3[data-text-bg="secondary"] .kss-mtv__media,
.kss-mtv--variant3[data-text-bg="secondary"] .kss-mtv__text {
    background-color: var(--kss-secondary-color, #6b7280);
    color: #ffffff;
}

/* --- Layouts Variante 3 (Links/Rechts) --------------------------------- */
.kss-mtv--variant3.kss-mtv--left .kss-mtv__media {
    order: -1;
}

.kss-mtv--variant3.kss-mtv--left .kss-mtv__text {
    order: 1;
}

.kss-mtv--variant3.kss-mtv--right .kss-mtv__media {
    order: 1;
}

.kss-mtv--variant3.kss-mtv--right .kss-mtv__text {
    order: -1;
}

/* --- Responsive Variante 3 ---------------------------------------------- */
@media screen and (max-width: 768px) {
    .kss-mtv--variant3.kss-mtv--stacked {
        flex-direction: column;
        gap: 0;
    }

    .kss-mtv--variant3.kss-mtv--stacked .kss-mtv__media,
    .kss-mtv--variant3.kss-mtv--stacked .kss-mtv__text {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        order: 0 !important;
    }

    /* Bild oben, dann Text */
    .kss-mtv--variant3.kss-mtv--stacked .kss-mtv__media {
        min-height: 200px;
        max-height: 300px;
    }

    /* Border-Radius auf Mobile anpassen */
    .kss-mtv--variant3.kss-mtv--stacked {
        border-radius: var(--kss-brand-border-radius-small, 4px);
    }
}