/* First screen of a development programme.
 * The block uses normal flex flow so a longer programme title or lead copy
 * grows the section instead of overlapping the next element. */
:is(body.fp-program-page, .editor-styles-wrapper) .fp-program-hero {
  position: relative;
  display: block;
  min-height: clamp(720px, 100svh, 900px);
  height: auto;
  padding: 0;
  overflow: hidden;
  isolation: isolate;
  background-color: #020807;
  background-image: var(--fp-program-hero-bg);
  background-position: var(--fp-program-hero-position, center);
  background-size: cover;
  background-repeat: no-repeat;
  color: #fff;
}

:is(body.fp-program-page, .editor-styles-wrapper) .fp-program-hero::after {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: rgba(0, 0, 0, .08);
  content: '';
  pointer-events: none;
}

:is(body.fp-program-page, .editor-styles-wrapper) .fp-program-hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  width: 100%;
  min-height: inherit;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: clamp(120px, 20vh, 180px);
  padding: clamp(180px, 30vh, 273px) 24px 72px;
  margin: 0;
}

:is(body.fp-program-page, .editor-styles-wrapper) .fp-program-hero__title,
:is(body.fp-program-page, .editor-styles-wrapper) .fp-program-hero__lead {
  position: static;
  left: auto;
  top: auto;
  transform: none;
  margin: 0;
}

:is(body.fp-program-page, .editor-styles-wrapper) .fp-program-hero__title {
  display: flex;
  width: min(845px, 100%);
  flex-direction: column;
  align-items: center;
  gap: 30px;
  text-align: center;
  line-height: 1;
}

:is(body.fp-program-page, .editor-styles-wrapper) .fp-program-hero__title .fp-program-eyebrow {
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -1px;
}

:is(body.fp-program-page, .editor-styles-wrapper) .fp-program-hero h1 {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: inherit;
  font-size: clamp(38px, 4.3vw, 48px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -1px;
}

:is(body.fp-program-page, .editor-styles-wrapper) .fp-program-hero__lead {
  display: flex;
  width: min(845px, 100%);
  flex-direction: column;
  align-items: center;
  text-align: center;
}

:is(body.fp-program-page, .editor-styles-wrapper) .fp-program-hero__lead h2 {
  width: 100%;
  margin: 0 0 15px;
  color: inherit;
  font-size: 24px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -1px;
}

:is(body.fp-program-page, .editor-styles-wrapper) .fp-program-hero__lead p {
  width: 100%;
  max-width: 100%;
  margin: 0;
  color: rgba(255, 255, 255, .78);
  font-size: 16px;
  line-height: 1;
  letter-spacing: -1px;
}

/* SuperКарьера is the only compact variant: its Figma layout deliberately
 * keeps the programme name and lead copy narrower than the shared hero. */
:is(body.fp-program-page, .editor-styles-wrapper) .fp-program-hero--superkarera .fp-program-hero__title {
  width: min(433px, 100%);
}

:is(body.fp-program-page, .editor-styles-wrapper) .fp-program-hero--superkarera .fp-program-hero__lead {
  width: min(476px, 100%);
}

:is(body.fp-program-page, .editor-styles-wrapper) .fp-program-hero__actions {
  display: flex;
  width: 100%;
  height: auto;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 10px;
  margin: 30px 0 0;
}

:is(body.fp-program-page, .editor-styles-wrapper) .fp-program-hero__actions .fp-program-text-link {
  display: inline-flex;
  width: auto;
  min-height: 64px;
  height: auto;
  align-items: center;
  justify-content: center;
  gap: 15px;
  margin: 0;
  padding: 20px 40px;
  position: relative;
  z-index: 0;
  border: 0;
  border-radius: 20px;
  isolation: isolate;
  background: transparent;
  color: inherit;
  font-size: 18px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -1px;
  text-decoration: none;
  transition: background 180ms ease, transform 180ms ease;
}

/* Gradient is a one-pixel outline only; the middle stays transparent so the
 * background graphic remains visible through the glass button. */
:is(body.fp-program-page, .editor-styles-wrapper) .fp-program-hero__actions .fp-program-text-link::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  border: 1px solid transparent;
  border-radius: inherit;
  background: linear-gradient(105deg, rgba(255, 255, 255, .72), rgba(255, 255, 255, .12) 52%, rgba(255, 255, 255, .44)) border-box;
  content: '';
  pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

:is(body.fp-program-page, .editor-styles-wrapper) .fp-program-hero__actions .fp-program-text-link:first-child {
  flex: 0 0 auto;
}

:is(body.fp-program-page, .editor-styles-wrapper) .fp-program-hero__actions .fp-program-text-link:last-child {
  flex: 0 0 auto;
}

:is(body.fp-program-page, .editor-styles-wrapper) .fp-program-hero__actions .fp-program-text-link img {
  position: relative;
  z-index: 1;
  display: block;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
}

/* program.css has a broad 24px rule for every text link. The Figma hero
 * buttons are 18px, so keep the nested label at the component value too. */
:is(body.fp-program-page, .editor-styles-wrapper) .fp-program-hero__actions .fp-program-text-link span {
  position: relative;
  z-index: 1;
  font-size: 18px;
  line-height: 1;
}

:is(body.fp-program-page, .editor-styles-wrapper) .fp-program-hero__actions .fp-program-text-link:hover,
:is(body.fp-program-page, .editor-styles-wrapper) .fp-program-hero__actions .fp-program-text-link:focus-visible {
  opacity: 1;
  background: rgba(255, 255, 255, .10);
  transform: translateY(-2px);
}

/* Dream Team follows the vertical composition of its Figma frame. The two
 * groups still stay in ordinary flex flow; this only gives that composition
 * its fixed desktop spacing and lets the lead copy stay at 845px. */
@media (min-width: 801px) {
  :is(body.fp-program-page, .editor-styles-wrapper) .fp-program-hero--dream-team .fp-program-hero__title,
  :is(body.fp-program-page, .editor-styles-wrapper) .fp-program-hero--dream-team .fp-program-hero__title .fp-program-eyebrow,
  :is(body.fp-program-page, .editor-styles-wrapper) .fp-program-hero--dream-team .fp-program-hero__title h1 {
    width: auto;
    white-space: nowrap;
  }

  :is(body.fp-program-page, .editor-styles-wrapper) .fp-program-hero--dream-team .fp-program-hero__lead {
    max-width: none;
  }

  :is(body.fp-program-page, .editor-styles-wrapper) .fp-program-hero--dream-team .fp-program-hero__inner {
    gap: 183px;
    padding-top: 225px;
  }
}

@media (max-width: 800px) {
  :is(body.fp-program-page, .editor-styles-wrapper) .fp-program-hero {
    min-height: 720px;
  }

  :is(body.fp-program-page, .editor-styles-wrapper) .fp-program-hero__inner {
    gap: clamp(84px, 12vh, 120px);
    padding: 150px 16px 56px;
  }

  :is(body.fp-program-page, .editor-styles-wrapper) .fp-program-hero__title {
    width: min(845px, 100%);
    gap: 24px;
  }

  :is(body.fp-program-page, .editor-styles-wrapper) .fp-program-hero h1 {
    font-size: clamp(36px, 10vw, 48px);
  }

  :is(body.fp-program-page, .editor-styles-wrapper) .fp-program-hero__lead {
    width: min(845px, 100%);
  }

  :is(body.fp-program-page, .editor-styles-wrapper) .fp-program-hero__lead h2 {
    font-size: 21px;
  }

  :is(body.fp-program-page, .editor-styles-wrapper) .fp-program-hero__actions {
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
  }

  :is(body.fp-program-page, .editor-styles-wrapper) .fp-program-hero__actions .fp-program-text-link {
    min-height: 56px;
    padding: 16px 24px;
    border-radius: 16px;
  }
}