/* public/css/styles.css - estilos específicos del proyecto Event-OS */

/* Estilo base de página: tipografía principal y fondo claro neutro. */
body {
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: #f8f9fa;
}

/* Fondo del hero (primer bloque visual, la portada) principal con un degradado suave hacia transparente. */
.hero {
  background: linear-gradient(180deg, rgba(13,110,253,.08), transparent 80%);
}

/* Evitamos que las imágenes cambien de tamaño y causen cambios de layout. */
img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Fijamos las barras laterales para que se mantengan visibles al desplazarse en pantallas grandes. */
@media (min-width: 992px) {
  .sidebar-left, .sidebar-right {
    display: block;
    position: sticky;
    top: 1rem;
    align-self: flex-start;
  }
  .sticky-side {
    position: relative;
    top: 0;
    max-height: none;
    overflow: visible;
  }
}

/* En móviles, las barras laterales se muestran como bloques completos debajo del catálogo. */
@media (max-width: 991px) {
  .sidebar-left, .sidebar-right {
    display: block;
    width: 100%;
    margin-bottom: 1.5rem;
    position: static;
  }
}

/* Contenedor blanco para las tarjetas laterales, con una sombra suave. */
.sticky-side {
  background: #fff;
  padding: 1rem;
  border-radius: .75rem;
  box-shadow: 0 0 20px rgba(0,0,0,.05);
}

/* Las imágenes de las tarjetas de evento tienen altura fija y se recortan. */
.event-card img {
  width: 100%;
  min-height: 220px;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* Forzamos una altura mínima al cuerpo de cada tarjeta para que todas generen un layout más uniforme. */
.event-card .card-body {
  min-height: 240px;
}

/* Indicador de carga oculto por defecto; se muestra solo mientras se cargan datos. */
#loading-indicator {
  display: none;
}

/* El contenedor del hero de imagen tiene altura fija y posición relativa para superponer la capa
transparente. */
.hero-card {
  min-height: 380px;
  position: relative;
}

.hero-card img {
  aspect-ratio: 16 / 9;
}

/* La imagen del hero ocupa todo el contenedor sin distorsión (para ello usamos
object-fit: cover) y mantenemos la relación de aspecto para evitar cambios de layout. */
.hero-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 16 / 9;
}

#hero-title {
  min-height: 4.5rem;
}

#hero-description {
  min-height: 3.5rem;
}

#hero-overlay-title {
  min-height: 3rem;
}

#hero-overlay-text {
  min-height: 2.5rem;
}

/* Capa superpuesta del hero para oscurecer la parte inferior y mejorar legibilidad. */
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.55), rgba(0,0,0,0.35));
  color: #fff;
}

/* Sombra de texto para que títulos y párrafos resalten sobre la imagen. */
.hero-overlay h2,
.hero-overlay p {
  text-shadow: 0 2px 14px rgba(0,0,0,0.35);
}

/* Aseguramos que el botón del hero tenga tamaño suficiente. */
.hero-overlay a {
  min-width: 180px;
}

/* En pantallas pequeñas, las leyendas del carrusel deben ajustarse y envolver texto largo. */
.carousel-caption {
  word-break: break-word;
  white-space: normal;
}

.carousel-caption h3,
.carousel-caption p {
  margin-bottom: 0.5rem;
}

/* Mantener relación de aspecto constante en el carrusel y evitar cambios de layout. */
.carousel-item {
  min-height: 240px;
}

.carousel-item img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* Estilo del banner informativo que se muestra en todas las páginas. */
.edu-alert {
  position: relative;
  border-radius: .75rem;
  margin: 0;
  border: 1px solid #f5c2c7;
  background-color: #f8d7da;
  color: #842029;
  font-weight: 600;
  padding: 1rem 1.25rem;
}

/* Icono del aviso informativo con animación ligera para llamar la atención. */
.edu-alert .alert-icon {
  margin-right: .75rem;
  font-size: 1.4rem;
  animation: blink-alert 1.2s infinite;
  will-change: opacity;
}

/* Animación de parpadeo suave para el icono de aviso. */
@keyframes blink-alert {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* Sobreescribimos transiciones de Bootstrap para usar solo propiedades compositeables.
   Evitamos "non-composited animations" en Lighthouse. */
.btn {
  transition-property: background-color, box-shadow, opacity, transform !important;
  transition-duration: 150ms !important;
  transition-timing-function: ease-in-out !important;
}
.accordion-button {
  transition-property: background-color, box-shadow !important;
  transition-duration: 150ms !important;
}

/* Acotamos el scope del reflow a cada tarjeta individualmente */
.event-card {
  contain: layout style;
}

/* Si hay sombras animadas o efectos costosos, preferimos transform/opacity */
.hero-overlay, .carousel-caption { will-change: transform, opacity; }

/* En pantallas pequeñas mostramos las barras laterales como bloques completos debajo del catálogo. */
@media (max-width: 991px) {
  .sidebar-left, .sidebar-right {
    display: block;
    width: 100%;
    margin-bottom: 1.5rem;
  }
}