/* CTA Block */
.cta-block {
  --cta-wave-width: 480px;
  padding: var(--section-padding) 0;
}

.cta-block__inner {
  display: flex;
  align-items: center;
  padding: var(--spacing-xl) calc(var(--cta-wave-width) + 150px) var(--spacing-xl) var(--spacing-70);
  border-radius: var(--radius-card-lg);
  overflow: hidden;
  position: relative;
}

.cta-block__content {
  flex: 1;
  position: relative;
  z-index: 1;
}

.cta-block__title {
  font-size: var(--h2-size);
  line-height: var(--h2-lh);
  font-weight: var(--font-weight-semibold);
  margin: 0 0 var(--spacing-sm);
}

.cta-block__description {
  font-size: var(--p-size);
  line-height: var(--p-lh);
  margin: 0 0 var(--spacing-lg);
}

.cta-block__description p {
  margin: 0;
}

/* Image */
.cta-block__image {
  flex: 0 0 45%;
  position: relative;
  z-index: 1;
  overflow: hidden;
  border-radius: var(--radius-card-lg);
}

.cta-block__image:empty {
  display: none;
}

.cta-block__image img:first-child {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
  border-radius: var(--radius-card-lg);
}

/* Soundwave decoration */
.cta-block__decoration {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: var(--cta-wave-width);
  background: url('../../images/cta-wave.png') right center / contain no-repeat;
  pointer-events: none;
}

/* Default style — blue */
.cta-block--default .cta-block__inner {
  background-color: var(--color-blue-light);
}

.cta-block--default .cta-block__title,
.cta-block--default .cta-block__description {
  color: var(--color-white);
}

.cta-block--default .btn.btn--outline {
  background-color: var(--color-white);
  border-color: var(--color-white);
  color: var(--color-primary);
  box-shadow: none;
}

.cta-block--default .btn.btn--outline:hover {
  background-color: transparent;
  color: var(--color-white);
}

/* Orange style */
.cta-block--orange .cta-block__inner {
  background-color: var(--color-primary);
}

.cta-block--orange .cta-block__title,
.cta-block--orange .cta-block__description {
  color: var(--color-white);
}

.cta-block--orange .btn.btn--outline {
  background-color: var(--color-white);
  border-color: var(--color-white);
  color: var(--color-primary);
  box-shadow: none;
}

.cta-block--orange .btn.btn--outline:hover {
  background-color: transparent;
  color: var(--color-white);
}

/* Blue style */
.cta-block--blue .cta-block__inner {
  background-color: var(--color-blue);
}

.cta-block--blue .cta-block__title,
.cta-block--blue .cta-block__description {
  color: var(--color-white);
}

/* --------------------------------------------------------------------------
   Responsive — base CTA
   -------------------------------------------------------------------------- */

@media (max-width: 1199px) {
  .cta-block__inner {
    padding: var(--spacing-xl) 40% var(--spacing-xl) var(--spacing-70);
  }
}

@media (max-width: 1023px) {
  .cta-block__inner {
    padding: var(--spacing-xl) 40% var(--spacing-xl) var(--spacing-lg);
  }

  .cta-block__decoration {
    width: auto;
    left: 50%;
    background-size: auto 100%;
    background-position: right center;
  }
}

@media (max-width: 929px) {
  .cta-block {
    --cta-wave-width: auto;
  }

  .cta-block__inner {
    flex-direction: column;
    text-align: center;
    padding: var(--spacing-lg) var(--container-padding);
  }

  .cta-block__decoration {
    position: relative;
    width: 100%;
    left: auto;
    height: 150px;
    right: auto;
    top: auto;
    bottom: auto;
    background: url('../../images/cta-wave-icon.svg') center center / contain no-repeat;
    margin-bottom: var(--spacing-lg);
    order: -2;
  }
}

@media (max-width: 767px) {
  .cta-block {
    --cta-wave-width: auto;
    padding: var(--container-padding) 0;
  }

  .cta-block__inner {
    flex-direction: column;
    text-align: center;
    padding: var(--spacing-lg) var(--container-padding);
  }

  .cta-block__title {
    text-transform: uppercase;
    font-size: 30px;
    line-height: 32px;
  }

  .cta-block__description {
    margin-bottom: var(--spacing-md);
  }

  /* Wave decoration — top center on mobile */
  .cta-block__decoration {
    position: relative;
    width: 100%;
    height: 150px;
    right: auto;
    top: auto;
    bottom: auto;
    background: url('../../images/cta-wave-icon.svg') center center / contain no-repeat;
    margin-bottom: var(--spacing-lg);
    order: -2;
  }

  .cta-block__image {
    order: -1;
    flex: none;
    width: 100%;
    display: none;
  }

  .cta-block--default .cta-block__inner {
    background-color: var(--color-primary-light);
  }
}