/**
 * F1/B — vídeos de YouTube bloqueados hasta el consentimiento.
 *
 * Los dos iframes escritos a mano en Twig salen con src="" + data-src +
 * class="cookies-video". Sin consentimiento, cookies_media.js llama a
 * $().cookiesOverlay('video'), que ENVUELVE el iframe y deja este DOM:
 *
 *   .lc-video-consent
 *     > div.cookies-fallback--wrap.disabled   (position:relative; min-height:12rem)
 *         > iframe.cookies-video.cookies-fallback--element   (opacity:0)
 *         > div.cookies-fallback              (absolute; 100%x100%; flex; fondo #fff)
 *
 * Dos problemas que resuelve este fichero, ninguno cosmético:
 *
 * 1) El wrapper va EN FLUJO con min-height:12rem. Nuestros dos contenedores dan
 *    su alto con padding-bottom:56.25% y NO declaran height, así que su caja de
 *    contenido mide 0 hoy (el iframe es absoluto) y pasaría a medir 192 px en
 *    cuanto el JS inserte el wrapper: la ficha daría un salto de 192 px DESPUÉS
 *    del primer pintado, empujando "Información clave", galería y CTA. Sacar el
 *    wrapper del flujo lo ancla al 16:9 y elimina el salto. Se posiciona SIN el
 *    estado `.disabled` a propósito: si el plugin no retira esa clase al
 *    consentir, el iframe sigue anclado y no hay un segundo salto.
 *
 * 2) El texto del placeholder en español ocupa más que el inglés de contrib, y
 *    a 1.125rem con padding 1.25rem no cabe en una caja de 165-202 px (que es lo
 *    que mide el 16:9 en un teléfono: 92vw de ancho). Sin acotarlo, el botón
 *    "Aceptar" queda RECORTADO por el overflow:hidden del contenedor y la
 *    familia no puede ni ver el vídeo ni consentir. Móvil es el dispositivo de
 *    compra: esto es funcional, no estético.
 *
 * `safe center` evita que un zoom de texto al 200 % (WCAG 1.4.4) esconda la
 * parte de arriba; si el navegador no lo soporta, ignora la declaración y se
 * queda con el `center` de contrib.
 *
 * Los dos contenedores ya declaran position:relative (inline en la ficha,
 * css/voluntariado.css:49 en el nodo 14), así que `inset: 0` resuelve contra la
 * caja correcta y no hace falta repetirlo aquí.
 *
 * Fichero nuevo (regla del proyecto: nunca editar style.css). Sin !important:
 * el grupo `theme` carga después del grupo `component` de los módulos contrib,
 * y `.lc-video-consent .cookies-*` (0,2,0) gana a las reglas de contrib (0,1,0).
 */

/* Fondo mientras no hay vídeo. Blanco = el mismo de .cookies-fallback, así no
   hay parpadeo de color entre el primer pintado y el evento de consentimiento.
   En el nodo 14 pisa el background:#000 del letterbox, que no se ve en ningún
   estado real porque el iframe cubre la caja entera. */
.lc-video-consent {
  background: #fff;
}

.lc-video-consent > .cookies-fallback--wrap {
  position: absolute;
  inset: 0;
}

.lc-video-consent > .cookies-fallback--wrap.disabled {
  min-height: 0;
}

.lc-video-consent .cookies-fallback {
  border: 0;
  padding: 12px;
  overflow: auto;
  justify-content: safe center;
}

.lc-video-consent .cookies-fallback--text {
  font-size: 0.9375rem;
  line-height: 1.35;
  margin: 0 0 10px;
}

/* Sin JavaScript no hay banner ni overlay: la caja quedaría vacía y sin
   explicación. El aviso va DENTRO del 16:9, donde está el hueco que explica.
   Con JS activado el navegador no renderiza el contenido de <noscript>, así que
   no puede taparle el vídeo a nadie. */
.lc-video-consent__nojs {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  text-align: center;
  background: #fff;
  color: #1A1A1A;
  font-size: 0.9375rem;
  line-height: 1.4;
}

.lc-video-consent__nojs p {
  margin: 0;
}