/*
 * Ex-Ante WPO Visual Fixes
 * Este archivo implementa aspect-ratio para evitar el CLS (Cumulative Layout Shift)
 * y dimensiones mínimas para bloques publicitarios y dinámicos.
 */

/* Aspect ratios de imágenes basado en image sizes de functions.php */
.new-sm__img,
.new-sm__img-content {
    aspect-ratio: 3 / 2;
    overflow: hidden;
    border-radius: 3px;
}

.new-md__img,
.new-md__img-content {
    aspect-ratio: 20 / 14;
    overflow: hidden;
    border-radius: 3px;
}

[aria-label="En exclusiva"] .new-md__img {
    aspect-ratio: unset;
    height: 260px;
}

[aria-label="En exclusiva"] .new-md__img > div:has(video) {
    aspect-ratio: unset !important;
    height: 100%;
}

[aria-label="En exclusiva"] .new-md__img video {
    height: 100% !important;
    object-fit: cover;
}

.new-lg__img,
.new-lg__img-content {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 3px;
}

.new-xl__img,
.new-xl__img-content {
    aspect-ratio: 2 / 1;
    overflow: hidden;
    border-radius: 3px;
}



/* 
 * Hacer que las imágenes dentro de estos contenedores cubran el espacio,
 * asegurando que no se deformen mientras mantienen el aspect-ratio del padre.
 */
.new-sm__img img,
.new-md__img img,
.new-lg__img img,
.new-xl__img img {
    width: 100%;
    object-fit: cover;
}

/* Espacio reservado para Banners GPT para evitar CLS */
/* Bloques de publicidad estándar 300x250 o responsivos */
.s-ads {
    min-height: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Banners largos (como 970x90 o 728x90) */
.s-ads.banner-top,
.s-ads.banner-bottom {
    min-height: 90px;
}

@media (max-width: 768px) {
    .s-ads.banner-top,
    .s-ads.banner-bottom {
        min-height: 50px;
    }
}

/* 
 * Igualación de alturas por CSS para la cuadrícula inferior (news-bottom)
 * Reemplaza al script JavaScript inestable que causaba parpadeos/fallas.
 */
.section.news-bottom .s-news__head {
    min-height: 48px;
    display: flex;
    align-items: center;
}

.section.news-bottom .new-md--categoria .new-md__content h3 {
    /* Mantiene todas las tarjetas exactamente de la misma altura calculada para 3 líneas */
    min-height: calc(1.35em * 3);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Evita que los items "sin-img" colapsen su altura en pantallas grandes si no tienen texto suficiente */
.section.news-bottom .new-md--categoria.sin-img .new-md__content h3 {
    min-height: calc(1.35em * 3);
}

/* ─────────────────────────────────────────────────────────────────────────────
 * Imagen principal del single (LCP)
 * Sección 4.5 WPO ExAnte 2026:
 *  - El CONTENEDOR declara el aspect-ratio para que el navegador reserve el
 *    espacio ANTES de que llegue la imagen (= elimina CLS en mobile y desktop).
 *  - La IMG cubre el contenedor con object-fit:cover.
 *  - width:100% en ambos garantiza responsividad sin dimensiones rígidas en HTML.
 * ───────────────────────────────────────────────────────────────────────────── */
.single-featured-figure {
    width: 100%;
    aspect-ratio: 7 / 4;   /* exante-thumb-lg = 700x400, proporción real del crop */
    overflow: hidden;
    margin: 0 0 1.5rem 0;
    background: #f3f3f3; /* placeholder mientras carga la imagen */
}

.single-featured-figure .single-featured-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}


.w-video {
 
    height: 100%;
}


.destacada-main.otras-noticias {

    justify-content: space-between !important;
}


@media (max-width: 768px) {
    .site-footer .container  {
        padding-left: 1rem;
        padding-right: 1rem;
	}
	
.home .new-lg__img, .new-lg__img-content {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 3px;
    min-height: 260px;
}
	
	.home .new-lg__img img {
     
   max-height: 260px;
}
	
		.ads-top iframe{
		width:320px;
		margin-left:auto;
		margin-right:auto;
		margin-top:0.5rem;
	}
	
}



@media (min-width: 960px) {
 
.tech-grid .new-md__img img 
 {
    width: 100%;
    object-fit: cover;
	height: 217px;
}
}