/* V22 – consistent two-page carousel and navigation.
   Compact layouts present only the validated group-photo slide.
   On larger screens the same controls operate both two-slide carousels. */

/* No permanent active highlight on a link merely pointing to HYROX. */
.navbar .nav-links > a.jf-nav-highlight:not([aria-current]),
.navbar .nav-links > a:not([aria-current]):not(.nav-cta) {
  color:#f4f4f4 !important;
}
.navbar .nav-links > a.jf-page-current,
.navbar .nav-links > a[aria-current="page"],
.navbar .nav-links > a[aria-current="location"] {
  color:#ffed00 !important;
}
@media (min-width:969px) {
  .navbar .nav-links > a.jf-page-current:not(.nav-cta)::before,
  .navbar .nav-links > a[aria-current]:not(.nav-cta)::before {
    content:"";
    position:absolute;
    inset:auto 0 -10px;
    height:2px;
    background:#ffed00;
    border-radius:2px;
  }
  .navbar .nav-links > a.jf-page-current:not(.nav-cta),
  .navbar .nav-links > a[aria-current]:not(.nav-cta) {
    position:relative;
  }
}
@media (max-width:968px) {
  .navbar .nav-links > a.jf-page-current:not(.nav-cta),
  .navbar .nav-links > a[aria-current]:not(.nav-cta) {
    background:rgba(255,237,0,.11) !important;
    border-color:rgba(255,237,0,.5) !important;
    box-shadow:inset 3px 0 0 #ffed00;
  }
}

/* On mobile, tablet and compact desktop, there is ONE slide per hero.
   Hide the alternative studio-only slide and redundant arrows/dots. */
@media (max-width:1200px) {
  .hero.jf-home-hero [data-jf-slide="1"],
  .hyrox-hero.jf-hyrox-stage [data-jf-slide="1"] {
    display:none !important;
    visibility:hidden !important;
    opacity:0 !important;
    pointer-events:none !important;
  }
  .hero.jf-home-hero [data-jf-backdrop="1"],
  .hyrox-hero.jf-hyrox-stage [data-jf-backdrop="1"] {
    display:none !important;
    opacity:0 !important;
  }
  .hero.jf-home-hero > .jf-carousel-controls,
  .hyrox-hero.jf-hyrox-stage > .jf-carousel-controls {
    display:none !important;
  }
  /* HOME: no empty controls strip underneath the approved team photo. */
  .hero.jf-home-hero .jf-team-photo-link {cursor:zoom-in;}
  /* HYROX: the event panel is now adjacent to real hero content, not a slider bar. */
  .hyrox-hero.jf-hyrox-stage .hyrox-hero__event {z-index:3;}
}

/* Desktop: identical pill, arrows, timeline dots and counter on both pages. */
@media (min-width:1201px) {
  .hero.jf-home-hero > .jf-carousel-controls,
  .hyrox-hero.jf-hyrox-stage > .jf-carousel-controls {
    position:absolute;
    z-index:15;
    left:clamp(22px,4.8vw,76px);
    bottom:clamp(20px,3vw,36px);
    right:auto;
    width:auto;
    height:auto;
    min-height:50px;
    margin:0;
    padding:7px 10px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    background:rgba(5,11,17,.78);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    border:1px solid rgba(255,255,255,.18);
    border-radius:999px;
    box-shadow:0 12px 34px rgba(0,0,0,.25);
    color:#fff;
  }
  .hero.jf-home-hero > .jf-carousel-controls .jf-slider-arrow,
  .hyrox-hero.jf-hyrox-stage > .jf-carousel-controls .jf-slider-arrow {
    width:36px;
    height:36px;
    flex:none;
    display:grid;
    place-items:center;
    padding:0;
    border:1px solid rgba(255,255,255,.36);
    border-radius:50%;
    color:#fff;
    background:transparent;
    font-size:1rem;
    line-height:1;
    cursor:pointer;
    transition:background .2s ease, color .2s ease, border-color .2s ease;
  }
  .hero.jf-home-hero > .jf-carousel-controls .jf-slider-arrow:hover,
  .hyrox-hero.jf-hyrox-stage > .jf-carousel-controls .jf-slider-arrow:hover,
  .hero.jf-home-hero > .jf-carousel-controls .jf-slider-arrow:focus-visible,
  .hyrox-hero.jf-hyrox-stage > .jf-carousel-controls .jf-slider-arrow:focus-visible {
    background:#ffed00;
    color:#080a0c;
    border-color:#ffed00;
  }
  .hero.jf-home-hero > .jf-carousel-controls .jf-slider-dots,
  .hyrox-hero.jf-hyrox-stage > .jf-carousel-controls .jf-slider-dots {
    display:inline-flex;
    align-items:center;
    gap:5px;
  }
  .hero.jf-home-hero > .jf-carousel-controls [data-jf-dot],
  .hyrox-hero.jf-hyrox-stage > .jf-carousel-controls [data-jf-dot] {
    display:grid;
    place-items:center;
    width:31px;
    height:29px;
    border:0;
    border-radius:4px;
    padding:0;
    margin:0;
    background:transparent;
    cursor:pointer;
  }
  .hero.jf-home-hero > .jf-carousel-controls [data-jf-dot] span,
  .hyrox-hero.jf-hyrox-stage > .jf-carousel-controls [data-jf-dot] span {
    display:block;
    width:23px;
    height:3px;
    border-radius:2px;
    background:rgba(255,255,255,.48);
  }
  .hero.jf-home-hero > .jf-carousel-controls [data-jf-dot].is-active span,
  .hyrox-hero.jf-hyrox-stage > .jf-carousel-controls [data-jf-dot].is-active span {
    background:#ffed00;
  }
  .hero.jf-home-hero > .jf-carousel-controls .jf-slider-count,
  .hyrox-hero.jf-hyrox-stage > .jf-carousel-controls .jf-slider-count {
    display:inline-block;
    margin:0 5px;
    white-space:nowrap;
    font-family:'Space Grotesk',sans-serif;
    font-size:.73rem;
    line-height:1;
    letter-spacing:.14em;
    font-weight:800;
    color:rgba(255,255,255,.78);
  }
  .hero.jf-home-hero > .jf-carousel-controls .jf-slider-count span,
  .hyrox-hero.jf-hyrox-stage > .jf-carousel-controls .jf-slider-count span {
    color:#fff;
  }
}