/* =========================================================
   EVENTS SECTION — Auto-play Accordion (GSAP)
   Desktop: horizontal accordion
   <992: vertical accordion
========================================================= */

.section-events{
  --ev-bg1:#05070d;
  --ev-bg2:#0b1020;
  --ev-stroke:rgba(255,255,255,0.14);
  --ev-soft:rgba(255,255,255,0.08);
  --ev-text:#eef4ff;
  --ev-muted:rgba(238,244,255,0.72);

  --ev-orange:#ef8e01;
  --ev-teal:#009e96;
  --ev-brown:#391a00;

  height: 100svh;
  min-height: 100vh;
  max-height: 100svh;

  position: relative;
  overflow: hidden;
  color: var(--ev-text);

  background:
    radial-gradient(900px 520px at 14% 18%, rgba(0,158,150,0.14), transparent 60%),
    radial-gradient(900px 560px at 86% 78%, rgba(239,142,1,0.12), transparent 65%),
    linear-gradient(180deg, var(--ev-bg2) 0%, var(--ev-bg1) 100%);
}

.section-events::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.10;
  background-image:
    linear-gradient(rgba(255,255,255,0.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.10) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: radial-gradient(circle at 55% 35%, black 32%, transparent 78%);
}

.events-bg{
  position:absolute;
  inset:-2px;
  pointer-events:none;
  background:
    radial-gradient(320px 220px at 72% 14%, rgba(255,255,255,0.06), transparent 72%),
    radial-gradient(320px 220px at 20% 86%, rgba(255,255,255,0.05), transparent 72%);
  opacity:.85;
}

.events-container{
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-block: 14px;
  min-height: 0;
}

.events-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 12px;
}

.events-kicker{
  display:flex;
  align-items:center;
  gap: 10px;
  margin-bottom: 6px;
}

.events-eyebrow{
  font-size: .70rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-weight: 900;
  color: rgba(255,255,255,0.78);
}

.events-mark{
  width: 24px;
  height: 18px;
  opacity: .9;
}

.events-title{
  margin: 0;
  font-size: clamp(1.10rem, 1rem + 1.2vw, 1.8rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.events-lead{
  margin: 8px 0 0;
  max-width: 72ch;
  color: var(--ev-muted);
  line-height: 1.55;
  font-size: 0.90rem;

  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.events-head__right{
  display:flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-end;
  min-width: 160px;
  flex: 0 0 auto;
}

.events-auto{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.05);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
}

.events-auto__dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--ev-orange), var(--ev-teal));
  box-shadow: 0 0 14px rgba(0,158,150,0.25);
}

.events-auto__label{
  font-size: .76rem;
  color: rgba(255,255,255,0.86);
  font-weight: 900;
  letter-spacing: .02em;
}

.events-auto__btn{
  appearance:none;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.14);
  color: rgba(255,255,255,0.92);
  border-radius: 999px;
  padding: 6px 10px;
  font-weight: 900;
  font-size: .72rem;
  cursor:pointer;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.events-auto__btn:hover{
  transform: translateY(-1px);
  border-color: rgba(0,158,150,0.28);
  background: rgba(255,255,255,0.05);
}

.events-progress{
  width: 160px;
  height: 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
  overflow:hidden;
}
.events-progress__bar{
  display:block;
  height:100%;
  width:100%;
  transform: scaleX(0);
  transform-origin: left;
  background: linear-gradient(90deg, rgba(239,142,1,0.85), rgba(0,158,150,0.85));
  box-shadow: 0 0 18px rgba(0,158,150,0.18);
}

.events-stage{
  flex: 1;
  min-height: 0;
  display:flex;
}

/* =========================
   ACCORDION
========================= */
.events-accordion{
  flex: 1;
  min-height: 0;
  display:flex;
  gap: 12px;
  align-items: stretch;
}

.ev-panel{
  position: relative;
  flex: 1 1 0;
  min-width: 72px;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.03);
  isolation: isolate;
  cursor: pointer;
  box-shadow: 0 18px 50px rgba(0,0,0,0.28);
  transform: translateZ(0);
}

.ev-hit{
  position:absolute;
  inset:0;
  z-index: 10;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.ev-media{
  position:absolute;
  inset:0;
  z-index: 1;
  background: rgba(0,0,0,0.25);
}
.ev-img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  filter: saturate(0.95) contrast(1.05);
  transition: transform .65s cubic-bezier(.22,1,.36,1);
}

.ev-overlay{
  position:absolute;
  inset:0;
  z-index: 2;
  background: linear-gradient(180deg, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0.65) 72%, rgba(0,0,0,0.82) 100%);
}

.ev-panel::before{
  content:"";
  position:absolute;
  inset:0;
  z-index: 3;
  pointer-events:none;
  opacity: .9;
  background:
    radial-gradient(220px 140px at 10% 14%, rgba(255,255,255,0.10), transparent 70%),
    radial-gradient(220px 140px at 90% 86%, rgba(0,158,150,0.10), transparent 72%);
}

.ev-shine{
  position:absolute;
  inset:-30%;
  z-index: 6;
  pointer-events:none;
  background: linear-gradient(100deg,
    transparent 22%,
    rgba(255,255,255,0.10) 45%,
    rgba(0,158,150,0.10) 55%,
    transparent 78%);
  transform: translateX(-120%) rotate(10deg);
  opacity: 0;
}

.ev-label{
  position:absolute;
  left: 12px;
  bottom: 12px;
  z-index: 5;
  display:flex;
  flex-direction: column;
  gap: 6px;
  max-width: 22ch;
  pointer-events:none;
}
.ev-label__k{
  display:inline-flex;
  align-items:center;
  padding: 6px 10px;
  width: fit-content;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(0,0,0,0.22);
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 900;
  color: rgba(255,255,255,0.86);
}
.ev-label__t{
  font-size: .90rem;
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: rgba(255,255,255,0.96);
  text-shadow: 0 10px 30px rgba(0,0,0,0.55);
}

.ev-content{
  position:absolute;
  inset: 0;
  z-index: 7;
  padding: 14px 14px 16px;
  display:flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 10px;
  pointer-events: none;
  opacity: 0;
}

.ev-top{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
}

.ev-badge{
  display:inline-flex;
  align-items:center;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 900;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(0,0,0,0.20);
}
.ev-badge--teal{ border-color: rgba(0,158,150,0.30); background: rgba(0,158,150,0.12); }
.ev-badge--orange{ border-color: rgba(239,142,1,0.30); background: rgba(239,142,1,0.12); }

.ev-date{
  font-size: .76rem;
  color: rgba(255,255,255,0.78);
  font-weight: 800;
}

.ev-title{
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-wrap: balance;

  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ev-desc{
  margin: 0;
  color: rgba(255,255,255,0.78);
  line-height: 1.55;
  font-size: .90rem;

  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ev-meta{
  display:flex;
  align-items:center;
  gap: 10px;
  flex-wrap: wrap;
  color: rgba(255,255,255,0.76);
  font-size: .82rem;
  font-weight: 700;
}
.ev-meta__item{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
}

.ev-link{
  margin-top: 2px;
  width: fit-content;
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 999px;
  text-decoration:none;
  font-weight: 900;
  color: rgba(255,255,255,0.95);
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(0,0,0,0.18);
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
  pointer-events: auto;
}
.ev-link:hover{
  transform: translateY(-1px);
  border-color: rgba(0,158,150,0.28);
  background: rgba(255,255,255,0.06);
}

.ev-chart{
  position: relative;
  height: 16px;
  margin-top: 2px;
  opacity: .92;
}
.ev-chart__line{
  position:absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  transform: translateY(-50%);
  background: linear-gradient(90deg, rgba(239,142,1,.32), rgba(0,158,150,.28), rgba(255,255,255,.10));
}
.ev-chart__dot{
  position:absolute;
  top: 50%;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  transform: translateY(-50%);
  box-shadow: 0 0 0 3px rgba(0,0,0,0.35);
}
.ev-chart__dot--1{ left: 16%; background: var(--ev-orange); }
.ev-chart__dot--2{ left: 52%; background: var(--ev-teal); }
.ev-chart__dot--3{ left: 86%; background: rgba(239,142,1,0.85); }

/* active vs inactive */
.ev-panel.is-active{
  flex: 3.4 1 0;
  border-color: rgba(255,255,255,0.18);
}
.ev-panel.is-active .ev-img{ transform: scale(1.10); }
.ev-panel.is-active .ev-content{ opacity: 1; }
.ev-panel.is-active .ev-label{ opacity: 0; }

/* =========================
   Breakpoints (your system)
========================= */

@media (min-width: 576px){
  .events-container{ padding-block: 16px; gap: 14px; }
  .events-progress{ width: 210px; }
  .events-lead{ font-size: .94rem; }
  .ev-title{ font-size: 1.12rem; }
  .ev-desc{ font-size: .94rem; }
}

@media (min-width: 768px){
  .events-title{ font-size: clamp(1.25rem, 1rem + 1.3vw, 2.0rem); }
  .events-head__right{ min-width: 220px; }
  .ev-content{ padding: 16px 16px 18px; }
  .ev-title{ font-size: 1.22rem; }
  .ev-desc{ font-size: .98rem; }
}

@media (min-width: 992px){
  .events-container{ padding-block: 18px; }
  .events-head{ align-items: flex-end; }
  .events-head__right{ min-width: 240px; }
  .ev-panel{ min-width: 92px; }
  .ev-title{ font-size: 1.35rem; }
  .ev-desc{ font-size: 1.00rem; }
}

/* Decision: <992 = vertical accordion (more premium than “dot slider” here) */
@media (max-width: 991.98px){
  .events-head{
    flex-direction: column;
    align-items: flex-start;
  }

  .events-head__right{
    align-items: flex-start;
    flex-direction: row;
    gap: 12px;
  }

  .events-stage{ min-height: 0; }

  .events-accordion{
    flex-direction: column;
  }

  .ev-panel{
    min-height: 70px;
    flex: 1 1 0;
  }

  .ev-panel.is-active{
    flex: 4.2 1 0;
  }

  /* slightly reduce padding to keep everything inside 100vh */
  .ev-content{ padding: 12px 12px 14px; }
  .ev-meta{ gap: 8px; font-size: .80rem; }
  .ev-meta__item{ padding: 5px 9px; }
}

@media (min-width: 1200px){
  .ev-panel{ min-width: 102px; }
  .ev-title{ font-size: 1.55rem; }
}

@media (min-width: 1400px){
  .events-container{ padding-block: 22px; }
  .ev-title{ font-size: 1.65rem; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .ev-img{ transition: none !important; transform: none !important; }
}

/* =========================================================
   EVENTS SECTION — MOBILE FIXES
   1) Allow section to grow a bit on mobile/tablet
   2) Prevent progress bar overflow
========================================================= */
/* =========================================================
   MOBILE/TABLET: vertical accordion using FLEX-BASIS (stable)
   - We DO NOT animate height (flex layout will fight it)
   - We animate flex-basis in JS (elastic)
========================================================= */
@media (max-width: 991.98px){

  /* section can be taller on mobile */
  .section-events{
    height: auto;
    max-height: none;
    min-height: 100svh;
    padding-bottom: 18px;
  }

  .events-container{
    height: auto;
    min-height: 100svh;
  }

  .events-head{
    flex-direction: column;
    align-items: flex-start;
  }

  .events-head__right{
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
  }

  .events-auto{
    width: 100%;
    justify-content: space-between;
  }

  .events-progress{
    width: 100%;
    max-width: 100%;
  }

  .events-stage{
    flex: none;
    min-height: 0;
    display: block;
  }

  .events-accordion{
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  /* IMPORTANT: override base flex (this is what was causing snap-back) */
  .ev-panel{
    flex: 0 0 66px !important;       /* collapsed size  88 */
    overflow: hidden;
    min-width: 0;
  }

  /* fallback if JS is disabled */
  .ev-panel.is-active{
    flex-basis: 320px !important;     /* expanded size 420 */
  }

  /* slightly tighter copy on mobile */
  .ev-content{
    padding: 12px 12px 14px;
  }

  .ev-title{
    font-size: 1.05rem;
    -webkit-line-clamp: 2;
  }

  .ev-desc{
    font-size: .90rem;
    -webkit-line-clamp: 3;
  }

  .ev-meta{
    font-size: .80rem;
    gap: 8px;
  }

  .ev-meta__item{
    padding: 5px 9px;
  }
}

/* desktop stays immersive */
@media (min-width: 992px){
  .section-events{
    height: 100svh;
    min-height: 100vh;
    max-height: 100svh;
  }
}