/* ==========================================================================
   Widget "JVG Eventos" — grilla y media.
   Las tarjetas usan .jvg-congress-card del design system del child theme
   (jvg-design-system.css). El color de acento por evento entra por la
   variable --jvg-accent inline en cada .jvg-congress-card.
   Las columnas/gap responsive las controla Elementor (selectors del widget).
   ========================================================================== */

.jvg-eventos-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

/* La card como columna flexible (título/desc fluyen; el botón queda abajo). */
.jvg-eventos .jvg-congress-card {
  display: flex;
  flex-direction: column;
}

/* Imagen destacada opcional (OFF por defecto = look de la plantilla HTML). */
.jvg-eventos .jvg-congress-card__media {
  display: block;
  margin: -4px 0 14px;
  border-radius: var(--jvg-radius-sm, 24px);
  overflow: hidden;
  line-height: 0;
}
.jvg-eventos .jvg-congress-card__media img {
  display: block;
  width: 100%;
  height: 170px;
  object-fit: cover;
}
/* Con imagen, el título no necesita el gran margen superior del mockup. */
.jvg-eventos .jvg-congress-card.has-media h3 {
  margin-top: 0;
}

/* Aviso en el editor cuando no hay eventos publicados. */
.jvg-eventos__empty {
  padding: 24px;
  border: 1px dashed rgba(0, 0, 0, .2);
  border-radius: 16px;
  color: #777;
  text-align: center;
  font-family: var(--jvg-font, sans-serif);
}