/* ==========================================================================
   Block: Text-Image (bd-text-image) – Grid-kompatibel + Row-Modes + Stack
   ========================================================================== */

.bd-text-image {
    margin-block: 3rem;
    /* Default-Gap (wird zur Sicherheit auch als Fallback genutzt) */
    --bd-text-image-gap: 3rem;
}

/* Gap-Modifier (eigentlich kommt der Wert per Inline --bd-grid-gap) */
.bd-text-image.gap-small {
    --bd-text-image-gap: 1rem;
}

.bd-text-image.gap-medium {
    --bd-text-image-gap: 2rem;
}

.bd-text-image.gap-large {
    --bd-text-image-gap: 3rem;
}

/* default */
.bd-text-image.gap-huge {
    --bd-text-image-gap: 4rem;
}

.bd-text-image.gap-xhuge {
    --bd-text-image-gap: 6rem;
}

/* ---------------- Teaser ---------------- */
.bd-text-image .block_teaser {
    width: 80%;
    max-width: var(--narrow, 70ch);
    margin-inline: auto;
    margin-bottom: 0;
    text-align: center;
}

.bd-text-image .block_teaser h2 {
    margin-bottom: .5em;
}

.bd-text-image .block_teaser .subline {
    display: block;
    margin-bottom: .25em;
}

.bd-text-image .block_teaser .teaser {
    font-size: 1.1em;
    line-height: 1.7;
}

.bd-text-image .block_teaser .teaser>*:first-child {
    margin-top: 0;
}

.bd-text-image .block_teaser .teaser>*:last-child {
    margin-bottom: 0;
}

/* ---------------- Inner / Grid ---------------- */
.bd-text-image__inner {
    display: grid;
    /* Safety, falls .bd_grid überschrieben würde */
    gap: var(--bd-text-image-gap);
    /* Fallback – eigentlicher Wert via Inline */
}

/* Vertikale Ausrichtung über den CONTAINER (fix für „Mitte“) */
.bd-text-image.align-top .bd-text-image__inner {
    align-items: start;
}

.bd-text-image.align-center .bd-text-image__inner {
    align-items: center;
}

.bd-text-image.align-bottom .bd-text-image__inner {
    align-items: end;
}

/* (Optional) Item-Modifikatoren – falls irgendwo benötigt */
.bd-text-image .align-item-top {
    align-self: start;
}

.bd-text-image .align-item-center {
    align-self: center;
}

.bd-text-image .align-item-bottom {
    align-self: end;
}

/* ---------------- Media / Content Basics ---------------- */
figure.bd-text-image__media {
    margin: 0;
}

.bd-text-image__media img,
.bd-text-image__media picture {
    max-width: 100%;
    height: auto;
    display: block;
}

.bd-text-image__content {
    line-height: 1.6;
}

/* ======================== Row-Modi ======================== */

/* a) Vollbreite Row (edge-to-edge) */
.bd-text-image.row-mode-fullwidth>.bd_row {
    width: 100%;
    max-width: none;
    margin: 3em auto;
    padding: 0;
    /* Außenabstand über Gutter der Textspalte lösen */
}

/* Text-Gutter (beidseitig) */
.bd-text-image.row-mode-fullwidth.text-gutter-none .bd-text-image__content {
    padding-inline: 0;
}

.bd-text-image.row-mode-fullwidth.text-gutter-s .bd-text-image__content {
    padding-inline: clamp(12px, 2vw, 24px);
}

.bd-text-image.row-mode-fullwidth.text-gutter-m .bd-text-image__content {
    padding-inline: clamp(16px, 3vw, 40px);
}

.bd-text-image.row-mode-fullwidth.text-gutter-l .bd-text-image__content {
    padding-inline: clamp(20px, 4vw, 64px);
}

.bd-text-image.row-mode-fullwidth.text-gutter-xl .bd-text-image__content {
    padding-inline: clamp(24px, 6vw, 96px);
}

/* b) Media-Bleed: Bild randlos, Row bleibt 80% */
.bd-text-image.row-mode-bleed_media .bd-text-image__media.is-bleed {
    width: 100vw;
    max-width: 100vw;
}

.bd-text-image.row-mode-bleed_media.layout-image-left .bd-text-image__media.is-bleed {
    margin-left: calc(50% - 50vw);
}

.bd-text-image.row-mode-bleed_media.layout-image-right .bd-text-image__media.is-bleed {
    margin-right: calc(50% - 50vw);
}

@media (max-width: 640px) {
    .bd-text-image.row-mode-bleed_media .bd-text-image__media.is-bleed {
        width: 100%;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
    }
}

/* ======================== Stack-Modus ======================== */

/* Sektionen ohne vertikale Außenabstände – Bilder „berühren“ sich */
.bd-text-image.is-stacked {
    margin-block: 0;
}

/* Row im Stack ohne vertikale Margins (horiz. auto bleibt für Centering) */
.bd_row.no-vmargin {
    margin-block: 0;
}

.bd-text-image.is-stacked>.bd_row {
    margin-block: 0;
}

/* Spezifischer als fullwidth-Regeln, falls Reihenfolge variiert */
.bd-text-image.row-mode-fullwidth.is-stacked>.bd_row,
.bd-text-image.is-stacked>.bd_row.fullwidth {
    margin-block: 0;
}

/* Optional wieder Abstand (für ersten/letzten Block im Stack) */
.bd-text-image.is-stacked.stack-keep-top,
.bd-text-image.is-stacked.stack-keep-top>.bd_row {
    margin-top: 6rem;
}

.bd-text-image.is-stacked.stack-keep-bottom,
.bd-text-image.is-stacked.stack-keep-bottom>.bd_row {
    margin-bottom: 6rem;
}

/* Kein interner Gap im Stack (zusätzlich zur Inline-Var) */
.bd-text-image.is-stacked .bd-text-image__inner {
    gap: 0;
}

/* ===== Stack Equalize (optional): Bild passt sich Texthöhe an ===== */
/* Nur das BILD stretchen – Text folgt der Container-Ausrichtung (z.B. „Mitte“) */
.bd-text-image.is-stacked.stack-equalize .bd-text-image__media {
    align-self: stretch;
}

.bd-text-image.is-stacked.stack-equalize .bd-text-image__content {
    align-self: auto;
}

.bd-text-image.is-stacked.stack-equalize .bd-text-image__media img,
.bd-text-image.is-stacked.stack-equalize .bd-text-image__media picture {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* sanftes Cropping */
    display: block;
}

/* Sinnvolle Mindesthöhe für sehr kurze Inhalte – nur Desktop */
@media (min-width: 981px) {
    .bd-text-image.is-stacked.stack-equalize .bd-text-image__media {
        min-height: 320px;
    }
}

/* ======================== Mobile / Tablet ======================== */

/* Reihenfolge nur für „echtes Mobile“ (≤640px) ändern */
@media (max-width: 980px) {
    .bd-text-image.mobile-order-image_first .bd-text-image__media {
        order: 1;
    }

    .bd-text-image.mobile-order-image_first .bd-text-image__content {
        order: 2;
    }

    .bd-text-image.mobile-order-text_first .bd-text-image__content {
        order: 1;
    }

    .bd-text-image.mobile-order-text_first .bd-text-image__media {
        order: 2;
    }
}

/* Textspalte auf Mobile/Tablet (≤980px): 80% Breite, zentriert, kein Padding */
@media (max-width: 980px) {
    .bd-text-image .bd-text-image__content.col-sm-12 {
        width: 80%;
        margin-inline: unset;
        padding-inline: unset;
        margin: 2rem auto;
    }

    .bd-text-image.row-mode-fullwidth .bd-text-image__content.col-sm-12 {
        padding-inline: unset;
    }

    .bd-text-image__inner.bd_grid {
        gap: 2em 0;
    }

}


/* BD Text-Image: Mobile Overflow fix */
@media (max-width: 980px) {

    /* 1) Gap kleiner, keine Außenkorrekturen vom globalen Grid */
    .bd-text-image .bd-text-image__inner.bd_grid {
        --bd-grid-gap: clamp(12px, 3vw, 20px);
        margin-left: 0;
        margin-right: 0;
    }

    /* 2) Spalten dürfen mobil kein zusätzliches Seiten-Padding tragen */
    .bd-text-image .bd-text-image__inner>[class*="col-"] {
        padding-left: 0;
        padding-right: 0;
        box-sizing: border-box;
    }

    /* 3) Wenn dein Grid per negative margins arbeitet: Container bündig halten */
    .bd-text-image.row-mode-fullwidth>.bd_row {
        padding-left: 0;
        padding-right: 0;
        overflow-x: hidden;
        /* Safety-Net gegen Restpixel */
    }
}