/**
 * Hero detalle de artículo (blog) — mismo patrón móvil que servicio.php (hero-servicio-detalle.css).
 */

@media (max-width: 768px) {
    .page-blog-articulo .hero-hero-badge {
        max-width: 94%;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background: rgba(26, 26, 26, 0.88);
    }

    /*
     * Hero móvil: imagen admin (imagen_hero_movil) vía <picture>.
     * Proporción 25:42 como el resto del sitio.
     */
    body.page-blog-articulo.page-hero-banner-desk .hero-section {
        position: relative;
        aspect-ratio: 25 / 42;
        width: 100%;
        height: auto;
        max-height: none;
        overflow: hidden;
        background-color: #000 !important;
        background-image: var(--hero-banner-bg-mobile, var(--hero-banner-bg)) !important;
        background-size: cover !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
        background-attachment: scroll !important;
    }

    body.page-blog-articulo.page-hero-banner-desk .hero-section::before {
        content: '';
        position: absolute;
        inset: 0;
        z-index: 1;
        pointer-events: none;
        background: linear-gradient(
            rgba(0, 0, 0, var(--hero-banner-overlay, 0)),
            rgba(0, 0, 0, var(--hero-banner-overlay, 0))
        );
    }

    body.page-blog-articulo.page-hero-banner-desk .hero-section .hero-section__bg-picture {
        position: absolute;
        inset: 0;
        z-index: 0;
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        display: block !important;
        pointer-events: none;
    }

    body.page-blog-articulo.page-hero-banner-desk .hero-section .hero-section__bg-picture img,
    body.page-blog-articulo.page-hero-banner-desk .hero-section .hero-section__desk-bg {
        display: block !important;
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        max-height: none !important;
        object-fit: cover;
        object-position: center;
    }

    body.page-blog-articulo.page-hero-banner-desk .hero-section > .hero-content {
        position: relative;
        z-index: 2;
    }
}

@media (min-width: 769px) {
    body.page-blog-articulo.page-hero-banner-desk .hero-section {
        background-color: #000 !important;
    }

    body.page-blog-articulo.page-hero-banner-desk .hero-section .hero-section__bg-picture {
        display: block;
        width: 100%;
        flex-shrink: 0;
    }

    body.page-blog-articulo.page-hero-banner-desk .hero-section .hero-section__desk-bg {
        display: block !important;
        width: 100% !important;
        height: 538px !important;
        max-height: 538px !important;
        object-fit: cover !important;
        object-position: center !important;
    }
}