@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 con ad confirmado (`filled`) Y con el sitio ya reservado (`reserved`): así "pending" (antes de pedir) y "empty" no dejan ni el margen de separación, y el anuncio que aterriza sobre el marco no mueve nada — si el margen apareciera con el relleno, el salto volvería por los 24 px que faltan. Lo aplica el atributo, no `display`, así que no impide que GPT rellene el slot. */ .feeberse-ad-inline[data-ad-state="filled"], .feeberse-ad-inline[data-ad-state="reserved"] { /* Margen vertical coherente con la separación entre league-groups del feed. */ margin: 12px 0; } /* El sitio guardado mientras la petición está en vuelo. El alto lo pone el controller (el del creativo), y el marco va ENCIMA en posición absoluta para que el anuncio aterrice debajo y el marco se funda sobre él sin que la geometría cambie. Ver ad_slot_controller § "El hueco guarda su sitio". */ .feeberse-ad-inline[data-ad-state="reserved"] { position: relative; } /* Marco QUIETO, nunca un esqueleto con brillo: un esqueleto promete datos que siempre llegan, y una cascada de anuncios se queda sin relleno a menudo. Un brillo aquí enseñaría que el brillo puede no significar nada — y llevaría la atención hacia el anuncio. */ .feeberse-ad-frame { position: absolute; top: 0; left: 50%; transform: translateX(-50%); display: flex; align-items: flex-end; justify-content: center; box-sizing: border-box; padding: 6px; border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-surface); opacity: 1; transition: opacity 200ms ease-out; } .feeberse-ad-frame.is-leaving { opacity: 0; } /* La etiqueta va DENTRO del rectángulo, como pie: así no cuesta altura y el marco reserva exactamente lo que ocupará el creativo. Atenuada a propósito: dice para qué se guarda el sitio, no compite con el contenido de al lado. */ .feeberse-ad-frame__label { font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-muted); } @media (prefers-reduced-motion: reduce) { .feeberse-ad-frame { transition: none; } } /* Slot sin ad (GPT slotRenderEnded vacío / demo sin creativo o no +18) y hueco en MODO MEDICIÓN → altura 0, NUNCA display:none. El host se queda en el layout para que los observadores de viewport lo sigan midiendo: la puerta que decide cuándo pedir y el alcance (`fbrs_slot_reached`) necesitan saber dónde está el hueco aunque no tenga anuncio. Con display:none un hueco vacío dejaría de medirse (el mismo motivo por el que Android colapsa a altura 0 y nunca con GONE). El `display:none` de GPT (`collapseEmptyDivs`) cae en el div HIJO que gestiona, no en este host (ver ad_slot_controller). */ .feeberse-ad-inline[data-ad-state="empty"], .feeberse-ad-inline[data-ad-state="measuring"] { height: 0; margin: 0; overflow: hidden; } /* 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; } } /* Host del banner en flujo (`components/ads/_banner_slot.html.twig`): el anclado de la grada, que va bajo la cabecera y fuera del contenedor que scrollea. Mismo contrato de colapso que el in-feed —altura 0 mientras no haya anuncio, nunca `display:none`, para que el hueco se siga midiendo—, pero SIN el `display:none` de escritorio: la grada es la misma pantalla en móvil y en ancho grande, y ahí el hueco existe igual. */ .feeberse-ad-banner { display: flex; justify-content: center; align-items: center; } .feeberse-ad-banner[data-ad-state="filled"] { margin: 8px 0; } .feeberse-ad-banner[data-ad-state="empty"], .feeberse-ad-banner[data-ad-state="measuring"] { height: 0; margin: 0; overflow: hidden; } /* 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; } /* ── MREC 300×250 (sweepstake / home / matches) ────────────────────────── Mismo host `.feeberse-ad-inline` (centro + colapso por data-ad-state) pero NO mobile-only: el 300×250 es tamaño universal y la ficha de porra es una página compartible que también se ve en desktop. Solo fija el tamaño del creativo demo; el iframe GPT ya viene a 300×250 y el host lo centra. */ .feeberse-ad-mrec .feeberse-ad-demo__link img, .feeberse-ad-mrec .feeberse-ad-demo__img { width: 300px; height: auto; } @media (width >= 1024px) { /* Re-mostrar el MREC en desktop (el base oculta todo .feeberse-ad-inline por ser el 320×100 mobile-only). Debe seguir en el layout mientras "pending" para que GPT pueda rellenarlo (un div display:none no se rellena); solo "empty" y "measuring" colapsan, y a altura 0. */ .feeberse-ad-inline.feeberse-ad-mrec { display: flex; } /* Vacío o en medición: altura 0 también aquí, no display:none (ver arriba). */ .feeberse-ad-inline.feeberse-ad-mrec[data-ad-state="empty"], .feeberse-ad-inline.feeberse-ad-mrec[data-ad-state="measuring"] { height: 0; margin: 0; overflow: hidden; } } }