/* Blossom Aspect Image — pojedynczy obrazek ze stałym aspect ratio
   Mobile-safe: grid zamiast absolute + width:auto przy max-height */

.elementor-widget-blossom_aspect_images {
    max-width: 100%;
}

.elementor-widget-blossom_aspect_images > .elementor-widget-container {
    max-width: 100%;
}

.elementor-widget-blossom_aspect_images .bai {
    --bai-ratio: 16 / 9;

    display: flex;
    width: 100%;
    max-width: 100%;
    justify-content: center;
    min-width: 0;
}

.elementor-widget-blossom_aspect_images .bai__item {
    margin: 0;
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
    overflow: hidden;
    border-radius: inherit;
}

.elementor-widget-blossom_aspect_images .bai__frame {
    position: relative;
    display: grid;
    grid-template: 1fr / 1fr;
    width: 100%;
    max-width: 100%;
    height: auto;
    aspect-ratio: var(--bai-ratio);
    overflow: hidden;
    isolation: isolate;
    background: transparent;
    z-index: 0;
    /* BEZ contain:paint / overflow:clip — na iOS potrafią zwinąć wysokość do 0 */
}

/* Gdy Elementor ustawi max-height: trzymaj proporcje (kurcz szerokość, nie zgniataj) */
.elementor-widget-blossom_aspect_images .bai__frame.bai__frame--maxh {
    width: auto;
    max-width: 100%;
    height: auto;
    align-self: center;
}

.elementor-widget-blossom_aspect_images .bai__link {
    grid-area: 1 / 1;
    display: grid;
    grid-template: 1fr / 1fr;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    z-index: 0;
}

.elementor-widget-blossom_aspect_images .bai__img {
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: none;
    object-fit: cover;
    object-position: center center;
    transform-origin: center center;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transition: opacity 0.25s ease, transform 0.35s ease;
}

.elementor-widget-blossom_aspect_images .bai__frame > .bai__img,
.elementor-widget-blossom_aspect_images .bai__link > .bai__img {
    grid-area: 1 / 1;
    width: 100% !important;
    height: 100% !important;
    min-width: 0;
    min-height: 0;
}

.elementor-widget-blossom_aspect_images .bai__caption {
    margin: 8px 0 0;
    font-size: 14px;
    line-height: 1.4;
    position: relative;
    z-index: 1;
    width: 100%;
}

/* Fallback gdy aspect-ratio nie działa / jest zepsute przez max-height */
.elementor-widget-blossom_aspect_images .bai__frame::before {
    content: "";
    grid-area: 1 / 1;
    width: 100%;
    padding-bottom: calc(100% * var(--bai-rh, 9) / var(--bai-rw, 16));
    pointer-events: none;
}

@supports (aspect-ratio: 1 / 1) {
    .elementor-widget-blossom_aspect_images .bai__frame::before {
        display: none;
    }
}

@media (max-width: 767px) {
    .elementor-widget-blossom_aspect_images .bai,
    .elementor-widget-blossom_aspect_images .bai__item,
    .elementor-widget-blossom_aspect_images .bai__frame {
        max-width: 100%;
        min-width: 0;
    }

    /* Na wąskim ekranie zawsze respektuj max-width kontenera */
    .elementor-widget-blossom_aspect_images .bai__frame.bai__frame--maxh {
        width: min(100%, calc(var(--bai-max-h, 100vh) * var(--bai-rw, 16) / var(--bai-rh, 9)));
        max-width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .elementor-widget-blossom_aspect_images .bai__img {
        transition: none;
    }
}