/**
 * CSS: Header Image Component — Radiocanal
 *
 * Imagen decorativa debajo del menú en páginas internas.
 * Dos estados:
 *   1. Con imagen  → .header-image-wrapper (muestra <picture>)
 *   2. Sin imagen  → .header-image-placeholder (gradiente de marca RC)
 *
 * Dimensiones de imagen esperadas:
 *   Desktop (≥768px): 1920×360px
 *   Mobile  (<768px): 750×300px
 *
 * Exclusivo Radiocanal — NO pertenece al framework.
 *
 * @version 1.0.0
 * @date    2026-06-28
 */

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

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

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

.header-image {
    width: 100%;
    height: auto;
    display: block;
    margin: 0;
    padding: 0;
    object-fit: cover;
    object-position: center;
    transition: opacity 0.3s ease-in-out;
}

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

/* ============================================================
   DESKTOP (≥768px) — altura fija 360px
   ============================================================ */

@media (min-width: 768px) {
    .header-image-wrapper {
        height: 360px;
    }

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

/* ============================================================
   MOBILE (<768px) — altura automática máx. 300px
   ============================================================ */

@media (max-width: 767px) {
    .header-image-wrapper {
        height: auto;
        max-height: 300px;
    }

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

/* ============================================================
   PLACEHOLDER — gradiente RC mientras no hay imagen
   Se muestra cuando las imágenes aún no están en disco.
   Usa los colores de marca (azul radio / rojo canal).
   ============================================================ */

.header-image-placeholder {
    background: linear-gradient(
        135deg,
        var(--rc-azul-oscuro, #004D99) 0%,
        var(--rc-azul-logo, #0077CC) 40%,
        var(--rc-rojo-logo, #E63946) 70%,
        var(--rc-rojo-oscuro, #C1121F) 100%
    );
    height: 200px;
}

@media (min-width: 768px) {
    .header-image-placeholder {
        height: 280px;
    }
}

/* ============================================================
   PREVENIR LAYOUT SHIFT (solo cuando hay imagen real)
   ============================================================ */

.header-image-wrapper:not(.header-image-placeholder)::before {
    content: '';
    display: block;
    width: 100%;
    padding-top: 18.75%; /* ratio 1920:360 */
    background-color: #e5e7eb;
}

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

/* El <picture> se posiciona sobre el placeholder ::before */
.header-image-wrapper:not(.header-image-placeholder) picture {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* ============================================================
   PRINT — ocultar imagen decorativa al imprimir
   ============================================================ */

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