/* ==========================================================================
   Athios — athlete page
   Layers on top of home.css: fonts, base type, buttons, nav and footer come
   from there. Everything here is either an athlete-page token override or a
   section this page alone uses.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Tokens — sampled from the design export (Athletes Landing).
   Scoped to .ath-page so the brand homepage keeps its own palette.
   -------------------------------------------------------------------------- */

.ath-page {
  --ath-green: #3da400;
  --ath-green-hover: #348c00;
  --ath-orange: #ff5e16;
  --ath-ink: #1b293a;
  --ath-ink-muted: #4a5563;
  --ath-dark: #151621;

  /* Top and bottom stops of the two tinted sections. */
  --ath-wash-top: #e8f4d9;
  --ath-wash-bot: #fdfddc;

  /* Overrides of the shared home.css tokens. */
  --hm-orange: var(--ath-orange);
  --hm-orange-hover: #e84f0a;
  --hm-dark: var(--ath-dark);
  --hm-ink: var(--ath-ink);
  --hm-ink-muted: var(--ath-ink-muted);

  /* This page's type runs a step larger than the brand page. */
  --hm-h1: clamp(2.125rem, 3.9vw, 3.375rem);
  --hm-h2: clamp(1.75rem, 3.2vw, 2.75rem);
  --hm-h3: clamp(1.375rem, 2.1vw, 1.875rem);
  --hm-body: 1rem;
  --hm-eyebrow: 0.8125rem;
  --hm-max: 1165px;
}

/* Athletes get green calls to action; orange stays the editorial accent. */
.ath-page .hm-btn--primary { background: var(--ath-green); }
.ath-page .hm-btn--primary:hover { background: var(--ath-green-hover); }
.ath-page .hm-btn--outline { border-color: var(--ath-green); color: var(--ath-green); }
.ath-page .hm-btn--outline:hover { background: var(--ath-green); color: var(--hm-white); }
.ath-page .hm-nav__pill a[aria-current="page"] { background: var(--ath-green); }
.ath-page .hm-nav__pill a:not([aria-current]):hover { color: var(--ath-green); }
.ath-page .hm-nav__login:hover { color: var(--ath-green); }

.ath-accent { color: var(--ath-green); }
.ath-eyebrow--green { color: var(--ath-green); }

/* The nav runs wider than the body measure. */
.ath-nav .hm-shell { max-width: 1440px; }

/* Shared section header block ---------------------------------------------- */

.ath-head { max-width: 990px; margin-inline: auto; text-align: center; }
.ath-h2 { color: var(--ath-ink); }
/* "You belong here." drops to its own line under the statement above it. */
.ath-h2 .hm-accent { display: block; }
.ath-market .ath-h2 .hm-accent,
.ath-results .ath-h2 .hm-accent { display: inline; }

.ath-head__lead {
  max-width: 800px;
  margin: 0.875rem auto 0;
  font-size: 1.0625rem;
  color: var(--ath-ink-muted);
}
.ath-head__lead--wide { max-width: 1010px; }

.ath-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1.75rem;
}
.ath-actions--center { justify-content: center; margin-top: 2.5rem; }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.ath-hero {
  position: relative;
  z-index: 2;
  padding-top: clamp(2.5rem, 5vw, 4.5rem);
  padding-bottom: 0;
  background: var(--ath-dark);
  color: var(--hm-on-dark);
  text-align: center;
}

.ath-hero__title { max-width: 1000px; margin-inline: auto; }

.ath-hero__lead {
  max-width: 960px;
  margin: 1.125rem auto 0;
  font-size: 1.0625rem;
  color: rgba(255, 255, 255, .88);
}

.ath-hero .ath-actions { justify-content: center; }

/*
 * The stage is a fixed-ratio box and every piece inside is placed as a
 * percentage of it, so the whole composition scales as one unit. Ratio and
 * offsets are lifted straight off the design export.
 */
.ath-hero__stage {
  position: relative;
  width: 100%;
  max-width: 1245px;
  margin: clamp(1.5rem, 3vw, 2.5rem) auto -3.9%;
  aspect-ratio: 1245 / 576;
}

.ath-hero__stage img { position: absolute; display: block; height: auto; }

/* The mascot's feet break the dark section onto the white below. */
.ath-hero__monster { left: 0; bottom: 0; width: 72.7%; z-index: 1; }
.ath-hero__earnings { left: 8.7%; top: 0.7%; width: 25.2%; z-index: 2; }
.ath-hero__notify { right: 13.5%; top: 0; width: 20.5%; z-index: 2; }
.ath-hero__checkin { right: 0; top: 15.5%; width: 29.3%; z-index: 2; }

/* --------------------------------------------------------------------------
   Catalog — tiers and headline stats
   -------------------------------------------------------------------------- */

.ath-catalog {
  position: relative;
  padding-top: clamp(4.5rem, 8vw, 7rem);
  background: var(--hm-white);
}

/* Rings and stats card overlap; the card sits on top. */
.ath-catalog__stage {
  position: relative;
  width: 100%;
  max-width: 680px;
  margin: clamp(1.75rem, 3.5vw, 2.75rem) auto 0;
  aspect-ratio: 680 / 552;
}

.ath-catalog__rings {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 58.2%;
  height: auto;
}

.ath-catalog__stats {
  position: absolute;
  right: 0;
  top: 0.5%;
  z-index: 2;
  width: 49.4%;
  height: auto;
}

/* --------------------------------------------------------------------------
   Two tiers
   -------------------------------------------------------------------------- */

.ath-tiers {
  background: linear-gradient(180deg, var(--ath-wash-top) 0%, var(--ath-wash-bot) 100%);
}

.ath-tiers__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 5vw, 4.5rem);
  max-width: 940px;
  margin: clamp(2rem, 4vw, 3rem) auto 0;
}

.ath-tier__art {
  display: block;
  width: min(100%, 460px);
  height: auto;
  margin: 0 auto 0.5rem;
}

.ath-tier__title {
  margin: 0 0 1rem;
  font-size: var(--hm-h3);
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: -0.015em;
  text-align: center;
  color: var(--ath-ink);
}

.ath-tier__body {
  margin: 0 0 1.25rem;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--ath-ink-muted);
}

.ath-tier__body b { color: var(--ath-ink); font-weight: 700; }

.ath-tier__label {
  margin: 0 0 0.75rem;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--ath-ink);
}

.ath-list { margin: 0; padding: 0; list-style: none; }

.ath-list li {
  position: relative;
  padding-left: 1.75rem;
  margin-bottom: 0.625rem;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--ath-ink-muted);
}

/* Orange tick, drawn rather than shipped as an icon file. */
.ath-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.3em;
  width: 0.75rem;
  height: 0.45rem;
  border-left: 2.25px solid var(--ath-orange);
  border-bottom: 2.25px solid var(--ath-orange);
  transform: rotate(-45deg);
}

/* --------------------------------------------------------------------------
   Marketplace
   -------------------------------------------------------------------------- */

.ath-market { background: var(--hm-white); }

.ath-market__stage {
  position: relative;
  display: grid;
  grid-template-columns: 469fr 447fr;
  align-items: start;
  gap: 25px;
  max-width: 950px;
  margin: clamp(2rem, 4vw, 3rem) auto clamp(4rem, 8vw, 7rem);
}

.ath-market__panel,
.ath-market__call { display: block; width: 100%; height: auto; }

/* Breaks the open-call card's lower edge and hangs below the row. */
.ath-market__monster {
  position: absolute;
  right: -4.2%;
  bottom: -15.5%;
  z-index: 2;
  display: block;
  width: 34%;
  height: auto;
}

/* Numbered steps ----------------------------------------------------------- */

.ath-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 2.4vw, 1.75rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* The rule runs from the number out to the column's right edge. */
.ath-step__num {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 0.875rem;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--ath-orange);
}

.ath-step__num::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--hm-line);
}

.ath-step--last .ath-step__num::after { background: var(--ath-orange); }

.ath-step__title {
  margin: 0 0 0.875rem;
  font-size: var(--hm-h3);
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--ath-ink);
}

.ath-step__body {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--ath-ink-muted);
}

/* --------------------------------------------------------------------------
   Scale without the chaos
   -------------------------------------------------------------------------- */

.ath-scale {
  background: linear-gradient(180deg, var(--ath-wash-top) 0%, var(--ath-wash-bot) 100%);
}

.ath-scale__grid {
  display: grid;
  grid-template-columns: 454fr 447fr;
  gap: clamp(1.5rem, 2.5vw, 1.75rem);
  max-width: 925px;
  margin: clamp(2.5rem, 5vw, 4rem) auto 0;
}

.ath-scale__col { display: flex; flex-direction: column; }

.ath-shot { position: relative; }
.ath-shot > img:first-child { display: block; width: 100%; height: auto; }

.ath-sticker { position: absolute; display: block; height: auto; }

/* Straddles the top-left corner of the offers panel. */
.ath-sticker--envelope { left: -13.5%; top: -3%; width: 28.5%; }
/* Sits over the right edge of the status panel. */
.ath-sticker--cherries { right: -10%; top: 29%; width: 25%; }

.ath-note { margin-top: clamp(1.5rem, 3vw, 2.25rem); }
.ath-note--top { margin-top: 0; }
.ath-note--right { text-align: right; }

.ath-note__title {
  margin: 0 0 0.625rem;
  font-size: var(--hm-h3);
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--ath-ink);
}

.ath-note__body {
  margin: 0;
  max-width: 460px;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--ath-ink-muted);
}

.ath-note--right .ath-note__body { margin-left: auto; }

/* Deadline block ----------------------------------------------------------- */

/*
 * The photo straddles both columns in the design, so this row uses its own
 * split: the stage keeps the full left run and the copy starts where the
 * design puts it. Gap is zero because the two tracks already sum to the
 * grid's measure.
 */
.ath-scale__grid--deadline {
  grid-template-columns: 597fr 328fr;
  align-items: start;
  gap: 0;
}

/* Photo, nudge card and bolt are placed against this box's ratio. */
.ath-deadline__stage {
  position: relative;
  width: 100%;
  aspect-ratio: 597 / 400;
}

.ath-deadline__photo {
  position: absolute;
  left: 39.7%;
  top: 0;
  display: block;
  width: 56.1%;
  height: auto;
  border-radius: 10px;
}

/* Overhangs the photo's left edge and drops below its lower edge. */
.ath-deadline__card {
  position: absolute;
  left: 51.3%;
  top: 48.25%;
  z-index: 2;
  display: block;
  width: 61%;
  height: auto;
}

.ath-sticker--bolt { left: 27.6%; top: 15.75%; z-index: 3; width: 15.9%; }

/* Drops the copy to the photo's shoulder rather than its top edge. */
.ath-scale__grid--deadline .ath-note--top { padding-top: clamp(1rem, 4.5vw, 4rem); }

/* --------------------------------------------------------------------------
   Results
   -------------------------------------------------------------------------- */

.ath-results { background: var(--hm-white); }

.ath-results__stage {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: clamp(1rem, 2vw, 1.5rem) auto 0;
  aspect-ratio: 1200 / 675;
}

.ath-results__stage img { position: absolute; display: block; height: auto; }

/* The mascot's arm crosses in front of both cards. */
.ath-results__monster { left: 8.6%; bottom: 0; z-index: 2; width: 80.6%; }
.ath-results__earnings { left: 0; top: 11.9%; z-index: 1; width: 20.3%; }
.ath-results__fit { left: 27.6%; top: 0; z-index: 1; width: 19.4%; }
.ath-results__badge { right: 0; top: 8.6%; z-index: 3; width: 32.6%; }

/* --------------------------------------------------------------------------
   Closing CTA
   -------------------------------------------------------------------------- */

.ath-cta {
  padding-block: clamp(4rem, 7vw, 6rem);
  background: var(--ath-dark);
  color: var(--hm-on-dark);
  text-align: center;
}

.ath-cta__title {
  max-width: 820px;
  margin-inline: auto;
  color: var(--hm-on-dark);
}

/* Breaks the headline after "into", as the design does. */
.ath-line { display: block; }

.ath-cta__lead {
  max-width: 640px;
  margin: 1rem auto 0;
  font-size: 1.0625rem;
  color: rgba(255, 255, 255, .72);
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  .ath-page { --hm-max: 100%; }

  .ath-hero__stage { max-width: none; }

  .ath-tiers__grid,
  .ath-steps,
  .ath-scale__grid { grid-template-columns: minmax(0, 1fr); }

  .ath-market__stage {
    grid-template-columns: minmax(0, 1fr);
    max-width: 470px;
    margin-bottom: clamp(4rem, 12vw, 6rem);
  }

  .ath-market__monster { right: -4%; bottom: -9%; width: 40%; }

  .ath-note--right { text-align: left; }
  .ath-note--right .ath-note__body { margin-left: 0; }

  .ath-scale__col { max-width: 470px; margin-inline: auto; width: 100%; }
  .ath-scale__grid--deadline { max-width: 470px; gap: clamp(1.5rem, 2.5vw, 1.75rem); }
  .ath-scale__grid--deadline .ath-note--top { padding-top: 0; }

  /* Stacked, the composition re-centres so the nudge card stays on the page. */
  .ath-deadline__stage {
    max-width: 470px;
    margin-inline: auto;
    aspect-ratio: 470 / 430;
  }
  .ath-deadline__photo { left: 50%; width: 66%; transform: translateX(-50%); }
  .ath-deadline__card { left: 50%; top: 45%; width: 92%; transform: translateX(-50%); }
  .ath-sticker--bolt { left: 1%; top: 12%; width: 19%; }

  .ath-sticker--envelope { left: -6%; width: 22%; }
  .ath-sticker--cherries { right: -4%; width: 20%; }
}

@media (max-width: 760px) {
  /* The hero and results compositions are too dense to read at phone width;
     the mascot carries them on its own. The stage selector is repeated so
     these win over the `.ath-*__stage img` rules above. */
  .ath-hero__stage .ath-hero__earnings,
  .ath-hero__stage .ath-hero__notify,
  .ath-hero__stage .ath-hero__checkin { display: none; }

  .ath-hero__stage { aspect-ratio: 905 / 576; margin-bottom: -6%; }
  .ath-hero__stage .ath-hero__monster { left: 50%; width: 100%; transform: translateX(-50%); }

  .ath-results__stage { aspect-ratio: 938 / 623; }
  .ath-results__stage .ath-results__monster { left: 0; width: 100%; }
  .ath-results__stage .ath-results__earnings,
  .ath-results__stage .ath-results__fit,
  .ath-results__stage .ath-results__badge { display: none; }
}