/* Contenedor grid con diseño responsive */
.image-grid {
  display: grid;
  width: 100%;
  gap: 1.5rem;
  /* Por defecto en móviles: 1 columna */
  grid-template-columns: 1fr;
}

/* En tablets: 2 columnas */
@media (min-width: 768px) {
  .image-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* En desktops: 3 columnas */
@media (min-width: 1200px) {
  .image-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Estilo para los bloques con imagen de fondo */
.image-card {
  position: relative;
  width: 100%;
  height: 200px; /* Altura ajustable según necesites */
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  margin-bottom: 0; /* Quitamos margen inferior ya que el gap del grid se encarga del espaciado */
  border: 2px solid transparent;
}

/* Efecto hover */
.image-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

/* Estilos para diferentes sesiones */
.image-card.session-0 {
  border-color: #e78c38; /* Naranja para Session 0 */
}

.image-card.session-1 {
  border-color: #3b82f6; /* Azul para Session 1 */
}

.image-card.session-2 {
  border-color: #10b981; /* Verde para Session 2 */
}

/* Imagen de fondo que ocupa todo el espacio */
.image-card .bg-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* Cubre todo el contenedor */
  z-index: 1;
}

/* Capa oscura para mejorar la legibilidad del texto */
.image-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.7));
  z-index: 2;
}

/* Contenedor del título */
.image-card .title-container {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 1.5rem;
  z-index: 3;
  color: white;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}

/* Estilo del título principal */
.image-card .title {
  font-size: 1.5rem;
  font-weight: bold;
  margin: 0;
  padding: 0;
}

/* Estilo del subtítulo */
.image-card .subtitle {
  font-size: 1rem;
  margin-top: 0.5rem;
  opacity: 0.9;
}

/* Enlace invisible que cubre toda la tarjeta */
.image-card a.card-link {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 4;
  display: block;
  text-indent: -9999px; /* Oculta el texto del enlace */
}