/* PIEZA: los anuncios.
 * ---------------------------------------------------------------------------
 * Este fichero hace tres cosas y ninguna mas: esconde el hueco que no toca,
 * pinta la etiqueta «Publicidad» (solo en el puente de descarga, ver mas
 * abajo) y pega el anuncio por dentro de su caja.
 *
 * EL ALTO NO ESTA AQUI. Va en un `style` en linea que escribe
 * `inc/piezas/anuncios.php`, para que el navegador lo sepa en el mismo byte en
 * el que lee el `div`, sin esperar a esta hoja. Si el alto viviera aqui,
 * bastaria con que el CSS llegase tarde para que volviera el desplazamiento
 * que toda esta pieza existe para quitar.
 *
 * El corte de 768 px tiene que ser el MISMO que `DL_ANUNCIOS_CORTE` en el PHP
 * y que el del `sizeMapping` de GPT. Son tres sitios y se cambian los tres. */

.dl-anuncio {
  position: relative;
  clear: both;
  margin: var(--dl-esp-xl) 0;
}

/* La etiqueta, SOLO en el puente de descarga (`.dl-anuncio--etiqueta`). En el
 * cuerpo del articulo no se pinta: son 6 huecos seguidos y la etiqueta ahi
 * era ruido repetido, no una obligacion legal (el `aria-label="Publicidad"`
 * de mas abajo ya identifica el hueco para lectores de pantalla).
 *
 * Ocupa 20 px y esos 20 px estan contados dentro del alto que reserva el PHP
 * SOLO para estos dos huecos (ver `dl_anuncios_hueco()`): la caja no crece
 * por llevarla.
 *
 * Va como `::before` absoluto y no como un elemento de verdad para que no
 * pueda meterse dentro del `div` del anuncio: ahi Ad Manager la borraria al
 * pintar el creativo. */
.dl-anuncio--etiqueta::before {
  content: "Publicidad";
  position: absolute;
  inset: 0 0 auto 0;
  height: 20px;
  font: 600 10px/20px var(--dl-texto);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dl-tinta-suave);
  text-align: center;
}

/* Esta caja NO lleva alto, y es deliberado: encoge hasta el alto del creativo
 * que haya salido en la subasta. Es lo que le deja recorrido al `sticky` de
 * abajo. Quien reserva el espacio es el `.dl-anuncio` de fuera, con su alto en
 * linea, y ese no se mueve pase lo que pase. */
.dl-anuncio__caja {
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.dl-anuncio--etiqueta .dl-anuncio__caja {
  padding-top: 20px;
}

/* En movil se reservan 600 px porque el formato que mas paga ahi es el
 * `300x600`. Si en la subasta sale uno mas pequeno, el hueco NO se queda con
 * un agujero blanco: el anuncio va pegado a lo alto de la pantalla y viaja
 * con el lector durante el resto de la caja. Es lo que hacen eldiario.es
 * (`edi-advertising-sticky-wrapper`, `top: 56px`), ABC (`v-adv--rbp`,
 * `top: 50px`) y 20minutos (`c-ads.u-sticky`, `top: 6rem`).
 *
 * `top` a 8 px y no a 56: la cabecera de este sitio NO es fija, sube con el
 * scroll, asi que no hay nada arriba de lo que apartarse. */
.dl-anuncio--movil .dl-anuncio__caja {
  position: sticky;
  top: 8px;
}

/* Que se ve en cada pantalla. Es el mismo corte que apaga los tamanos en el
 * `sizeMapping`, asi que un hueco escondido tampoco pide anuncio: esconder por
 * CSS a secas dejaria impresiones que nadie ve. */
@media (max-width: 767px) {
  .dl-anuncio--escritorio { display: none; }
}

@media (min-width: 768px) {
  .dl-anuncio--movil { display: none; }
}

/* `sticky` muere en silencio si algun antecesor tiene `overflow` distinto de
 * `visible`, y en este tema ya hubo un lio con eso. Esto no lo arregla, pero
 * deja dicho donde mirar si algun dia el anuncio de movil deja de pegarse. */