/* =================================================================
   JRI Core — centro de ayuda
   Accesos con icono y rejilla de vídeos.

   El embebido (`.jri-video-embed`) está duplicado a propósito con
   `blog.css`: las dos secciones pueden aparecer por separado y ninguna
   puede dar por hecho que la otra encoló su hoja. Es la misma regla que
   ya obligó a partir `tarjeta.css`.
   ================================================================= */

.jri-help-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  margin-bottom: var(--space-4);
}

.jri-help-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-7);
  background: var(--white);
  border: 1px solid var(--gray-150);
  border-top: 4px solid var(--brand-yellow);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-card);
  transition: transform .2s, box-shadow .2s;
}
.jri-help-card:hover { transform: translateY(-4px); box-shadow: 0 8px 20px rgba(0, 0, 0, .12); }
.jri-help-card b { font-size: 16px; font-weight: 700; }
.jri-help-card span:last-child { font-size: 13px; color: var(--text-muted-2); line-height: 1.6; }

.jri-help-icon {
  width: 52px; height: 52px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-lg);
  background: var(--gray-100);
  color: var(--near-black);
  margin-bottom: var(--space-2);
}
.jri-help-card:hover .jri-help-icon { background: var(--brand-yellow); }

/* ---------------- Rejilla de vídeos ---------------- */
.jri-video-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); }
.jri-video-card { margin: 0; }
.jri-video-caption {
  margin-top: var(--space-3);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--near-black);
}

.jri-video-embed {
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: var(--radius-2xl);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.jri-video-embed iframe { display: block; width: 100%; height: 100%; border: 0; }

@media (max-width: 980px) {
  .jri-video-grid { grid-template-columns: repeat(2, 1fr); }
  .jri-help-grid { grid-template-columns: 1fr; }
}

@media (max-width: 500px) {
  .jri-video-grid { grid-template-columns: 1fr; }
}