/*
 * MODULE: Mixed Blocks - All mixed block variants
 * Purpose: Styles for all mixed block components
 * WARNING: Do not override global layout here.
 */

/* ======================================================
   BLOCK MIXED 1 - Bloque de 3 columnas (Fútbol/Tenis/Básquet + Shorts)
====================================================== */

.informe-block-mixed-1 {
    max-width: var(--max-width-container); /* 1320px */
    margin: var(--space-10) auto; /* 40px auto */
    padding: 0;
}

/* Nacionales: estilo opinión (fondo blanco/gris claro) */
.informe-nacionales-section {
    background-color: #f8f9fa;
    padding: 32px 0;
}
.informe-nacionales-section.informe-block-mixed-1 {
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
}
.informe-nacionales-section .informe-block-mixed-1__wrap {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0;
}

.informe-block-mixed-1__wrap {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2 columnas: left y center (Shorts eliminados) */
    gap: var(--space-5); /* 20px */
}

.informe-block-mixed-1__col {
    padding: 0;
}

.informe-block-mixed-1__col--left {
    border-right: 1px solid var(--color-border-list); /* #e6e6e6 */
    padding-right: var(--space-5); /* 20px */
}

/* Columna derecha (Shorts) eliminada - ahora se muestran en Videos Destacados */
/* .informe-block-mixed-1__col--right {
    border-left: 1px solid #e6e6e6;
    padding-left: 20px;
} */

/* Separador unificado entre noticias en listas */
.informe-block-mixed-1 .informe-destacado-list li {
    border-bottom: 1px solid var(--color-border-list); /* #e6e6e6 */
}

.informe-block-mixed-1 .informe-destacado-list li:last-child,
.informe-block-mixed-1 .informe-destacado-list li.informe-last-item {
    border-bottom: none;
}

.informe-block-mixed-1 .wppm-post-wrap {
    margin-bottom: 1.375rem; /* 22px */
}

.informe-block-mixed-1 .post-title a {
    font-family: MajritTx, serif;
    font-size: var(--fs-title-sm);     /* 1rem - 16px */
    font-weight: var(--fw-title-base); /* 600 - Estándar El País */
    line-height: var(--lh-title-sm);   /* 1.19 */
    letter-spacing: var(--ls-title-sm);/* -.005625rem */
    color: var(--color-black);
    text-decoration: none;
    display: block;
    margin-top: var(--gap-xs); /* 6px */
}

.informe-block-mixed-1 .post-title a:hover {
    color: var(--color-title-hover);  /* #444 */
    text-decoration: underline;
}

.informe-block-mixed-1 .embd-wrap {
    margin-bottom: var(--space-2); /* 8px */
}

/* ======================================================
   BLOCK MIXED 1 - Videos Verticales (Shorts) en Escritorio
   Corregir aspect-ratio 9:16 para videos verticales SOLO en Mixed-1
====================================================== */

/* Neutralizar cualquier padding-bottom o aspect-ratio forzado en el wrapper */
.informe-block-mixed-1 .embd-wrap[data-ratio="9:16"],
.informe-block-mixed-1 .embd-wrap:has(iframe.sd-embed.is-vertical),
.informe-block-mixed-1 .embd-wrap:has(iframe.sd-embed.is-youtube-short) {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    position: static !important;
    height: auto !important;
    aspect-ratio: unset !important;
}

/* Aplicar aspect-ratio 9:16 SOLO a videos verticales en Mixed-1 (escritorio) */
@media (min-width: 768px) {
    .informe-block-mixed-1 .embd-wrap iframe.sd-embed.is-vertical,
    .informe-block-mixed-1 .embd-wrap iframe.sd-embed.is-youtube-short,
    .informe-block-mixed-1 .embd-wrap .sd-embed.is-vertical,
    .informe-block-mixed-1 .embd-wrap .sd-embed.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;
        position: static !important;
        inset: unset !important;
    }
    
    /* Asegurar que el wrapper no interfiera */
    .informe-block-mixed-1 .embd-wrap[data-ratio="9:16"] {
        padding-bottom: 0 !important;
        height: auto !important;
    }
}

/* Mantener videos horizontales en 16:9 dentro de Mixed-1 */
.informe-block-mixed-1 .embd-wrap iframe.sd-embed.is-horizontal:not(.is-vertical):not(.is-youtube-short),
.informe-block-mixed-1 .embd-wrap .sd-embed.is-horizontal:not(.is-vertical):not(.is-youtube-short) {
    aspect-ratio: 16 / 9;
}

/* ======================================================
   BLOCK MIXED 2 COLUMNS
====================================================== */

.informe-block-mixed-2col {
    margin-bottom: 40px;
}

.informe-block-mixed-2col__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.informe-block-mixed-2col__col {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.informe-block-mixed-2col__col > article {
    padding-bottom: 20px;
    border-bottom: 1px solid #e6e6e6;
    margin-bottom: 20px;
}

.informe-block-mixed-2col__col > article:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.informe-block-mixed-2col .informe-post-card__image {
    aspect-ratio: 16/9;
    height: auto;
}

.informe-block-mixed-2col .informe-post-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ======================================================
   BLOCK MIXED 3 COLUMNS
====================================================== */

.informe-block-mixed-3col {
    margin-bottom: 40px;
}

.informe-block-mixed-3col__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

/* Contenedor para items tipo lista - ocupa todo el ancho del grid */
.informe-block-mixed-3col__row-list {
    grid-column: 1 / -1; /* Ocupar todo el ancho del grid */
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.informe-block-mixed-3col__col {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.informe-block-mixed-3col__col > article {
    padding-bottom: 20px;
    border-bottom: 1px solid #e6e6e6;
    margin-bottom: 20px;
}

.informe-block-mixed-3col__col > article:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.informe-block-mixed-3col .informe-post-card__image {
    aspect-ratio: 16/9;
    height: auto;
}

.informe-block-mixed-3col .informe-post-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ======================================================
   BLOCK MIXED 4 COLUMNS
====================================================== */

.informe-block-mixed-4col {
    margin-bottom: 40px;
}

.informe-block-mixed-4col__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.informe-block-mixed-4col__col {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
}

.informe-block-mixed-4col__col > article {
    padding-bottom: 16px;
    border-bottom: 1px solid #e6e6e6;
    margin-bottom: 16px;
}

.informe-block-mixed-4col__col > article:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.informe-block-mixed-4col .informe-post-card__image {
    aspect-ratio: 16/9;
    height: auto;
}

.informe-block-mixed-4col .informe-post-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ======================================================
   BLOCK MIXED 2 LIST + 4 SQUARES
====================================================== */

.informe-block-mixed-2list-4sq {
    margin-bottom: 40px;
}

.informe-block-mixed-2list-4sq__grid {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 24px;
}

.informe-block-mixed-2list-4sq__list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.informe-block-mixed-2list-4sq__list > article {
    padding-bottom: 20px;
    border-bottom: 1px solid #e6e6e6;
    margin-bottom: 20px;
}

.informe-block-mixed-2list-4sq__list > article:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.informe-block-mixed-2list-4sq__squares {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

/* ======================================================
   BLOCK MIXED FULL + 4 GRID
====================================================== */

.informe-block-mixed-full-4grid {
    margin-bottom: 40px;
}

.informe-block-mixed-full-4grid__grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 24px;
}

.informe-block-mixed-full-4grid__compact {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

.informe-block-mixed-full-4grid__compact > article {
    padding-bottom: 16px;
    border-bottom: 1px solid #e6e6e6;
    margin-bottom: 16px;
}

.informe-block-mixed-full-4grid__compact > article:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.informe-block-mixed-full-4grid .informe-post-card__image {
    aspect-ratio: 16/9;
}

.informe-block-mixed-full-4grid .informe-post-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ======================================================
   BLOCK MIXED 3 FEATURED + 3 LIST
====================================================== */

.informe-block-mixed-3feat-3list {
    margin-bottom: 40px;
}

.informe-block-mixed-3feat-3list__grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 24px;
}

.informe-block-mixed-3feat-3list__featured {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.informe-block-mixed-3feat-3list__list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.informe-block-mixed-3feat-3list__list > article {
    padding-bottom: 20px;
    border-bottom: 1px solid #e6e6e6;
    margin-bottom: 20px;
}

.informe-block-mixed-3feat-3list__list > article:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.informe-block-mixed-3feat-3list .informe-post-card__image {
    aspect-ratio: 16/9;
}

.informe-block-mixed-3feat-3list .informe-post-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ======================================================
   BLOCK MIXED 1 LEFT + 4 COMPACT
====================================================== */

.informe-block-mixed-1left-4compact {
    margin-bottom: 40px;
}

.informe-block-mixed-1left-4compact__grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 24px;
}

.informe-block-mixed-1left-4compact__compact {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

.informe-block-mixed-1left-4compact__compact > article {
    padding-bottom: 16px;
    border-bottom: 1px solid #e6e6e6;
    margin-bottom: 16px;
}

.informe-block-mixed-1left-4compact__compact > article:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.informe-block-mixed-1left-4compact .informe-post-card__image {
    aspect-ratio: 16/9;
}

.informe-block-mixed-1left-4compact .informe-post-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ======================================================
   BLOCK MIXED 2x2 IMAGES + 2 LIST
====================================================== */

.informe-block-mixed-2x2img-2list {
    margin-bottom: 40px;
}

.informe-block-mixed-2x2img-2list__grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 24px;
}

.informe-block-mixed-2x2img-2list__images {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.informe-block-mixed-2x2img-2list__list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.informe-block-mixed-2x2img-2list__list > article {
    padding-bottom: 20px;
    border-bottom: 1px solid #e6e6e6;
    margin-bottom: 20px;
}

.informe-block-mixed-2x2img-2list__list > article:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

/* ======================================================
   BLOCK MIXED 3 LIST + 2 IMAGES
====================================================== */

.informe-block-mixed-3list-2img {
    margin-bottom: 40px;
}

.informe-block-mixed-3list-2img__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.informe-block-mixed-3list-2img__list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.informe-block-mixed-3list-2img__list > article {
    padding-bottom: 20px;
    border-bottom: 1px solid #e6e6e6;
    margin-bottom: 20px;
}

.informe-block-mixed-3list-2img__list > article:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.informe-block-mixed-3list-2img__images {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

/* ======================================================
   BLOCK MIXED 1 BIG + 2 SMALL + 3 COMPACT
====================================================== */

.informe-block-mixed-1big-2small-3compact {
    margin-bottom: 40px;
}

.informe-block-mixed-1big-2small-3compact__grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 24px;
}

.informe-block-mixed-1big-2small-3compact__small {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

.informe-block-mixed-1big-2small-3compact__small > article {
    padding-bottom: 16px;
    border-bottom: 1px solid #e6e6e6;
    margin-bottom: 16px;
}

.informe-block-mixed-1big-2small-3compact__small > article:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.informe-block-mixed-1big-2small-3compact__compact {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

.informe-block-mixed-1big-2small-3compact__compact > article {
    padding-bottom: 16px;
    border-bottom: 1px solid #e6e6e6;
    margin-bottom: 16px;
}

.informe-block-mixed-1big-2small-3compact__compact > article:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.informe-block-mixed-1big-2small-3compact .informe-post-card__image {
    aspect-ratio: 16/9;
}

.informe-block-mixed-1big-2small-3compact .informe-post-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ======================================================
   BLOCK MIXED MASONRY
====================================================== */

.informe-block-mixed-masonry {
    margin-bottom: 40px;
}

.informe-block-mixed-masonry__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.informe-block-mixed-masonry__grid > article {
    padding-bottom: 16px;
    border-bottom: 1px solid #e6e6e6;
    margin-bottom: 16px;
}

.informe-block-mixed-masonry__grid > article:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.informe-block-mixed-masonry .informe-post-card__image {
    aspect-ratio: 16/9;
}

.informe-block-mixed-masonry .informe-post-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ======================================================
   BLOCK MIXED FULL HORIZONTAL + 3 COMPACT + VERTICAL
====================================================== */

.informe-block-mixed-full-horiz-3compact-vert {
    margin-bottom: 40px;
}

.informe-block-mixed-full-horiz-3compact-vert__grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 24px;
}

.informe-block-mixed-full-horiz-3compact-vert__compact {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

.informe-block-mixed-full-horiz-3compact-vert__compact > article {
    padding-bottom: 16px;
    border-bottom: 1px solid #e6e6e6;
    margin-bottom: 16px;
}

.informe-block-mixed-full-horiz-3compact-vert__compact > article:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.informe-block-mixed-full-horiz-3compact-vert .informe-post-card__image {
    aspect-ratio: 16/9;
}

.informe-block-mixed-full-horiz-3compact-vert .informe-post-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

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

@media (max-width: 1024px) {
    .informe-block-mixed-1__wrap {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .informe-block-mixed-1__col--left,
    .informe-block-mixed-1__col--right {
        border: none;
        padding: 0;
    }
    
    .informe-block-mixed-3col__grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .informe-block-mixed-4col__grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .informe-block-mixed-2list-4sq__grid {
        grid-template-columns: 1fr;
    }
    
    .informe-block-mixed-2list-4sq__squares {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .informe-block-mixed-full-4grid__grid {
        grid-template-columns: 1fr;
    }
    
    .informe-block-mixed-3feat-3list__grid {
        grid-template-columns: 1fr;
    }
    
    .informe-block-mixed-3feat-3list__featured {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .informe-block-mixed-1left-4compact__grid {
        grid-template-columns: 1fr;
    }
    
    .informe-block-mixed-2x2img-2list__grid {
        grid-template-columns: 1fr;
    }
    
    .informe-block-mixed-3list-2img__grid {
        grid-template-columns: 1fr;
    }
    
    .informe-block-mixed-1big-2small-3compact__grid {
        grid-template-columns: 1fr;
    }
    
    .informe-block-mixed-masonry__grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .informe-block-mixed-full-horiz-3compact-vert__grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .informe-block-mixed-1 .post-title a {
        font-size: var(--fs-excerpt);     /* .9375rem - 15px Mobile */
        line-height: var(--lh-excerpt);   /* 1.27 */
        margin-top: .25rem; /* 4px - espacio consistente meta-título en mobile */
    }

    .informe-block-mixed-1 .wppm-post-wrap {
        margin-bottom: 1.625rem; /* 26px */
    }
    
    /* Asegurar espaciado consistente para todos los elementos meta en mobile */
    .informe-block-mixed-1 .post-meta,
    .informe-block-mixed-1 .wppm-post-meta {
        margin-bottom: .25rem; /* 4px - espacio compacto entre meta y título */
    }
    
    .informe-block-mixed-2col__grid,
    .informe-block-mixed-3col__grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .informe-block-mixed-4col__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
    
    /* Asegurar que las columnas ocupen el espacio completo en mobile */
    .informe-block-mixed-4col__col {
        width: 100%;
        min-width: 0; /* Prevenir overflow */
    }
    
    .informe-block-mixed-3col__row-list {
        grid-column: 1;
        grid-template-columns: 1fr;
    }
    
    .informe-block-mixed-2list-4sq__grid,
    .informe-block-mixed-full-4grid__grid,
    .informe-block-mixed-3feat-3list__grid,
    .informe-block-mixed-1left-4compact__grid,
    .informe-block-mixed-2x2img-2list__grid,
    .informe-block-mixed-3list-2img__grid,
    .informe-block-mixed-1big-2small-3compact__grid,
    .informe-block-mixed-full-horiz-3compact-vert__grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .informe-block-mixed-full-4grid__compact {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .informe-block-mixed-full-4grid__compact > article {
        padding-bottom: 12px;
        margin-bottom: 0;
    }
}