/* ==========================================================================
   Event World Carousel  (.ewc)
   "Choose the World" — chip-driven switcher for one event photo. Independent
   of MakeBelieveTransition (.mbt); no reveal animation, N states not 2.
   Colors/fonts mirror index.html + pages.css tokens.
   ========================================================================== */

.ewc{ margin:0; }

/* Full-width featured placement above the static .gallery grid (see
   pages.css): the interactive photo gets its own larger frame so the
   world-switching is easy to see and use, distinct from the plain photos
   underneath it. */
.ewc-featured{
  margin:0 0 34px;
}

.ewc-frame{
  position:relative;
  width:100%;
  aspect-ratio:var(--ewc-ratio, 16 / 9);
  border-radius:14px;
  overflow:hidden;
  background:var(--deep,#0D1B2E);
  isolation:isolate;
}
.ewc-img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;object-position:center;
  display:block;margin:0;
  transition:opacity .38s ease;
}
.ewc-frame.is-fading .ewc-img{ opacity:.12; }
@media(prefers-reduced-motion:reduce){
  .ewc-img{ transition:none; }
  .ewc-frame.is-fading .ewc-img{ opacity:1; }
}

/* visually hidden but announced */
.ewc-status{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

.ewc-heading{
  font-family:'Outfit',sans-serif;font-weight:700;font-size:12.5px;
  letter-spacing:1.5px;text-transform:uppercase;color:var(--teal,#0ABFBF);
  margin:20px 0 10px;
}

.ewc-chips{
  display:flex;flex-wrap:wrap;gap:8px;
  margin:0 0 10px;
}
.ewc-chip{
  font-family:'Outfit',sans-serif;font-weight:700;font-size:13px;letter-spacing:.3px;
  color:var(--deep,#0D1B2E);
  background:var(--stardust,#F5F1EB);
  border:1.5px solid rgba(13,27,46,0.18);
  border-radius:30px;
  padding:9px 16px;
  cursor:pointer;
  white-space:nowrap;
  transition:background .16s,border-color .16s,color .16s;
}
.ewc-chip:hover{ border-color:rgba(232,83,42,0.55); }
.ewc-chip:focus-visible{ outline:2px solid var(--flame,#E8532A); outline-offset:2px; }
.ewc-chip[aria-pressed="true"]{
  background:var(--flame,#E8532A);
  border-color:var(--flame,#E8532A);
  color:#fff;
}

.ewc-caption{
  font-size:15px;line-height:1.55;opacity:.85;margin:16px 0 0;
}

@media(max-width:520px){
  .ewc-chips{
    flex-wrap:nowrap;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity;
    padding-bottom:2px;
  }
  .ewc-chip{ scroll-snap-align:start; }
}