[data-component-id='ecore_common:hero'] {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;

  figure {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: var(--ec-surface-inverse);
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;

    img {
      width: 1px !important;
      height: 1px !important;
      position: absolute;
    }
  }

  .hero__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Cover the hero with the 16:9 YouTube iframe (crop, never letterbox). */
  .hero__youtube {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;

    iframe {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 100vw;
      height: 56.25vw; /* 16:9 of viewport width */
      min-width: 177.78vh; /* 16:9 of viewport height */
      min-height: 100%;
      transform: translate(-50%, -50%);
      border: 0;
    }
  }

  .content {
    z-index: 1;
    display: flex;
    flex-direction: column;
    padding: 13vw 0;
  }

  .hero__body {
    margin-top: 16px;
    font-size: 18px;
    line-height: 1.5;
    color: var(--ec-ink-inverse);
  }

  .overlay {
    display: flex;

    .content-inner {
      display: flex;
      justify-content: center;
      flex-direction: column;
      align-items: center;
      padding: 50px 67px 40px;
      background-color: var(--ec-scrim);
    }

    h1 {
      color: var(--ec-ink-inverse);
      margin-bottom: 20px;
      position: relative;

      &:after {
        content: '';
        display: block;
        position: absolute;
        z-index: 2;
        left: 50%;
        transform: translate(-50%);
        bottom: -20px;
        height: 6px;
        width: 55px;
        background-color: var(--ec-accent);
      }
    }

    [data-component-id='ecore_common:button'] {
      margin-top: 25px;
    }
  }

  /* overlay_cta layout: left-aligned white card with CTA (homepage design). */
  .overlay_cta {
    display: flex;
    width: 100%;
    padding: 0 160px;
    align-items: center;

    .content {
      margin: 10vw 0;
      width: 48vw;
      max-width: 830px;
      background-color: rgba(var(--ec-surface-rgb), 0.8);
      padding: 86px 82px;
    }

    .content-inner {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: flex-start;
    }

    h1 {
      color: var(--ec-ink-strong);
      margin-bottom: 20px;
      position: relative;
    }

    .subheading {
      color: var(--ec-ink);
      margin-top: 8px;
      line-height: 1.666;
    }

    /* The paragraph needs colouring directly: site themes set a bare
       `p { color: ... }`, an element selector that beats colour inherited from
       any ancestor however specific. Colouring only the wrapper looks correct
       in the stylesheet and does nothing in the browser. */
    .hero__body,
    .hero__body p {
      color: var(--ec-ink);
    }

    [data-component-id='ecore_common:button'] {
      margin-top: 25px;
    }

    /* Below 1000px the overlay card no longer fits over the image (the text
       area gets cramped and wraps awkwardly). Match the live hero: stack a
       fixed image band on top with a full-width solid-white content block
       beneath it. DOM order is content → media, so column-reverse puts the
       media band on top. */
    @media (max-width: 1000px) {
      flex-direction: column-reverse;
      align-items: stretch;
      padding: 0;

      .content {
        width: 100%;
        max-width: 100%;
        margin: 0;
        background-color: var(--ec-surface);
        padding: 40px 36px;
      }

      .hero__media {
        position: relative;
        inset: auto;
        width: 100%;
        height: 220px;
      }
    }
  }

  /* card_theme: dark — the scrim-filled variant of overlay_cta, used where the
     hero card sits over a light photograph and a frosted white card would not
     hold its edge. Additive: only reachable via .card-dark, so the default
     light card is untouched. The scrim token is shared with overlay_banner's
     translucent dark card so the two read as the same object. */
  .overlay_cta.card-dark {

    .content {
      background-color: var(--ec-scrim);
    }

    h1,
    .subheading,
    .hero__body,
    .hero__body p {
      color: var(--ec-ink-inverse);
    }

    /* Below 1000 the card leaves the image and becomes a full-width band, so a
       translucent fill would sit on white and wash out. Go solid there. */
    @media (max-width: 1000px) {
      .content {
        background-color: var(--ec-overlay);
      }
    }
  }

  .large_text {
    display: flex;
    width: 100%;
    margin-left: 40px;
    margin-right: 40px;

    .content {
      padding: 10vw 0;
    }

    h1 {
      font-weight: 900;
      font-size: 120px;
      text-transform: uppercase;
      line-height: 0.85;
      color: var(--ec-ink-inverse);
    }

    div.last {
      color: var(--ec-ink-strong);
    }

    .subheading {
      font-size: 30px;
      font-weight: 900;
      color: var(--ec-ink-inverse);
      margin-top: 30px;
    }

    @media (max-width: 768px) {
      h1 {
        font-size: 10vw;
      }

      .subheading {
        font-size: 5vw;
      }
    }
  }
}