/*
 * HERO: Componente hero (Single + Home)
 * Compatible con: LiteSpeed Cache, Cloudflare, Redis
 */

/* ==========================================================
   HERO (Single + Home)
========================================================== */

.informe-hero {
    margin-bottom: var(--space-8);
}

.informe-hero-category {
    font-size: var(--fs-sm);
    text-transform: uppercase;
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
    margin-bottom: var(--space-2);
}

.informe-hero-title {
    font-family: var(--font-serif);
    font-size: var(--fs-xxl);
    line-height: var(--line-height-tight);
    margin-bottom: var(--space-4);
}

.informe-hero-thumb img {
    width: 100%;
    height: auto;
    display: block;
}

@media (max-width: 768px) {
    .informe-hero-title {
        font-size: var(--fs-xl);
    }
    
    /**
     * OVERRIDE JUSTIFICADO (PR4b): Full-bleed en mobile
     * 
     * Razón: En mobile, las imágenes hero deben ocupar el ancho completo
     * de la pantalla para maximizar impacto visual y aprovechar espacio limitado.
     * 
     * Patrón: .informe-bleed-mobile definido en 3-layout/containers.css
     * 
     * Desktop: Sin cambios (imagen respeta padding del contenedor)
     * Mobile: Imagen se extiende hasta los bordes
     */
    .informe-hero-thumb {
        margin-left: calc(-1 * var(--container-padding-mobile)); /* -16px */
        margin-right: calc(-1 * var(--container-padding-mobile)); /* -16px */
        width: calc(100% + (2 * var(--container-padding-mobile))); /* 100% + 32px */
        max-width: calc(100% + (2 * var(--container-padding-mobile)));
    }
}