/*
 * FRONT PAGE: Estilos para la página de inicio
 * Migrado desde layout-home.css + module-home-header.css
 * Compatible con: LiteSpeed Cache, Cloudflare, Redis
 */

/* ==========================================================
   1. HOME HEADER
========================================================== */

.informe-home-header {
    background: var(--color-white);
    border-bottom: none;
    padding: var(--space-2) 0 var(--space-1) 0;
}

/* Orden de elementos: meta, logo-wrap, topics (desktop/tablet) */
.informe-home-header .informe-container {
    display: flex;
    flex-direction: column;
}

/**
 * AJUSTE CONTEXTUAL PERMITIDO (PR4)
 * .informe-home-header .informe-container hereda de 3-layout/containers.css.
 * Si se necesita override específico, documentar aquí.
 */

/* ======================================================
   LOGO WRAP
   NOTA: Los estilos del logo-wrap están en components/logo-wrap.css
   para mantener consistencia global. No agregar estilos aquí.
====================================================== */

/* Barra de tags: has-slider, sin border-top, border-bottom específico */
.informe-home-header__topics-wrapper,
.informe-home-header__topics-wrapper.has-slider {
    padding: var(--space-2) 0;
    border-top: none !important;
    border-bottom: 0.0625rem solid #4a4a4a !important;
}

.informe-home-header__topics {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 0;
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Items: desktop — padding .9375rem .5625rem */
.informe-home-header__topics a {
    font-family: var(--font-sans);
    font-size: .6875rem;
    line-height: 1.18;
    color: #000;
    text-transform: uppercase;
    white-space: nowrap;
    letter-spacing: .00625rem;
    padding: .9375rem .5625rem;
    text-decoration: none;
    transition: color var(--transition-fast);
}

.informe-home-header__topics a:hover {
    color: var(--color-primary);
}

/* Ocultar icono rayito (ya no se usa) */
.informe-home-header__topics .informe-home-header__icon {
    display: none;
}

/* Tablet (769px - 1024px) — padding reducido */
@media (min-width: 769px) and (max-width: 1024px) {
    .informe-home-header__topics a {
        padding: .9375rem .25rem;
    }
}

/* ======================================================
   META BLOCK (Fecha + Redes Sociales)
   Tipografía alineada con tags (similar tamaño).
====================================================== */

/* Meta: sin border-bottom (refactor header) */
.informe-home-header__meta {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    gap: 1rem;
    border-bottom: none;
}

/* Fecha - alineada a la izquierda */
.informe-home-header__date {
    flex-shrink: 0;
    font-family: MarcinAntB, sans-serif;
    font-size: .75rem;
    line-height: 1.33;
    letter-spacing: 0.1px;
}

/* Botón Suscribite gratis */
.informe-home-header__social {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

/* Base .btn */
.informe-btn {
    color: inherit;
    background-color: unset;
    border: none;
    padding: 0;
    box-sizing: border-box;
    font-size: .6875rem;
    line-height: 1.36;
    text-transform: uppercase;
    padding: .3125rem .5rem;
    border-radius: .125rem;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    font-weight: 700;
    min-width: 1.6875rem;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-family: MarcinAntB, sans-serif;
    border: .0625rem solid transparent;
    white-space: nowrap;
    text-decoration: none;
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

/* Variante primary (naranja) */
.informe-btn--primary {
    background-color: var(--color-primary);
    color: #fff;
}

.informe-btn--primary:hover {
    background-color: var(--color-primary-hover, var(--color-brand-primary-dark));
    color: #fff;
}

@media (max-width: 768px) {
    .informe-home-header {
        padding: var(--space-1) 0;
    }

    /* Mobile: meta arriba del logo, luego topics */
    .informe-home-header__meta {
        order: 1;
    }

    .informe-home-header__logo-wrap {
        order: 2;
        box-shadow: 0 0.0625rem 0.25rem #00000005, 0 0.125rem 0.25rem #00000017;
    }

    .informe-home-header__topics-wrapper {
        order: 3;
    }
    
    .informe-home-header__topics {
        gap: var(--space-2);
        justify-content: flex-start;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    
    .informe-home-header__topics::-webkit-scrollbar {
        display: none;
    }
    
    .informe-home-header__date {
        font-size: .75rem;
    }
    
    /* Asegurar que meta no se apile en mobile */
    .informe-home-header__meta {
        flex-direction: row !important; /* Forzar fila en mobile */
        justify-content: space-between !important; /* Mantener distribución */
        padding-top: var(--space-2, 0.5rem);
        padding-bottom: var(--space-2, 0.5rem);
    }
}

/* ==========================================================
   2. HOME LAYOUT
========================================================== */

/* Contenedor principal del home - asegurar ancho consistente */
.informe-front-page {
    max-width: var(--max-width-container);
    width: 100%;
    margin: 0 auto;
    padding-left: var(--container-padding-desktop);
    padding-right: var(--container-padding-desktop);
    box-sizing: border-box;
}

/* Espaciado entre bloques del home */
.informe-block {
    margin-bottom: var(--space-10);
}

.informe-block:last-child {
    margin-bottom: 0;
}

/* Asegurar que todos los bloques mixtos respeten el ancho del contenedor */
.informe-front-page > section,
.informe-front-page > .informe-block,
.informe-front-page .informe-block-mixed-1,
.informe-front-page .informe-block-mixed-2list-4sq,
.informe-front-page .informe-block-mixed-3col,
.informe-front-page .informe-block-mixed-4col,
.informe-front-page .informe-block-mixed-full-4grid,
.informe-front-page .informe-block-mixed-3feat-3list,
.informe-front-page .informe-block-mixed-1left-4compact,
.informe-front-page .informe-block-mixed-2x2img-2list,
.informe-front-page .informe-block-mixed-3list-2img,
.informe-front-page .informe-block-mixed-1big-2small-3compact,
.informe-front-page .informe-block-mixed-masonry,
.informe-front-page .informe-block-mixed-full-horiz-3compact-vert,
.informe-front-page .informe-block-featured-left,
.informe-front-page .informe-block-grid-4sq,
.informe-front-page .informe-block-list {
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
}

/* ==========================================================
   3. RESPONSIVE
========================================================== */

@media (max-width: 1024px) {
    /* .informe-home-header .informe-container hereda padding de 3-layout/containers.css */
    
    /* Meta: tamaños como tags en tablet */
    .informe-home-header__date {
        font-size: 0.74rem; /* Igual que tags en tablet */
    }
    
    .informe-home-header__social a {
        font-size: 0.74rem;
    }
    
    /* Asegurar que meta no se apile en tablet */
    .informe-home-header__meta {
        flex-direction: row !important; /* Forzar fila en tablet */
        justify-content: space-between !important; /* Mantener distribución */
    }
    
    .informe-front-page {
        /* Tablet: mismo padding que desktop (var hereda) */
        padding-left: var(--container-padding-desktop, 20px);
        padding-right: var(--container-padding-desktop, 20px);
    }
}

@media (max-width: 768px) {
    /* .informe-home-header .informe-container hereda padding de 3-layout/containers.css */
    
    /* Logo styles movidos a components/logo-wrap.css */
    
    .informe-front-page {
        /* Mobile: 16px igual que informe-container */
        padding-left: var(--container-padding-mobile, 16px);
        padding-right: var(--container-padding-mobile, 16px);
    }
}