/*
 * WB Image Ratio — optional aspect-ratio controls for the stock Elementor
 * Image widget (injected by inc/image-ratio-controls.php).
 *
 * Wrapper classes, not per-widget styles, so a widget only gets rules when
 * the author chose a ratio in the "Image Ratio" Style-tab section:
 *   .elementor-widget-image.wb-img-ratio-11 img → aspect-ratio: 1/1
 *   .wb-img-fit-cover / .wb-img-fit-contain       → object-fit
 *   .wb-img-pos-*                                 → object-position
 *
 * The ratio box width comes from the native Width control; the image then
 * fills that box per object-fit/object-position.
 *
 * Why height:auto !important: CSS ignores aspect-ratio whenever BOTH axes
 * are explicit. Elementor's native Height control (and its *_mobile /
 * *_tablet variants) write a px height straight onto `img`, so a widget
 * configured with ratio + height was rendering the OLD fixed-height box
 * instead of the chosen ratio. When a ratio class is active the fixed
 * height must yield: width stays native-controlled, height derives from
 * aspect-ratio. !important wins the specificity battle against
 * `.elementor-NNN .elementor-element.elementor-element-XXX img`.
 */
.elementor-widget-image[class*="wb-img-ratio-"] img { height: auto !important; }

.elementor-widget-image.wb-img-ratio-11 img { aspect-ratio: 1 / 1; }
.elementor-widget-image.wb-img-ratio-43 img { aspect-ratio: 4 / 3; }
.elementor-widget-image.wb-img-ratio-32 img { aspect-ratio: 3 / 2; }
.elementor-widget-image.wb-img-ratio-169 img { aspect-ratio: 16 / 9; }
.elementor-widget-image.wb-img-ratio-916 img { aspect-ratio: 9 / 16; }

.elementor-widget-image.wb-img-fit-cover img { object-fit: cover; }
.elementor-widget-image.wb-img-fit-contain img { object-fit: contain; }

.elementor-widget-image.wb-img-pos-cc img { object-position: center center; }
.elementor-widget-image.wb-img-pos-ct img { object-position: top center; }
.elementor-widget-image.wb-img-pos-bc img { object-position: bottom center; }
.elementor-widget-image.wb-img-pos-lc img { object-position: left center; }
.elementor-widget-image.wb-img-pos-rc img { object-position: right center; }
.elementor-widget-image.wb-img-pos-tl img { object-position: top left; }
.elementor-widget-image.wb-img-pos-tr img { object-position: top right; }
.elementor-widget-image.wb-img-pos-bl img { object-position: bottom left; }
.elementor-widget-image.wb-img-pos-br img { object-position: bottom right; }