/* See ./hero.md for design notes and rationale. */

/* stylelint-disable selector-class-pattern, no-descending-specificity -- EDS BEM */

.hero-container,
main > .section.hero-container {
  margin: 0;
}

main > .section.hero-container > .hero-wrapper {
  max-inline-size: none;
  margin: 0;
  padding: 0;
}

.hero.block {
  position: relative;
  min-block-size: 400px;
}

.hero > div:first-child > div > p ~ p {
  display: none;
}

.hero__layout {
  min-block-size: 400px;
}

/* Live breaks out to 100vw from x=0, not centred on the scrollbar-shrunk body.
   `html { overflow-inline: clip }` absorbs the overflow. */
.hero .hero__layout.is-full-bleed {
  inline-size: 100vw;
  margin-inline: 0;
}

.hero .l-tmlayout__content {
  position: relative;
  min-block-size: inherit;
}

.hero .l-tmlayout__text-section {
  position: relative;
  z-index: 1;
}

.hero .l-tmlayout__media-section {
  position: absolute;
  inset: 0;
  z-index: 0;
  inline-size: 100%;
  block-size: 100%;
}

.hero .l-tmlayout__media {
  inline-size: 100%;
  block-size: 100%;
}

.hero .l-tmlayout__media picture {
  display: block;
  inline-size: 100%;
  block-size: 100%;
}

.hero .l-tmlayout__media > img,
.hero .l-tmlayout__media > picture > img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  max-inline-size: none;
  transform: none;
  object-fit: cover;
  object-position: center;
}

.hero .hero__text {
  box-sizing: border-box;
  inline-size: 100%;
  width: 100%;
  max-inline-size: 100%;
  padding-block-start: 230px;
  padding-block-end: 60px;
  padding-inline: 10px;
}

.hero__heading {
  margin: 0;
  margin-block-end: 20px;
  color: var(--nc-color-text-primary);
  font-family: var(--nc-font-family);
  font-size: var(--nc-text-title-52-size);
  font-weight: var(--nc-text-heading-weight);
  letter-spacing: var(--nc-text-letter-spacing);
  line-height: var(--nc-text-title-52-leading);
}

.hero__heading-text {
  font: inherit;
  letter-spacing: inherit;
}

.hero__list {
  margin: 0;
  margin-inline-start: 20px;
  margin-block-end: 50px;
  padding: 0;
  list-style-type: disc;
  list-style-position: outside;
  color: var(--nc-color-text-primary);
}

.hero__list li {
  margin: 0;
  margin-block-end: 10px;
  font-family: var(--nc-font-family);
  font-size: var(--nc-text-body-size);
  font-weight: var(--nc-text-body-weight);
  letter-spacing: var(--nc-text-letter-spacing);
  line-height: 24px;
}

.hero__list li:last-child {
  margin-block-end: 0;
}

.hero__description {
  margin: 0;
  margin-block-end: 20px;
  color: var(--nc-color-text-primary);
  font-family: var(--nc-font-family);
  font-size: var(--nc-text-body-size);
  font-weight: var(--nc-text-body-weight);
  letter-spacing: var(--nc-text-letter-spacing);
  line-height: var(--nc-text-body-leading);
}

.hero__ctas {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 0;
  max-inline-size: 71.5%;
}

.hero__ctas p.button-wrapper {
  margin: 0;
}

.hero a.button {
  margin: 0;
  margin-block-end: 15px;
  white-space: nowrap;
}

@media (width >= 768px) {
  .hero .hero__text {
    padding-block-start: 340px;
    padding-block-end: 60px;
    padding-inline: 30px;
  }

  .hero__description {
    font-size: 20px;
    line-height: 32px;
  }

  .hero__list li {
    margin-block-end: 0;
    font-size: 20px;
    line-height: 32px;
  }

  .hero__ctas {
    flex-direction: row;
    max-inline-size: none;
  }

  .hero a.button {
    margin-inline-end: 15px;
  }
}

@media (width >= 1022px) {
  .hero .hero__text {
    max-inline-size: 58.333%;
    padding-block: 90px;
    padding-inline: 0 30px;
  }

  .hero__list {
    margin-block-end: 70px;
  }
}

/* lead-start */

:is(.hero--lead-start, .hero-lead-start, .hero.lead-start) .hero__text {
  max-inline-size: 100%;
  padding-block: 0 320px;
  padding-inline: 0;
}

/* Live `h1` is 36/48 phone and 64/76 from tablet; the `.h1-title-2` span inside
   is 32 then 52. The oversized h1 strut is what grows the line box past
   line-height (48 -> 50 phone, 76 -> 81 from tablet), so both levels are needed
   to match live's height. The two tokens already carry both scales. */
:is(.hero--lead-start, .hero-lead-start, .hero.lead-start) .hero__heading {
  margin-block: 40px;
  font-size: var(--nc-text-title-64-size);
  line-height: var(--ds-line-height-48);
}

:is(.hero--lead-start, .hero-lead-start, .hero.lead-start) .hero__heading-text {
  font-size: var(--nc-text-title-52-size);
  line-height: inherit;
}

/* live cmp-text p: 16/24 phone, 20/32 from tablet */
:is(.hero--lead-start, .hero-lead-start, .hero.lead-start) .hero__description {
  margin-block-end: 24px;
  line-height: var(--ds-line-height-24);
}

:is(.hero--lead-start, .hero-lead-start, .hero.lead-start) .hero__list {
  margin-block-end: 20px;
}

:is(.hero--lead-start, .hero-lead-start, .hero.lead-start) .hero__ctas {
  flex-direction: row;
  gap: 15px;
  max-inline-size: none;
  padding-block-start: 15px;
}

:is(.hero--lead-start, .hero-lead-start, .hero.lead-start) .hero__ctas a.button {
  margin: 0;
}

:is(.hero--lead-start, .hero-lead-start, .hero.lead-start) .l-tmlayout__media > img,
:is(.hero--lead-start, .hero-lead-start, .hero.lead-start) .l-tmlayout__media > picture > img {
  object-position: center bottom;
}

@media (width >= 768px) {
  :is(.hero--lead-start, .hero-lead-start, .hero.lead-start) .hero__heading {
    margin-block: 48px;
    line-height: 76px;
  }

  :is(.hero--lead-start, .hero-lead-start, .hero.lead-start) .hero__text {
    padding-block: 0 450px;
    padding-inline: 70px 90px;
  }

  /* out-specifies the base `.hero__description` media rule, so restate it */
  :is(.hero--lead-start, .hero-lead-start, .hero.lead-start) .hero__description {
    font-size: 20px;
    line-height: 32px;
  }

  :is(.hero--lead-start, .hero-lead-start, .hero.lead-start) .l-tmlayout__media > img,
  :is(.hero--lead-start, .hero-lead-start, .hero.lead-start) .l-tmlayout__media > picture > img {
    object-position: center;
  }
}

@media (width >= 1022px) {
  /* Live nests AEM responsive-grid columns, each of which adds 10px inline
     padding while its grid pulls 10px back: a column's content box is
     `share * (parent + 20px) - 20px`, not a flat percentage. Text is 8/12,
     heading 5/8, body 7/8. The list loses another 20px to its own indent. */
  :is(.hero--lead-start, .hero-lead-start, .hero.lead-start) .hero__text {
    max-inline-size: calc((100% + 20px) * 2 / 3 - 20px);
    padding-block: 100px 90px;
    padding-inline: 30px 0;
  }

  :is(.hero--lead-start, .hero-lead-start, .hero.lead-start) .hero__heading {
    max-inline-size: calc((100% + 20px) * 5 / 8 - 20px);
  }

  :is(.hero--lead-start, .hero-lead-start, .hero.lead-start) .hero__description {
    max-inline-size: calc((100% + 20px) * 7 / 8 - 20px);
  }

  :is(.hero--lead-start, .hero-lead-start, .hero.lead-start) .hero__list {
    max-inline-size: calc((100% + 20px) * 7 / 8 - 40px);
  }
}

@media (width >= 1330px) {
  :is(.hero--lead-start, .hero-lead-start, .hero.lead-start) .hero__text {
    padding-inline: 0 120px;
  }
}

/* band */

:is(.hero--band, .hero-band, .hero.band).block {
  overflow: clip;
  max-inline-size: min(calc(100% - 2 * var(--nc-grid-margin)), var(--nc-grid-content));
  margin-inline: auto;
  border-radius: 20px;
  background-color: var(--nc-color-bg-muted);
}

:is(.hero--band, .hero-band, .hero.band) .hero__heading {
  margin-block: 24px;
  font-size: var(--nc-text-title-44-size);
  line-height: 32px;
}

:is(.hero--band, .hero-band, .hero.band) .hero__text {
  padding-block-start: 20px;
  padding-block-end: 20px;
  padding-inline: 15px;
}

:is(.hero--band, .hero-band, .hero.band) .hero__description {
  margin-block-end: 24px;
}

:is(.hero--band, .hero-band, .hero.band) .hero__legal,
:is(.hero--band, .hero-band, .hero.band) .hero__description.hero__legal {
  font-size: 12px;
  font-weight: 400;
  line-height: 20px;
}

@media (width >= 768px) {
  :is(.hero--band, .hero-band, .hero.band) .hero__heading {
    margin-block: 28px;
    font-size: var(--nc-text-title-44-size);
    line-height: 46px;
  }

  :is(.hero--band, .hero-band, .hero.band) .hero__text {
    padding-block-start: 30px;
    padding-block-end: 30px;
    padding-inline: 30px;
  }

  :is(.hero--band, .hero-band, .hero.band) .hero__legal,
  :is(.hero--band, .hero-band, .hero.band) .hero__description.hero__legal {
    font-size: 12px;
    line-height: 20px;
  }
}

@media (width >= 1022px) {
  :is(.hero--band, .hero-band, .hero.band) .hero__text {
    max-inline-size: 41.667%;
    padding-block-start: 60px;
    padding-block-end: 30px;
    padding-inline: 0;
  }
}