/**
 * assets/dynamic-blocks-images.css
 *
 * Statische Aspect-Ratio-Hilfsklassen fuer Block-Generator-Bildfelder -
 * ersetzt einen frueher pro Bild-Instanz generierten Inline-<style>-Block
 * (unerwuenscht im Quelltext). Da die moeglichen Aspect-Ratio-Werte eine
 * feste, kleine Liste sind (identisch zu TPPB.galleryAspectRatioOptions,
 * siehe tppb_aspect_ratio_class() in includes/dynamic-blocks-engine.php),
 * reichen ein paar statische, einmal geladene Klassen anstelle einer pro
 * Bild neu erzeugten Regel.
 *
 * BEWUSST NICHT Bootstraps eigene .ratio/.ratio-* Klassen: die brauchen
 * einen Vorfahren mit aufgeloester (nicht automatischer) Breite, um ihre
 * Prozent-Padding-Trick-Technik zu berechnen (::before{padding-top:%}) -
 * in einem unbegrenzten Flex-Item (z.B. {{icon}} in einer .d-flex-Zeile
 * ohne eigene Breitenklasse, wie in der "Icon List") macht ".ratio > *" das
 * <img> per position:absolute, wodurch es NICHT mehr auf seine intrinsische
 * Groesse zurueckfaellt und komplett auf 0x0 kollabiert. Fix: die native
 * CSS aspect-ratio-Eigenschaft direkt auf dem <img> (kein position:absolute
 * noetig) - width:100% faellt bei einem normal fliessenden Bild mit echten
 * HTML-width/height-Attributen (die wp_get_attachment_image() immer
 * liefert) automatisch auf seine intrinsische Groesse zurueck, wenn der
 * Vorfahre unbegrenzt ist, skaliert aber trotzdem normal in einem
 * regulaeren, breiten-begrenzten Container.
 */
.tppb-ar-1x1  { aspect-ratio: 1 / 1;  width: 100%; height: auto; object-fit: cover; }
.tppb-ar-4x3  { aspect-ratio: 4 / 3;  width: 100%; height: auto; object-fit: cover; }
.tppb-ar-16x9 { aspect-ratio: 16 / 9; width: 100%; height: auto; object-fit: cover; }
.tppb-ar-21x9 { aspect-ratio: 21 / 9; width: 100%; height: auto; object-fit: cover; }
.tppb-ar-3x4  { aspect-ratio: 3 / 4;  width: 100%; height: auto; object-fit: cover; }
.tppb-ar-9x16 { aspect-ratio: 9 / 16; width: 100%; height: auto; object-fit: cover; }
.tppb-ar-9x21 { aspect-ratio: 9 / 21; width: 100%; height: auto; object-fit: cover; }

/* TPPBs Placeholder.svg hat kein width/height auf dem <svg>-Root (nur ein
   viewBox) und damit keine intrinsische Groesse zum Zurueckfallen, wenn ein
   Vorfahre unbegrenzt ist - bekommt deshalb zusaetzlich eine feste Pixel-
   Fallback-Breite (in einem echten Container ueber max-width:100% trotzdem
   normal begrenzt). MUSS nach den .tppb-ar-* Regeln oben stehen, damit
   width:400px hier bei gleicher Selektor-Spezifitaet gewinnt (Bootstraps
   CSS-Kaskade: bei Gleichstand gewinnt die spaeter geladene Regel). */
.tppb-ar-placeholder { width: 400px; max-width: 100%; }