/* ============================================================
   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%: red de seguridad para portadas claras.

   CADA VÍDEO LLEVA SU PROPIA PORTADA, vía la variable --video-cover.
   Antes la imagen estaba puesta aquí directamente, así que al añadir un
   segundo vídeo TODAS las tarjetas habrían salido con la carátula de la
   primera. Si no se declara la variable, el `none` deja pasar el
   degradado de respaldo, que es el comportamiento seguro.

   AL AÑADIR UNA PORTADA, MIDE EL CONTRASTE del botón de play (crema
   #F5F0E8) contra el centro de la imagen, que es donde cae el botón.
   Hace falta 3:1. Medido, sin contar el velo: vídeo 01 → 6,4:1,
   vídeo 02 → 6,37:1. Si subes una portada luminosa, sube el velo. */
.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)),
    var(--video-cover, none),
    linear-gradient(135deg, #0F4C4D, #14201F);
  background-size: cover;
  background-position: center;
  position: relative;
  display: grid;
  place-items: center;
}
.video-card__thumb--01 { --video-cover: url('../img/portada-video-01.jpg'); }
.video-card__thumb--02 { --video-cover: url('../img/portada-video-02.jpg'); }
.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);
}