/* Huecos publicitarios: discretos, identificados siempre, y que nunca dejan
   una caja/etiqueta vacía cuando no hay campaña (eso ya lo resuelve
   Indiferentes_Ads::render_slot() en PHP devolviendo '' — aquí solo se
   estiliza lo que SÍ llega a imprimirse). */

:root {
	/* Ancho máximo de un banner en modo Single en desktop: valor único
	   centralizado (sección 2 de la ampliación v1.2) — nunca repetido a
	   mano por template. En móvil el slot usa 100% sin más (ver abajo). */
	--indf-ad-single-max-width: 760px;
}

.indf-ad-slot {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	margin: 32px 0;
	text-align: center;
}

.indf-ad-slot__etiqueta {
	font-family: var(--fuente-ui);
	font-weight: 700;
	text-transform: uppercase;
	font-size: 10px;
	letter-spacing: 0.06em;
	opacity: 0.55;
}

.indf-ad-slot__enlace {
	display: block;
	width: 100%;
	max-width: var(--indf-ad-single-max-width);
	margin: 0 auto;
	line-height: 0;
}

.indf-ad-slot__enlace img {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	border: 1px solid rgba(28, 27, 25, 0.12);
}

@media (max-width: 767px) {
	.indf-ad-slot__enlace {
		max-width: 100%;
	}
}

/* Infeed: la tarjeta de anuncio vive dentro del mismo grid CSS de tarjetas
   (.tarjetas), así que ocupa toda la fila para no romper la cuadrícula de
   3 columnas del resto de elementos. */
.tarjetas .indf-ad-slot--archive-infeed {
	grid-column: 1 / -1;
	margin: 8px 0;
}

.indf-ad-slot--single-after-content,
.indf-ad-slot--home-01,
.indf-ad-slot--home-02 {
	padding: 0 20px;
}

.indf-ad-slot--agenda-sponsor,
.indf-ad-slot--escenario-sponsor {
	margin: 0;
	padding: 20px 0 0;
}

/* Grid de varios patrocinadores simultáneos (ampliación v1.2, sección 8):
   nº de columnas real en desktop lo fija la clase --N que pinta PHP según
   cuántas campañas hay realmente activas (nunca estira 1 sola a todo el
   ancho — con 1 disponible, render_grid_html() ya pinta como Single). */
.indf-ad-slot__grid {
	display: grid;
	grid-template-columns: repeat(var(--indf-ad-grid-cols, 2), minmax(0, 1fr));
	gap: 20px;
	width: 100%;
	align-items: start;
}

.indf-ad-slot__grid--2 {
	--indf-ad-grid-cols: 2;
}

.indf-ad-slot__grid--3 {
	--indf-ad-grid-cols: 3;
}

.indf-ad-slot__grid--4 {
	--indf-ad-grid-cols: 4;
}

@media (max-width: 1023px) {
	.indf-ad-slot__grid {
		--indf-ad-grid-cols: 2;
	}
}

@media (max-width: 767px) {
	.indf-ad-slot__grid {
		--indf-ad-grid-cols: 1;
	}
}

.indf-ad-slot__grid-item {
	display: flex;
	justify-content: center;
	min-width: 0;
}

.indf-ad-slot__grid-item .indf-ad-slot__enlace {
	max-width: 100%;
}

/* Creatividad tipo código/iframe (ampliación v1.2, sección 9): el iframe en
   sandbox nunca puede romper el layout aunque el snippet interno intente
   forzar un ancho mayor — max-width:100% es el límite duro. Si la campaña
   no fija width/height propios (atributos, ver dimensiones_creatividad() en
   class-ads.php), se usa un tamaño por defecto en vez del 300x150 nativo
   del navegador. */
.indf-ad-slot__iframe {
	display: block;
	max-width: 100%;
	border: 0;
	overflow: hidden;
}

.indf-ad-slot__iframe:not([width]) {
	width: 100%;
}

.indf-ad-slot__iframe:not([height]) {
	height: 250px;
}

/* ------------------------------------------------------------------
   Patrocinador de Agenda (hotfix Theme 1.15.2, sección "Publicidad en
   Agenda"): banner horizontal único y protagonista, claramente distinto de
   una tarjeta publicitaria normal -proporción ~6:1 en desktop, más corta en
   pantallas estrechas para mantener legibilidad. Reutiliza
   .indf-ad-slot__enlace/img (misma <picture> responsive desktop/móvil de
   siempre, object-fit:cover para no deformar nunca la creatividad) — solo
   se amplía su ancho máximo (el de single normal, 760px, se queda corto
   para un banner "protagonista") y se fuerza su ratio con aspect-ratio, que
   el navegador ya usa para reservar la altura antes de que cargue la
   imagen -sin eso no habría CLS con los w/h reales de la imagen, pero con
   esto tampoco lo hay al reconciliarse con el ratio forzado, porque
   aspect-ratio en CSS se aplica antes de empezar a descargar la imagen.
   ------------------------------------------------------------------ */
.indf-ad-slot--agenda-patrocinador {
	margin: 0;
}

.indf-ad-slot--agenda-patrocinador .indf-ad-slot__enlace {
	max-width: var(--ancho-contenido);
}

.indf-ad-slot--agenda-patrocinador .indf-ad-slot__enlace img {
	aspect-ratio: 6 / 1;
	height: auto;
	object-fit: cover;
	border: 0;
}

@media (max-width: 1023px) {
	.indf-ad-slot--agenda-patrocinador .indf-ad-slot__enlace img {
		aspect-ratio: 5 / 1;
	}
}

@media (max-width: 767px) {
	.indf-ad-slot--agenda-patrocinador .indf-ad-slot__enlace img {
		aspect-ratio: 3 / 1;
	}
}

/* ------------------------------------------------------------------
   Autopromoción Indiferentes (hueco rotatorio, ver assets/js/autopromo.js):
   componente reutilizable -misma marca (template-parts/ads/autopromo.php),
   mismo JS, mismo tracking- invocado ahora desde Home, Agenda, Noticias,
   Críticas, Crónicas y Artistas. Todas las diapositivas comparten el mismo
   contenedor de altura fija (position:absolute + aspect-ratio en el
   viewport) para que el cambio de campaña nunca mueva el contenido de
   debajo. El fade es solo opacidad (200-300ms): discreto, sin
   desplazamientos ni cambios de tamaño. visibility además de opacity: una
   diapositiva inactiva con opacity:0 seguiría siendo objetivo de tab sin
   esto.

   Hotfix Theme 1.15.4 -cambio de formato: de banner panorámico (3:1) a
   cuadrado (1:1). Hotfix Theme 1.15.5 -corrección sobre 1.15.4: object-fit
   pasa de contain a cover. Decisión editorial confirmada: las campañas de
   Autopromoción usan creatividades fuente ya cuadradas (p. ej. 1080x1080),
   así que cover llena el hueco completo sin recorte relevante ni
   deformación -no se intenta "cuadrar" en CSS una creatividad horizontal,
   eso sigue siendo responsabilidad de qué imagen sube el admin. Sin
   necesidad de letterbox, se retira el fondo de relleno del viewport.
   ------------------------------------------------------------------ */
.indf-autopromo {
	margin: 32px 0;
	display: flex;
	justify-content: center;
}

.indf-autopromo__viewport {
	position: relative;
	width: 100%;
	max-width: 320px;
	aspect-ratio: 1 / 1;
	margin: 0 auto;
	overflow: hidden;
	border: 1px solid rgba(28, 27, 25, 0.12);
}

.indf-autopromo__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity 250ms ease;
}

.indf-autopromo__slide.is-active {
	opacity: 1;
	visibility: visible;
}

.indf-autopromo__slide .indf-ad-slot__enlace {
	display: block;
	width: 100%;
	height: 100%;
	max-width: 100%;
}

.indf-autopromo__slide .indf-ad-slot__enlace picture {
	display: block;
	width: 100%;
	height: 100%;
}

.indf-autopromo__slide .indf-ad-slot__enlace img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	border: 0;
}

.indf-autopromo__slide .indf-ad-slot__enlace:focus-visible {
	outline: 2px solid var(--indf-turquesa);
	outline-offset: 2px;
}

@media (max-width: 1023px) {
	.indf-autopromo__viewport {
		max-width: 260px;
	}
}

@media (max-width: 767px) {
	.indf-autopromo__viewport {
		max-width: 320px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.indf-autopromo__slide {
		transition: none;
	}
}