/*
 * CTA block – ACF flexible layout 'cta' in 'blokker'.
 * Markup: template-parts/content-page.php
 * Enqueued from functions.php (kodeks_cta_block_style) only when the layout is used.
 */

.cta-block {
  margin: 60px 0;
}

.cta-block .wrapper-item {
  display: flex;
  align-items: center;
  gap: 30px;
  padding: 25px 30px;
  border-radius: 10px;
  background-color: #e8eeec;
  color: #4d6772;
}

.cta-block a.wrapper-item {
  transition: background-color .3s ease;
}

.cta-block a.wrapper-item:hover,
.cta-block a.wrapper-item:focus {
  background-color: #d7e0dd;
  color: #4d6772;
}

/* Icon (left) */
.cta-block .cta-icon {
  flex: 0 0 auto;
  /* align-self: flex-start; */
  font-size: 3rem;
  color: #50bfaa;
}

/* Text (middle) */
.cta-block .cta-content {
  flex: 1 1 auto;
  min-width: 0;
}

.cta-block .eyebrow {
  margin-bottom: 5px;
  font-size: .875rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.cta-block h2 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.3;
}

.cta-block .excerpt {
  margin-top: 5px;
  font-size: 1.125rem;
}

/* In case the excerpt is a WYSIWYG/textarea field that outputs <p> */
.cta-block .excerpt p {
  margin: 0;
  font-size: inherit;
}

/* Arrow (right) */
.cta-block .cta-arrow {
  flex: 0 0 auto;
  font-size: 1.5rem;
  transition: transform .3s ease;
}

.cta-block a.wrapper-item:hover .cta-arrow,
.cta-block a.wrapper-item:focus .cta-arrow {
  transform: translateX(5px);
}

@media screen and (max-width: 1199px) {
  .cta-block {
    margin: 40px;
  }
}

@media screen and (max-width: 667px) {
  .cta-block {
    margin: 40px 20px;
  }

  .cta-block .wrapper-item {
    flex-wrap: wrap;
    gap: 10px 15px;
    padding: 20px;
  }

  /* Icon on its own line above the text; text and arrow share the row below */
  .cta-block .cta-icon {
    flex-basis: 100%;
    font-size: 2.5rem;
  }

  .cta-block .cta-content {
    flex-basis: 0;
  }
}