/* mod_fai_roadmap — animated timeline */

.mod-fai-roadmap {
  width: 100%;
}

.mod-fai-roadmap__header {
  text-align: center;
  margin-block-end: var(--spacing-10);
}

.mod-fai-roadmap__headline {
  color: var(--color-secondary-500);
  margin-block-end: var(--spacing-2);
}

.mod-fai-roadmap__intro {
  color: var(--color-text-primary-600);
  max-width: 640px;
  margin-inline: auto;
}

/* ---------------------------------
 * Timeline track + progress
 * --------------------------------- */

.mod-fai-roadmap__timeline {
  --roadmap-marker-size: 3rem;
  --roadmap-gap: var(--spacing-10);
  --roadmap-progress: 0;

  position: relative;
  list-style: none;
  margin: 0;
  padding: var(--spacing-4) 0;
  display: flex;
  flex-direction: column;
  gap: var(--roadmap-gap);
  padding-inline: var(--spacing-28);
}

@media (max-width: 1074px) {
  .mod-fai-roadmap__timeline {
    padding-inline: 0;
  }
}

/* Track */
.mod-fai-roadmap__timeline::before,
.mod-fai-roadmap__timeline::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 3px;
  transform: translateX(-50%);
  border-radius: var(--radius-full);
  z-index: -1;
}

.mod-fai-roadmap__timeline::before {
  background: var(--color-primary-200);
}

/* Progress fill, driven by --roadmap-progress (0 to 1) via JS */
.mod-fai-roadmap__timeline::after {
  background: var(--gradient-primary);
  transform: translateX(-50%) scaleY(var(--roadmap-progress));
  transform-origin: top center;
  transition: transform 0.15s linear;
}

/* ---------------------------------
 * Items
 * --------------------------------- */

.mod-fai-roadmap__item {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: var(--roadmap-marker-size);
}

.mod-fai-roadmap__marker {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 0;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--roadmap-marker-size);
  height: var(--roadmap-marker-size);

  background: var(--gradient-primary);
  color: var(--color-secondary-500);
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  border-radius: var(--radius-full);
  border: 3px solid var(--color-background);
  box-shadow: var(--shadow-base);
}

.mod-fai-roadmap__card {
  position: relative;
  width: calc(50% - var(--roadmap-marker-size) - var(--spacing-6));
}

/* Horizontal connector between marker and card */
.mod-fai-roadmap__card::before {
  content: "";
  position: absolute;
  top: 50%;
  width: calc(var(--spacing-6) + var(--roadmap-marker-size) / 2);
  height: 3px;
  background: var(--color-primary-200);
}

/* Desktop: alternate left / right */
.mod-fai-roadmap__item:nth-child(odd) .mod-fai-roadmap__card {
  margin-inline-end: auto;
}

.mod-fai-roadmap__item:nth-child(odd) .mod-fai-roadmap__card::before {
  left: 100%;
}

.mod-fai-roadmap__item:nth-child(even) .mod-fai-roadmap__card {
  margin-inline-start: auto;
}

.mod-fai-roadmap__item:nth-child(even) .mod-fai-roadmap__card::before {
  right: 100%;
}

/* ---------------------------------
 * Scroll reveal animation
 * (only once JS marks the module ready, so no-JS keeps content visible)
 * --------------------------------- */

 .mod-fai-roadmap--ready {
  padding-block-end: var(--spacing-6);
 }

.mod-fai-roadmap--ready .mod-fai-roadmap__marker {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.35);
  transition:
    opacity 0.45s ease,
    transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.mod-fai-roadmap--ready .mod-fai-roadmap__card {
  opacity: 0;
  transition:
    opacity 0.6s ease,
    transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.mod-fai-roadmap--ready .mod-fai-roadmap__item:nth-child(odd) .mod-fai-roadmap__card {
  transform: translateX(-3rem);
}

.mod-fai-roadmap--ready .mod-fai-roadmap__item:nth-child(even) .mod-fai-roadmap__card {
  transform: translateX(3rem);
}

.mod-fai-roadmap--ready .mod-fai-roadmap__item.is-visible .mod-fai-roadmap__marker {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.mod-fai-roadmap--ready .mod-fai-roadmap__item.is-visible .mod-fai-roadmap__card {
  opacity: 1;
  transform: translateX(0);
}

/* ---------------------------------
 * Result cards + branch connectors
 * --------------------------------- */

.mod-fai-roadmap__results {
  position: relative;
  padding-block-start: var(--spacing-20);
}

/* Blue line descending from the roadmap handoff down to the branch. */
.mod-fai-roadmap__results::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 50%;
  width: 3px;
  height: var(--spacing-12);
  background: var(--color-secondary-400);
  transform: translateX(-50%);
}

.mod-fai-roadmap__results-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--roadmap-cols, 4), minmax(0, 1fr));
  gap: var(--spacing-5);
}

/* Blue dot where the roadmap timeline ends, overlapping the gold line. */
.mod-fai-roadmap__results-grid::before {
  content: "";
  position: absolute;
  inset-block-start: calc(var(--spacing-20) * -1);
  inset-inline-start: 50%;
  width: 0.875rem;
  height: 0.875rem;
  background: var(--color-secondary-400);
  border-radius: var(--radius-full);
  transform: translate(-50%, -50%);
  z-index: 0;
}

.mod-fai-roadmap__result {
  position: relative;
  display: flex;
  min-width: 0;
}

/* Vertical drop from the branch into each card. */
.mod-fai-roadmap__result::before {
  content: "";
  position: absolute;
  inset-block-start: calc(var(--spacing-8) * -1);
  inset-inline-start: 50%;
  width: 3px;
  height: var(--spacing-8);
  background: var(--color-secondary-400);
  transform: translateX(-50%);
}

/* Horizontal branch drawn per card so it starts and ends exactly at the
 * first/last drops, forming clean corners. */
.mod-fai-roadmap__result::after {
  content: "";
  position: absolute;
  inset-block-start: calc(var(--spacing-8) * -1);
  inset-inline-start: calc(var(--spacing-5) / -2);
  inset-inline-end: calc(var(--spacing-5) / -2);
  height: 3px;
  background: var(--color-secondary-400);
}

/* The branch opens at the first card and closes at the last card of the
 * first row (classes set by the template based on the card count). */
.mod-fai-roadmap__result--branch-start::after {
  inset-inline-start: calc(50% - 1.5px);
}

.mod-fai-roadmap__result--branch-end::after {
  inset-inline-end: calc(50% - 1.5px);
}

/* Cards wrapped onto extra rows are not connected to the branch. */
@media (min-width: 1075px) {
  .mod-fai-roadmap__result--below::before,
  .mod-fai-roadmap__result--below::after {
    display: none;
  }
}

.mod-fai-roadmap__result-card.fai-card {
  max-width: none;
  height: 100%;
  padding: var(--spacing-8);
  gap: var(--spacing-6);
}

.mod-fai-roadmap__result-card .fai-card__title {
  font-size: var(--text-xl);
}

.mod-fai-roadmap__result-card .fai-card__body {
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
}

.mod-fai-roadmap__card-number {
  display: inline-flex;
  padding: var(--spacing-1);
  align-items: flex-start;
  border-radius: var(--radius-sm);
  border: var(--border-thin) var(--color-primary-500);
  color: var(--color-primary-500);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-style: normal;
  font-weight: var(--font-bold);
  line-height: normal;
}

.mod-fai-roadmap__result-icon {
  color: var(--color-text-primary);
  font-size: var(--text-4xl) !important;
}

.mod-fai-roadmap__card-subtitle {
  font-weight: var(--font-light);
}

.mod-fai-roadmap__results--standalone {
  padding-block-start: 0;
}

.mod-fai-roadmap__results--standalone::before,
.mod-fai-roadmap__results--standalone .mod-fai-roadmap__results-grid::before,
.mod-fai-roadmap__results--standalone .mod-fai-roadmap__result::before,
.mod-fai-roadmap__results--standalone .mod-fai-roadmap__result::after {
  display: none;
}

.mod-fai-roadmap--ready .mod-fai-roadmap__result {
  opacity: 0;
  transform: translateY(var(--spacing-8));
  transition:
    opacity 0.6s ease,
    transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.mod-fai-roadmap--ready .mod-fai-roadmap__result.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.mod-fai-roadmap--ready .mod-fai-roadmap__result:nth-child(2) {
  transition-delay: 0.08s;
}

.mod-fai-roadmap--ready .mod-fai-roadmap__result:nth-child(3) {
  transition-delay: 0.16s;
}

.mod-fai-roadmap--ready .mod-fai-roadmap__result:nth-child(4) {
  transition-delay: 0.24s;
}

/* ---------------------------------
 * Mobile / tablet: line on the left, cards all on the right
 * --------------------------------- */

@media (max-width: 1074px) {
  .mod-fai-roadmap__timeline {
    --roadmap-marker-size: 2.5rem;
    --roadmap-gap: var(--spacing-8);
  }

  .mod-fai-roadmap__timeline::before,
  .mod-fai-roadmap__timeline::after {
    left: calc(var(--roadmap-marker-size) / 2);
  }

  .mod-fai-roadmap__marker {
    left: calc(var(--roadmap-marker-size) / 2);
    font-size: var(--text-base);
  }

  .mod-fai-roadmap__card {
    width: calc(100% - var(--roadmap-marker-size) - var(--spacing-6));
    margin-inline-start: auto !important;
    margin-inline-end: 0 !important;
  }

  .mod-fai-roadmap__card::before {
    left: auto !important;
    right: 100% !important;
    width: var(--spacing-6);
  }

  /* Everything slides in from the right */
  .mod-fai-roadmap--ready .mod-fai-roadmap__item:nth-child(odd) .mod-fai-roadmap__card,
  .mod-fai-roadmap--ready .mod-fai-roadmap__item:nth-child(even) .mod-fai-roadmap__card {
    transform: translateX(3rem);
  }

  .mod-fai-roadmap--ready .mod-fai-roadmap__item.is-visible .mod-fai-roadmap__card {
    transform: translateX(0);
  }

  .mod-fai-roadmap .fai-mini-card {
    padding: var(--spacing-4) var(--spacing-5);
  }

  .mod-fai-roadmap .fai-mini-card__icon {
    font-size: var(--text-4xl) !important;
  }

  .mod-fai-roadmap__results {
    --roadmap-marker-size: 2.5rem;

    padding-block-start: var(--spacing-8);
    padding-inline-start: calc(var(--roadmap-marker-size) + var(--spacing-6));
  }

  /* The vertical line is drawn per card (see __result::after below) so it
   * can stop at the last card's corner. */
  .mod-fai-roadmap__results::before {
    display: none;
  }

  .mod-fai-roadmap__results-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--spacing-8);
  }

  /* Vertical line segment per card, ending in an L-corner at the last one. */
  .mod-fai-roadmap__result::after {
    inset-block-start: calc(var(--spacing-8) * -1);
    inset-block-end: 0;
    inset-inline-start: calc((var(--spacing-6) + var(--roadmap-marker-size) / 2) * -1);
    inset-inline-end: auto;
    width: 3px;
    height: auto;
    transform: translateX(-50%);
  }

  .mod-fai-roadmap__result:first-child::after {
    inset-inline-start: calc((var(--spacing-6) + var(--roadmap-marker-size) / 2) * -1);
  }

  .mod-fai-roadmap__result:last-child::after {
    inset-inline-end: auto;
    inset-block-end: 50%;
  }

  /* Junction dot sits where the roadmap line hands off to the card column. */
  .mod-fai-roadmap__results-grid::before {
    inset-block-start: calc(var(--spacing-8) * -1);
    inset-inline-start: calc((var(--roadmap-marker-size) / 2 + var(--spacing-6)) * -1);
  }

  .mod-fai-roadmap__result::before {
    inset-block-start: 50%;
    inset-inline-start: calc((var(--spacing-6) + var(--roadmap-marker-size) / 2) * -1);
    width: calc(var(--spacing-6) + var(--roadmap-marker-size) / 2);
    height: 3px;
    transform: translateY(-50%);
  }

  .mod-fai-roadmap__results--standalone {
    padding-block-start: 0;
    padding-inline-start: 0;
  }
}

/* ---------------------------------
 * Reduced motion
 * --------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .mod-fai-roadmap--ready .mod-fai-roadmap__marker,
  .mod-fai-roadmap--ready .mod-fai-roadmap__card,
  .mod-fai-roadmap--ready .mod-fai-roadmap__result {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .mod-fai-roadmap--ready .mod-fai-roadmap__marker {
    transform: translate(-50%, -50%) !important;
  }

  .mod-fai-roadmap__timeline::after {
    transition: none;
  }
}