/* ==========================================================================
   COMPONENT: CTA Split (photo + dark panel) and CTA Band (blue strip)
   ========================================================================== */

.cta-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--secondary-color);
  color: var(--text-on-dark);

  .cta-split-media {
    position: relative;
    min-height: 420px;
    clip-path: polygon(0 0, 100% 0, calc(100% - var(--slant)) 100%, 0 100%);

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

  .cta-split-content {
    align-self: center;
    max-width: 620px;
    padding: clamp(48px, 7vw, 96px) var(--gutter);
  }

  .eyebrow {
    color: var(--primary-color);
  }

  h2 {
    font-size: clamp(1.9rem, 3.4vw, 2.7rem);
  }

  .cta-split-sub {
    margin-bottom: 28px;
    font-size: 1.12rem;
    color: var(--text-on-dark-muted);
  }

  .cta-split-list {
    margin: -8px 0 30px;
    padding: 0;
    list-style: none;

    li {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 8px 0;
      border-bottom: 1px solid var(--border-on-dark);

      &::before {
        content: "\F26E";
        font-family: "bootstrap-icons";
        font-size: 1.3rem;
        color: var(--primary-color);
      }
    }
  }
}

.cta-band {
  position: relative;
  overflow: hidden;
  padding-block: clamp(44px, 6vw, 64px);
  background: var(--primary-color);
  color: var(--secondary-color);

  &::after {
    content: "";
    position: absolute;
    right: -4%;
    top: -60%;
    width: 30%;
    aspect-ratio: 1;
    background: color-mix(in srgb, var(--primary-color) 75%, white);
    clip-path: polygon(0 0, 100% 0, 50% 86%);
    opacity: 0.7;
  }

  .cta-band-inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 28px;
  }

  .cta-band-pin {
    display: grid;
    place-items: center;
    width: 72px;
    height: 72px;
    font-size: 1.8rem;
    color: var(--primary-color);
    background: var(--secondary-color);
    border-radius: 50%;
  }

  .eyebrow {
    margin-bottom: 6px;
    color: color-mix(in srgb, var(--secondary-color) 75%, var(--primary-strong));
  }

  h2 {
    margin-bottom: 6px;
    font-size: clamp(1.5rem, 2.8vw, 2.1rem);
  }

  p:last-child {
    margin: 0;
    max-width: 60ch;
  }

  .btn-row {
    flex-direction: column;
  }
}

@media (max-width: 900px) {
  .cta-split {
    grid-template-columns: 1fr;

    .cta-split-media {
      min-height: 260px;
      clip-path: none;
    }
  }

  .cta-band .cta-band-inner {
    grid-template-columns: 1fr;
    gap: 18px;

    .btn-row {
      flex-direction: row;
    }
  }
}