/* ═══════════════════════════════════════════════════════════
   SoulsGuides — Laterales publicitarios de AdSense
   Se carga solo cuando header.php detecta una página aplicable.
   ═══════════════════════════════════════════════════════════ */

body.sg-side-ads-enabled {
  /* Tamaño acordado del bloque de AdSense en escritorio normal. */
  --sg-side-ad-width: 180px;
  --sg-side-ad-height: 600px;
  --sg-side-ad-gap: clamp(12px, 1.25vw, 24px);
  --sg-side-ad-edge: clamp(16px, 1.75vw, 34px);
  --sg-side-ad-reserve: calc(var(--sg-side-ad-width) + var(--sg-side-ad-gap) + var(--sg-side-ad-edge));
  --sg-side-ad-top: clamp(96px, 12vh, 148px);
  /* base.css usa overflow-x:hidden, que crea un scroll container y
     desactiva sticky en algunos navegadores. clip mantiene el recorte
     horizontal sin interceptar el scroll vertical. */
  overflow-x: clip;
}

html:has(body.sg-side-ads-enabled) {
  overflow-x: clip;
}

/* El escenario se crea justo después del hero mediante side-ads.js. Sus dos
   columnas laterales pertenecen al ancho de la guía, no al viewport. */
@media (min-width: 961px) {
  body.sg-side-ads-enabled #main-content {
    padding-inline: 0;
  }

  body.sg-side-ads-enabled .sg-side-ad-stage {
    display: grid;
    grid-template-columns: var(--sg-side-ad-reserve) minmax(0, 1fr) var(--sg-side-ad-reserve);
    align-items: start;
    width: min(100%, 1760px);
    margin-inline: auto;
  }

  body.sg-side-ads-enabled .sg-side-ad-stage__content {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
  }

  /* El aside ocupa las tres columnas en la misma fila que el contenido.
     Así cada anuncio conserva un ancestro con altura completa y sticky no se
     degrada al pasar por display:contents. */
  body.sg-side-ads-enabled .sg-side-ads {
    /* Evita que los dos bloques aparezcan apilados durante el pequeño
       intervalo anterior a la recolocación del script. */
    display: none;
    grid-column: 1 / -1;
    grid-row: 1;
    grid-template-columns: var(--sg-side-ad-reserve) minmax(0, 1fr) var(--sg-side-ad-reserve);
    align-self: stretch;
    pointer-events: none;
  }

  body.sg-side-ads-enabled .sg-side-ads[data-sg-placed="true"] {
    display: grid;
  }

  body.sg-side-ads-enabled .sg-side-ad {
    position: sticky;
    z-index: 35;
    top: var(--sg-side-ad-top);
    align-self: start;
    width: var(--sg-side-ad-width) !important;
    height: var(--sg-side-ad-height) !important;
  }

  body.sg-side-ads-enabled .sg-side-ad--left {
    grid-column: 1;
    justify-self: center;
  }

  body.sg-side-ads-enabled .sg-side-ad--right {
    grid-column: 3;
    justify-self: center;
  }

  /* El código de AdSense vive en este slot y conserva exactamente el
     ancho/alto reservado por el lateral. */
  body.sg-side-ads-enabled .sg-side-ad__unit {
    display: inline-block;
    width: var(--sg-side-ad-width) !important;
    height: var(--sg-side-ad-height) !important;
    pointer-events: auto;
  }

  /* El CTA flotante de Instant Gaming es independiente de AdSense. */
  body.sg-side-ads-enabled .sg-ig-cta--floating {
    left: calc(var(--sg-side-ad-edge) + var(--sg-side-ad-width) + var(--sg-side-ad-gap));
  }
}

/* La página de juegos ya tiene un .wrap de 1060px para el catálogo. El
   escenario sale visualmente de ese contenedor para que los anuncios ocupen
   únicamente los márgenes negros exteriores y no compriman las tarjetas. */
@media (min-width: 961px) {
  body.page-games.sg-side-ads-enabled .sg-side-ad-stage {
    width: min(calc(100vw - 48px), 1760px);
    margin-inline: 0;
    margin-left: 50%;
    transform: translateX(-50%);
  }
}

/* Cuando hay margen suficiente, el centro del catálogo mantiene su ancho
   natural y las columnas de anuncios viven enteramente en el negro lateral. */
@media (min-width: 1400px) {
  body.page-games.sg-side-ads-enabled .sg-side-ad-stage {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1060px) minmax(0, 1fr);
  }

  body.page-games.sg-side-ads-enabled .sg-side-ads {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1060px) minmax(0, 1fr);
  }
}

/* Entre 961 y 1399px no caben una columna central completa y dos anuncios
   grandes. Se conserva el mismo reparto interior, pero con el tamaño
   compacto del anuncio para que el contenido siga teniendo prioridad. */
@media (min-width: 961px) and (max-width: 1399px) {
  body.page-games.sg-side-ads-enabled {
    --sg-side-ad-width: 130px;
    --sg-side-ad-height: 500px;
    --sg-side-ad-gap: clamp(10px, 1vw, 18px);
    --sg-side-ad-edge: clamp(14px, 1.5vw, 24px);
    --sg-side-ad-reserve: calc(var(--sg-side-ad-width) + var(--sg-side-ad-gap) + var(--sg-side-ad-edge));
  }
}

/* En un PC pequeño o con poca altura, el bloque 160 × 600 puede quedar
   parcialmente fuera de la ventana. Se reduce proporcionalmente. */
@media (min-width: 961px) and (max-width: 1279px),
       (min-width: 961px) and (max-height: 780px) {
  body.sg-side-ads-enabled {
    --sg-side-ad-width: 130px;
    --sg-side-ad-height: 500px;
    --sg-side-ad-gap: clamp(10px, 1vw, 18px);
    --sg-side-ad-top: clamp(76px, 10vh, 112px);
  }
}

/* Alturas especialmente bajas: evitamos recortar el creativo inferior. */
@media (min-width: 961px) and (max-height: 650px) {
  body.sg-side-ads-enabled {
    --sg-side-ad-width: 130px;
    --sg-side-ad-height: 420px;
    --sg-side-ad-top: 72px;
  }
}

@media (max-width: 960px) {
  body.sg-side-ads-enabled .sg-side-ad-stage {
    display: block;
  }

  body.sg-side-ads-enabled .sg-side-ads {
    display: none;
  }
}