/*
 * Layout: espacio publicitario.
 * Referencia: design-reference/propuesta4/index.html — «Billboards campaña»,
 * «Publicidad post editorial» y «Billboard pre-footer».
 *
 * El rótulo "Publicidad" es obligatorio y siempre visible: el lector tiene que poder
 * distinguir el contenido pagado del editorial sin esfuerzo.
 */

.exxi-publi { padding-block: 0 34px; }

.exxi-publi__label {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.625rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-subtle);
  text-align: center;
  margin-bottom: 6px;
}

/* Las columnas las decide el bloque: par de billboards, trío de displays o uno ancho. */
.exxi-publi__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

@media (min-width: 900px) {
  .exxi-publi__grid {
    grid-template-columns: repeat(var(--exxi-publi-columnas, 1), 1fr);
  }
}

.exxi-publi__hueco,
.exxi-publi__creatividad {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface-alt);
  border: var(--border-width) solid #e0dcd2;
  color: var(--color-text-subtle);
  font-family: var(--font-sans);
  font-size: var(--size-xs);
  letter-spacing: var(--tracking-wide);
  text-align: center;
  text-decoration: none;
  /* Alto reservado según formato: evita que la página salte al cargar la creatividad. */
  min-height: 150px;
}

.exxi-publi--trio_displays .exxi-publi__hueco { min-height: 120px; }
.exxi-publi--billboard_ancho .exxi-publi__hueco { min-height: 250px; }

.exxi-publi__hueco:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.exxi-publi__creatividad { background: transparent; border: 0; }

.exxi-publi__creatividad img {
  max-width: 100%;
  height: auto;
}

/* En móvil, un bloque de dos o tres huecos vacíos son cientos de píxeles de nada antes
   de llegar al contenido. Se reserva el primero, que es el que se vende primero. */
@media (max-width: 999px) {
  .exxi-publi__grid > .exxi-publi__hueco:nth-child(n+2) { display: none; }
}