/* ============================================================
   contenido.css — rejilla de vídeos de YouTube
   ============================================================ */

/* auto-fill (no auto-fit): con un solo vídeo mantiene el ancho de columna
   en vez de estirar la tarjeta a todo lo ancho de la sección. */
.videos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 22px;
}

.video-card {
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid rgba(36,48,48,0.12);
  background: var(--color-bg);
}

/* Portada ALOJADA EN NUESTRO SERVIDOR, nunca la miniatura de i.ytimg.com:
   esa la sirve Google y se pediría al abrir la página, antes de que nadie
   pulse, rompiendo el "clic para reproducir".
   Tres capas: velo + foto + degradado de respaldo, para que si algún día
   falta el fichero se vea el degradado en vez de un hueco roto.
   El velo es del 8%: medido sobre esta portada, el botón ya contrasta
   6,4:1 sin él (hace falta 3:1), así que solo queda como red de seguridad
   para portadas futuras más claras. Si subes una portada muy luminosa,
   comprueba que el centro siga siendo oscuro o sube este valor. */
.video-card__thumb {
  aspect-ratio: 16 / 9;
  background-color: #0F4C4D;
  background-image:
    linear-gradient(rgba(20,32,31,0.08), rgba(20,32,31,0.08)),
    url('../img/portada-video-01.jpg'),
    linear-gradient(135deg, #0F4C4D, #14201F);
  background-size: cover;
  background-position: center;
  position: relative;
  display: grid;
  place-items: center;
}
.video-card__time {
  position: absolute;
  top: 12px;
  left: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 4px 9px;
  border-radius: var(--radius-sm);
  background: rgba(20,32,31,0.55);
  color: var(--color-cream);
}
/* Es un <button> real para que funcione con teclado y con lector de pantalla */
.video-card__play {
  width: 52px;
  height: 52px;
  border: 0;
  padding: 0;
  border-radius: 50%;
  background: rgba(245,240,232,0.92);
  display: grid;
  place-items: center;
  color: var(--color-teal);
  cursor: pointer;
  transition: transform .15s, background .15s;
}
.video-card__play:hover { transform: scale(1.08); background: #fff; }
/* La portada tiene zonas claras: sin sombra el botón se pierde encima */
.video-card__play { box-shadow: 0 4px 18px rgba(20,32,31,0.45); }
.video-card__play:focus-visible { outline: 3px solid var(--color-orange); outline-offset: 3px; }
.video-card__play svg { margin-left: 3px; }

.video-card__dot {
  position: absolute;
  bottom: 12px;
  right: 12px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(255,255,255,0.25);
}
.video-card__dot--amber { background: var(--color-amber); }
.video-card__dot--red   { background: var(--color-red); }
.video-card__dot--green { background: var(--color-green); }

.video-card__body { padding: 16px 18px 20px; }
.video-card__title {
  font-family: var(--font-display);
  font-size: 15.5px;
  line-height: 1.35;
  color: var(--color-teal);
  font-weight: 600;
  margin: 0;
}
.video-card__meta {
  font-size: 12.5px;
  color: var(--color-ink-soft);
  margin-top: 8px;
  font-family: var(--font-mono);
}
.video-card__link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 14px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14.5px;
  color: var(--color-orange);
  transition: gap .15s;
}
.video-card__link:hover { gap: 11px; }

/* Aviso exigido por la política de privacidad (§9): el usuario debe saber
   qué pasa ANTES de pulsar, porque pulsar ES el consentimiento. */
.video-card__privacy {
  margin-top: 12px;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--color-ink-soft);
}