/* A card sitting over a wide photo.

   Four appearance choices - photo width, card position, colour and finish -
   and every combination renders. The card is laid out inside a centred
   max-width container rather than positioned by viewport percentage, matching
   how the rest of the theme anchors content. */

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

  .overlay-banner {
    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: var(--ec-surface-inverse);

    /* The <img> is present for assistive tech and for the alt text; the visible
       photo is the background above. */
    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;
    }
  }

  .container {
    position: absolute;
    inset-block: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 1300px;
    padding-inline: 40px;
    z-index: 9;
    display: flex;
    align-items: center;
  }

  .card {
    width: 690px;
    max-width: 100%;
    padding: 50px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    h2 {
      font-size: 44px;
      margin: 0 0 0.25em;
    }

    /* The body field is a plain textarea, so the copy may arrive wrapped in a
       paragraph or as bare text. Size and colour both. */
    .content,
    .content p {
      font-size: 16px;
      line-height: 1.666;
    }

    /* Slot containers are always in the markup so the editor has a drop target;
       they collapse while genuinely empty. */
    .cta {
      margin-top: 28px;
    }

    .cta:empty,
    .links:empty {
      display: none;
    }

    .links {
      list-style: none;
      margin: 28px 0 0;
      padding: 0;

      li {
        line-height: 1.66rem;
      }

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

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

  /* ───────────────────────────── Photo width ─────────────────────────── */
  .photo-inset .cover {
    padding-top: 50.47%;
  }

  .photo-full .cover {
    padding-top: 38.19%;
    min-height: 550px;
  }

  /* The full-width variant anchors the card to the band edge rather than to
     the centred container the inset variant uses - 140px, which is what the
     treatment this replaces did. Going through the container instead pulled the
     card about 100px inward, and the seam moved with it. */
  .photo-full .container {
    max-width: none;
    padding-inline: 140px;
  }

  /* An inset photo pulls back from the edge opposite the card, opening the gap
     the card sits against. A centred card insets both sides instead. */
  .photo-inset.card-left .cover {
    margin-right: 180px;
  }

  .photo-inset.card-right .cover {
    margin-left: 180px;
  }

  .photo-inset.card-center .cover {
    margin-inline: 90px;
  }

  /* ──────────────────────────── Card position ────────────────────────── */
  .card-left .card {
    margin-right: auto;
  }

  .card-right .card {
    margin-left: auto;
  }

  .card-center .card {
    margin-inline: auto;
    align-items: center;
    text-align: center;
  }

  /* ────────────────────────── Colour and finish ──────────────────────── */
  /* Colour picks the text treatment, finish picks the fill. All four pairings
     are meaningful, so neither setting is ever inert. */
  .style-light .card {
    color: var(--ec-ink);

    .content,
    .content p {
      color: var(--ec-ink);
    }
  }

  .style-dark .card {
    color: var(--ec-ink-inverse);

    * {
      color: var(--ec-ink-inverse);
    }

    .links.two-column li {
      background-image: url('arrow-bullet-white.png');
    }
  }

  .style-light.finish-frosted .card {
    /* Channel companion, not the hex token: rgba() cannot take a hex as its
       first argument and the browser drops the declaration silently. */
    background-color: rgba(var(--ec-surface-rgb), 0.8);
  }

  .style-light.finish-solid .card {
    background-color: var(--ec-surface);
    box-shadow: 0 3px 26px rgba(var(--ec-ink-strong-rgb), 0.3);
  }

  .style-dark.finish-frosted .card {
    /* Shared with hero's card_theme: dark, so bookended bands match. */
    background-color: var(--ec-scrim);
  }

  .style-dark.finish-solid .card {
    background-color: var(--ec-ink-strong);
    box-shadow: 0 3px 26px rgba(var(--ec-ink-strong-rgb), 0.3);
  }

  /* Vertical break crossing a full-width photo, carried over from the legacy
     treatment this replaces.

     One strip running the whole height of the band, sitting behind the card's
     fill but above the photo. That single placement gives both behaviours for
     free: a solid card hides the length it covers, so the break reads as
     something the card interrupts, while a frosted card shows it through, so
     the break stays continuous instead of the photo reappearing behind the
     card and cutting it in two.

     Always the page surface, never the card's colour - it is a break in the
     photograph rather than an extension of the card.

     Held as a distance from the card's leading edge, which is what the legacy
     offsets amount to, so it lands in the same place whatever the card's
     width. The band clips the overhang. */
  @media (min-width: 1001px) {

    .photo-full {
      overflow: hidden;

      .card {
        position: relative;

        &::before {
          content: '';
          position: absolute;
          top: -100vh;
          bottom: -100vh;
          left: 344px;
          width: 30px;
          background-color: var(--ec-surface);
          /* Behind the card's own fill. The card is positioned but sets no
             z-index, so it creates no stacking context and this still paints
             above the photo. */
          z-index: -1;
        }
      }

      &.card-right .card::before {
        left: auto;
        right: 337px;
      }

      /* No break behind a centred card. The seam is an off-centre device -
         centred it reads as a symmetrical band splitting the photo in two
         rather than as a break the card is threaded onto. */
      &.card-center .card::before {
        content: none;
      }
    }
  }

  /* ───────────────────────────── Below desktop ───────────────────────── */
  /* The card no longer fits over the photo, so the photo becomes a band and the
     card sits beneath it at full width. */
  @media (max-width: 1000px) {

    .cover {
      margin-inline: 0 !important;
    }

    .container {
      position: relative;
      inset-block: auto;
      left: auto;
      transform: none;
      padding-inline: 0;
      max-width: none;
    }

    .card {
      width: 100%;
      padding: 60px 36px;
      margin-inline: 0;
    }

    .links.two-column li {
      width: 100%;
    }
  }

  @media (max-width: 640px) {

    .card {
      padding: 48px 24px;

      h2 {
        font-size: 32px;
      }
    }
  }
}