/* RentGuarantor CSS: secondary-cta.css (source: src/assets/scss/_secondary-cta.scss) */
.secondary-cta {
  position: relative;
  --secondary-cta-surface: var(--surface-general-fourth);
  --secondary-cta-accent: var(--tile-brand-green);
  --secondary-cta-icon: var(--icon-green);
  --secondary-cta-stripe: var(--secondary-cta-surface);
  background-color: var(--secondary-cta-surface);
}
.secondary-cta [data-element=layout] {
  position: relative;
  overflow: hidden;
  background-color: var(--secondary-cta-accent);
  border-radius: inherit;
}
.secondary-cta[data-image-position=left] [data-element=layout] {
  border-radius: 20px 20px 20px 0 !important;
}
.secondary-cta[data-image-position=right] [data-element=layout] {
  border-radius: 20px 20px 0 20px !important;
}
.secondary-cta [data-element=illustration-column],
.secondary-cta [data-element=content-column] {
  position: relative;
  z-index: 2;
}
.secondary-cta [data-element=illustration] {
  max-width: 545px;
}
.secondary-cta [data-element=bullet-list] svg circle {
  fill: var(--secondary-cta-icon);
}
.secondary-cta__eyebrow {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-s);
  line-height: var(--line-height-m);
  letter-spacing: 0.32px;
  color: var(--color-core-navy);
  margin-bottom: 0;
}
.secondary-cta__stripe {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 20%;
  width: 100%;
  height: 200%;
  background: linear-gradient(152deg, transparent 46.5%, var(--secondary-cta-stripe) 46.5%);
  pointer-events: none;
  z-index: 1;
}

.secondary-cta[data-image-position=left] .secondary-cta__stripe {
  left: -20%;
  right: 0;
  background: linear-gradient(208deg, transparent 46.5%, var(--secondary-cta-stripe) 46.5%);
}
.secondary-cta[data-image-position=left] [data-element=illustration-column] > div {
  padding-top: 3rem;
}

.secondary-cta[data-image-position=right] .secondary-cta__stripe {
  left: 20%;
  right: 0;
  background: linear-gradient(152deg, transparent 46.5%, var(--secondary-cta-stripe) 46.5%);
}

.secondary-cta[data-variant=green] {
  --secondary-cta-surface: var(--surface-general-fourth);
  --secondary-cta-accent: var(--tile-brand-green);
  --secondary-cta-icon: var(--icon-green);
}

.secondary-cta[data-variant=green-mirrored] {
  --secondary-cta-surface: var(--surface-general-fourth);
  --secondary-cta-accent: var(--tile-brand-green);
  --secondary-cta-icon: var(--icon-green);
}

.secondary-cta[data-variant=green-alt] {
  --secondary-cta-surface: var(--tile-brand-green);
  --secondary-cta-accent: var(--surface-general-fourth);
  --secondary-cta-icon: var(--icon-green);
}
.secondary-cta[data-variant=green-alt] [data-element=illustration-column] {
  order: 2 !important;
}
.secondary-cta[data-variant=green-alt] [data-element=content-column] {
  order: 1 !important;
}

.secondary-cta[data-variant=yellow] {
  --secondary-cta-surface: var(--surface-students-primary);
  --secondary-cta-accent: var(--surface-students-highlight);
  --secondary-cta-icon: var(--icon-yellow);
}

@media (max-width: 991.98px) {
  .secondary-cta [data-element=content-column] {
    padding: 24px;
  }
  .secondary-cta [data-element=content-column] > div {
    padding: 0 !important;
  }
  .secondary-cta [data-element=content-column] > div h2 {
    font-size: var(--font-size-xl);
    line-height: var(--line-height-xl);
  }
  .secondary-cta [data-element=content-column] > div .p1 {
    font-size: var(--font-size-xxs);
    line-height: var(--line-height-xxs);
  }
  .secondary-cta [data-element=content-column] > div ul {
    margin-bottom: 24px !important;
  }
  .secondary-cta [data-element=content-column] > div ul li {
    margin-bottom: 12px !important;
    gap: 12px;
  }
  .secondary-cta [data-element=content-column] > div ul li > svg {
    width: 24px;
    height: 24px;
    margin: 0 !important;
  }
  .secondary-cta[data-image-position=left] .secondary-cta__stripe {
    left: 0;
  }
  .secondary-cta[data-image-position=right] .secondary-cta__stripe {
    left: 0;
  }
  .secondary-cta [data-element=illustration-column] {
    order: 2 !important;
    padding: 12px;
  }
  .secondary-cta [data-element=illustration-column] > div {
    padding-top: 0 !important;
  }
}