/*
 * ARTICLE CONTENT: Estilos de contenido editorial
 * 
 * Este componente define los estilos del contenido editorial del artículo.
 * Incluye tipografía, enlaces, listas, blockquotes, imágenes, tablas, etc.
 * 
 * Selectores principales:
 * - .informe-article__content (principal)
 * - .informe-single-content (alias)
 * - .entry-content (compatibilidad WordPress)
 * - .post-content (compatibilidad WordPress)
 * 
 * NO incluye: layout, containers, sidebar, hero, cards
 * 
 * Phase PR5a: Extraído de pages/single.css
 * Compatible con: LiteSpeed Cache, Cloudflare, Redis
 */

/* ==========================================================
   BASE - Tipografía del contenido editorial
========================================================== */

.informe-article__content,
.informe-single-content {
    font-family: var(--font-serif-roman);  /* MajritTxRoman, serif */
    font-size: 1.1875rem;                  /* 19px - El País */
    line-height: 1.32;                     /* El País */
    color: var(--color-text-secondary);
    color: var(--color-gray-900);
    margin-bottom: var(--space-10);
}

/* ==========================================================
   VIDEOS EMBEBIDOS (YouTube Shorts)
========================================================== */

/* YouTube Shorts dentro de .sd-video en single content - FORZAR 9:16 */
.informe-single-content .sd-video .sd-embed.is-youtube-short,
.informe-single-content .sd-video .sd-embed.is-vertical.is-youtube-short,
.informe-single-content .sd-video iframe.sd-embed.is-youtube-short,
.informe-single-content .sd-video iframe.sd-embed.is-vertical.is-youtube-short {
    aspect-ratio: 9 / 16 !important;
    width: 100% !important;
    height: auto !important;
    max-width: 400px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: block !important;
    position: static !important;
    top: unset !important;
    left: unset !important;
    right: unset !important;
    bottom: unset !important;
    inset: unset !important;
}

/* Neutralizar .sd-video wrapper para Shorts */
.informe-single-content .sd-video:has(.sd-embed.is-youtube-short),
.informe-single-content .sd-video:has(iframe.sd-embed.is-youtube-short) {
    aspect-ratio: unset !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    height: auto !important;
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Asegurar que .sd-video no fuerce aspect-ratio 16:9 */
.informe-single-content .sd-video {
    padding: 0 !important;
    margin: var(--space-8, 2rem) auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    position: relative !important;
    display: block !important;
}

/* ==========================================================
   PÁRRAFOS
========================================================== */

.informe-article__content p,
.informe-single-content p {
    margin: 0 0 var(--space-6) 0;
    margin-bottom: 1.2em;
}

/* Mobile: tipografía párrafos single */
.informe-single-content p {
    font-family: MajritTxRoman, serif;
    font-size: 1.1875rem;
    line-height: 1.32;
    color: #191919;
}

/* Desktop: elementos de texto con margin izquierda + tipografía párrafos */
@media (min-width: 769px) {
    .informe-single-content p,
    .informe-single-content h2,
    .informe-single-content h3,
    .informe-single-content h4,
    .informe-single-content blockquote,
    .informe-single-content ul,
    .informe-single-content ol,
    .informe-single-content .informe-related-inline-wrapper {
        margin-left: 0;
    }

    .informe-single-content .informe-related-inline-wrapper h2,
    .informe-single-content .informe-related-inline-wrapper h3,
    .informe-single-content .informe-related-inline-wrapper .informe-sidebar-title,
    .informe-single-content .informe-related-inline-wrapper .informe-mixed3__title {
        margin-left: 0; /* Hereda del wrapper, no duplicar */
    }

    .informe-single-content p {
        margin: 0 0 2rem 0;
        font-size: 1.375rem;
        line-height: 1.45;
    }

    /* Imágenes y figuras: 100% ancho, sin margin-left (ocupan todo el ancho) */
    .informe-single-content img:not(.informe-related-inline__img):not(.informe-archivo-related__img),
    .informe-single-content img.image-embed,
    .informe-single-content figure:not(.informe-related-inline figure) {
        margin-left: 0;
        margin-right: 0;
        width: 100%;
        max-width: 100%;
    }
}

/* Epigraphe - Estilos unificados (eliminados, ahora en sección IMÁGENES Y FIGURAS) */

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

.informe-single-content li {
    font-family: var(--font-serif-roman);
    font-size: 1.1875rem;                  /* 19px - El País */
    font-weight: 400;
    line-height: 1.32;                     /* El País */
    color: var(--color-gray-900);
    margin-bottom: 1.2em;
}

/* ==========================================================
   HEADINGS (dentro del contenido)
========================================================== */

.informe-article__content h2,
.informe-single-content h2,
.entry-content h2,
.post-content h2 {
    font-family: var(--font-serif);
    font-size: 2rem;                       /* 32px - H2 El País */
    font-weight: 900;                      /* El País */
    line-height: 1.06;                     /* El País */
    color: var(--color-text-primary);
    margin: var(--space-10) 0 var(--space-4) 0 !important;
}

.informe-article__content h3,
.informe-single-content h3,
.entry-content h3,
.post-content h3 {
    font-family: var(--font-serif);
    font-size: 1.875rem;                   /* 30px - H3 El País */
    font-weight: 900;                      /* El País */
    line-height: 1.07;                     /* El País */
    color: var(--color-text-primary);
    margin: var(--space-8) 0 var(--space-3) 0 !important;
}

.informe-article__content h4,
.informe-single-content h4,
.entry-content h4,
.post-content h4 {
    font-family: var(--font-serif);
    font-size: 1.5rem;                     /* 24px - H4 El País */
    font-weight: 900;                      /* El País */
    line-height: 1.08;                     /* El País */
    color: var(--color-text-primary);
    margin: var(--space-6) 0 var(--space-3) 0 !important;
}

/* ==========================================================
   ENLACES
========================================================== */

.informe-article__content a {
    color: var(--color-primary);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    transition: color var(--transition-fast);
}

.informe-article__content a:hover {
    color: var(--color-primary-dark);
    text-decoration-thickness: 2px;
}

/* ==========================================================
   LISTAS
========================================================== */

/* BUG 1: Palabras en negrita pegadas - Fix espaciado */
.informe-article__content strong,
.informe-article__content b,
.informe-single-content strong,
.informe-single-content b {
    font-weight: var(--font-weight-bold);
    word-spacing: normal;
    letter-spacing: normal;
    white-space: normal;
    display: inline;
}

.informe-article__content ul,
.informe-article__content ol {
    margin: 0 0 var(--space-6) 0;
    padding-left: var(--space-8);
}

.informe-article__content li {
    margin-bottom: var(--space-2);
}

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

/* ==========================================================
   BLOCKQUOTES
========================================================== */

.informe-article__content blockquote {
    margin: var(--space-8) 0;
    padding: var(--space-5) var(--space-6);
    border-left: 4px solid var(--color-primary);
    background: #f9f9f9;
    font-style: italic;
    color: var(--color-gray-700);
}

.informe-article__content blockquote p {
    margin: 0;
}

.informe-article__content blockquote cite {
    display: block;
    margin-top: var(--space-3);
    font-size: var(--font-size-sm);
    font-style: normal;
    color: var(--color-text-muted);
}

/* ==========================================================
   IMÁGENES Y FIGURAS
========================================================== */

/* Imágenes dentro del contenido: spacing vertical + ancho correcto (825px) 
 * 
 * IMPORTANTE: width: 100% prevalece sobre atributos HTML (width="720")
 * max-width: 825px limita al ancho del content column
 * LiteSpeed inyecta clases (entered, litespeed-loaded) que deben heredar estos estilos
 * Plugins pueden agregar clases adicionales (image-embed, styled-components, etc.)
 */
.informe-article__content img:not(.informe-related-inline__img):not(.informe-archivo-related__img),
.informe-single-content img:not(.informe-related-inline__img):not(.informe-archivo-related__img),
.entry-content img:not(.informe-related-inline__img):not(.informe-archivo-related__img),
.informe-article__content img.image-embed,
.informe-single-content img.image-embed,
.entry-content img.image-embed {
    width: 100% !important; /* Prevalece sobre width="720" del HTML */
    max-width: 825px; /* Ancho del content column (no limitarse a 720px) */
    height: auto !important; /* Mantener aspect ratio */
    display: block;
    border-radius: var(--border-radius-sm);
    /* Spacing vertical: se aplica arriba y abajo, excepto cuando hay epígrafe */
    margin: var(--space-8) 0;
}

/* Integrar clases LiteSpeed + image-embed en la lógica de spacing con epígrafes 
 * Cuando hay epígrafe después de la imagen (con o sin clases), eliminar margin-bottom
 */
.informe-article__content img:has(+ .epigraphe),
.informe-single-content img:has(+ .epigraphe),
.entry-content img:has(+ .epigraphe),
.informe-article__content img.entered:has(+ .epigraphe),
.informe-single-content img.entered:has(+ .epigraphe),
.entry-content img.entered:has(+ .epigraphe),
.informe-article__content img.litespeed-loaded:has(+ .epigraphe),
.informe-single-content img.litespeed-loaded:has(+ .epigraphe),
.entry-content img.litespeed-loaded:has(+ .epigraphe),
.informe-article__content img.entered.litespeed-loaded:has(+ .epigraphe),
.informe-single-content img.entered.litespeed-loaded:has(+ .epigraphe),
.entry-content img.entered.litespeed-loaded:has(+ .epigraphe),
.informe-article__content img.image-embed:has(+ .epigraphe),
.informe-single-content img.image-embed:has(+ .epigraphe),
.entry-content img.image-embed:has(+ .epigraphe),
.informe-article__content img.entered.image-embed:has(+ .epigraphe),
.informe-single-content img.entered.image-embed:has(+ .epigraphe),
.entry-content img.entered.image-embed:has(+ .epigraphe),
.informe-article__content img.litespeed-loaded.image-embed:has(+ .epigraphe),
.informe-single-content img.litespeed-loaded.image-embed:has(+ .epigraphe),
.entry-content img.litespeed-loaded.image-embed:has(+ .epigraphe),
.informe-article__content figure img:has(+ figcaption),
.informe-single-content figure img:has(+ figcaption),
.entry-content figure img:has(+ figcaption),
.informe-article__content figure img.entered:has(+ figcaption),
.informe-single-content figure img.entered:has(+ figcaption),
.entry-content figure img.entered:has(+ figcaption),
.informe-article__content figure img.litespeed-loaded:has(+ figcaption),
.informe-single-content figure img.litespeed-loaded:has(+ figcaption),
.entry-content figure img.litespeed-loaded:has(+ figcaption),
.informe-article__content figure img.image-embed:has(+ figcaption),
.informe-single-content figure img.image-embed:has(+ figcaption),
.informe-article__content figure img.entered.image-embed:has(+ figcaption),
.informe-single-content figure img.entered.image-embed:has(+ figcaption),
.entry-content figure img.entered.image-embed:has(+ figcaption),
.informe-article__content figure img.litespeed-loaded.image-embed:has(+ figcaption),
.informe-single-content figure img.litespeed-loaded.image-embed:has(+ figcaption),
.entry-content figure img.litespeed-loaded.image-embed:has(+ figcaption) {
    margin-bottom: 0 !important; /* Sin margin-bottom cuando hay epígrafe después - !important para prevalecer sobre margin general */
}

/* Figure: contenedor de imagen + epígrafe 
 * 
 * IMPORTANTE: width: 100% con max-width: 825px para que las figuras
 * no queden limitadas al ancho de la imagen interna (720px)
 */
.informe-article__content figure:not(.informe-related-inline figure),
.informe-single-content figure:not(.informe-related-inline figure),
.entry-content figure:not(.informe-related-inline figure) {
    width: 100%;
    max-width: 825px; /* Ancho del content column */
    margin: var(--space-8) 0; /* Spacing vertical igual al de imágenes sueltas */
    /* Sin gap interno entre imagen y figcaption */
}

/* Imágenes dentro de figure: asegurar que ocupen todo el ancho del figure */
.informe-article__content figure:not(.informe-related-inline figure) img,
.informe-single-content figure:not(.informe-related-inline figure) img,
.entry-content figure:not(.informe-related-inline figure) img {
    width: 100% !important; /* Prevalece sobre width="720" */
    max-width: 100%; /* 100% del figure parent (que ya tiene max-width: 825px) */
    height: auto !important;
    margin: 0; /* Sin margin dentro del figure (el figure ya tiene margin) */
}

/* Figcaption y Epigraphe: Estilos según El País */
/* Se aplica a figcaption (dentro de figure), .epigraphe (clase legacy) y .informe-single-thumb-caption (Informe Digital) */
/* Sin fondo, texto gris alineado a la derecha, con separador superior */
.informe-article__content figcaption,
.informe-article__content .epigraphe,
.informe-article__content .informe-single-thumb-caption,
.informe-single-content figcaption,
.informe-single-content .epigraphe,
.informe-single-content .informe-single-thumb-caption,
.entry-content figcaption,
.entry-content .epigraphe,
.entry-content .informe-single-thumb-caption,
figcaption.informe-single-thumb-caption,
.informe-single-thumb-caption {
    background: none; /* Sin fondo - El País */
    color: var(--color-meta); /* #666 - texto gris */
    font-family: MarcinAntB, sans-serif; /* El País - sans-serif para captions */
    font-size: .8125rem; /* 13px - El País */
    font-style: normal; /* NO itálica - El País */
    font-weight: 400; /* Normal - legible */
    line-height: 1.23; /* El País - compacto pero legible */
    letter-spacing: normal;
    padding: .5rem 0 .5rem 0; /* 8px 0 - padding vertical */
    margin: .25rem 0 0; /* 4px arriba - separación de la imagen */
    text-align: right; /* ✅ Alineado a la derecha - El País */
    display: block;
    border-radius: 0; /* Sin bordes redondeados */
    position: relative;
}

/* Separador finito negro abajo del caption - El País */
.informe-article__content figcaption::after,
.informe-article__content .epigraphe::after,
.informe-article__content .informe-single-thumb-caption::after,
.informe-single-content figcaption::after,
.informe-single-content .epigraphe::after,
.informe-single-content .informe-single-thumb-caption::after,
.entry-content figcaption::after,
.entry-content .epigraphe::after,
.entry-content .informe-single-thumb-caption::after,
figcaption.informe-single-thumb-caption::after,
.informe-single-thumb-caption::after {
    content: '';
    position: absolute;
    bottom: 0; /* ✅ Abajo del texto - El País */
    right: 0;
    width: 3.125rem; /* 50px - línea corta alineada a la derecha */
    height: 1px;
    background: var(--color-black); /* Negro */
    display: block;
}


/* ==========================================================
   TABLAS
========================================================== */

.informe-article__content table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--space-8) 0;
    font-size: var(--font-size-base);
}

.informe-article__content th,
.informe-article__content td {
    padding: var(--space-3) var(--space-4);
    border: var(--border-width-thin) solid var(--color-border-medium);
    text-align: left;
}

.informe-article__content th {
    background: var(--color-gray-100);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
}

.informe-article__content td {
    color: var(--color-text-secondary);
}

/* ==========================================================
   CÓDIGO
========================================================== */

.informe-article__content code {
    background: var(--color-gray-100);
    padding: 2px var(--space-2);
    border-radius: var(--border-radius-sm);
    font-family: 'Courier New', monospace;
    font-size: 0.9em;
    color: var(--color-primary-dark);
}

.informe-article__content pre {
    background: #2d2d2d;
    color: #f8f8f2;
    padding: var(--space-5);
    border-radius: var(--border-radius-md);
    overflow-x: auto;
    margin: var(--space-8) 0;
}

.informe-article__content pre code {
    background: transparent;
    padding: 0;
    color: inherit;
    font-size: 0.9rem;
    line-height: 1.6;
}

/* ==========================================================
   SEPARADORES
========================================================== */

.informe-article__content hr {
    border: 0;
    border-top: var(--border-width-medium) solid var(--color-border-light);
    margin: var(--space-10) 0;
}

/* ==========================================================
   RESPONSIVE - Mobile
========================================================== */

@media (max-width: 768px) {
    .informe-article__content,
    .informe-single-content {
        font-size: 1.1875rem;              /* Mantener 19px en mobile */
    }
    
    .informe-single-content li {
        font-size: 1.1875rem;              /* Mantener 19px en mobile */
    }
    
    .informe-article__content h2,
    .informe-single-content h2,
    .entry-content h2,
    .post-content h2 {
        font-size: 1.4rem;                 /* 22.4px Mobile */
        font-weight: 900;
        line-height: 1.06;
        margin: var(--space-8) 0 var(--space-4) 0;
    }
    
    .informe-article__content h3,
    .informe-single-content h3,
    .entry-content h3,
    .post-content h3 {
        font-size: 1.2rem;                 /* 19.2px Mobile */
        font-weight: 900;
        line-height: 1.07;
        margin: var(--space-6) 0 var(--space-3) 0;
    }
    
    .informe-article__content h4,
    .informe-single-content h4,
    .entry-content h4,
    .post-content h4 {
        font-size: 1.1rem;                 /* 17.6px Mobile */
        font-weight: 900;
        line-height: 1.08;
        margin: var(--space-5) 0 var(--space-2) 0;
    }
}

/* ==========================================================
   SPACING DESPUÉS DE EPÍGRAFES
========================================================== */

/* Cuando hay epígrafe (imagen caption), agregar spacing al párrafo que sigue
 * Esto da "aire" visual entre el epígrafe y el contenido que continúa
 * 
 * IMPORTANTE: !important necesario para prevalecer sobre resets globales
 * que puedan estar eliminando margins de párrafos
 */
.informe-article__content .epigraphe + p,
.informe-single-content .epigraphe + p,
.entry-content .epigraphe + p,
.informe-article__content figcaption + p,
.informe-single-content figcaption + p,
.entry-content figcaption + p {
    margin-top: var(--space-6) !important; /* 24px - aire después del epígrafe */
}