/* =========================================================
   Block: Final CTA IL
   File: blocks/il-final-cta/style.css
   ========================================================= */

.il-final-cta-section,
.il-final-cta-editor {
  position: relative;
  width: 100%;
  max-width: none !important;
  padding-top: var(--fcta-il-section-padding-top, 120px);
  padding-bottom: var(--fcta-il-section-padding-bottom, 120px);
  overflow: hidden;
  isolation: isolate;
  box-sizing: border-box;
  background:
    radial-gradient(
      circle at 50% 45%,
      color-mix(
        in srgb,
        var(--fcta-il-glow, rgba(38, 173, 33, 0.18)) calc(var(--fcta-il-glow-opacity, 1) * 100%),
        transparent
      ),
      transparent 28rem
    ),
    linear-gradient(
      180deg,
      color-mix(
        in srgb,
        var(--fcta-il-section-gradient-color, rgba(255, 255, 255, 0.08)) calc(var(--fcta-il-section-gradient-opacity, 0.45) * 100%),
        transparent
      ),
      transparent 42%
    ),
    var(--fcta-il-bg, #1a301a);
  color: var(--fcta-il-heading-color, #ffffff);
  border-style: none !important;
}

.il-final-cta-section {
  margin: 0;
}


/* =========================================================
   Decorative background
   ========================================================= */

.il-final-cta-section::before,
.il-final-cta-editor::before {
  content: "";
  display: var(--fcta-il-grid-pattern-display, block);
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image:
    linear-gradient(
      var(--fcta-il-grid-pattern-color, rgba(255, 255, 255, 0.08)) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      var(--fcta-il-grid-pattern-color, rgba(255, 255, 255, 0.08)) 1px,
      transparent 1px
    );
  background-size: 72px 72px;
  opacity: var(--fcta-il-grid-pattern-opacity, 0.34);
}

.il-final-cta-section::after,
.il-final-cta-editor::after {
  content: "";
  display: var(--fcta-il-circle-display, block);
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: 360px;
  height: 360px;
  border: 1px solid var(--fcta-il-circle-color, rgba(38, 173, 33, 0.18));
  border-radius: 999px;
  transform: translate(-50%, -50%);
  opacity: var(--fcta-il-circle-opacity, 0.46);
  pointer-events: none;
  animation: var(--fcta-il-circle-animation, fctaIlPulse 5.8s ease-in-out infinite);
}


/* =========================================================
   Layout
   ========================================================= */

.il-final-cta__container {
  position: relative;
  z-index: 2;
  width: min(
    calc(100% - (var(--fcta-il-container-padding-x, 48px) * 2)),
    var(--fcta-il-container-max-width, 920px)
  );
  max-width: none;
  margin-inline: auto;
  box-sizing: border-box;
}

.il-final-cta-section[style*="--fcta-il-container-max-width:none"] .il-final-cta__container,
.il-final-cta-editor[style*="--fcta-il-container-max-width:none"] .il-final-cta__container {
  width: calc(100% - (var(--fcta-il-container-padding-x, 48px) * 2));
  max-width: none;
}

.il-final-cta__content {
  width: 100%;
  max-width: var(--fcta-il-content-max-width, 720px);
  margin-inline: auto;
  text-align: var(--fcta-il-content-text-align, center);
  box-sizing: border-box;
}


/* =========================================================
   Heading
   ========================================================= */

.il-final-cta__heading {
  width: 100%;
  max-width: var(--fcta-il-content-max-width, 720px);
  margin: 0 auto var(--fcta-il-heading-margin-bottom, 28px);
  color: var(--fcta-il-heading-color, #ffffff);
  font-family: var(--fcta-il-heading-family, Inter, Arial, sans-serif);
  font-size: var(--fcta-il-heading-size, 54px);
  font-weight: var(--fcta-il-heading-weight, 800);
  line-height: var(--fcta-il-heading-line, 0.98);
  letter-spacing: var(--fcta-il-heading-spacing, -0.04em);
  text-transform: var(--fcta-il-heading-transform, none);
  box-sizing: border-box;
}

.il-final-cta__heading span {
  display: inline;
}

.il-final-cta__heading-highlight {
  color: var(--fcta-il-heading-highlight-color, #26ad21);
}


/* =========================================================
   Description
   ========================================================= */

.il-final-cta__description {
  width: 100%;
  max-width: var(--fcta-il-description-max-width, 650px);
  margin: 0 auto;
  color: var(--fcta-il-description-color, rgba(255, 255, 255, 0.62));
  font-family: var(--fcta-il-description-family, Lato, Arial, sans-serif);
  font-size: var(--fcta-il-description-size, 16px);
  font-weight: var(--fcta-il-description-weight, 400);
  line-height: var(--fcta-il-description-line, 1.6);
  letter-spacing: var(--fcta-il-description-spacing, 0em);
  text-transform: var(--fcta-il-description-transform, none);
  box-sizing: border-box;
}


/* =========================================================
   Buttons
   ========================================================= */

.il-final-cta__buttons {
  display: flex;
  flex-direction: var(--fcta-il-buttons-direction, row);
  align-items: center;
  justify-content: var(--fcta-il-buttons-justify, center);
  gap: var(--fcta-il-buttons-gap, 36px);
  margin-top: var(--fcta-il-buttons-margin-top, 64px);
  box-sizing: border-box;
}

.il-final-cta__button-wrap {
  position: relative;
  display: inline-flex;
  box-sizing: border-box;
}

.il-final-cta__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  box-sizing: border-box;
  transition: var(
    --fcta-il-button-transition,
    transform 0.24s ease,
    color 0.24s ease,
    background-color 0.24s ease,
    border-color 0.24s ease,
    box-shadow 0.24s ease,
    filter 0.24s ease
  );
}

.il-final-cta__button:hover {
  transform: var(--fcta-il-button-hover-transform, translateY(-2px));
  filter: var(--fcta-il-button-hover-filter, brightness(1.03));
}

.il-final-cta__button:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}


/* =========================================================
   Primary button
   ========================================================= */

.il-final-cta__button-primary {
  padding-top: var(--fcta-il-primary-padding-top, 18px);
  padding-right: var(--fcta-il-primary-padding-right, 28px);
  padding-bottom: var(--fcta-il-primary-padding-bottom, 18px);
  padding-left: var(--fcta-il-primary-padding-left, 28px);
  color: var(--fcta-il-primary-color, #ffffff);
  background: var(--fcta-il-primary-bg, #26ad21);
  border-width: var(--fcta-il-primary-stroke-size, 1px);
  border-style: solid;
  border-color: var(--fcta-il-primary-stroke, transparent);
  border-radius: var(--fcta-il-primary-radius, 999px);
  font-family: var(--fcta-il-primary-family, Lato, Arial, sans-serif);
  font-size: var(--fcta-il-primary-size, 15px);
  font-weight: var(--fcta-il-primary-weight, 700);
  line-height: var(--fcta-il-primary-line, 1);
  letter-spacing: var(--fcta-il-primary-spacing, 0em);
  text-transform: var(--fcta-il-primary-transform, none);
  box-shadow: 0 16px 36px var(--fcta-il-primary-shadow-color, rgba(38, 173, 33, 0.18));
}

.il-final-cta__button-primary:hover {
  color: var(--fcta-il-primary-color-hover, #ffffff);
  background: var(--fcta-il-primary-bg-hover, #4a8a4a);
  border-color: var(--fcta-il-primary-stroke-hover, transparent);
  box-shadow: 0 20px 42px var(--fcta-il-primary-shadow-color, rgba(38, 173, 33, 0.18));
}


/* =========================================================
   Secondary button
   ========================================================= */

.il-final-cta__button-secondary {
  padding-top: var(--fcta-il-secondary-padding-top, 18px);
  padding-right: var(--fcta-il-secondary-padding-right, 34px);
  padding-bottom: var(--fcta-il-secondary-padding-bottom, 18px);
  padding-left: var(--fcta-il-secondary-padding-left, 34px);
  color: var(--fcta-il-secondary-color, #ffffff);
  background: var(--fcta-il-secondary-bg, transparent);
  border-width: var(--fcta-il-secondary-stroke-size, 1px);
  border-style: solid;
  border-color: var(--fcta-il-secondary-stroke, rgba(255, 255, 255, 0.62));
  border-radius: var(--fcta-il-secondary-radius, 999px);
  font-family: var(--fcta-il-secondary-family, Lato, Arial, sans-serif);
  font-size: var(--fcta-il-secondary-size, 15px);
  font-weight: var(--fcta-il-secondary-weight, 700);
  line-height: var(--fcta-il-secondary-line, 1);
  letter-spacing: var(--fcta-il-secondary-spacing, 0em);
  text-transform: var(--fcta-il-secondary-transform, none);
  box-shadow: 0 16px 36px var(--fcta-il-secondary-shadow-color, rgba(255, 255, 255, 0.08));
}

.il-final-cta__button-secondary:hover {
  color: var(--fcta-il-secondary-color-hover, #1a301a);
  background: var(--fcta-il-secondary-bg-hover, #ffffff);
  border-color: var(--fcta-il-secondary-stroke-hover, #ffffff);
  box-shadow: 0 20px 42px var(--fcta-il-secondary-shadow-color, rgba(255, 255, 255, 0.08));
}


/* =========================================================
   Animation
   ========================================================= */

@keyframes fctaIlPulse {
  0%,
  100% {
    transform: translate(-50%, -50%) scale(0.94);
    opacity: calc(var(--fcta-il-circle-opacity, 0.46) * 0.48);
  }

  50% {
    transform: translate(-50%, -50%) scale(1.08);
    opacity: var(--fcta-il-circle-opacity, 0.46);
  }
}


/* =========================================================
   Tablet / small desktop
   ========================================================= */

@media (max-width: 1100px) {
  .il-final-cta__heading {
    font-size: clamp(38px, 5vw, var(--fcta-il-heading-size, 54px));
  }
}


/* =========================================================
   Mobile
   ========================================================= */

@media (max-width: 767px) {
  .il-final-cta-section,
  .il-final-cta-editor {
    padding-top: var(--fcta-il-mobile-section-padding-top, 82px);
    padding-bottom: var(--fcta-il-mobile-section-padding-bottom, 82px);
  }

  .il-final-cta-section::after,
  .il-final-cta-editor::after {
    width: 280px;
    height: 280px;
  }

  .il-final-cta__container {
    width: calc(100% - (var(--fcta-il-mobile-container-padding-x, 24px) * 2));
    max-width: none;
  }

  .il-final-cta-section[style*="--fcta-il-container-max-width:none"] .il-final-cta__container,
  .il-final-cta-editor[style*="--fcta-il-container-max-width:none"] .il-final-cta__container {
    width: calc(100% - (var(--fcta-il-mobile-container-padding-x, 24px) * 2));
    max-width: none;
  }

  .il-final-cta__content {
    max-width: var(--fcta-il-mobile-content-max-width, 720px);
    text-align: var(--fcta-il-mobile-text-align, center);
  }

  .il-final-cta__heading {
    max-width: 100%;
    font-size: var(--fcta-il-mobile-heading-size, 38px);
    line-height: var(--fcta-il-mobile-heading-line, 1.08);
  }

  .il-final-cta__description {
    max-width: 100%;
    font-size: var(--fcta-il-mobile-description-size, 16px);
    line-height: var(--fcta-il-mobile-description-line, 1.6);
  }

  .il-final-cta__buttons {
    flex-direction: var(--fcta-il-mobile-buttons-direction, column);
    gap: var(--fcta-il-mobile-buttons-gap, 14px);
    margin-top: var(--fcta-il-mobile-buttons-margin-top, 42px);
    justify-content: center;
  }

  .il-final-cta__button-wrap {
    width: var(--fcta-il-mobile-buttons-width, 100%);
  }

  .il-final-cta__button {
    width: var(--fcta-il-mobile-buttons-width, 100%);
    white-space: normal;
    text-align: center;
  }
}


/* =========================================================
   Small mobile
   ========================================================= */

@media (max-width: 480px) {
  .il-final-cta__heading {
    font-size: clamp(30px, 10vw, var(--fcta-il-mobile-heading-size, 38px));
  }

  .il-final-cta__button {
    min-height: 46px;
  }
}


/* =========================================================
   Reduced motion
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  .il-final-cta-section::after,
  .il-final-cta-editor::after,
  .il-final-cta__button {
    animation: none !important;
    transition: none !important;
  }

  .il-final-cta__button:hover {
    transform: none;
    filter: none;
  }
}