/* Self-contained banner SDC. Three layouts — overlay (frosted card over a
   full-bleed image), halfpage (image with an absolutely-positioned text box),
   and image_text (full-bleed image with an overlapping text box). All styles
   are scoped under the component's data attribute; nothing depends on the theme. */

[data-component-id='ecore_common:overlay_banner'] {

  /* ─────────────────────────── Overlay layout ─────────────────────────── */
  .overlay {
    position: relative;
    z-index: 1;
    margin-bottom: 44px;

    .cover {
      position: relative;
      z-index: 5;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      background-color: #363940;
      padding-top: 50.47%;
      /* Desktop: the image is inset 180px on one side (a gap opposite the image
         alignment). Card-left keeps the gap on the right; card-right overrides
         to a gap on the left. On mobile the image is a full-bleed band above the
         card, so the inset is removed below 1250. */
      margin-right: 180px;

      img {
        border: 0;
        clip: rect(1px, 1px, 1px, 1px);
        clip-path: inset(50%);
        height: 1px;
        width: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        position: absolute !important;
        word-wrap: normal !important;
      }

      @media (max-width: 1250px) {
        margin-left: 0;
        margin-right: 0;
      }
    }

    .card {
      position: absolute;
      width: 711px;
      max-width: 1300px;
      top: 50%;
      /* Card-left variant (TRUcircularity): anchored to the left third and
         vertically centred over the image, per the desktop homepage PDF. */
      left: 17%;
      transform: translateY(-50%);
      z-index: 9;
      display: flex;
      flex-direction: column;
      /* Left-align every child: a heading shorter than the card would otherwise
         centre itself (align-items: center) while the body/CTA stay left. */
      align-items: flex-start;
      background-color: rgba(255, 255, 255, 0.8);
      padding: 48px;

      @media (max-width: 1250px) {
        position: relative;
        top: auto;
        left: unset;
        right: unset;
        width: 100%;
        padding: 60px 36px;
        transform: none;
      }

      h2 {
        font-size: 44px;
      }

      p {
        font-size: 16px;
      }

      /* CTA button: shown on every breakpoint (only rendered by the template
         when a link exists) and always left-aligned with the card text. */
      .cta {
        align-self: flex-start;
        margin-top: 28px;
      }

      ul {
        list-style: none;
        margin: 0;
        padding: 0;

        li {
          line-height: 1.66rem;
          background-position: left 8px;
        }

        &.two-column {
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;

          @media (max-width: 1000px) {
            flex-direction: column;
          }

          li {
            width: 49%;
            margin-bottom: 0.6875em;
            padding-left: 18px;
            background-image: url('arrow-bullet.png');
            background-position: left 8px;
            background-repeat: no-repeat;
            color: #000;

            @media (max-width: 1000px) {
              width: 100%;
            }
          }
        }
      }
    }

    &.card-right {

      .cover {
        margin-left: 180px;
        margin-right: unset;

        /* Full-bleed band on mobile — undo the desktop side offset. */
        @media (max-width: 1250px) {
          margin-left: 0;
        }
      }

      .card {
        left: unset;
        /* Card-right variant (itsTRU): anchored to the right third per the PDF.
           Vertical centring (translateY) is inherited from .card. */
        right: 18%;

        @media (max-width: 1250px) {
          /* More specific than `.card`'s own media reset, so repeat it here. */
          right: unset;
        }
      }
    }

    &.dark .card {
      background: #000;
      color: #fff;

      * {
        color: #fff;
      }

      ul li {
        background-image: url('arrow-bullet-white.png');
        background-repeat: no-repeat;
      }
    }
  }

  /* ────────────────────────── Halfpage layout ─────────────────────────── */
  .halfpage {
    position: relative;
    z-index: 1;
    margin-bottom: 44px;

    .cover {
      position: relative;
      z-index: 5;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      background-color: #363940;
      padding-top: 50.47%;
      margin-right: 180px;

      img {
        border: 0;
        clip: rect(1px, 1px, 1px, 1px);
        clip-path: inset(50%);
        height: 1px;
        width: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        position: absolute !important;
        word-wrap: normal !important;
      }

      @media (max-width: 1000px) {
        display: none;
      }
    }

    .container {
      position: absolute;
      width: 100%;
      margin: 0 auto;
      max-width: 1300px;
      top: 50%;
      left: 50%;
      transform: translate(-50%);
      z-index: 9;
      display: flex;
      align-items: center;

      @media (max-width: 1000px) {
        position: relative;
        top: unset;
        left: unset;
        transform: unset;
      }
    }

    .content {
      position: absolute;
      z-index: 9;
      left: 40px;
      width: 690px;
      padding: 50px;
      background-color: #fff;
      box-shadow: 0 3px 26px rgba(0, 0, 0, 0.3);

      @media (max-width: 1000px) {
        position: relative;
        left: unset;
        width: 100%;
        padding: 60px 36px;
      }

      ul {
        list-style: none;
        margin: 0;
        padding: 0;

        li {
          line-height: 1.66rem;
          background-position: left 8px;
        }

        &.two-column {
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;

          @media (max-width: 1000px) {
            flex-direction: column;
          }

          li {
            width: 49%;
            margin-bottom: 0.6875em;
            padding-left: 18px;
            background-image: url('arrow-bullet.png');
            background-position: left 8px;
            background-repeat: no-repeat;
            color: #000;

            @media (max-width: 1000px) {
              width: 100%;
            }
          }
        }
      }
    }

    &.reverse {
      .cover {
        margin-left: 180px;
        margin-right: unset;
      }

      .content {
        left: unset;
        right: 40px;

        @media (max-width: 1000px) {
          right: unset;
        }
      }
    }

    &.dark .content {
      background: #000;
      color: #fff;

      * {
        color: #fff;
      }

      ul li {
        background-image: url('arrow-bullet-white.png');
        background-repeat: no-repeat;
      }
    }
  }

  /* ───────────────────────── Image + text layout ──────────────────────── */
  .image-text {
    position: relative;
    z-index: 1;
    margin-bottom: 44px;

    .cover {
      position: relative;
      z-index: 5;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      background-color: #363940;
      padding-top: 38.19%;
      min-height: 550px;

      img {
        border: 0;
        clip: rect(1px, 1px, 1px, 1px);
        clip-path: inset(50%);
        height: 1px;
        width: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        position: absolute !important;
        word-wrap: normal !important;
      }

      @media (max-width: 1000px) {
        display: none;
      }
    }

    .content {
      position: absolute;
      top: 50%;
      left: 140px;
      width: 674px;
      z-index: 10;
      padding: 60px 100px;
      background-color: #fff;
      transform: translateY(-50%);

      ul {
        margin: 0 0 1em 15px;
        line-height: 1.666;
      }

      @media (max-width: 1000px) {
        position: relative;
        inset: 0;
        width: auto;
        max-width: 674px;
        padding: 0 36px 78px;
        transform: unset;

        h3 {
          margin-bottom: 0.5em;
          line-height: 1;
        }
      }
    }

    /* Decorative white seam beside the text box (desktop only). */
    @media (min-width: 1001px) {
      &::before {
        content: '';
        display: block;
        position: absolute;
        z-index: 9;
        top: 0;
        bottom: 0;
        left: 484px;
        width: 30px;
        background-color: #fff;
      }

      &.reverse::before {
        left: auto;
        right: 477px;
      }

      &.reverse .content {
        left: auto;
        right: 140px;
      }
    }

    @media (max-width: 782px) {
      margin: 0;
    }
  }
}