@import url('./legacy.css');
@import url('./reusable-components.css');

/* =========================================================
   SISTEMA ÚNICO DE CARROSSEL
   ========================================================= */

.route-carousel,
.route-carousel-wrap{
  position:relative;
}

.route-grid,
#route-list-grid,
#event-list-grid,
#home-event-grid{
  display:flex !important;
  gap:24px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  align-items:stretch;
  padding:4px 0 18px;
}

.route-grid::-webkit-scrollbar,
#route-list-grid::-webkit-scrollbar,
#event-list-grid::-webkit-scrollbar,
#home-event-grid::-webkit-scrollbar,
.speakers-carousel::-webkit-scrollbar,
.stage-gallery-grid::-webkit-scrollbar{
  display:none;
}

.route-grid > .route-card,
#route-list-grid > .route-card,
#event-list-grid > .route-card,
#home-event-grid > .route-card{
  flex:0 0 min(390px,88vw);
  scroll-snap-align:center;
}

.event-grid > *,
#event-list-grid > *,
#home-event-grid > *{
  height:auto;
}

.route-nav,
.route-carousel-btn{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:20;
  width:56px;
  height:56px;
  border:0;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(10,10,10,.84);
  color:#fff;
  cursor:pointer;
  transition:opacity .2s ease, transform .2s ease, background .2s ease;
  box-shadow:0 12px 30px rgba(0,0,0,.18);
}

.route-nav:hover,
.route-carousel-btn:hover{
  transform:translateY(-50%) scale(1.04);
  background:rgba(10,10,10,.92);
}

.route-nav.prev,
.route-carousel-btn.prev{
  left:-28px;
}

.route-nav.next,
.route-carousel-btn.next{
  right:-28px;
}

.route-nav.is-hidden,
.route-carousel-btn.is-hidden{
  display:none;
}

.speakers-carousel{
  scroll-behavior:smooth;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}

.speaker-slide{
  scroll-snap-align:center;
}

.stage-gallery::after{
  display:none;
}

.stage-gallery-carousel{
  position:relative;
}

.stage-gallery-grid{
  scroll-behavior:smooth;
}

.stage-gallery-grid button{
  scroll-snap-align:center;
}


@media (max-width:820px){

  .route-grid,
  #route-list-grid,
  #event-list-grid,
  #home-event-grid{
    gap:16px;
    padding:4px 14px 16px;
  }

  .route-grid > .route-card,
  #route-list-grid > .route-card,
  #event-list-grid > .route-card,
  #home-event-grid > .route-card{
    flex-basis:84%;
  }

  .route-nav,
  .route-carousel-btn{
    width:46px;
    height:46px;
  }

  .route-nav.prev,
  .route-carousel-btn.prev{
    left:6px;
  }

  .route-nav.next,
  .route-carousel-btn.next{
    right:6px;
  }

}