/* 06-cta.css - P6 CTA band. Every selector begins with .s-cta. */

.s-cta__band {
  position: relative;
  overflow: hidden;
  background: var(--cedar);
  color: var(--white);
  border-radius: var(--r-panel);
  padding: 72px 64px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}

.s-cta__art {
  position: absolute;
  left: 24px;
  bottom: 0;
  z-index: 0;
}

.s-cta__stickers {
  position: relative;
  z-index: 1;
  height: 300px;
}

.s-cta__stickers .s-cta__c1 {
  position: absolute;
  left: 40px;
  top: 24px;
}
.s-cta__stickers .s-cta__c2 {
  position: absolute;
  left: 170px;
  top: 90px;
}
.s-cta__stickers .s-cta__c3 {
  position: absolute;
  left: 80px;
  top: 152px;
}

.s-cta__text {
  position: relative;
  z-index: 1;
}

.s-cta__eyebrow,
.s-cta__title,
.s-cta__lede,
.s-cta__alt {
  color: var(--white);
}

.s-cta__band a {
  color: var(--white);
  text-decoration-color: rgba(255, 255, 255, 0.7);
}

.s-cta__band :focus-visible {
  outline-color: var(--white);
}

.s-cta__band .btn--paper {
  color: var(--ink);
}

.s-cta__lede {
  margin-top: 12px;
  margin-bottom: 20px;
}

.s-cta__alt {
  font-size: 14px;
  margin-top: 16px;
}

@media (max-width: 1199px) {
  .s-cta__band {
    padding: 48px 40px;
  }
  .s-cta__art {
    transform: scale(0.8);
    transform-origin: left bottom;
  }
}

@media (max-width: 809px) {
  .s-cta__band {
    grid-template-columns: 1fr;
    padding: 40px 24px;
  }
  .s-cta__text {
    order: -1;
  }
  .s-cta__stickers {
    height: 200px;
  }
  .s-cta__c2 {
    display: none;
  }
  .s-cta__art {
    display: none;
  }
  /* the 200px mobile stickers container is shorter than the desktop one,
     so C1/C3 need their own top offsets or C3 (top 176 + height 86)
     overflows the band and gets clipped by its rounded corner */
  .s-cta__stickers .s-cta__c1 {
    top: 8px;
  }
  .s-cta__stickers .s-cta__c3 {
    top: 96px;
  }
}