/* Homepage hero release repair: compact, stable, and responsive. */
html body.mf-system-home main#main-content > .mf-v22-hero--single-focus {
  min-height: 0 !important;
  padding-block: clamp(.7rem, 1.4vw, 1rem) !important;
}

html body.mf-system-home main#main-content > .mf-v22-hero--single-focus .mf-v22-hero__grid {
  min-height: 0 !important;
}

html body.mf-system-home main#main-content > .mf-v22-hero--single-focus .mf-v22-hero__copy {
  min-height: 0 !important;
  padding: clamp(.9rem, 1.8vw, 1.35rem) !important;
  overflow: hidden;
}

html body.mf-system-home .mf-v22-actions {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: .55rem !important;
  width: auto !important;
  min-height: 44px;
}

html body.mf-system-home .mf-v22-actions > a {
  width: auto !important;
  min-height: 44px !important;
}

html body.mf-system-home .mf-v22-hero__secondary {
  padding-inline: .8rem !important;
  border: 1px solid rgba(245, 200, 66, .28) !important;
  border-radius: .65rem !important;
  background: rgba(5, 18, 12, .48) !important;
  color: #f6e5a6 !important;
  white-space: nowrap;
}

html body.mf-system-home .mf-v22-now-line--with-media {
  min-height: 13.5rem !important;
  max-height: 15rem !important;
  grid-template-columns: minmax(9rem, 38%) minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, 1fr) !important;
  align-self: stretch !important;
  overflow: hidden !important;
}

html body.mf-system-home .mf-v22-now-line__media,
html body.mf-system-home .mf-v22-now-line__media img {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
}

html body.mf-system-home .mf-v22-now-line__media img {
  display: block;
  object-fit: cover !important;
  object-position: 50% 34% !important;
}

html body.mf-system-home .mf-v22-now-line__content {
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  gap: .45rem;
  min-width: 0;
  padding: clamp(.85rem, 1.7vw, 1.2rem) !important;
}

/* The hero's editorial card is a primary conversion, but its story copy needs
   a dark reading surface rather than the button gradient used elsewhere. */
html body.mf-system-home .mf-v22-now-line.mf-v22-now-line--with-media.mf-conversion-primary {
  background: linear-gradient(135deg, #07170f 0%, #0b2b1c 64%, #123424 100%) !important;
  border: 1px solid rgba(205, 239, 72, .42) !important;
  color: #f8fbf5 !important;
  box-shadow: 0 12px 26px rgba(0, 0, 0, .3) !important;
}

html body.mf-system-home .mf-v22-now-line--with-media .mf-v22-now-line__content {
  background: rgba(5, 20, 13, .52) !important;
  color: #f8fbf5 !important;
}

html body.mf-system-home .mf-v22-now-line--with-media .mf-v22-now-line__label {
  color: #d9ff4c !important;
}

html body.mf-system-home .mf-v22-now-line--with-media .mf-v22-now-line__title {
  color: #ffffff !important;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .4);
}

html body.mf-system-home .mf-v22-now-line--with-media .mf-v22-now-line__content small {
  color: rgba(245, 250, 244, .82) !important;
}

html body.mf-system-home .mf-v22-hero-explore {
  margin-top: .15rem !important;
}

html body.mf-system-home .mf-v22-hero-explore__content {
  gap: .55rem !important;
  padding-bottom: .1rem !important;
}

@media (min-width: 900px) {
  html body.mf-system-home main#main-content > .mf-v22-hero--single-focus .mf-v22-hero__copy {
    grid-template-columns: minmax(0, .92fr) minmax(22rem, 1.08fr) !important;
    grid-template-areas:
      "kicker now"
      "title now"
      "lede now"
      "actions now"
      "explore explore" !important;
    gap: .55rem 1rem !important;
    max-width: 74rem !important;
  }

  html body.mf-system-home .mf-v22-hero__copy > h1 {
    font-size: clamp(2rem, 3.2vw, 3rem) !important;
    line-height: .98 !important;
    max-width: 13ch !important;
    margin: 0 !important;
  }

  html body.mf-system-home .mf-v22-hero__lede {
    max-width: 34rem !important;
    margin: 0 !important;
  }
}

@media (max-width: 899px) {
  html body.mf-system-home main#main-content > .mf-v22-hero--single-focus .mf-v22-hero__copy {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: .65rem !important;
  }

  html body.mf-system-home .mf-v22-now-line--with-media {
    min-height: 11.5rem !important;
    max-height: 13rem !important;
  }

  html body.mf-system-home .mf-v22-hero-explore:not([open]) > .mf-v22-hero-explore__content {
    display: none !important;
  }
}

@media (max-width: 520px) {
  html body.mf-system-home .mf-v22-now-line--with-media {
    grid-template-columns: 7.25rem minmax(0, 1fr) !important;
  }

  html body.mf-system-home .mf-v22-now-line__content small {
    display: none;
  }

  html body.mf-system-home .mf-v22-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html body.mf-system-home .mf-v22-actions > a {
    justify-content: center !important;
  }
}