/* ==========================================================================
   Media frame: angoli arrotondati e ombra lieve per immagini e video YouTube
   Uso:
     <div class="media-frame"> <img ...> </div>               screenshot / foto
     <div class="media-frame media-frame--clear"> ... </div>  PNG trasparenti (mockup)
     <div class="media-frame media-frame--sm"> ... </div>     versione compatta (sidebar, card, carousel)
     <div class="media-frame media-frame--video"> <iframe class="playeryoutube"> </div>
   ========================================================================== */

.media-frame {
    display: block;
    margin: 0 auto 1.75rem;
    padding: 0;
    text-align: center;
}

    .media-frame > picture {
        display: block;
    }

    .media-frame > img,
    .media-frame > a > img,
    .media-frame > picture > img,
    .media-frame > iframe {
        display: block;
        max-width: 100%;
        height: auto;
        margin: 0 auto !important;
        border: 0;
        border-radius: 14px;
        box-shadow: 0 10px 28px rgba(16, 42, 67, .24);
    }

/* PNG trasparenti: l'ombra segue la sagoma, niente angoli.
   Doppia classe: prevale anche su --sm e sulla regola mobile */
.media-frame.media-frame--clear > img,
.media-frame.media-frame--clear > a > img,
.media-frame.media-frame--clear > picture > img,
.ftco-section-featured .featured-img > img,
.hero-wrap .featured-img > img {
    border-radius: 0;
    box-shadow: none;
    filter: drop-shadow(0 10px 14px rgba(16, 42, 67, .28));
}

/* Versione compatta */
.media-frame--sm {
    margin-bottom: 1rem;
}

    .media-frame--sm > img,
    .media-frame--sm > a > img,
    .media-frame--sm > picture > img {
        border-radius: 10px;
        box-shadow: 0 6px 18px rgba(16, 42, 67, .24);
    }

/* Video YouTube */
.media-frame--video > iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    background: #000;
}

/* Cover già impaginate (blog e omnichannel) */
.media-frame.blog-hero-media,
.media-frame.omni-hero-media {
    aspect-ratio: auto;
    overflow: visible;
}

    .media-frame.blog-hero-media > img,
    .media-frame.omni-hero-media > img {
        width: 100%;
        height: auto;
        aspect-ratio: 1672 / 941;
        object-fit: cover;
    }

    .media-frame.omni-hero-media > img {
        aspect-ratio: 16 / 9;
    }

/* Carousel (owl): l'immagine resta a tutta larghezza, spazio per l'ombra */
.owl-carousel .media-frame {
    padding: 8px 10px 22px;
}

    .owl-carousel .media-frame > img,
    .owl-carousel .media-frame > a > img,
    .owl-carousel .media-frame > picture > img {
        width: 100%;
    }

    /* testo sotto il logo (es. partner in about.html) */
    .media-frame > img + p,
    .media-frame > a + p {
        margin-top: 1.25rem;
    }

@media (max-width: 767.98px) {
    .media-frame > img,
    .media-frame > a > img,
    .media-frame > picture > img,
    .media-frame > iframe {
        border-radius: 10px;
    }
}