/*
 * Alfora.art — publicidad responsive del index
 * ------------------------------------------------------------
 * Este archivo corrige únicamente la integración manual de
 * AdSense en index.html. Se carga después de main.css para que
 * estas reglas no afecten las herramientas internas.
 *
 * Principios:
 * 1. El contenedor siempre tiene un ancho conocido antes de que
 *    AdSense calcule el tamaño del anuncio.
 * 2. No se usa overflow:hidden ni una altura máxima: un anuncio
 *    responsive puede necesitar más altura.
 * 3. Se reserva una altura mínima razonable para evitar que una
 *    creatividad tardía se monte sobre la siguiente sección.
 * 4. Los anuncios que viven dentro de un grid tienen una columna
 *    explícita en cada breakpoint.
 */

body[data-page="index"] .home-ad-slot {
  position: relative;
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: clamp(1.5rem, 4vw, 3rem) auto;
  clear: both;
  align-self: auto;
  justify-self: stretch;
  text-transform: none;
  letter-spacing: normal;
}

/* La unidad responsive recibe exactamente el ancho del slot.
   No forzamos su altura: AdSense puede aumentarla cuando lo necesite. */
body[data-page="index"] .home-ad-slot > .adsbygoogle {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin-right: auto !important;
  margin-left: auto !important;
}

/* Un anuncio colocado directamente dentro del hero debe ocupar
   las dos columnas; de lo contrario Grid lo trata como un tercer
   elemento y puede calcular un ancho incorrecto. */
body[data-page="index"] .hero > .home-ad-slot {
  grid-column: 1 / -1;
  width: 100%;
}

/* Reservas de flujo.
   Son min-height, no height: el anuncio puede crecer libremente.
   Evitan la superposición que se ve cuando una creatividad alta
   termina de cargar después de que la sección siguiente ya se pintó. */
body[data-page="index"] .home-ad-slot[data-ad-position="after-hero"] {
  min-height: 180px;
}

body[data-page="index"] .home-ad-slot[data-ad-position="after-categories"] {
  min-height: 180px;
}

body[data-page="index"] .home-ad-slot[data-ad-position="home-middle"],
body[data-page="index"] .home-ad-slot[data-ad-position="between-gradient-design"] {
  min-height: 280px;
}

/* En escritorio el anuncio comparte la fila de Gradientes con la
   tarjeta destacada y usa el espacio restante del grid de 4 columnas. */
body[data-page="index"] .tools-grid > .home-ad-slot--gradient {
  grid-column: 2 / -1;
  width: 100%;
  min-width: 0;
  min-height: 250px;
  margin: 0;
}

/* Cuando el grid baja a dos columnas, darle solo una columna al anuncio
   vuelve a estrechar demasiado el contenedor. Lo pasamos a una fila
   completa para que AdSense calcule un ancho estable. */
@media (max-width: 1100px) {
  body[data-page="index"] .tools-grid > .home-ad-slot--gradient {
    grid-column: 1 / -1;
    min-height: 180px;
    margin-top: 0.75rem;
  }
}

@media (max-width: 820px) {
  body[data-page="index"] .home-ad-slot {
    margin-top: 2rem;
    margin-bottom: 2rem;
  }

  body[data-page="index"] .home-ad-slot[data-ad-position="after-hero"],
  body[data-page="index"] .home-ad-slot[data-ad-position="after-categories"] {
    min-height: 180px;
  }

  body[data-page="index"] .home-ad-slot[data-ad-position="home-middle"],
  body[data-page="index"] .home-ad-slot[data-ad-position="between-gradient-design"] {
    min-height: 250px;
  }

  body[data-page="index"] .tools-grid > .home-ad-slot--gradient {
    min-height: 180px;
  }
}

@media (max-width: 620px) {
  body[data-page="index"] .home-ad-slot {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
  }

  body[data-page="index"] .home-ad-slot[data-ad-position="after-hero"],
  body[data-page="index"] .home-ad-slot[data-ad-position="after-categories"] {
    min-height: 170px;
  }

  body[data-page="index"] .home-ad-slot[data-ad-position="home-middle"],
  body[data-page="index"] .home-ad-slot[data-ad-position="between-gradient-design"] {
    min-height: 250px;
  }

  body[data-page="index"] .tools-grid > .home-ad-slot--gradient {
    grid-column: 1 / -1;
    min-height: 170px;
  }
}