/* Section styles: cardio (#tim): Program 02, giant 5x5, coach cards.
   Unlayered, so it overrides css/base.css. Every selector is scoped under [data-section="cardio"]. */

/* ------------------------------------------------------------------ giant outline 5x5 (two parallax layers) */
[data-section="cardio"] .cardio__big {
  position: absolute; z-index: -1; top: clamp(8px, 4vw, 64px); right: 0; left: 0; height: 0;
  pointer-events: none;
}
[data-section="cardio"] .cardio__big-line {
  position: absolute; top: 0; right: -.04em; margin: 0; max-width: none; white-space: nowrap;
  font-size: clamp(210px, 46vw, 720px); line-height: .9; letter-spacing: -.01em;
  -webkit-text-stroke: 1.5px rgba(237, 232, 223, .15);
  will-change: transform;
}
[data-section="cardio"] .cardio__big-line--blood {
  -webkit-text-stroke: 1.5px rgba(217, 28, 28, .42);
  translate: -.035em .045em;
}
@media (max-width: 759.98px) {
  [data-section="cardio"] .cardio__big { top: clamp(20px, 10vw, 60px); }
  [data-section="cardio"] .cardio__big-line { -webkit-text-stroke-width: 1px; }
}

/* ------------------------------------------------------------------ head */
[data-section="cardio"] .cardio__intro p { color: var(--bone); }

/* ------------------------------------------------------------------ roster: grid (>= 760px or short landscape) */
[data-section="cardio"] .cardio__roster { display: grid; gap: var(--gap); margin: 0; padding: 0; list-style: none; }
@media (min-width: 760px) {
  [data-section="cardio"] .cardio__roster { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (orientation: landscape) and (max-height: 520px) {
  [data-section="cardio"] .cardio__roster { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  [data-section="cardio"] .coach__media { --ar: 1 / 1 !important; }
}

/* ------------------------------------------------------------------ roster: phone carousel with next-card peek */
@media (max-width: 759.98px) and (orientation: portrait), (max-width: 759.98px) and (min-height: 521px) {
  [data-section="cardio"] [data-layout="carousel"] .cardio__roster {
    display: flex; gap: 12px;
    overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    margin-inline: calc(-1 * var(--safe-l)) calc(-1 * var(--safe-r));
    padding: 6px var(--safe-r) 8px var(--safe-l);
    scroll-padding-inline: var(--safe-l) var(--safe-r);
  }
  [data-section="cardio"] [data-layout="carousel"] .cardio__roster::-webkit-scrollbar { display: none; }
  [data-section="cardio"] [data-layout="carousel"] .coach {
    flex: 0 0 min(360px, calc(100vw - var(--safe-l) - 60px));
    scroll-snap-align: start; scroll-snap-stop: always;
  }
  /* only once the script runs the carousel (no JS, or before it boots: every card fully legible) */
  [data-section="cardio"] [data-layout="carousel"][data-mode="carousel"] .coach:not(.is-current) .coach__media,
  [data-section="cardio"] [data-layout="carousel"][data-mode="carousel"] .coach:not(.is-current) .coach__body > * { opacity: .55; }
  [data-section="cardio"] [data-layout="carousel"] .cardio__dots:not([hidden]) { display: flex; }
}

/* ------------------------------------------------------------------ coach card */
[data-section="cardio"] .coach {
  position: relative; display: flex; flex-direction: column; min-width: 0;
  background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  transition: border-color .4s var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
[data-section="cardio"] .coach:focus-visible { outline: 2px solid var(--bone); outline-offset: -2px; }
[data-section="cardio"] .coach.is-on { border-color: rgba(217, 28, 28, .55); }
[data-section="cardio"] .coach__media { border-radius: 0; flex: 0 0 auto; transition: opacity .45s var(--ease-out); }
[data-section="cardio"] .coach__body > * { transition: opacity .45s var(--ease-out); }

/* colour photo underneath: settles from a slight push-in when revealed */
[data-section="cardio"] .coach__color { transform: scale(1.07); transition: transform 1.2s var(--ease-out); }
[data-section="cardio"] .coach.is-on .coach__color { transform: scale(1); }

/* the B&W grade on top, wiped away along a diagonal; the red blade and its bone edge ride on the wipe line.
   Each polygon is (a, 0) (.., 0) (a - 25%, 100%) ..: all three share "a", duration and easing, so they stay glued. */
[data-section="cardio"] .coach__dark,
[data-section="cardio"] .coach__slash,
[data-section="cardio"] .coach__edge { transition: clip-path .8s var(--ease-in-out); }
[data-section="cardio"] .coach__dark { clip-path: polygon(0% 0%, 150% 0%, 150% 100%, -25% 100%); }
[data-section="cardio"] .coach.is-on .coach__dark { clip-path: polygon(150% 0%, 150% 0%, 150% 100%, 125% 100%); }
[data-section="cardio"] .coach__slash,
[data-section="cardio"] .coach__edge { position: absolute; inset: 0; pointer-events: none; }
[data-section="cardio"] .coach__slash {
  background: linear-gradient(160deg, var(--blood-hot) 0%, var(--blood) 45%, var(--blood-deep) 100%);
  clip-path: polygon(-11% 0%, 0% 0%, -25% 100%, -36% 100%);
}
[data-section="cardio"] .coach.is-on .coach__slash { clip-path: polygon(139% 0%, 150% 0%, 125% 100%, 114% 100%); }
[data-section="cardio"] .coach__edge { background: var(--bone); clip-path: polygon(-.7% 0%, 0% 0%, -25% 100%, -25.7% 100%); }
[data-section="cardio"] .coach.is-on .coach__edge { clip-path: polygon(149.3% 0%, 150% 0%, 125% 100%, 124.3% 100%); }

/* body: solid plate, the name lifts and gets its red bar */
[data-section="cardio"] .coach__body {
  display: flex; flex-direction: column; gap: 12px; flex: 1;
  padding: clamp(18px, 2.2vw, 30px); background: var(--ink-2);
}
[data-section="cardio"] .coach__body > p:not(.label) { color: var(--mute); }
[data-section="cardio"] .coach__name {
  transition: transform .6s var(--ease-out), color .3s;
}
[data-section="cardio"] .coach__name::after {
  content: ""; display: block; width: 56px; height: 3px; margin-top: 12px; background: var(--blood);
  transform: scaleX(0); transform-origin: 0 50%; transition: transform .6s var(--ease-out) .12s;
}
[data-section="cardio"] .coach.is-on .coach__name { transform: translateY(-6px); color: var(--white); }
[data-section="cardio"] .coach.is-on .coach__name::after { transform: none; }

/* narrow 3-column rows: labels may wrap, so reserve two lines to keep the three names on one baseline */
@media (min-width: 760px) and (max-width: 1023.98px), (orientation: landscape) and (max-height: 520px) {
  [data-section="cardio"] .coach__body > .label { min-height: 2.9em; align-items: flex-start; }
}

/* desktop: the other cards step back while one is hovered */
@media (hover: hover) and (pointer: fine) {
  [data-section="cardio"] .cardio__roster.has-hover .coach:not(.is-on) .coach__media,
  [data-section="cardio"] .cardio__roster.has-hover .coach:not(.is-on) .coach__body > * { opacity: .5; }
  [data-section="cardio"] .coach { cursor: default; }
}

/* ------------------------------------------------------------------ dots + swipe hint (carousel only) */
[data-section="cardio"] .cardio__dots { display: none; align-items: center; gap: 2px; margin-top: 10px; margin-left: -7px; }
[data-section="cardio"] .cardio__dot { display: grid; place-items: center; width: 44px; height: 44px; }
[data-section="cardio"] .cardio__dot > i {
  display: block; width: 12px; height: 3px; background: rgba(237, 232, 223, .32);
  transition: width .35s var(--ease-out), background-color .35s;
}
[data-section="cardio"] .cardio__dot[aria-current="true"] > i { width: 30px; background: var(--blood-hot); }
[data-section="cardio"] .cardio__hint { margin-left: auto; }   /* type: .hint */
[data-section="cardio"] .cardio__dots.is-moved .cardio__hint { opacity: 0; transition: opacity .4s; }

/* ------------------------------------------------------------------ CTA */
[data-section="cardio"] .cardio__cta { display: flex; }
/* size comes from .btn--lg (shared with the Skull Crusher System CTA) */

/* ------------------------------------------------------------------ reduced motion: instant swaps, no loops */
[data-motion="reduced"] [data-section="cardio"] .coach__color { transform: none; }