/**
 * SINGLE LAYOUT: Composición y layout del template single
 * 
 * Phase PR5c: Extraído de pages/single.css
 * 
 * Este archivo contiene la composición y layout del template single:
 * - Body overrides
 * - Contenedores y wrappers
 * - Grid de dos columnas (article + sidebar)
 * - Article header
 * - Featured image
 * - En esta nota (tags section)
 * - Article footer
 * - Relacionadas
 * - Responsive adjustments
 * 
 * NO incluye:
 * - Estilos del header (components/header-single.css)
 * - Estilos de contenido editorial (components/article-content.css)
 * - Estilos de componentes individuales
 * 
 * Compatible con: LiteSpeed Cache, Cloudflare, Redis
 */

/* ==========================================================
   0. BODY - Quitar padding-top en single posts
========================================================== */

body.single,
body.informe-single-post,
body.single-post,
body.single-format-standard {
    padding-top: 0 !important;
}

/* ==========================================================
   1. CONTENEDORES
========================================================== */

/**
 * ELIMINADO PR4: .informe-container
 * 
 * Fuente de verdad: 3-layout/containers.css
 * 
 * Si necesitas ajustes contextuales para single, usa:
 * .page-single .informe-container { ... }
 */

/* Contenedor principal (Claude) */
.informe-single-container {
    max-width: var(--max-width-single);
    margin: var(--space-8) auto var(--space-16);
    padding: 0 var(--container-padding-desktop);
}

/* Wrapper Single (actual) 
   NOTA: Definición base en containers.css, aquí solo overrides específicos */
.informe-single-wrapper {
    width: 100%;
    max-width: var(--max-width-container, 1320px);
    margin: 0 auto;
    padding: 0 var(--container-padding-desktop, 20px);
    overflow-x: hidden; /* Prevenir overflow horizontal */
    box-sizing: border-box;
}

/* TABLET (769px - 1024px): consistente con header */
@media (min-width: 769px) and (max-width: 1024px) {
    .informe-single-wrapper {
        padding: 0 var(--container-padding-tablet, 20px);
        overflow-x: hidden;
    }
}

@media (max-width: 768px) {
    .informe-single-wrapper {
        padding: 0 var(--container-padding-mobile, 16px);
        /* max-width heredado de desktop */
        overflow-x: hidden;
    }
}

/* Fullwidth superior: categoría + contextual + imagen */
.informe-single-header-fullwidth {
    max-width: var(--max-width-container);
    margin: 0 auto;
    padding: 0 0 var(--space-5) 0;
}

@media (max-width: 768px) {
    .informe-single-header-fullwidth {
        padding: 0;
    }
}

/* Bloque superior sin padding lateral en desktop */
.informe-header-editorial {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Imagen destacada en desktop: sin negative margins */
@media (min-width: 769px) {
    .informe-single-thumb {
        padding-left: 0;
        padding-right: 0;
        margin-left: 0;
        margin-right: 0;
    }
}

/* ==========================================================
   2. GRID DE DOS COLUMNAS — RESTAURADO desde legacy
   Desktop: contenido + sidebar en misma fila, sin que sidebar baje
========================================================== */

.informe-two-columns {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    width: 100%;
    box-sizing: border-box;
    border-bottom: 1px solid var(--color-gray-300);
    padding-bottom: var(--space-6);
    align-items: start;
}

@media (min-width: 1025px) {
    .informe-two-columns {
        /* Desktop: artículo + sidebar en paralelo, estable */
        grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
        gap: var(--gap-single-columns);
        padding-bottom: var(--space-8);
    }
}

/* min-width: 0 CRÍTICO: permite que la columna de contenido encoja sin forzar overflow */
.informe-single-article {
    min-width: 0;
    width: 100%;
    max-width: var(--max-width-content);
    padding-right: var(--space-5);
    border-right: 1px solid #e6e6e6;
}

@media (max-width: 1024px) {
    .informe-single-article {
        /* 1 columna: que el content use todo el ancho disponible */
        max-width: 100%;
        padding-right: 0;
        border-right: none;
    }
}

/* articulo_cuerpo: grid 8 cols solo en desktop */
@media (min-width: 1025px) {
    .informe-single-article {
        display: grid;
        grid-template-columns: repeat(8, 1fr);
    }

    .articulo_cuerpo {
        grid-column: 1 / 9;
        padding-left: 0;
    }
}

@media (max-width: 1024px) {
    .informe-two-columns {
        grid-template-columns: 1fr;
        gap: 0; /* Sin gap en 1 columna */
        padding-bottom: var(--space-6);
    }
}

/* Guard rails anti-overflow del grid */
.informe-two-columns > * {
    min-width: 0;
}

/* Blindaje de media/embeds dentro del content */
.informe-single-article .informe-single-content img,
.informe-single-article .informe-single-content video,
.informe-single-article .informe-single-content iframe {
    max-width: 100%;
}

.informe-single-article .informe-single-content table,
.informe-single-article .informe-single-content pre {
    display: block;
    max-width: 100%;
    overflow-x: auto;
}

/* ==========================================================
   3. ARTICLE HEADER (Claude)
========================================================== */

.informe-article__header {
    margin-bottom: var(--space-8);
    text-align: left;
}

/* Meta (categoría + fecha) */
.informe-article__meta {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
    flex-wrap: wrap;
}

/* ==========================================================
   4. FEATURED IMAGE
========================================================== */

.informe-article__featured-image,
.informe-single-thumb {
    margin: 0 0 var(--space-8) 0;
    margin-bottom: 0;
    border-radius: 0;
    overflow: hidden;
    position: relative; /* Para posicionar el caption si hace falta */
}

/* CLS: Reservar espacio antes de que cargue la imagen destacada (evita layout shift) */
.informe-hero-media {
    aspect-ratio: 3 / 2;
    background-color: var(--color-gray-100, #f5f5f5);
}

.informe-hero-media .informe-single-thumb {
    width: 100%;
    height: 100%;
    min-height: 0; /* Permitir que flex/grid hijos encogen */
}

.informe-article__image,
.informe-single-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    margin-bottom: 0; /* FIX 2: Sin gap entre imagen y caption */
    border-radius: 0;
}

/* FIX 2: Epígrafe de la imagen destacada - Estilos movidos a article-content.css */
/* Los estilos de .informe-single-thumb-caption ahora están centralizados en article-content.css */
/* siguiendo los estándares de El País (sin fondo, texto gris) */
/* 
.informe-single-thumb-caption {
    - Estilos ahora definidos en: components/article-content.css
    - Estilo: El País (sin fondo, texto gris #666, MarcinAntB 13px)
}
*/

.informe-article__caption {
    font-family: Georgia, serif;
    font-size: var(--font-size-sm);
    font-style: italic;
    color: var(--color-text-muted);
    text-align: center;
    margin-top: var(--space-2);
    padding: var(--space-2) var(--space-4);
    background: var(--color-gray-100);
}

/* Imagen destacada FULL BLEED en mobile - Estilo El País */
@media (max-width: 768px) {
    .informe-single-header-fullwidth {
        width: 100%;
        max-width: 100%;
        padding: 0;
        margin-left: 0;
        margin-right: 0;
    }
    
    .informe-hero-media {
        max-width: 100%;
        width: 100%;
        padding: 0 var(--container-padding-mobile); /* 16px - mantener padding */
        margin-left: 0;
        margin-right: 0;
    }
    
    /* FULL BLEED: Imagen sale del contenedor usando todo el ancho del viewport */
    .informe-single-thumb {
        width: 100vw; /* Ancho completo del viewport */
        max-width: 100vw;
        margin-left: calc(-1 * var(--container-padding-mobile)); /* Negative margin para romper contenedor */
        margin-right: calc(-1 * var(--container-padding-mobile));
        border-radius: 0; /* Sin border-radius en mobile full bleed */
        position: relative;
        left: 0;
    }
    
    .informe-single-thumb img {
        width: 100%;
        max-width: 100%;
        height: 100%; /* Evitar CLS: mantener altura reservada */
        object-fit: cover;
        display: block;
        border-radius: 0; /* Sin border-radius en mobile */
    }
    
    /* Caption con padding para que no toque los bordes - El País */
    .informe-single-thumb-caption {
        padding-left: var(--container-padding-mobile) !important; /* 16px */
        padding-right: var(--container-padding-mobile) !important; /* 16px */
        margin-left: 0;
        margin-right: 0;
        text-align: right !important; /* ✅ Mantener alineación derecha en mobile */
        position: relative; /* Para el separador ::before */
    }
    
    /* Separador en mobile - ajustado al padding */
    .informe-single-thumb-caption::after {
        right: var(--container-padding-mobile) !important; /* Alineado al padding derecho */
    }
}

/* ==========================================================
   6. EN ESTA NOTA (Tags)
========================================================== */

.informe-en-esta-nota {
    margin-top: var(--space-10);
    padding-top: var(--space-5);
    
    /* Ancho igual al artículo dentro de two-columns */
    max-width: var(--max-width-content); /* 825px */
    margin-left: 0; /* Alineado a la izquierda (columna del artículo) */
    margin-right: auto;
}

.informe-en-esta-nota::after {
    content: '';
    display: block;
    width: 100%;
    height: var(--border-width-thick);
    background: var(--color-black);
    margin-top: var(--space-4);
}

.informe-note-title {
    font-family: MajritTx, serif;         /* El País */
    font-weight: 900;                      /* El País */
    font-size: var(--fs-meta);            /* .6875rem - 11px */
    line-height: 1.25;                     /* El País */
    letter-spacing: -.015rem;              /* El País */
    text-transform: uppercase;
    margin-bottom: var(--space-3);
    color: var(--color-gray-900);
    padding-bottom: var(--space-2);
    border-bottom: var(--border-width-thin) solid var(--color-gray-900);
}

.informe-note-tags {
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0;
}

.informe-note-tags li:not(:last-child)::after {
    content: ' - ';
    margin: 0 var(--space-2);
    color: var(--color-gray-900);
}

.informe-note-tags a {
    font-family: MarcinAntB, sans-serif;   /* El País */
    font-size: var(--fs-meta);            /* .6875rem - 11px */
    font-weight: var(--fw-meta);          /* 500 */
    letter-spacing: var(--ls-meta);       /* .0125rem */
    line-height: var(--lh-excerpt);       /* 1.27 */
    text-transform: uppercase;
    color: var(--color-gray-900) !important;
}

/* Responsive: "En esta nota" en mobile */
@media (max-width: 768px) {
    .informe-en-esta-nota {
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
    }
}

/* ==========================================================
   7. ARTICLE FOOTER (Tags - Claude)
========================================================== */

.informe-article__footer {
    margin-top: var(--space-10);
    padding-top: var(--space-6);
    border-top: var(--border-width-thin) solid var(--color-border-light);
}

.informe-article__tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

.informe-tag {
    display: inline-block;
    padding: 0 !important;
    background: transparent !important;
    color: #222 !important;
    font-family: MarcinAntB, sans-serif !important;
    font-size: var(--fs-meta) !important; /* .6875rem - 11px */
    font-weight: var(--fw-meta) !important; /* 500 */
    text-transform: uppercase !important;
    text-decoration: none !important;
    border-radius: 0 !important;
    transition: color 0.2s !important;
    letter-spacing: var(--ls-meta) !important; /* .0125rem */
    margin-right: 8px !important;
}

.informe-tag:hover {
    background: transparent !important;
    color: #000 !important;
    transform: none !important;
    text-decoration: underline !important;
}

/* ==========================================================
   8. RELACIONADAS
========================================================== */

.informe-relacionadas {
    margin-top: var(--space-9);
    padding-bottom: var(--space-7);
    /* border-bottom eliminado - sin borde inferior */
    
    /* FIX 5: Ancho correcto = columna del post content en two-columns */
    max-width: var(--max-width-content); /* 825px - igual que la columna article */
    margin-left: 0; /* Alineado a la izquierda (columna del artículo) */
    margin-right: auto;
    
    /* BUG 4: Sin fondo (estilo anterior) */
    background: transparent;
}

/* FIX 5: Fallback cuando no hay relacionadas */
.informe-relacionadas--empty {
    padding: var(--space-6);
    background: var(--color-gray-200); /* Este sí tiene fondo (es placeholder) */
    border-radius: var(--border-radius-md);
}

.informe-relacionadas__empty-message {
    font-family: var(--font-sans);
    font-size: 0.9375rem;
    color: var(--color-text-muted);
    text-align: center;
    margin: 0;
    padding: var(--space-4) 0;
}

.informe-block-title,
.informe-videos-single__title {
    font-family: MajritTx, serif;         /* El País */
    font-weight: 900;                      /* El País */
    font-size: 1.1875rem;                  /* 19px - El País */
    line-height: 1.42;                     /* El País */
    letter-spacing: -.0175rem;             /* El País */
    text-transform: none;
    margin-bottom: var(--space-3);
    padding-bottom: .6875rem;
    padding-top: 1.25rem;
    border-top: .5rem solid #000;
    border-bottom: 0;
    color: var(--color-gray-900);
}

/* minmax(0, 1fr) evita overflow: permite que columnas encojan sin forzar por contenido intrínseco (imgs) */
.informe-relacionadas .informe-rel-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: var(--space-6);
    width: 100%;
    align-items: start;
    min-width: 0; /* Permitir que el grid encoja */
}

@media (min-width: 769px) and (max-width: 1024px) {
    .informe-relacionadas .informe-rel-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: var(--space-6) !important;
        width: 100%;
    }
}

@media (max-width: 768px) {
    .informe-relacionadas {
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
    }
    
    .informe-relacionadas .informe-rel-grid {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: var(--space-6) !important;
        width: 100%;
    }
}

/* min-width: 0 CRÍTICO: evita que el grid item se expanda por el ancho intrínseco de la imagen */
.informe-rel-item {
    display: flex;
    flex-direction: column;
    border-bottom: var(--border-width-thin) solid var(--color-gray-300);
    padding-bottom: var(--space-6);
    min-height: 0;
    min-width: 0; /* Previene overflow en grid cuando hay imgs con dimensiones intrínsecas */
}

.informe-rel-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.informe-rel-item a {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    height: 100%;
    min-height: 0;
    min-width: 0; /* Permitir que el link encoja */
    overflow: hidden;
}

/* Contenedor de imagen con aspect-ratio fijo */
.informe-rel-item a {
    position: relative;
}

.informe-rel-thumb {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    object-position: center;
    display: block;
    border-radius: 0;
    margin-bottom: var(--space-2);
    min-width: 0; /* Permitir encoger en flex */
    max-width: 100%;
    flex-shrink: 0;
}

.informe-rel-title {
    font-family: MajritTx, serif;         /* El País */
    font-size: var(--fs-title-sm);        /* 1rem - 16px El País */
    font-weight: 700;                      /* El País */
    line-height: 1.13;                     /* El País */
    letter-spacing: var(--ls-title-sm);   /* -.005625rem */
    color: var(--color-text-primary, #000);
    margin-top: var(--space-2);
    /* Prevenir overflow de texto */
    overflow-wrap: break-word;
    word-wrap: break-word;
    hyphens: auto;
}

/* ==========================================================
   RELACIONADAS - Ajuste de espaciado en títulos
========================================================== */

/* Override de regla global de h3 para cards de relacionadas
 * La regla global .post-content h3 aplica margin-top: 32px (!important)
 * que causa espacio excesivo entre imagen y título en cards.
 * Esta regla más específica asegura espaciado compacto.
 */
.informe-relacionadas .informe-rel-item .informe-rel-title {
    margin-top: var(--space-2) !important; /* 8px - espacio compacto después de imagen */
    margin-bottom: 0 !important; /* Sin espacio inferior */
}

/* Override de margin-top para .informe-mixed3__title en relacionadas */
.informe-relacionadas .informe-mixed3__title {
    margin-top: 0 !important; /* Quitar margen superior de 32px */
}

/* ==========================================================
   9. RELACIONADOS (Claude)
========================================================== */

.informe-related {
    margin-top: var(--space-16);
    padding-top: var(--space-10);
    border-top: var(--border-width-medium) solid var(--color-border-light);
}

.informe-related .informe-heading--section {
    margin-bottom: var(--space-6);
}

/* ==========================================================
   10. SIDEBAR (PR7: Movido desde modules/module-single.css)
========================================================== */

.informe-sidebar {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    padding-left: 15px;
    padding-right: 15px;
}

/* Desktop/tablet: sidebar puede encoger si hace falta (evita overflow) */
@media (min-width: 769px) {
    .informe-sidebar {
        min-width: 0;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .informe-sidebar {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

@media (max-width: 768px) {
    .informe-sidebar {
        padding: 0;
        margin: 0;
        width: 100%;
    }
}

.informe-sidebar-section {
    margin-bottom: 40px;
}

.informe-sidebar-section:first-child {
    padding-top: 40px;
}

.informe-sidebar-section:nth-child(2) {
    padding-bottom: 40px;
}

.informe-sidebar-title {
    font-family: MajritTx, serif !important;
    font-weight: 900 !important;
    text-transform: uppercase;
    letter-spacing: -.015rem !important;  /* El País */
    line-height: 1.25 !important;         /* El País */
    margin-bottom: 12px;
    font-size: var(--fs-meta) !important; /* .6875rem - 11px */
    padding-bottom: 8px;
    border-bottom: 1px solid #000;
    color: #111 !important;
}

.informe-sidebar-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.informe-sidebar-list li {
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e6e6e6;
}

.informe-sidebar-list li:last-child {
    border-bottom: none;
}

.informe-sidebar-list a {
    font-family: MajritTx, serif !important;
    font-weight: 600 !important;          /* El País - peso estándar para sidebar */
    font-size: var(--fs-title-xs) !important; /* .875rem - 14px */
    line-height: 1.21 !important;         /* El País */
    letter-spacing: -.00625rem !important;/* El País */
    color: #000 !important;
    text-decoration: none;
    display: block;
}

.informe-sidebar-list a:hover {
    text-decoration: underline;
}

.informe-sidebar-item-title {
    font-family: MajritTx, serif !important;
    font-size: var(--fs-title-xs) !important; /* .875rem - 14px El País */
    line-height: 1.21 !important;         /* El País */
    letter-spacing: -.00625rem !important;/* El País */
    font-weight: 700 !important;          /* El País */
    color: #111 !important;
    text-decoration: none;
    display: block;
}

.informe-sidebar-item-title:hover {
    text-decoration: underline;
}

.informe-sidebar-meta {
    font-family: MarcinAntB, sans-serif;
    font-size: var(--fs-meta);            /* .6875rem - 11px */
    font-weight: var(--fw-meta);          /* 500 */
    letter-spacing: var(--ls-meta);       /* .0125rem */
    line-height: var(--lh-excerpt);       /* 1.27 */
    text-transform: uppercase;
    color: #ED3338;
    margin-top: 2px;
}

/* ==========================================================
   10.1 SIDEBAR AD SLOT — Estilos movidos a:
   4-components/ads/ad-slots.css
========================================================== */

/* ==========================================================
   10.2 CONTENT AD SLOT — Estilos movidos a:
   4-components/ads/ad-slots.css
========================================================== */

/* ==========================================================
   11. HERO TEXT (PR7: Consolidado desde module-single.css)
========================================================== */

/* HERO TEXT: Mantener paddings internos (max-width para centrar) */
.informe-hero-text {
    max-width: 1320px;
    margin: 0 auto;
    padding: 40px 100px; /* Mantener padding interno */
    box-sizing: border-box;
}

@media (min-width: 769px) and (max-width: 1024px) {
    .informe-hero-text {
        padding: 40px 80px;
    }
    
    /* Los paddings ya están en .informe-hero-text (40px 80px), no duplicar aquí */
    .informe-hero-text .informe-meta-primary-tag {
        padding-left: 0 !important; /* El padding viene del contenedor .informe-hero-text */
    }
    
    .informe-hero-text .informe-single-title {
        padding-left: 0; /* El padding viene del contenedor .informe-hero-text */
        padding-right: 0;
    }
    
    .informe-hero-text .informe-single-excerpt {
        padding-left: 0; /* El padding viene del contenedor .informe-hero-text - mismo que title */
        padding-right: 0;
    }
}

@media (max-width: 768px) {
    /* ELIMINAR PADDING LATERAL EN MOBILE - MANTENER PADDING VERTICAL (PR7) */
    .informe-hero {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin: 0;
        width: 100%;
        max-width: 100%;
    }
    
    .informe-hero-media {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 0 !important;
    }
    
    /* FULL BLEED mobile: imagen destacada ocupa todo el viewport */
    .informe-single-thumb {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: calc(-1 * var(--container-padding-mobile)) !important; /* -16px */
        margin-right: calc(-1 * var(--container-padding-mobile)) !important;
        width: 100vw !important;
        max-width: 100vw !important;
        border-radius: 0 !important; /* Sin bordes redondeados en full bleed */
    }
    
    .informe-single-thumb img {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin: 0;
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 0 !important;
    }
    
    /* Hero text - mantener padding correcto en mobile */
    .informe-hero-text {
        padding: 24px 24px !important; /* Padding lateral 24px en mobile - mismo que title */
        padding-top: 1rem !important;
        width: 100%;
        max-width: 100%;
        padding-left: 0 !important;
        padding-right: 0 !important;
        /* Mantener padding vertical si es necesario */
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Los paddings ya están en .informe-hero-text, no duplicar aquí */
    .informe-hero-text .informe-meta-primary-tag {
        padding-left: 0 !important; /* El padding viene del contenedor .informe-hero-text */
        padding-right: 0 !important;
    }
    
    .informe-hero-text .informe-single-title {
        padding-left: 0; /* El padding viene del contenedor .informe-hero-text */
        padding-right: 0;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    .informe-hero-text .informe-single-excerpt {
        padding-left: 0; /* El padding viene del contenedor .informe-hero-text - mismo que title */
        padding-right: 0;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}