/**
 * Nexo Page Kit — Interactive Steps Section.
 */

.nexo-interactive-steps-section {
  box-sizing: border-box;
  width: 100%;
  margin-top: var(--nexo-interactive-steps-section-margin-top, 0);
  margin-bottom: var(--nexo-interactive-steps-section-margin-bottom, 0);
  padding: var(--nexo-interactive-steps-section-padding, 80px 24px);
  background: var(--nexo-interactive-steps-section-bg, #f4f4f4);
  border: 0;
  outline: 0;
}

.nexo-interactive-steps-section *,
.nexo-interactive-steps-section *::before,
.nexo-interactive-steps-section *::after {
  box-sizing: border-box;
}

.nexo-interactive-steps-section__container {
  width: min(
    var(--nexo-interactive-steps-section-container-width, 980px),
    100%
  );
  margin: var(--nexo-interactive-steps-section-container-margin, 0 auto);
}

.nexo-interactive-steps-section__header {
  width: min(var(--nexo-interactive-steps-section-header-width, 760px), 100%);
  margin-right: auto;
  margin-left: auto;
  text-align: var(--nexo-interactive-steps-section-header-align, center);
}

.nexo-interactive-steps-section .nexo-interactive-steps-section__title {
  margin: 0;
  color: var(--nexo-interactive-steps-section-title-color, #25292a);
  font-family: var(
    --nexo-interactive-steps-section-title-font-family,
    var(
      --nexo-font-family-headings,
      "Nunito Sans",
      system-ui,
      -apple-system,
      "Segoe UI",
      Roboto,
      Arial,
      sans-serif
    )
  );
  font-size: var(--nexo-interactive-steps-section-title-size, 40px);
  font-weight: var(--nexo-interactive-steps-section-title-weight, 800);
  font-style: var(--nexo-interactive-steps-section-title-style, normal);
  line-height: var(--nexo-interactive-steps-section-title-line-height, 1.08);
  letter-spacing: var(--nexo-interactive-steps-section-title-letter-spacing, 0);
  text-align: var(--nexo-interactive-steps-section-title-align, center);
  text-transform: var(
    --nexo-interactive-steps-section-title-transform,
    uppercase
  );
}

.nexo-interactive-steps-section__description {
  max-width: 620px;
  margin: 26px auto 0;
  color: var(--nexo-interactive-steps-section-description-color, #111827);
  font-family: var(
    --nexo-interactive-steps-section-description-font-family,
    var(
      --nexo-font-family-body,
      "Nunito Sans",
      system-ui,
      -apple-system,
      "Segoe UI",
      Roboto,
      Arial,
      sans-serif
    )
  );
  font-size: var(--nexo-interactive-steps-section-description-size, 13px);
  font-weight: var(--nexo-interactive-steps-section-description-weight, 400);
  font-style: var(--nexo-interactive-steps-section-description-style, normal);
  line-height: var(
    --nexo-interactive-steps-section-description-line-height,
    1.45
  );
  text-align: var(--nexo-interactive-steps-section-description-align, center);
}

.nexo-interactive-steps-section__body {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 40px;
  width: min(var(--nexo-interactive-steps-section-body-width, 860px), 100%);
  margin: var(--nexo-interactive-steps-section-gap, 42px) auto 0;
}

.nexo-interactive-steps-section__rail {
  display: grid;
  gap: var(--nexo-interactive-steps-section-card-gap, 12px);
  align-self: stretch;
}

.nexo-interactive-steps-section__rail-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  min-height: var(--nexo-interactive-steps-section-card-min-height, 120px);
  padding: 0;
  color: var(--nexo-interactive-steps-section-rail-color, #ffffff);
  font-family: var(
    --nexo-interactive-steps-section-rail-font-family,
    var(
      --nexo-font-family-body,
      "Nunito Sans",
      system-ui,
      -apple-system,
      "Segoe UI",
      Roboto,
      Arial,
      sans-serif
    )
  );
  font-size: var(--nexo-interactive-steps-section-rail-font-size, 24px);
  font-weight: var(--nexo-interactive-steps-section-rail-font-weight, 800);
  line-height: 1;
  background: var(--nexo-interactive-steps-section-rail-bg, #d9d9d9);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition:
    background-color 0.18s ease,
    color 0.18s ease,
    transform 0.18s ease;
}

.nexo-interactive-steps-section__rail-button:hover,
.nexo-interactive-steps-section__rail-button:focus {
  outline: none;
  transform: translateY(-1px);
}

.nexo-interactive-steps-section__rail-button.is-active {
  color: var(--nexo-interactive-steps-section-rail-active-color, #000000);
  background: var(--nexo-interactive-steps-section-rail-active-bg, #f75c00);
}

.nexo-interactive-steps-section__cards {
  display: grid;
  gap: var(--nexo-interactive-steps-section-card-gap, 12px);
  min-width: 0;
}

.nexo-interactive-steps-section__card {
  min-width: 0;
  min-height: var(--nexo-interactive-steps-section-card-min-height, 120px);
  padding: var(--nexo-interactive-steps-section-card-padding, 28px 32px);
  color: var(--nexo-interactive-steps-section-inactive-color, #ffffff);
  background: var(--nexo-interactive-steps-section-inactive-bg, #020609);
  border-radius: var(--nexo-interactive-steps-section-card-radius, 8px);
  cursor: pointer;
  transition:
    background-color 0.18s ease,
    color 0.18s ease,
    transform 0.18s ease,
    box-shadow 0.18s ease;
}

.nexo-interactive-steps-section__card:hover,
.nexo-interactive-steps-section__card:focus {
  outline: none;
  transform: translateY(-1px);
}

.nexo-interactive-steps-section__card.is-active {
  color: var(--nexo-interactive-steps-section-active-color, #ffffff);
  background: var(--nexo-interactive-steps-section-active-bg, #f75c00);
  box-shadow: 0 16px 30px rgba(15, 23, 42, 0.16);
}

.nexo-interactive-steps-section__card-title {
  margin: 0;
  color: currentColor;
  font-family: var(
    --nexo-interactive-steps-section-step-title-font-family,
    var(
      --nexo-font-family-headings,
      "Nunito Sans",
      system-ui,
      -apple-system,
      "Segoe UI",
      Roboto,
      Arial,
      sans-serif
    )
  );
  font-size: var(--nexo-interactive-steps-section-step-title-size, 24px);
  font-weight: var(--nexo-interactive-steps-section-step-title-weight, 800);
  font-style: var(--nexo-interactive-steps-section-step-title-style, normal);
  line-height: var(
    --nexo-interactive-steps-section-step-title-line-height,
    1.2
  );
}

.nexo-interactive-steps-section__card-text {
  margin: 26px 0 0;
  color: currentColor;
  font-family: var(
    --nexo-interactive-steps-section-step-text-font-family,
    var(
      --nexo-font-family-body,
      "Nunito Sans",
      system-ui,
      -apple-system,
      "Segoe UI",
      Roboto,
      Arial,
      sans-serif
    )
  );
  font-size: var(--nexo-interactive-steps-section-step-text-size, 12px);
  font-weight: var(--nexo-interactive-steps-section-step-text-weight, 400);
  font-style: var(--nexo-interactive-steps-section-step-text-style, normal);
  line-height: var(
    --nexo-interactive-steps-section-step-text-line-height,
    1.45
  );
}

@media (max-width: 767px) {
  .nexo-interactive-steps-section {
    padding-right: 18px;
    padding-left: 18px;
  }

  .nexo-interactive-steps-section__body {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 18px;
  }

  .nexo-interactive-steps-section__rail-button {
    width: 44px;
    min-height: 92px;
    font-size: min(
      var(--nexo-interactive-steps-section-rail-font-size, 24px),
      18px
    );
  }

  .nexo-interactive-steps-section__card {
    min-height: 92px;
    padding: 22px 20px;
  }

  .nexo-interactive-steps-section .nexo-interactive-steps-section__title {
    font-size: clamp(
      28px,
      8vw,
      var(--nexo-interactive-steps-section-title-size, 38px)
    );
  }

  .nexo-interactive-steps-section__card-title {
    font-size: clamp(
      18px,
      5vw,
      var(--nexo-interactive-steps-section-step-title-size, 24px)
    );
  }
}

/**
 * Ajustes específicos da prévia administrativa.
 */
#poststuff
  .nexo-page-kit-admin-preview
  .nexo-interactive-steps-section
  .nexo-interactive-steps-section__title {
  margin: 0;
  padding: 0;
  color: var(--nexo-interactive-steps-section-title-color, #25292a);
  font-family: var(
    --nexo-interactive-steps-section-title-font-family,
    var(
      --nexo-font-family-headings,
      "Nunito Sans",
      system-ui,
      -apple-system,
      "Segoe UI",
      Roboto,
      Arial,
      sans-serif
    )
  );
  font-size: var(--nexo-interactive-steps-section-title-size, 40px);
  font-weight: var(--nexo-interactive-steps-section-title-weight, 800);
  font-style: var(--nexo-interactive-steps-section-title-style, normal);
  line-height: var(--nexo-interactive-steps-section-title-line-height, 1.08);
  letter-spacing: var(--nexo-interactive-steps-section-title-letter-spacing, 0);
  text-align: var(--nexo-interactive-steps-section-title-align, center);
  text-transform: var(
    --nexo-interactive-steps-section-title-transform,
    uppercase
  );
}