/* Julie Faes V21 – HYROX responsive: never overlay navigation/actions over faces.
   Desktop (>1200px) keeps the original approved hero appearance. */

/* HYROX is the sole current main-nav page (including the opened mobile menu). */
body.hyrox-detail-page .hyrox-page-nav .nav-links > a:not(.nav-cta):not([aria-current="page"]) {
  color:#f3f3f3 !important;
}
body.hyrox-detail-page .hyrox-page-nav .nav-links > a[aria-current="page"] {
  color:#ffed00 !important;
  font-weight:900;
}
@media (min-width:969px) {
  body.hyrox-detail-page .hyrox-page-nav .nav-links > a[aria-current="page"]::before {
    content:"";
    position:absolute;
    inset:auto 0 -10px;
    height:2px;
    border-radius:999px;
    background:#ffed00;
  }
  body.hyrox-detail-page .hyrox-page-nav .nav-links > a[aria-current="page"] {
    position:relative;
  }
}
@media (max-width:968px) {
  body.hyrox-detail-page .hyrox-page-nav .nav-links > a[aria-current="page"] {
    background:rgba(255,237,0,.12) !important;
    border-color:rgba(255,237,0,.58) !important;
    box-shadow:inset 3px 0 0 #ffed00;
  }
}

/* Keep the new wrapper invisible to the existing 2-column desktop grid. */
@media (min-width:1201px) {
  .hyrox-hero.jf-hyrox-stage > .jf-hyrox-media {
    position:absolute;
    inset:0;
    z-index:0;
    overflow:hidden;
    pointer-events:none;
  }
  .hyrox-hero.jf-hyrox-stage .jf-hyrox-stage__backdrop {
    position:absolute;
    inset:0;
  }
}

/* A split editorial layout replaces the giant sky/overlaid-title hero on small desktops. */
@media (min-width:969px) and (max-width:1200px) {
  .hyrox-hero.jf-hyrox-stage {
    display:grid;
    grid-template-columns:minmax(0,43%) minmax(0,57%);
    grid-template-rows:minmax(370px, auto) auto auto;
    gap:0;
    position:relative;
    width:100%;
    height:auto;
    min-height:0;
    margin:80px 0 0;
    padding:0 !important;
    overflow:hidden;
    isolation:isolate;
    background:#071525;
  }
  .hyrox-hero.jf-hyrox-stage::after {display:none}
  .hyrox-hero.jf-hyrox-stage .jf-hyrox-media {
    position:relative;
    grid-column:2;
    grid-row:1 / 3;
    width:100%;
    height:100%;
    min-height:0;
    overflow:hidden;
    background:#0b1420;
    isolation:isolate;
  }
  .hyrox-hero.jf-hyrox-stage .jf-hyrox-stage__backdrop {
    position:absolute;
    inset:0;
    background-position:center 68%;
    background-size:cover;
    z-index:0;
  }
  .hyrox-hero.jf-hyrox-stage .jf-hyrox-stage__backdrop:first-child {
    background-image:url('../img/julie-2026/team-outdoor-hero.webp') !important;
    background-position:50% 50%;
  }
  .hyrox-hero.jf-hyrox-stage .jf-hyrox-stage__backdrop::after {
    background:linear-gradient(90deg,rgba(4,12,20,.10),transparent 35%),linear-gradient(0deg,rgba(4,10,16,.19),transparent 40%);
  }
  .hyrox-hero.jf-hyrox-stage .jf-hyrox-stage__slides {
    grid-column:1;
    grid-row:1;
    display:block;
    align-self:stretch;
    position:relative;
    min-height:0;
    padding:clamp(34px,4vw,50px) clamp(26px,3.5vw,47px) 18px;
    background:linear-gradient(150deg,#071525 0%,#0c2137 100%);
    z-index:2;
  }
  .hyrox-hero.jf-hyrox-stage .jf-hyrox-slide {
    grid-area:auto;
    max-width:none;
    margin:0;
    padding:0;
    transform:none;
  }
  .hyrox-hero.jf-hyrox-stage .jf-hyrox-slide:not(.is-active) {display:none !important;}
  .hyrox-hero.jf-hyrox-stage .jf-hyrox-slide.is-active {display:block;}
  .hyrox-hero.jf-hyrox-stage .jf-hyrox-slide .tag {
    display:inline-flex;
    margin:0 0 15px;
    font-size:.73rem;
  }
  .hyrox-hero.jf-hyrox-stage .jf-hyrox-slide h1 {
    font-size:clamp(2.05rem,3.9vw,3.55rem);
    max-width:16ch;
    line-height:1.07;
    letter-spacing:-.035em;
    margin:0 0 15px;
    overflow-wrap:normal;
  }
  .hyrox-hero.jf-hyrox-stage .jf-hyrox-slide p {
    max-width:46ch;
    font-size:.96rem;
    line-height:1.65;
    margin:0;
    color:rgba(255,255,255,.83);
  }
  .hyrox-hero.jf-hyrox-stage .hyrox-hero__actions {
    display:flex;
    flex-wrap:wrap;
    gap:9px;
    margin-top:20px;
  }
  .hyrox-hero.jf-hyrox-stage .hyrox-btn {
    width:auto;
    min-height:42px;
    padding:11px 14px;
    font-size:.7rem;
    line-height:1.3;
  }
  .hyrox-hero.jf-hyrox-stage .jf-hyrox-controls {
    position:relative;
    inset:auto;
    grid-column:1;
    grid-row:2;
    align-self:stretch;
    justify-content:flex-start;
    padding:12px clamp(26px,3.5vw,47px) 24px;
    background:#0c2137;
    margin:0;
    z-index:3;
  }
  .hyrox-hero.jf-hyrox-stage .hyrox-hero__event {
    grid-row:3;
    grid-column:1 / -1;
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1.15fr) auto;
    gap:8px 28px;
    align-items:center;
    width:100%;
    max-width:none;
    margin:0;
    border:0;
    border-radius:0;
    padding:25px clamp(26px,5vw,65px);
    background:#0a0d11;
    box-shadow:none;
    backdrop-filter:none;
  }
  .hyrox-hero.jf-hyrox-stage .hyrox-hero__event .hyrox-eyebrow {grid-column:1;grid-row:1;}
  .hyrox-hero.jf-hyrox-stage .hyrox-hero__event h2 {grid-column:1;grid-row:2;margin:0;font-size:1.3rem;max-width:none;}
  .hyrox-hero.jf-hyrox-stage .hyrox-hero__event p {grid-column:2;grid-row:1 / 3;margin:0;font-size:.91rem;max-width:40ch;}
  .hyrox-hero.jf-hyrox-stage .hyrox-hero__event a {grid-column:3;grid-row:1 / 3;margin:0;min-width:170px;}
}

/* Tablet and phone: image first, then readable solid-color copy and controls. */
@media (max-width:968px) {
  .hyrox-hero.jf-hyrox-stage {
    display:flex;
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
    width:100%;
    height:auto;
    min-height:0;
    max-height:none;
    margin:80px 0 0;
    padding:0 !important;
    gap:0;
    background:#071525;
    overflow:hidden;
    isolation:isolate;
  }
  .hyrox-hero.jf-hyrox-stage::after {display:none;}
  .hyrox-hero.jf-hyrox-stage > .jf-hyrox-media {
    position:relative;
    inset:auto;
    flex:none;
    order:0;
    width:100%;
    height:auto;
    aspect-ratio:2048 / 1216;
    margin:0;
    overflow:hidden;
    z-index:1;
    background:#081827;
    pointer-events:none;
  }
  .hyrox-hero.jf-hyrox-stage .jf-hyrox-stage__backdrop {
    position:absolute;
    inset:0;
    z-index:0;
    background-position:center;
    background-size:cover;
    transform:none;
  }
  .hyrox-hero.jf-hyrox-stage .jf-hyrox-stage__backdrop.is-active {transform:none;}
  .hyrox-hero.jf-hyrox-stage .jf-hyrox-stage__backdrop:first-child {
    background-image:url('../img/julie-2026/team-outdoor-hero.webp') !important;
  }
  .hyrox-hero.jf-hyrox-stage .jf-hyrox-stage__backdrop::after {
    background:linear-gradient(0deg,rgba(4,10,16,.14),transparent 32%);
  }
  .hyrox-hero.jf-hyrox-stage .jf-hyrox-stage__slides {
    display:block;
    position:relative;
    width:100%;
    order:1;
    flex:none;
    padding:clamp(26px,5vw,42px) clamp(20px,5vw,44px) 20px;
    align-self:stretch;
    background:linear-gradient(140deg,#071525 0%,#0b1f33 100%);
    z-index:2;
  }
  .hyrox-hero.jf-hyrox-stage .jf-hyrox-slide {
    display:block;
    position:relative;
    grid-area:auto;
    max-width:none;
    height:auto;
    padding:0;
    margin:0;
    opacity:0;
    visibility:hidden;
    transform:none;
  }
  .hyrox-hero.jf-hyrox-stage .jf-hyrox-slide:not(.is-active) {display:none !important;}
  .hyrox-hero.jf-hyrox-stage .jf-hyrox-slide.is-active {
    display:block;
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:none;
  }
  .hyrox-hero.jf-hyrox-stage .jf-hyrox-slide .tag {
    display:inline-flex;
    align-items:center;
    margin:0 0 19px;
    line-height:1.35;
    letter-spacing:.075em;
    font-size:clamp(.64rem,1.35vw,.76rem);
  }
  .hyrox-hero.jf-hyrox-stage .jf-hyrox-slide h1 {
    font-size:clamp(2.3rem,7vw,4.25rem);
    line-height:1.04;
    letter-spacing:-.045em;
    margin:0 0 16px;
    max-width:14ch;
    overflow-wrap:normal;
    text-wrap:balance;
  }
  .hyrox-hero.jf-hyrox-stage .jf-hyrox-slide p {
    margin:0;
    max-width:58ch;
    font-size:clamp(.95rem,2.2vw,1.07rem);
    line-height:1.6;
    color:rgba(255,255,255,.87);
  }
  .hyrox-hero.jf-hyrox-stage .hyrox-hero__actions {
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    width:100%;
    margin-top:21px;
  }
  .hyrox-hero.jf-hyrox-stage .hyrox-btn {
    display:inline-flex;
    width:auto;
    flex:0 1 auto;
    min-height:45px;
    margin:0;
    padding:12px 19px;
    font-size:.75rem;
    line-height:1.32;
    text-align:center;
  }
  .hyrox-hero.jf-hyrox-stage .jf-hyrox-controls {
    position:relative;
    inset:auto;
    order:2;
    display:flex;
    justify-content:center;
    align-items:center;
    width:100%;
    margin:0;
    padding:12px 20px 20px;
    min-height:68px;
    background:#0b1f33;
    z-index:3;
    border:0;
  }
  .hyrox-hero.jf-hyrox-stage .jf-hyrox-controls button {
    width:40px;
    height:40px;
  }
  .hyrox-hero.jf-hyrox-stage .jf-hyrox-controls [data-jf-dot] {
    width:36px;
  }
  .hyrox-hero.jf-hyrox-stage .hyrox-hero__event {
    position:relative;
    order:3;
    flex:none;
    margin:0;
    padding:clamp(20px,5vw,34px);
    width:100%;
    max-width:none;
    border:0;
    border-top:1px solid rgba(255,255,255,.1);
    border-radius:0;
    box-shadow:none;
    background:#0a0c0f;
    backdrop-filter:none;
    z-index:2;
  }
  .hyrox-hero.jf-hyrox-stage .hyrox-hero__event .hyrox-eyebrow {margin:0;}
  .hyrox-hero.jf-hyrox-stage .hyrox-hero__event h2 {
    font-size:clamp(1.2rem,4vw,1.65rem);
    line-height:1.12;
    margin:14px 0 10px;
  }
  .hyrox-hero.jf-hyrox-stage .hyrox-hero__event p {
    font-size:.94rem;
    line-height:1.6;
    max-width:65ch;
    margin:0;
  }
  .hyrox-hero.jf-hyrox-stage .hyrox-hero__event a {
    width:fit-content;
    margin-top:18px;
    min-width:0;
  }
}
@media (max-width:560px) {
  .hyrox-hero.jf-hyrox-stage .jf-hyrox-stage__slides {
    padding:26px 18px 18px;
  }
  .hyrox-hero.jf-hyrox-stage .jf-hyrox-slide h1 {
    font-size:clamp(2.04rem,10.4vw,3.2rem);
    max-width:14ch;
    line-height:1.06;
  }
  .hyrox-hero.jf-hyrox-stage .jf-hyrox-slide .tag {margin-bottom:17px;}
  .hyrox-hero.jf-hyrox-stage .jf-hyrox-slide p {
    font-size:clamp(.93rem,3.65vw,1rem);
    line-height:1.59;
    max-width:42ch;
  }
  .hyrox-hero.jf-hyrox-stage .hyrox-hero__actions {
    flex-direction:column;
    gap:10px;
    margin-top:22px;
  }
  .hyrox-hero.jf-hyrox-stage .hyrox-btn {
    width:100%;
    flex:none;
    justify-content:center;
    min-height:47px;
  }
  .hyrox-hero.jf-hyrox-stage .hyrox-hero__event {
    padding:25px 20px 29px;
  }
  .hyrox-hero.jf-hyrox-stage .hyrox-hero__event a {width:100%;}
}
@media (prefers-reduced-motion:reduce) {
  .hyrox-hero.jf-hyrox-stage .jf-hyrox-stage__backdrop,
  .hyrox-hero.jf-hyrox-stage .jf-hyrox-slide {transition:none !important;}
}