/**
 * Hueco publicitario.
 *
 * El hueco existe antes que el anuncio. `aspect-ratio` con las medidas del creativo
 * reserva el alto desde el primer pintado, así que cuando el banner llega no empuja casi
 * nada. Sin eso, el lector pierde la línea que estaba leyendo.
 *
 * Tamaño: un anuncio a su medida exacta se perdía en una columna de 1300px, y en móvil
 * con márgenes. Ahora crece hasta 1,35 veces su tamaño real (más allá se pixela) sin
 * pasar del ancho del contenido; en móvil va de borde a borde. Cuando el creativo llega,
 * el JS ajusta el hueco a su forma real: los servidores mandan a veces otra medida que la
 * configurada (la zona 258 de Revive reserva 970×250 y sirve 1024×160).
 *
 * Depende de assets/css/base.css.
 */

.radiowp-ad {
	background-color: var(--radiowp-color-bg);
	padding-block: var(--radiowp-section-space-tight);
}

.radiowp-ad__inner {
	max-width: var(--radiowp-container);
	margin-inline: auto;
	padding-inline: var(--radiowp-gutter);
}

/* Versalitas discretas: se lee, no grita. Separar el anuncio del periodismo es
   obligación editorial, no adorno. */
.radiowp-ad__label {
	margin: 0 0 0.5rem;
	color: var(--radiowp-color-muted);
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	line-height: 1;
	text-align: center;
	text-transform: uppercase;
}

.radiowp-ad__frame {
	position: relative;
	width: 100%;
	max-width: calc(var(--radiowp-ad-width, 970px) * var(--radiowp-ad-scale, 1.35));
	aspect-ratio: var(--radiowp-ad-ratio, 970 / 250);
	margin-inline: auto;
	overflow: hidden;
	background-color: var(--radiowp-color-surface-sunken);
	border-radius: var(--radiowp-radius);
}

.radiowp-ad__link {
	display: block;
	width: 100%;
	height: 100%;
}

.radiowp-ad .radiowp-ad__image,
.radiowp-ad .radiowp-ad__frame iframe,
/* El anuncio pegado del servidor: su <a> y su <img> llenan el hueco reservado. Dos clases
   para ganar a `.elementor img { height: auto }` (ver README). */
.radiowp-ad .radiowp-ad__frame > a,
.radiowp-ad .radiowp-ad__frame > img,
.radiowp-ad .radiowp-ad__frame > a > img {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
	object-fit: contain;
}

/* Creativo ya cargado: el hueco toma su forma real y su tope (lo pone el JS). */
.radiowp-ad .radiowp-ad__frame[data-fit="natural"] {
	max-width: var(--radiowp-ad-cap, 100%);
	aspect-ratio: auto;
	background-color: transparent;
}

.radiowp-ad .radiowp-ad__frame[data-fit="natural"] img {
	height: auto;
	object-fit: fill;
}

/* Anuncio de script con medida fija (AdButler): el JS lo escala para que llene el hueco
   sin desbordarlo; el alto del hueco sigue a la escala. */
.radiowp-ad .radiowp-ad__frame[data-fit="scaled"] {
	max-width: var(--radiowp-ad-cap, 100%);
	aspect-ratio: auto;
	height: var(--radiowp-ad-height, auto);
	background-color: transparent;
}

.radiowp-ad__frame[data-fit="scaled"] > :first-child {
	transform: scale(var(--radiowp-ad-k, 1));
	transform-origin: top left;
}

/* Móvil y tablet: de borde a borde, sin esquinas redondeadas. */
@media (max-width: 48rem) {
	.radiowp-ad__inner {
		padding-inline: 0;
	}

	.radiowp-ad__frame {
		border-radius: 0;
	}
}

/* Solo se ve dentro del editor: el hueco reservado, con sus medidas. */
.radiowp-ad__frame--empty {
	display: grid;
	place-items: center;
	background-color: transparent;
	border: 1px dashed var(--radiowp-color-border);
	padding: 1rem;
}

.radiowp-ad__empty {
	margin: 0;
	color: var(--radiowp-color-muted);
	font-size: 0.8125rem;
	text-align: center;
}

.radiowp-ad__empty b {
	display: block;
	margin-top: 0.25rem;
	color: var(--radiowp-color-fg);
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.02em;
}

.radiowp-ad a:focus-visible {
	outline: 2px solid var(--radiowp-color-accent);
	outline-offset: 3px;
	border-radius: var(--radiowp-radius);
}

/* ==========================================================================
 * Disposición de los anuncios en la página (la monta radiowp-ad-slot.js)
 *
 * Cada anuncio es un widget a todo el ancho: bien para un banner de 1024×160, mal para
 * un cuadrado de 350 o un 300×600, que quedaban solos con todo el aire a los lados.
 * - Tramos de noticias con anuncios chicos entre ellas → dos columnas
 *   (.radiowp-rail): noticias a la izquierda, anuncios fijos a la derecha.
 * - Anuncios chicos seguidos fuera de un tramo → una fila (.radiowp-ad-row).
 * ========================================================================== */

/* Dos anuncios seguidos: sin doble aire entre ellos. */
.elementor-widget-radiowp-ad-slot + .elementor-widget-radiowp-ad-slot .radiowp-ad {
	padding-top: 0;
}

/* --- Fila --------------------------------------------------------------------- */

.radiowp-ad-row {
	display: grid;
	/* auto-fit: si un anuncio se cierra (AdButler sin campaña), su columna desaparece y
	   el otro se centra solo. */
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
	align-items: center;
	gap: var(--radiowp-space-md);
	max-width: var(--radiowp-container);
	margin-inline: auto;
	padding: var(--radiowp-section-space-tight) var(--radiowp-gutter);
	background-color: var(--radiowp-color-bg);
}

.radiowp-ad-row > .elementor-widget {
	min-width: 0;
	margin: 0 !important;
}

.radiowp-ad-row .radiowp-ad {
	padding: 0;
	background: transparent;
}

.radiowp-ad-row .radiowp-ad__inner {
	padding-inline: 0;
}

/* --- Tramos a dos columnas (solo escritorio) -------------------------------------
 *
 * Noticias a la izquierda; a la derecha, una columna con una celda por anuncio. Las
 * celdas se reparten el alto del tramo y cada anuncio es sticky dentro de la suya: se
 * queda a la vista mientras su celda pasa y luego cede el sitio al siguiente.
 */
@media (min-width: 64rem) {
	.radiowp-rail {
		display: grid;
		grid-template-columns: minmax(0, 1fr) clamp(18.75rem, 26vw, 22.5rem);
		align-items: stretch;
		gap: clamp(1.5rem, 3vw, 2.5rem);
		max-width: var(--radiowp-container);
		margin-inline: auto;
		padding-inline: var(--radiowp-gutter);
		background-color: var(--radiowp-color-bg);
	}

	/* Para medir lo que pide cada columna sin estirar (lo usa el JS al repartir). */
	.radiowp-rail.is-measuring {
		align-items: start;
	}

	.radiowp-rail.is-measuring .radiowp-rail__slot {
		flex: 0 0 auto;
	}

	.radiowp-rail__main,
	.radiowp-rail__side {
		min-width: 0;
	}

	.radiowp-rail .elementor-widget {
		margin: 0 !important;
	}

	/* El tramo ya pone el margen lateral y el ancho máximo: dentro, nada. */
	.radiowp-rail :is(.radiowp-grid__inner, .radiowp-research__inner, .radiowp-videos__inner, .radiowp-ad__inner) {
		max-width: none;
		padding-inline: 0;
	}

	.radiowp-rail__side {
		display: flex;
		flex-direction: column;
		gap: var(--radiowp-space-md);
		padding-block: var(--radiowp-section-space);
	}

	.radiowp-rail__slot {
		flex: 1 1 auto;
	}

	/* Un anuncio que se cerró (AdButler sin campaña) no ocupa celda. */
	.radiowp-rail__slot:has(> .elementor-widget[hidden]) {
		display: none;
	}

	.radiowp-rail__slot > .elementor-widget {
		position: sticky;
		top: 6rem;
	}

	.radiowp-rail__side .radiowp-ad {
		padding: 0;
		background: transparent;
	}

	.radiowp-rail__side .radiowp-ad__frame {
		max-width: 100%;
	}

	/* Lo que no cupo a la derecha, al final de la columna principal. */
	.radiowp-rail__main > .radiowp-ad-row {
		padding-inline: 0;
	}
}

/* Si la ventana se estrecha después de cargar: una sola columna, en el orden de la página. */
@media (max-width: 63.99rem) {
	.radiowp-rail,
	.radiowp-rail__main,
	.radiowp-rail__side,
	.radiowp-rail__slot {
		display: contents;
	}
}