/**
 * CSS: Header Image Component
 * 
 * Estilos para la imagen decorativa que se muestra debajo del header
 * en páginas internas (no en home).
 * 
 * Responsive: 
 * - Desktop (≥768px): 1920x360px
 * - Mobile (<768px): 750x300px
 * 
 * @version 1.0.0
 * @date 2025-11-04
 */

/* ============================================
   CONTENEDOR PRINCIPAL
   ============================================ */

.header-image-wrapper {
    width: 100%;
    max-width: 100vw;
    overflow: hidden;
    margin: 0;
    padding: 0;
    background-color: #f8f9fa;
    position: relative;
}

/* ============================================
   IMAGEN
   ============================================ */

.header-image {
    width: 100%;
    height: auto;
    display: block;
    margin: 0;
    padding: 0;
    object-fit: cover;
    object-position: center;
}

/* ============================================
   RESPONSIVE: DESKTOP (≥768px)
   ============================================ */

@media (min-width: 768px) {
    .header-image-wrapper {
        /* Altura fija para desktop: 360px */
        height: 360px;
    }

    .header-image {
        width: 100%;
        height: 360px;
        object-fit: cover;
        object-position: center center;
    }
}

/* ============================================
   RESPONSIVE: MOBILE (<768px)
   ============================================ */

@media (max-width: 767px) {
    .header-image-wrapper {
        /* Altura automática para mobile - se ajusta al contenido */
        height: auto;
        max-height: 300px;
    }

    .header-image {
        width: 100%;
        height: auto;
        max-height: 300px;
        object-fit: contain;
        object-position: center center;
    }
}

/* ============================================
   OPTIMIZACIONES
   ============================================ */

/* Prevenir layout shift mientras carga la imagen */
.header-image-wrapper::before {
    content: '';
    display: block;
    width: 100%;
    padding-top: 18.75%;
    /* Ratio 1920:360 = 18.75% */
    background-color: #e5e7eb;
}

@media (max-width: 767px) {
    .header-image-wrapper::before {
        padding-top: 40%;
        /* Ratio 750:300 = 40% */
    }
}

/* Ocultar placeholder cuando la imagen carga */
.header-image-wrapper picture {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* ============================================
   TRANSICIONES SUAVES
   ============================================ */

.header-image {
    transition: opacity 0.3s ease-in-out;
}

.header-image:not([src]) {
    opacity: 0;
}

/* ============================================
   ACCESIBILIDAD
   ============================================ */

/* Mejorar contraste si hay texto sobre la imagen (futuro) */
.header-image-wrapper[data-overlay="true"]::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom,
            rgba(0, 0, 0, 0.3) 0%,
            rgba(0, 0, 0, 0.1) 50%,
            rgba(0, 0, 0, 0.3) 100%);
    pointer-events: none;
}

/* ============================================
   PRINT
   ============================================ */

@media print {
    .header-image-wrapper {
        display: none;
    }
}