/* Bounded hero stages: preserve the image, independent of browser proportions. */
:root {
  --hero-stage-width: 1600px;
  --hero-stage-inset: 24px;
}

.home-hero,
.inner-hero {
  width: min(calc(100% - 2 * var(--hero-stage-inset)), var(--hero-stage-width));
  margin: var(--hero-stage-inset) auto 0;
  border: 1px solid var(--line);
}

.home-hero {
  min-height: 0;
  height: 740px;
  max-height: none;
}

.home-hero .home-hero-content {
  min-height: 0;
  padding-top: 40px;
  padding-bottom: 100px;
}

.home-hero .hero-title { font-size: clamp(72px, 7.5vw, 112px); }
.home-hero .eyebrow { margin-bottom: 24px; }
.home-hero .hero-description { margin-top: 24px; font-size: 13px; }
.home-hero .hero-buttons { margin-top: 26px; }

.home-hero .hero-photo {
  top: 32px;
  right: 32px;
  bottom: auto;
  width: min(44%, 520px);
  height: auto;
  aspect-ratio: 4 / 5;
  background: var(--bg);
  mask-image: none;
  animation: fade-up 1s var(--ease) both;
}

.home-hero .hero-photo img {
  object-fit: contain;
  object-position: center;
  transform: none;
  will-change: auto;
}

.home-hero .hero-photo:after {
  background: linear-gradient(90deg, var(--bg), rgba(13,13,15,.55) 12%, transparent 38%),
    linear-gradient(0deg, var(--bg), transparent 24%, transparent 92%, rgba(13,13,15,.15));
}

.home-hero .hero-photo-caption { right: 14px; bottom: 80px; }

.inner-hero { min-height: 590px; }
.inner-hero .hero-title { font-size: clamp(64px, 7.3vw, 100px); }
.inner-hero .inner-hero-content { padding-top: 64px; padding-bottom: 72px; }

.inner-hero .inner-hero-photo {
  position: absolute;
  top: 32px;
  right: 32px;
  bottom: auto;
  width: min(49%, 640px);
  height: auto;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #131315;
  animation: fade-up 1s var(--ease) both;
}

.inner-hero .inner-hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  transform: none;
}

.inner-hero .inner-hero-photo:after {
  background: linear-gradient(90deg, rgba(19,19,21,.7), transparent 32%),
    linear-gradient(0deg, #131315, transparent 16%);
}

.fighters-hero .inner-hero-photo { width: min(43%, 390px); aspect-ratio: 3 / 4; }

.training-hero.group-training-hero .inner-hero-photo {
  width: min(calc(100% - 64px), 960px);
  aspect-ratio: 16 / 9;
}

.training-hero.group-training-hero .inner-hero-photo img {
  object-position: center;
  filter: brightness(.86) saturate(.9);
}

.training-hero.group-training-hero .inner-hero-photo:after {
  /* Hide the repeated generated figure in the left background of the photo. */
  background: linear-gradient(90deg, #131315 28%, rgba(19,19,21,.99) 36%,
    rgba(19,19,21,.94) 43%, rgba(19,19,21,.72) 49%,
    rgba(19,19,21,.3) 56%, transparent 63%),
    linear-gradient(0deg, #131315, transparent 16%);
}

.partners-hero.partners-archive-hero .inner-hero-photo img { object-position: center; }

.athlete-profile-layout .profile-portrait {
  width: 100%;
  max-width: 440px;
  justify-self: center;
}
.has-hero-achievements .profile-portrait { width: min(100%, 420px); }
.partner-profile-photo { width: 100%; max-width: 640px; justify-self: center; }

@media (max-width: 1100px) {
  .home-hero,
  .inner-hero {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    height: auto;
    min-height: 0;
  }

  .home-hero .home-hero-content,
  .inner-hero .inner-hero-content {
    order: 0;
    height: auto;
    min-height: 0;
    padding-top: 40px;
    padding-bottom: 28px;
  }

  .home-hero .hero-photo,
  .inner-hero .inner-hero-photo,
  .training-hero.group-training-hero .inner-hero-photo,
  .partners-hero.partners-archive-hero .inner-hero-photo {
    order: 1;
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    width: calc(100% - 48px);
    max-width: 640px;
    margin: 0 auto 24px;
    height: auto;
  }

  .home-hero .hero-photo { max-width: 420px; }
  .fighters-hero .inner-hero-photo { max-width: 390px; }
  .training-hero.group-training-hero .inner-hero-photo { max-width: 960px; }

  .home-hero .hero-bottom {
    order: 2;
    position: relative;
    inset: auto;
    width: 100%;
    padding: 4px 24px 24px;
  }
  .home-hero .hero-location { margin-right: 0; }
  .home-hero .hero-ghost,
  .inner-hero .inner-hero-index { display: none; }
}

@media (max-width: 760px) {
  :root { --hero-stage-inset: 12px; }

  .home-hero .home-hero-content,
  .inner-hero .inner-hero-content {
    padding: 32px 20px 28px;
  }

  .home-hero .hero-title { font-size: clamp(42px, 12vw, 70px); }
  .inner-hero .hero-title { font-size: clamp(42px, 12vw, 74px); }
  .home-hero .eyebrow { font-size: 8px; }
  .home-hero .hero-description { margin-top: 24px; font-size: 12px; }
  .home-hero .hero-buttons { margin-top: 24px; }

  .home-hero .hero-photo,
  .inner-hero .inner-hero-photo,
  .training-hero.group-training-hero .inner-hero-photo,
  .partners-hero.partners-archive-hero .inner-hero-photo { width: calc(100% - 32px); }

  .home-hero .hero-photo:after {
    background: linear-gradient(90deg, rgba(13,13,15,.55), transparent 28%),
      linear-gradient(0deg, var(--bg), transparent 20%, transparent 92%, rgba(13,13,15,.15));
  }
  .home-hero .hero-photo-caption { bottom: 42px; font-size: 8px; }
  .home-hero .hero-bottom { padding: 0 16px 24px; }
  .home-hero .hero-serial { display: none; }

  .partners-hero.partners-archive-hero .inner-hero-photo:after {
    background: linear-gradient(0deg, #131315, transparent 15%);
  }

  .partner-contact { grid-template-columns: minmax(0, 1fr); }
  .partner-contact > * { min-width: 0; }
  .partner-symbol { font-size: clamp(48px, 15vw, 62px); gap: clamp(8px, 3vw, 15px); }
}

@media (prefers-reduced-motion: reduce) {
  .home-hero .hero-photo,
  .inner-hero .inner-hero-photo { animation: none; }
}