/* CF San Pedro — Galería de Vídeos: mosaico de miniaturas + reproductor
   embebido bloqueado hasta consentimiento. Reutiliza las variables/tokens
   de css/style.css. */

.video-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
@media (min-width: 640px) {
  .video-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .video-grid { grid-template-columns: repeat(3, 1fr); }
}

.video-card {
  background: var(--surface-container-lowest);
  border: 1px solid var(--secondary-fixed-dim);
  border-radius: var(--radius);
  box-shadow: 0 12px 40px rgba(188,0,10,0.25);
  overflow: hidden;
}

.video-thumb-wrap {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  background: var(--surface-container);
  cursor: pointer;
}
.video-thumb-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
.video-play-btn {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(10,17,26,0.25);
  transition: background 0.2s ease;
}
.video-thumb-wrap:hover .video-play-btn { background: rgba(10,17,26,0.4); }
.video-play-btn svg {
  width: 60px; height: 60px;
  fill: rgba(255,255,255,0.95);
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.4));
  transition: transform 0.2s ease;
}
.video-thumb-wrap:hover .video-play-btn svg { transform: scale(1.08); }

.video-card .body { padding: 16px 18px 18px; }
.video-card .date { font-size: 12px; color: var(--outline); text-transform: uppercase; letter-spacing: 0.03em; }
.video-card h3 {
  margin-top: 6px;
  font-family: var(--font-display); font-weight: 800; color: var(--primary);
  font-size: 16px; line-height: 1.3;
}

/* Cuando js/cookie-consent.js desbloquea el vídeo, sustituye el placeholder
   por un <div class="consent-embed-frame"> (definido de forma genérica en
   css/cookie-consent.css); aquí se le da el mismo aspect-ratio 16:9 que
   tenía el placeholder original, para que la card no cambie de tamaño. */
.video-card .consent-embed-frame { width: 100%; aspect-ratio: 16 / 9; }

/* .video-thumb-wrap también lleva la clase genérica .consent-placeholder
   (para que js/cookie-consent.js la reconozca y sepa desbloquearla), pero
   aquí NO se usa su aspecto visual de "aviso con texto + botón": se anulan
   el padding/border/min-height genéricos y se muestra directamente la
   miniatura real del vídeo con el botón de play superpuesto encima. */
.video-thumb-wrap.consent-placeholder {
  padding: 0;
  gap: 0;
  min-height: 0;
  border: none;
  border-radius: 0;
}