/* ═══════════════════════════════════════════════════════════
   Featured image — fully fluid, theme-agnostic
   v5.19.3: fix per container con padding-hack (es. .thumbnail-container,
   wrapper con padding-bottom inline) che a risoluzioni >1450px lasciava
   l'immagine più piccola del container. Forziamo object-fit:cover
   ancorando l'<img> a inset:0 quando il parent impone un aspect-ratio.
   ═══════════════════════════════════════════════════════════ */

.live-blog__featured-image {
    margin-bottom: 2rem;
    border-radius: 0.5rem;
    overflow: hidden;
    width: 100%;
    max-width: none;
}

.live-blog__featured-img {
    width: 100%;
    height: auto;
    display: block;
    max-width: none;
}

/* ── Caso 1: tema usa .thumbnail-container (padding-hack 3:2) ──
   Ancoriamo l'immagine al container e riempiamo con cover. */
.thumbnail-container > .live-blog__featured-image,
.thumbnail-container .live-blog__featured-image {
    position: absolute;
    inset: 0;
    margin: 0;
    border-radius: 0;
    height: 100%;
    width: 100%;
}
.thumbnail-container .live-blog__featured-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* ── Caso 2: parent generico con padding-bottom inline (aspect-ratio hack) ──
   Detection via [style*="padding-bottom"]. Theme-agnostic fallback. */
[style*="padding-bottom"] > .live-blog__featured-image {
    position: absolute;
    inset: 0;
    margin: 0;
    border-radius: 0;
    height: 100%;
    width: 100%;
}
[style*="padding-bottom"] > .live-blog__featured-image .live-blog__featured-img,
[style*="padding-bottom"] > .live-blog__featured-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* ── Caso 3: parent usa aspect-ratio CSS moderno ──
   Se l'immagine è figlia diretta di un wrapper con aspect-ratio
   computato, il browser gestisce già la dimensione del container;
   garantiamo solo che l'<img> riempia senza distorsione. */
@supports (aspect-ratio: 1) {
    .live-blog__featured-image[style*="aspect-ratio"] .live-blog__featured-img,
    [style*="aspect-ratio"] > .live-blog__featured-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}