/**
 * CTA section
 * Depends: design/tokens.css, design/buttons.css
 */

.section-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--section-padding-y-cta, var(--section-padding-y)) var(--content-gutter);
  min-height: var(--section-cta-min-height);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.section-cta__inner {
  max-width: 40rem;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.section-cta__title {
  /* size/weight + margin följer global Site settings (design/rhythm.css) */
}

.section-cta__text {
  /* body + margin följer global Site settings (design/rhythm.css) */
  line-height: var(--leading-relaxed);
}

.section-cta__text a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.section-cta__text strong,
.section-cta__text b {
  font-weight: 700;
}

/* Exempel */
.section-cta {
  background-color: var(--color-primary);
  color: var(--color-bg);
}

.section-cta__title {
  color: inherit;
}

.section-cta__text {
  color: inherit;
}

.section-cta .btn--primary {
  background-color: var(--color-bg);
  color: var(--color-primary);
  border-color: var(--color-bg);
}

.section-cta .btn--primary:hover {
  background-color: transparent;
  color: var(--color-bg);
  border-color: var(--color-bg);
}

.section-cta .btn--outline {
  color: var(--color-bg);
  border-color: var(--color-bg);
}

.section-cta .btn--outline:hover {
  background-color: var(--color-bg);
  color: var(--color-primary);
  border-color: var(--color-bg);
}
/* Exempel */

/* Varianter: bakgrundsbild + overlay för läsbar text */
.section-cta--bg-1 {
  background-image: url("../../assets/backgrounds/background-blue-purple-dots.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.section-cta--bg-2 {
  background-image: url("../../assets/backgrounds/background-dark.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.section-cta--bg-3 {
  background-image: url("../../assets/backgrounds/background-black-blue-purple.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.section-cta--bg-4 {
  background-image: url("../../assets/backgrounds/background-gray-white.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.section-cta--bg-5 {
  background-image: url("../../assets/backgrounds/background-blue-purple-dots.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.section-cta--bg-2::before,
.section-cta--bg-3::before,
.section-cta--bg-5::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 0;
}

/* Bild 2 (bg-1): ingen overlay, mörk text/knappar */
.section-cta--bg-1 {
  color: var(--color-dark);
}

.section-cta--bg-1 .section-cta__title {
  color: var(--color-dark);
}

.section-cta--bg-1 .section-cta__text {
  color: rgba(26, 26, 26, 0.88);
}

.section-cta--bg-1 .btn--primary {
  background-color: var(--color-dark);
  color: var(--color-bg);
  border-color: var(--color-dark);
}

.section-cta--bg-1 .btn--primary:hover {
  background-color: transparent;
  color: var(--color-dark);
  border-color: var(--color-dark);
}

.section-cta--bg-1 .btn--outline {
  color: var(--color-dark);
  border-color: var(--color-dark);
}

.section-cta--bg-1 .btn--outline:hover {
  background-color: var(--color-dark);
  color: var(--color-bg);
  border-color: var(--color-dark);
}

/* Bild 4 (bg-4): ljus bakgrund utan overlay, mörk text/knappar */
.section-cta--bg-4 {
  color: var(--color-dark);
}

.section-cta--bg-4 .section-cta__title {
  color: var(--color-dark);
}

.section-cta--bg-4 .section-cta__text {
  color: rgba(26, 26, 26, 0.88);
}

.section-cta--bg-4 .btn--primary {
  background-color: var(--color-dark);
  color: var(--color-bg);
  border-color: var(--color-dark);
}

.section-cta--bg-4 .btn--primary:hover {
  background-color: transparent;
  color: var(--color-dark);
  border-color: var(--color-dark);
}

.section-cta--bg-4 .btn--outline {
  color: var(--color-dark);
  border-color: var(--color-dark);
}

.section-cta--bg-4 .btn--outline:hover {
  background-color: var(--color-dark);
  color: var(--color-bg);
  border-color: var(--color-dark);
}

.section-cta__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}