/* ========================================
   RESET
======================================== */

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}



main{
  padding-top:0px; /* adjust to navbar height */
}

.page-content{
  margin-top:0px;
}


/* ========================================
   BASE SECTION SPACING (CLEAN)
======================================== */

section{
  padding:0 8%;
}


/* ========================================
   PERFORMANCES SECTION (FIXED)
======================================== */

.performances{
  position:relative;
  padding:40px 8%;
}

.performance-section {
   padding:40px 8%;
}

/* TITLES */

.performances h2,
.more-performances h2,
.ember-performances h2,
.performance-section h2{
  text-align:center;
  color:#f3c16d;
  margin-bottom: 10px;
}

.performances h2{
  margin-bottom:50px;
  font-size:2.5rem;
}

.more-performances h2,
.ember-performances h2{
  margin-bottom:30px;
}

/* GLOW EFFECT */

.performances::before,
.more-performances::before,
.ember-performances::before{
  content:"";
  position:absolute;
  inset:0;

  background: radial-gradient(
    circle at top,
    rgba(243,193,109,0.08),
    transparent 60%
  );

  pointer-events:none;
}

/* ========================================
   SLIDESHOW
======================================== */

.slideshow-container{
  position:relative;
  max-width:900px;
  height:500px;
  margin:auto;
  overflow:hidden;
  border-radius:20px;
}

/* SLIDES */

.perf-slide{
  position:absolute;
  inset:0;
  display:none;
  overflow:hidden;
  background:#1e0a28;
  border-radius:20px;
  text-decoration:none;
  color:white;
}

.perf-slide.active{
  display:block;
}

.perf-slide img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* ========================================
   VIDEO TITLE
======================================== */

.video-title{
  position:absolute;
  left:0;
  right:0;
  bottom:0;

  display:flex;
  align-items:center;

  width:100%;

  padding:clamp(10px,1.5vw,18px) clamp(12px,2.5vw,22px);

  background:linear-gradient(
    to right,
    rgba(243,193,109,1) 0%,
    rgba(243,193,109,0.95) 45%,
    rgba(243,193,109,0.7) 70%,
    rgba(243,193,109,0.25) 100%
  );

  border-radius:0 0 20px 20px;
  z-index:2;
}

.video-title h3{
  font-family:'Playfair Display', serif;
  font-size:clamp(0.95rem,1.2vw,1.4rem);
  font-weight:700;
  line-height:1.2;
  color:#120018;
}

/* ========================================
   DOTS
======================================== */

.dots-container{
  margin-top:15px;
  text-align:center;
}

.dot{
  display:inline-block;
  width:10px;
  height:10px;
  margin:5px;
  border-radius:50%;
  background:#777;
  cursor:pointer;
  transition:0.3s ease;
}

.dot.active{
  background:#f3c16d;
}

/* ========================================
   PERFORMANCE LIST
======================================== */

.performance-list{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.performance-item{
  display:flex;
  align-items:center;
  gap:15px;
  padding:12px;
  background:#1e0a28;
  border-radius:16px;
  text-decoration:none;
  color:white;
  transition:0.25s ease;
}

.performance-item:hover{
  transform:scale(1.02);
}

.performance-item img{
  width:160px;
  height:95px;
  object-fit:cover;
  border-radius:12px;
}

.performance-info h3{
  margin-bottom:6px;
  font-size:1rem;
}

.performance-info p{
  font-size:0.85rem;
  opacity:0.8;
}

/* ========================================
   COLLAPSIBLE
======================================== */

.collapsible{
  display:flex;
  flex-direction:column;
  gap:14px;
  max-height:0;
  overflow-y:auto;
  opacity:0;
  transition:max-height 0.5s ease, opacity 0.3s ease;
}


.collapsible:not(.hidden){
  max-height:400px;
  opacity:1;
  scrollbar-width:none;
}

.collapsible:not(.hidden)::-webkit-scrollbar{
  display:none;
}

.hidden{
  max-height:0;
  opacity:0;
  overflow:hidden;
}

/* TOGGLE */

.toggle-btn{
  display:flex;
  justify-content:space-between;
  align-items:center;
  cursor:pointer;
  user-select:none;
}

.toggle-btn .arrow{
  transition:0.3s ease;
}

.toggle-btn.active .arrow{
  transform:rotate(180deg);
}

/* ========================================
   ANIMATION
======================================== */

.reveal{
  opacity:0;
  transform:translateY(40px);
  transition:0.8s ease;
}

.reveal.active{
  opacity:1;
  transform:translateY(0);
}

.fade{
  animation:fadeEffect 0.6s ease;
}

@keyframes fadeEffect{
  from{opacity:0.4;}
  to{opacity:1;}
}

/* ========================================
   MOBILE
======================================== */

@media(max-width:768px){

  section{
    padding:0 5%;
  }

  .performances h2,
  .music h2,
  .events h2{
    font-size:2rem;
  }

  .slideshow-container{
    height:auto;
  }

  .perf-slide{
    position:relative;
  }

  .perf-slide img{
    width:100%;
    height:auto;
    object-fit:contain;
  }

  .video-card iframe{
    height:200px;
  }

  .page-content{
  margin-top:60px;
}
}



@media (min-width: 769px){
  main{
    padding-top:100px; /* adjust to match navbar height */
  }
}