/**
** Theme Container Marken-Check
 * This file contains the styles for the container marken-check in the theme.
*/

.wp-block-uagb-container.cont-marken-check {
  background-color: var(--ast-global-color-4);
  padding: calc(var(--gap-m) * 2 + 6px) calc(var(--gap-l) * 3 - 5px);
  border-radius: var(--border-radius-20);
  display: flex;
  flex-direction: row;
  gap: var(--gap-m);
}

.wp-block-uagb-info-box.marken-check * {
  color: var(--ast-global-color-3) !important;
}

.wp-block-uagb-container.cont-marken-check .wp-block-uagb-info-box,
.wp-block-uagb-container.cont-marken-check.employer {
  gap: var(--gap-m);
}

.wp-block-uagb-container.cont-marken-check
  .wp-block-uagb-info-box
  .uagb-ifb-content {
  display: flex;
  flex-direction: column;
  gap: var(--gap-l);
  align-items: start;
  text-align: left;
}

.wp-block-uagb-info-box.marken-check .uagb-ifb-desc {
  font-family: var(--headlinefont);
  font-size: var(--h4-font-size);
  font-weight: 800;
  font-style: normal;
  line-height: 1;
  letter-spacing: -0.5px;
}

.wp-block-uagb-container.cont-marken-check
  .wp-block-uagb-info-box
  .uagb-ifb-content
  .uagb-ifb-title {
  margin-bottom: 0 !important;
}

.wp-block-uagb-container.cont-marken-check .uagb-ifb-image-content img {
  width: calc((var(--cont-gap) * 2) - 10px);
}

/** Button **/
.cont-marken-check .uagb-infobox-cta-link.wp-block-button__link {
  border: 1px solid var(--ast-global-color-3) !important;
  border-radius: 500px;
  font-family: var(--mainfont) !important;
  font-size: var(--btn-font-size) !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  height: auto;
  transition: all 0.5s ease;
  padding: 0.8em 1.8em;
}

.cont-marken-check .uagb-infobox-cta-link.wp-block-button__link {
  display: inline-block;
  z-index: 9;
  position: relative;
}

.cont-marken-check .uagb-infobox-cta-link.wp-block-button__link span {
  display: flex;
  gap: 10px;
  align-items: center;
  transition: all 0.5s ease;
}

.cont-marken-check .uagb-infobox-cta-link.wp-block-button__link span::after {
  content: "";
  display: inline-block;
  --my-size: 0.7em;
  width: calc(var(--my-size) / 1.6955);
  height: var(--my-size);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transition: all 0.5s ease;
  background-image: url(../../img/button-arrow.svg);
}

/* hover */
.cont-marken-check .uagb-infobox-cta-link.wp-block-button__link:hover {
  border: 1px solid var(--ast-global-color-3) !important;
  background-color: var(--ast-global-color-3);
}

.cont-marken-check
  .uagb-infobox-cta-link.wp-block-button__link:hover
  .uagb-inline-editing {
  color: var(--ast-global-color-1) !important;
}

.cont-marken-check
  .uagb-infobox-cta-link.wp-block-button__link:hover
  span::after {
  background-image: url(../../img/button-arrow-white.svg);
}

/* version on employer branding */
.wp-block-uagb-container.cont-marken-check.employer .col-img figure img {
  scale: 1.2;
}

.wp-block-uagb-container.cont-marken-check.employer .col-img figure {
  width: 60%;
}

/**----------------- Responsive -------------**/

@media (max-width: 950px) {
  .wp-block-uagb-container.cont-marken-check .wp-block-uagb-info-box,
  .wp-block-uagb-container.cont-marken-check.employer {
    display: flex;
    flex-direction: column-reverse;
  }

  .wp-block-uagb-container.cont-marken-check .uagb-ifb-content {
    gap: var(--gap-m) !important;
    align-items: center !important;
  }

  .wp-block-uagb-container.cont-marken-check .uagb-ifb-content * {
    text-align: center;
  }

  .wp-block-uagb-container.cont-marken-check .wp-block-button {
    align-self: center;
  }

  .wp-block-uagb-container.cont-marken-check.employer .col-text {
    max-width: unset !important;
  }
}

@media (max-width: 576px) {
  .wp-block-uagb-container.cont-marken-check {
    padding: 50px 40px;
  }

  .wp-block-uagb-container.cont-marken-check.employer .col-img {
    margin-bottom: var(--gap-s);
  }
  .wp-block-uagb-container.cont-marken-check.employer .col-img figure {
    width: 80%;
  }
}