@layer components { /* Host del slot GPT in-feed (mobile-only, 320×100). El ad_injector controller lo inyecta entre league-groups; el ad_slot controller pide el anuncio. SIN `min-height`: el hueco se ocupa SOLO cuando llega un ad. El espacio del 320×100 lo da el propio creativo (img/iframe con dimensiones intrínsecas) al rellenarse. Mientras carga o si GAM no devuelve nada, el slot colapsa (GPT `collapseEmptyDivs(true)` lo oculta antes/después del fetch; demo → ad-demo marca `data-ad-state="empty"`) → ni hueco ni margen fantasma. */ .feeberse-ad-inline { display: flex; justify-content: center; align-items: center; } /* Margen SOLO con ad confirmado (data-ad-state="filled"): así "pending" (GPT pidiendo) y "empty" no dejan ni siquiera el margen de separación. Lo aplica el atributo, no `display`, por lo que no impide que GPT rellene el slot. */ .feeberse-ad-inline[data-ad-state="filled"] { /* Margen vertical coherente con la separación entre league-groups del feed. */ margin: 12px 0; } /* Slot sin ad (GPT slotRenderEnded vacío / demo sin creativo o no +18) → fuera del layout, sin hueco. El estado "pending" (GPT, mientras pide) NO se colapsa con display:none aquí — lo gestiona GPT (`collapseEmptyDivs`), porque GPT no puede rellenar un div que el CSS ya puso en display:none. */ .feeberse-ad-inline[data-ad-state="empty"] { display: none; } /* Mobile-only: el inventario es 320×100 mobile + campaña propia directa → se oculta solo en desktop por ancho (≥1024px). OJO: NO usar `.has-desktop-shell` — es un flag server-side que el home pinta en el TAMBIÉN en móvil (el layout desktop se activa por media query), así que ocultaría el slot en su único sitio válido. */ @media (width >= 1024px) { .feeberse-ad-inline { display: none; } } /* Modo DEMO (DEV-only): el ad_demo controller pinta el creativo Luckia local (320×100) dentro del mismo host `.feeberse-ad-inline`. El host ya centra + reserva alto (CLS); aquí solo el creativo y la etiqueta legal. */ .feeberse-ad-demo__link, .feeberse-ad-demo__img { display: block; line-height: 0; } .feeberse-ad-demo__link img, .feeberse-ad-demo__img { display: block; width: 320px; max-width: 100%; height: auto; } /* Etiqueta legal del soporte ("Publicidad"). Micro-label muted sobre/junto al banner; cumple el etiquetado obligatorio de publicidad de apuestas. El host es flex en columna para apilar label + creativo centrados. */ .feeberse-ad-inline:has(.ad-label) { flex-direction: column; gap: 2px; } .ad-label { font-size: 10px; line-height: 1.2; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-muted, #6e6e73); text-align: center; } }