/**
 * Block: Media & Text
 *
 * Layout-Varianten:
 *   .block--media-text--layout-single  → 1 Medium 50% + Text 50%
 *   .block--media-text--layout-duo     → 2 Bilder à 25% + Text 50%
 *
 * Position der Medien:
 *   .block--media-text--media-left  → Medien zuerst im DOM
 *   .block--media-text--media-right → Text zuerst im DOM (per CSS-Order)
 */

.block--media-text {
    position: relative;
}

.block--media-text.block--pad-none   { padding-block: 0; }
.block--media-text.block--pad-normal { padding-block: var(--space-12); }
.block--media-text.block--pad-lg     { padding-block: var(--space-16); }

.block--media-text.block--bg-beige       { background-color: var(--color-beige); }
.block--media-text.block--bg-dunkelbeige { background-color: var(--color-bg-alt); }
.block--media-text.block--bg-white       { background-color: var(--color-white); }
.block--media-text.block--bg-navy {
    background-color: var(--color-bg-premium);
    color: var(--color-text-on-navy);
}
.block--media-text.block--bg-transparent {
    background-color: transparent;
}

/* Auf Beitragsseiten: bei transparent kein vertikales Padding —
 * der Single-Post-Content gibt Breite und Spacing vor. Außerhalb
 * gilt block--pad-* normal. */
.single-post .block--media-text.block--bg-transparent {
    padding-block: 0;
}

.block--media-text .block__inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

/* ── Media-Container ───────────────────────── */

.media-text__media {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: 1fr;
}

.media-text__media--duo {
    grid-template-columns: 1fr 1fr;
}

.media-text__media-cell {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    align-items: flex-start;
}

.media-text__media-item {
    margin: 0;
    overflow: hidden;
    width: 100%;
}

.media-text__media-button {
    align-self: flex-start;
}

.media-text__image,
.media-text__video,
.media-text__iframe {
    display: block;
    width: 100%;
    height: 100%;
}

/* ── Aspect Ratios ──────────────────────────── */

.block--media-text--ratio-16-9 .media-text__media-item { aspect-ratio: 16 / 9; }
.block--media-text--ratio-4-3  .media-text__media-item { aspect-ratio: 4 / 3; }
.block--media-text--ratio-3-2  .media-text__media-item { aspect-ratio: 3 / 2; }
.block--media-text--ratio-1-1  .media-text__media-item { aspect-ratio: 1 / 1; }
.block--media-text--ratio-3-4  .media-text__media-item { aspect-ratio: 3 / 4; }

.block--media-text--ratio-auto .media-text__media-item {
    aspect-ratio: auto;
}

/* Object-fit greift nur, wenn ein Aspect-Ratio gesetzt ist */
.block--media-text--fit-cover .media-text__image,
.block--media-text--fit-cover .media-text__video {
    object-fit: cover;
}
.block--media-text--fit-contain .media-text__image,
.block--media-text--fit-contain .media-text__video {
    object-fit: contain;
}

.block--media-text--ratio-auto .media-text__image {
    height: auto;
    object-fit: initial;
}

/* ── Duo: beide Bilder gleich groß + Mobile-Stacking ─────────
 *
 * Unter 768 px die zwei Bilder UNTEREINANDER (1-spaltig, je volle Breite) —
 * nebeneinander wurden sie auf schmalen Phones unterschiedlich hoch (und der
 * Button darunter verschob sich entsprechend mit). Ab 768 px nebeneinander,
 * dort sorgt das Seitenverhältnis für gleiche Höhe. */
@media (max-width: 767.98px) {
    .media-text__media--duo {
        grid-template-columns: 1fr;
    }
}

/* Bild auf volle Zellbreite ziehen — die Zelle ist align-items:flex-start, was
 * den aspect-ratio-Kontext (Höhe aus Breite) stören kann; mit align-self:
 * stretch greift das Verhältnis sicher und beide Bilder werden gleich hoch. */
.media-text__media--duo .media-text__media-item {
    align-self: stretch;
}

/* Duo ohne festes Seitenverhältnis (Auto): natürliche Verhältnisse wären
 * unterschiedlich hoch → auf 1:1 zwingen (object-fit: cover), damit beide
 * gleich groß sind. Feste Ratios (1:1, 4:3 …) sind ohnehin schon gleich. */
.block--media-text--layout-duo.block--media-text--ratio-auto .media-text__media-item {
    aspect-ratio: 1 / 1;
}
.block--media-text--layout-duo.block--media-text--ratio-auto .media-text__image {
    height: 100%;
    object-fit: cover;
}

.media-text__iframe {
    border: 0;
}

/* ── Content ───────────────────────────────── */

.media-text__content {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    align-self: center;
}

.media-text__eyebrow {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: var(--fw-bold);
    color: var(--color-text);
}

.media-text__heading {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--text-4xl);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-tight);
    color: var(--color-text);
}

/* Auf Beitragsseiten kleinere H2 (analog Text-Block).
 * .single-post liegt auf dem <main>-Element von single.php. */
.single-post .media-text__heading {
    font-size: var(--text-3xl);
}

.media-text__body {
    font-size: var(--text-base);
    line-height: var(--lh-relaxed);
    color: var(--color-text);
}

.media-text__body > *:first-child { margin-top: 0; }
.media-text__body > *:last-child  { margin-bottom: 0; }

.media-text__button-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-2);
}

.block--media-text.block--bg-navy .media-text__eyebrow,
.block--media-text.block--bg-navy .media-text__heading,
.block--media-text.block--bg-navy .media-text__body {
    color: var(--color-text-on-navy);
}

/* Transparenter Block in dunkler Section: „auto"-Schrift erbt hell.
 * Steht VOR den Modifier-Regeln, damit eine explizite Farbwahl (und der
 * Schutz „helle Karte" via block--media-text--text-anthrazit) weiterhin
 * gewinnt. Der Block selbst sieht die Section-Farbe in PHP nicht. */
.block--bg-navy .media-text__eyebrow,
.block--bg-navy .media-text__heading,
.block--bg-navy .media-text__body,
.block--bg-anthrazit .media-text__eyebrow,
.block--bg-anthrazit .media-text__heading,
.block--bg-anthrazit .media-text__body,
.block--bg-violett .media-text__eyebrow,
.block--bg-violett .media-text__heading,
.block--bg-violett .media-text__body {
    color: var(--color-text-on-navy);
}

/* ── Manuelle Textfarbe (überschreibt Auto-Verhalten) ──
 * Modifier-Klasse block--media-text--text-{slug} wird im Render
 * gesetzt — auch im Auto-Modus, dann anhand des bg ermittelt. */
.block--media-text--text-anthrazit .media-text__eyebrow,
.block--media-text--text-anthrazit .media-text__heading,
.block--media-text--text-anthrazit .media-text__body { color: var(--color-anthrazit); }

.block--media-text--text-white .media-text__eyebrow,
.block--media-text--text-white .media-text__heading,
.block--media-text--text-white .media-text__body { color: var(--color-white); }

.block--media-text--text-navy .media-text__eyebrow,
.block--media-text--text-navy .media-text__heading,
.block--media-text--text-navy .media-text__body { color: var(--color-navy); }

/* Empty-Preview im Editor */
.block--media-text--empty {
    padding: var(--space-8) var(--space-6);
    background-color: var(--color-dunkelbeige);
    color: var(--color-text-muted);
    text-align: center;
    font-size: var(--text-sm);
    font-style: italic;
}

/* ── Desktop (≥1024) — Side-by-Side Grid ─── */

@media (min-width: 1025px) {
    .block--media-text .block__inner {
        display: grid;
        gap: var(--space-12);
        align-items: center;
    }

    /* Single: 50/50 */
    .block--media-text--layout-single .block__inner {
        grid-template-columns: 1fr 1fr;
    }

    /* Duo: Medien-Container nimmt 50% (mit 2 Bildern à 50% intern), Text 50% */
    .block--media-text--layout-duo .block__inner {
        grid-template-columns: 1fr 1fr;
    }

    .block--media-text--layout-duo .media-text__media {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-4);
    }

    /* Position rechts: Text zuerst rendern */
    .block--media-text--media-right .media-text__media {
        order: 2;
    }
}

/* Bei nur einer Spalte (alles unter 1025) bleiben Duo-Bilder
 * nebeneinander 50/50 (wie auf Desktop), nur die Block-Aufteilung
 * wird gestapelt. */