/* =========================================================
   512 Art Direction · Responsive picture
   =========================================================
   Consume las CSS custom properties que el helper PHP setea
   por instancia: --ad-aspect, --ad-focal-x, --ad-focal-y.
   Cero inline propiedades CSS — solo custom properties dinámicas.
   ========================================================= */

@layer plugins {

    .ad-picture {
        display: block;
        position: relative;
        aspect-ratio: var(--ad-aspect, 16 / 9);
        overflow: hidden;
    }

    .ad-picture img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* Solo en modo fallback (sin imagen mobile dedicada) usamos focal point
       para reposicionar el crop visual. */
    .ad-picture--fallback img {
        object-position: var(--ad-focal-x, 50%) var(--ad-focal-y, 50%);
    }

}