/**
 * BLOQUE OPINIÓN / NACIONALES — Layout compartido
 * 
 * Usado por:
 * - Opinión: con itálica y autor
 * - Nacionales: sin itálica y sin autor
 *
 * Variantes:
 * - .informe-opinion-section--opinion (itálica)
 * - .informe-opinion-section--nacionales (normal)
 * - .informe-opinion-card--no-italic (modificador)
 */

/* =====================================================
   WRAPPER
===================================================== */
.informe-opinion-section {
    background-color: #fff; /* Fondo blanco */
    padding: 32px 0;
}

/* =====================================================
   CONTENEDOR INTERNO: CENTRADO (Max-width)
===================================================== */
.informe-opinion-container {
    max-width: 1320px;
    margin: 0 auto;
}

/* =====================================================
   GRID DE 4 COLUMNAS (layout refactorizado)
===================================================== */
.informe-opinion-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 300px;
    gap: 32px;
    margin-top: 24px;
}

/* Grid de 4 columnas para Opinión */
.informe-opinion-grid--4cols {
    grid-template-columns: repeat(4, minmax(0, 1fr)); /* Columnas exactamente iguales */
    gap: 24px;
    align-items: start; /* Todas las columnas alineadas arriba */
}

/* Columnas del grid 4cols */
.informe-opinion__col {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start; /* Alineación superior uniforme */
    min-width: 0; /* Evita que el contenido expanda la columna */
    width: 100%;
}

/* =====================================================
   CARDS GENERALES (estructura basada en .c de El País)
===================================================== */
.informe-opinion-card,
.informe-opinion-list-item {
    display: flex;
    flex-direction: column;
    max-width: 100%; /* No exceder contenedor */
    min-width: 0;
}

/* =====================================================
   COLUMNA 1: NOTA DESTACADA (.c.c-ace - article con autor)
===================================================== */
.informe-opinion-card--featured {
    display: flex;
    flex-direction: column;
}

.informe-opinion-card__image {
    display: block;
    width: 100%;
    max-width: 100%;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    margin-bottom: 13px;
    border-radius: 0;
}

.informe-opinion-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.informe-opinion-card__image:hover img {
    transform: scale(1.02);
}

/* Título destacado (basado en .c_t de El País) */
.informe-opinion-card__title {
    font-family: MajritTx, serif;
    font-size: 1.125rem;
    line-height: 1.22;
    letter-spacing: -.025rem;
    font-weight: 700;
    font-style: italic;
    margin: 0;
}

.informe-opinion-card__title a {
    color: #000;
    text-decoration: none;
    transition: color 0.2s ease;
}

.informe-opinion-card__title a:hover {
    color: var(--color-title-hover);  /* #444 */
    text-decoration: underline;
}

/* Excerpt/Bajada destacado (basado en .c_d de El País) */
.informe-opinion-card__excerpt {
    font-family: MajritTxRoman, serif;
    font-size: var(--fs-excerpt);     /* .9375rem - 15px */
    line-height: var(--lh-excerpt);   /* 1.27 */
    color: var(--color-excerpt);      /* #4a4a4a */
    margin: .5rem 0 0;
}

/* Autor destacado (basado en .c_a de El País) */
.informe-opinion-card__author {
    font-family: MarcinAntB, sans-serif;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--fs-meta);        /* .6875rem - 11px (ajustado a .75rem original) */
    line-height: var(--lh-title-list);/* 1.17 */
    color: var(--color-meta);         /* #666 */
    font-style: normal;
    text-transform: uppercase;
    letter-spacing: var(--ls-meta);   /* .0125rem */
    margin-top: .5rem;
}

.informe-opinion-card__author-icon {
    font-size: 1rem;
}

.informe-opinion-card__author-name {
    font-weight: 500;
}

/* =====================================================
   COLUMNA 2: LISTA DE 4 NOTAS
===================================================== */
.informe-opinion__list {
    display: flex;
    flex-direction: column;
}

.informe-opinion-list-item {
    padding: 16px 0;
    border-bottom: 1px solid var(--color-border-list); /* #e6e6e6 */
    display: flex;
    flex-direction: column;
}

.informe-opinion-list-item--last {
    border-bottom: none;
}

.informe-opinion-list-item:first-child {
    padding-top: 0;
}

/* Título lista (basado en .c_t de El País) */
.informe-opinion-list-item__title {
    font-family: MajritTx, serif;
    font-size: 1.125rem;
    line-height: 1.22;
    letter-spacing: -.025rem;
    font-weight: 700;
    font-style: italic;
    margin: 0;
}

.informe-opinion-list-item__title a {
    color: #000;
    text-decoration: none;
    transition: color 0.2s ease;
}

.informe-opinion-list-item__title a:hover {
    color: var(--color-title-hover);  /* #444 */
    text-decoration: underline;
}

/* Excerpt lista (basado en .c_d de El País) */
.informe-opinion-list-item__excerpt {
    font-family: MajritTxRoman, serif;
    font-size: var(--fs-excerpt);     /* .9375rem - 15px */
    line-height: var(--lh-excerpt);   /* 1.27 */
    color: var(--color-excerpt);      /* #4a4a4a */
    margin: .5rem 0 0;
}

/* Autor lista (basado en .c_a de El País) */
.informe-opinion-list-item__author {
    font-family: MarcinAntB, sans-serif;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--fs-meta);        /* .6875rem - 11px (ajustado a .75rem original) */
    line-height: var(--lh-title-list);/* 1.17 */
    color: var(--color-meta);         /* #666 */
    font-style: normal;
    text-transform: uppercase;
    letter-spacing: var(--ls-meta);   /* .0125rem */
    margin-top: .5rem;
}

.informe-opinion-list-item__author-icon {
    font-size: .875rem;
}

.informe-opinion-list-item__author-name {
    font-weight: 500;
}

/* =====================================================
   MODIFICADOR: SIN ITÁLICA (para Nacionales)
===================================================== */
.informe-opinion-card--no-italic .informe-opinion-card__title,
.informe-opinion-list-item.informe-opinion-card--no-italic .informe-opinion-list-item__title {
    font-style: normal;
}

/* Variante de sección para Nacionales */
.informe-opinion-section--nacionales .informe-opinion-card__title,
.informe-opinion-section--nacionales .informe-opinion-list-item__title {
    font-style: normal;
}

/* =====================================================
   COLUMNA PUBLICIDAD — Estilos movidos a:
   4-components/ads/ad-slots.css
===================================================== */

/* =====================================================
   RESPONSIVE
===================================================== */

/* Tablet (hasta 1024px) */
@media (max-width: 1024px) {
    .informe-opinion-grid {
        grid-template-columns: 1fr 1fr;
        gap: 24px;
    }
    
    /* Grid 4cols → 2 columnas en tablet */
    .informe-opinion-grid--4cols {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }
    
    .informe-opinion__ad {
        grid-column: 1 / -1;
    }
    /* Ad-slot estilos en 4-components/ads/ad-slots.css */
}

/* Mobile (hasta 768px) */
@media (max-width: 768px) {
    .informe-opinion-section {
        padding: 24px 0;
    }
    
    .informe-opinion-grid {
        grid-template-columns: 1fr;
        gap: 0;
    }
    
    /* Grid 4cols → 1 columna en mobile */
    .informe-opinion-grid--4cols {
        grid-template-columns: 1fr;
        gap: 0;
    }
    
    /* Columnas stacked con separación */
    .informe-opinion__col {
        padding: 16px 0;
        border-bottom: 1px solid var(--color-border-list, #e6e6e6);
    }
    
    .informe-opinion__col:first-child {
        padding-top: 0;
    }
    
    .informe-opinion__col:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }
    
    .informe-opinion__featured {
        margin-bottom: 24px;
        padding-bottom: 24px;
        border-bottom: 2px solid #ddd;
    }
    
    .informe-opinion__list {
        margin-bottom: 24px;
    }
    
    .informe-opinion-list-item {
        padding: 16px 0;
    }
    
    .informe-opinion-card__title,
    .informe-opinion-list-item__title {
        font-size: 1.125rem;
    }
    /* Ad-slot estilos en 4-components/ads/ad-slots.css */
}

/* Mobile pequeño (hasta 480px) */
@media (max-width: 480px) {
    .informe-opinion-card__title,
    .informe-opinion-list-item__title {
        font-size: 1rem;
    }
    
    .informe-opinion-card__excerpt,
    .informe-opinion-list-item__excerpt {
        font-size: .875rem;
    }
}