/* ============================================================
   Medien.Bayern Zitatbox (12019) - mb-zitat.css  ·  v1.5.0
   ------------------------------------------------------------
   Flaches Markup: das Modul rendert KEIN eigenes vc_section/
   vc_row/vc_col-Geruest mehr (WPBakery wraps das Element bereits
   in eine Spalte). Layout macht dieses CSS.

   Theme-Basis-Styles bleiben erhalten ueber die mitgegebenen
   Klassen am Markup:
     .medienbayern .quote .text p   -> grosse Zitat-Typo (Theme)
     .medienbayern .quote .frame    -> blaue Box + padding (Theme)
   (.picture / .author haben keine Theme-Regeln = reine Hooks.)

   Gleiche Box-Hoehe (Bild == Text) bei variabler Textlaenge:
     - Spalten via align-items:stretch immer gleich hoch
     - Bild Default "Fuellen" (cover): fuellt die Box-Hoehe,
       Seitenverhaeltnis bleibt, Rand wird ggf. leicht beschnitten
     - Option "Einpassen" (.mb-zitat--fit-contain): object-fit:contain,
       Bild komplett im Originalverhaeltnis, zentriert, ggf. Leerraum

   Hook .mb-zitat fuer modulweite Anpassungen, el_class pro Instanz.
   Bestehende Mini-Templates (ohne .mb-zitat) bleiben unberuehrt.
   ============================================================ */

/* Hook: hier modulweit pimpen, ohne Alt-Instanzen zu beruehren */
.mb-zitat {
    /* Abstand ueber/unter dem Modul: globale Rastereinheit --gridstrength (responsive) */
    margin-block: var(--gridstrength, 48px);
}

/* --- Layout: Bild | Text nebeneinander -------------------- */
.mb-zitat .mb-zitat__row {
    display: flex;
    align-items: stretch;  /* Box stretcht auf Bildhoehe, buendige Oberkante wie Alt-Template */
    gap: 24px;             /* Bild<->Box-Abstand wie Original (24px-Padding der alten Bildspalte) */
    max-width: 66.66%;     /* zentrierte Inhaltsbreite statt der alten 2er-Gutter */
    margin-inline: auto;
}

.mb-zitat .mb-zitat__media,
.mb-zitat .mb-zitat__frame {
    flex: 1 1 0;           /* 50/50 wie die alten sm-4 / sm-4 Spalten */
    min-width: 0;
}

/* --- Bild: Default "Fuellen" (cover) ---------------------- */
/* Figure-Default-Margin raus, damit das Bild buendig mit der Box abschliesst */
.mb-zitat .mb-zitat__media .vc_figure {
    margin: 0;
}
/* Bild-Kette auf volle Spaltenhoehe, damit cover die Box-Hoehe fuellt */
.mb-zitat .mb-zitat__media .vc_figure,
.mb-zitat .mb-zitat__media .vc_single_image-wrapper {
    height: 100%;
}
.mb-zitat .mb-zitat__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;            /* fuellt die Box-Hoehe, Seitenverhaeltnis bleibt, Rand beschnitten */
    object-position: center top;  /* Kopf/Gesicht bevorzugt behalten */
}

/* --- Option "Einpassen" (contain): Bild komplett, kein Beschnitt --- */
/* Skaliert ins Box-Rechteck, Seitenverhaeltnis bleibt, zentriert, ggf. Leerraum. */
.mb-zitat--fit-contain .mb-zitat__media img {
    object-fit: contain;
    object-position: center;
}

/* Text vertikal in der Box zentrieren (Box ist via stretch bildhoch) */
.mb-zitat .mb-zitat__frame {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Innenabstand der Textspalten: +24px horizontal = 48px gesamt, wie Original (frame 24 + alte vc_column-inner 24) */
.mb-zitat .mb-zitat__frame .wpb_text_column {
    padding-left: 24px;
    padding-right: 24px;
}

/* Abstand zwischen Zitat und Autorblock (ersetzt vc_empty_space) */
.mb-zitat .mb-zitat__frame > * + * {
    margin-top: 32px;
}

/* --- Schriftgroessen-Faktor (nur Zitat, nur Modul) -------- */
/* Skaliert die im Theme/custom-modules.css definierte responsive
   Zitat-Typo um --mb-zitat-fontscale. Die Basis-Kurve wird gespiegelt
   und font-size UND line-height mit dem Faktor multipliziert (Verhaeltnis
   bleibt). Hoehere Spezifitaet (.medienbayern .mb-zitat.quote = 0,4,1)
   als die Basis (.medienbayern .quote = 0,3,1) -> gewinnt unabhaengig
   von der Ladereihenfolge. Default 1 => identisch zur Basis.
   Nur der Zitattext (.text p); der Autor-Block bleibt unveraendert. */
.medienbayern .mb-zitat.quote .text p {
    font-size:   calc((32px + (38 - 32) * ((100vw - 1001px) / (1968 - 1001))*var(--scalefactor-font-size)) * var(--mb-zitat-fontscale, 1));
    line-height: calc((43px + (51 - 43) * ((100vw - 1001px) / (1968 - 1001)))*var(--scalefactor-line-height) * var(--mb-zitat-fontscale, 1));
}
@media (max-width:1000px) {
    .medienbayern .mb-zitat.quote .text p {
        font-size:   calc((28px + (32 - 28) * ((100vw - 769px) / (1000 - 769))*var(--scalefactor-font-size)) * var(--mb-zitat-fontscale, 1));
        line-height: calc((38px + (43 - 38) * ((100vw - 769px) / (1000 - 769)))*var(--scalefactor-line-height) * var(--mb-zitat-fontscale, 1));
    }
}
@media (max-width:768px) {
    .medienbayern .mb-zitat.quote .text p {
        font-size:   calc(28px * var(--scalefactor-font-size) * var(--mb-zitat-fontscale, 1));
        line-height: calc(38px * var(--scalefactor-line-height) * var(--mb-zitat-fontscale, 1));
    }
}
@media (min-width:1968px) {
    .medienbayern .mb-zitat.quote .text p {
        font-size:   calc(38px * var(--scalefactor-font-size) * var(--mb-zitat-fontscale, 1));
        line-height: calc(51px * var(--scalefactor-line-height) * var(--mb-zitat-fontscale, 1));
    }
}

/* Faktor-Stufen (100 % = Default, keine Klasse noetig) */
.mb-zitat--fs-90 { --mb-zitat-fontscale: 0.9; }
.mb-zitat--fs-80 { --mb-zitat-fontscale: 0.8; }
.mb-zitat--fs-70 { --mb-zitat-fontscale: 0.7; }
.mb-zitat--fs-60 { --mb-zitat-fontscale: 0.6; }
.mb-zitat--fs-50 { --mb-zitat-fontscale: 0.5; }

/* --- Verhaeltnis Bild/Box (Default 50/50; nur nebeneinander) --- */
/* Ueberschreibt die 50/50-Basis (flex 1 1 0). Gleiche Spezifitaet, steht
   spaeter -> gewinnt. Nur ab 769px (darunter wird gestapelt). */
@media (min-width: 769px) {
    .mb-zitat--ratio-13 .mb-zitat__media { flex: 1 1 33.333%; }
    .mb-zitat--ratio-13 .mb-zitat__frame { flex: 1 1 66.667%; }
    .mb-zitat--ratio-23 .mb-zitat__media { flex: 1 1 66.667%; }
    .mb-zitat--ratio-23 .mb-zitat__frame { flex: 1 1 33.333%; }
}

/* --- Option: Bild rechts (Default = links) ---------------- */
.mb-zitat--media-right .mb-zitat__row {
    flex-direction: row-reverse;
}

/* --- Option: volle Breite (Default = schmal/zentriert) ---- */
.mb-zitat--no-gutters .mb-zitat__row {
    max-width: none;
    margin-inline: 0;
}

/* --- Responsive: ab 1400px volle Breite (nur Modul) ------- */
/* Die zentrierte 66,66%-Begrenzung (= die seitlichen Leerzellen) faellt
   ab <=1400px weg, die Box nutzt die volle Spaltenbreite. Bild|Text
   bleiben bis 768px nebeneinander, darunter wird gestapelt (s. u.). */
@media (max-width: 1400px) {
    .mb-zitat .mb-zitat__row {
        max-width: none;
        margin-inline: 0;
    }
}

/* --- Mobile: sauber stapeln, Bild in Originalhoehe -------- */
@media (max-width: 768px) {
    .mb-zitat .mb-zitat__row,
    .mb-zitat--media-right .mb-zitat__row {
        flex-direction: column;
        max-width: none;
        margin-inline: 0;
        gap: 0; /* Bild buendig am blauen Block (kein Abstand) */
    }
    .mb-zitat .mb-zitat__media,
    .mb-zitat .mb-zitat__frame {
        width: 100%;
    }
    /* gestapelt: kein Cover-Crop noetig, Bild in Originalhoehe */
    .mb-zitat .mb-zitat__media .vc_figure,
    .mb-zitat .mb-zitat__media .vc_single_image-wrapper {
        height: auto;
    }
    .mb-zitat .mb-zitat__media img {
        height: auto;
        object-fit: fill;
    }
}