/* ========================================
   ROADMAP - CSS-only alternating layout
   Uses :nth-child() on Canvas wrapper divs
   ======================================== */

/* ========================================
   CONNECTOR COLORS, STYLES, & THICKNESS
   ======================================== */

.roadmap-step--line-down,
.roadmap-step--line-across,
.roadmap-step--line-vertical,
.roadmap-step--line-corner-ltr,
.roadmap-step--line-corner-rtl,
.roadmap-step--line-corner-down {
  border-color: var(--color-class);
  border-style: var(--style-class);
  border-width: var(--thickness-class);
}

/* ========================================
   CONNECTOR RADIUS STYLES
   ======================================== */
.roadmap-step--line-down {
  border-bottom-left-radius: var(--radius-class);
}

/* ========================================
   ROADMAP CONTAINER STYLES
   ======================================== */
.roadmap--container {
  display: flex;
  flex-direction: column;
}

/* ========================================
   STEP ROW - Grid with CSS variable width
   ======================================== */

.roadmap-step--row {
  display: grid;
  gap: 1rem;
  grid-template-columns: var(--indicator-width, 25%) 1fr;
  align-items: stretch;
}

/* Indicator column - flex container for indicator + vertical line */
.roadmap-step--indicator-column {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.roadmap-step--indicator {
  border-radius: 0.5rem;
  padding: 1rem;
  flex-shrink: 0; /* Don't shrink indicator content */
}

/* Vertical line from indicator to bottom of row */
.roadmap-step--line-down {
  flex: 1 1 auto;
  min-height: 1rem;
  width: -webkit-fill-available;
  margin-left: 50%;
  margin-right: auto;
  border-top: 0;
  border-right: 0;
}

.roadmap-step--content {
  border-radius: 0.5rem;
  padding: 1rem;
}

/* ========================================
   INDICATOR VERTICAL ALIGNMENT
   ======================================== */

.roadmap-step--valign-top .roadmap-step--row {
  align-items: start;
}

.roadmap-step--valign-middle .roadmap-step--row {
  align-items: center;
}

.roadmap-step--valign-bottom .roadmap-step--row {
  align-items: end;
}

/* ========================================
   CONNECTOR ORIGIN (where line starts)
   ======================================== */

/* Left origin - line on left side of indicator */
.roadmap-step--origin-left .roadmap-step--line-down {
  margin-left: 1rem;
  margin-right: auto;
}

.roadmap-step--origin-left .roadmap-step--line-corner-ltr {
  margin-left: 0;
  width: calc(100% - 1rem);
}

.roadmap-step--origin-left .roadmap-step--line-corner-rtl {
  margin-right: auto;
  width: calc(100% - 1rem);
}

/* Right origin - line on right side of indicator */
.roadmap-step--origin-right .roadmap-step--line-down {
  margin-left: auto;
  margin-right: 1rem;
}

.roadmap-step--origin-right .roadmap-step--line-corner-ltr {
  margin-left: auto;
  width: calc(100% - 1rem);
}

.roadmap-step--origin-right .roadmap-step--line-corner-rtl {
  margin-right: 0;
  width: calc(100% - 1rem);
}

/* Mobile vertical connector origin */
.roadmap-step--connector-vertical {
  display: flex;
  justify-content: center;
  padding: 0.5rem 1rem;
}

.roadmap-step--origin-left .roadmap-step--connector-vertical {
  justify-content: flex-start;
}

.roadmap-step--origin-center .roadmap-step--connector-vertical {
  justify-content: center;
}

.roadmap-step--origin-right .roadmap-step--connector-vertical {
  justify-content: flex-end;
}

/* ========================================
   CONNECTORS - Hidden by default
   ======================================== */

.roadmap-step--connector-ltr,
.roadmap-step--connector-rtl,
.roadmap-step--connector-vertical {
  display: none;
}

/* Connector row matches the step row grid */
.roadmap-step--connector-row {
  display: grid;
  /*gap: 1rem;*/
  grid-template-columns: var(--indicator-width, 25%) 1fr;
  min-height: 3rem;
  width: 100%;
}

/* Indicator column in connector */
.roadmap-step--connector-indicator {
  display: flex;
  justify-content: center;
}

/* Content column in connector */
.roadmap-step--connector-content {
  display: flex;
  align-items: flex-start;
}

/* Corner piece for LTR (curves right then down) */
.roadmap-step--line-corner-ltr {
  width: 50%;
  height: 100%;
  margin-left: auto;
}

/* Corner piece for RTL (curves left then down) */
.roadmap-step--line-corner-rtl {
  width: 50%;
  height: 100%;
  margin-right: auto;
}

/* Horizontal line across content */
.roadmap-step--line-across {
  flex: 1;
  height: 0;
  border-bottom: 0;
  border-left: 0;
  border-right: 0;
  border-radius: 0;
  margin-top: -5px;
}

/* Corner going down to next step */
.roadmap-step--line-corner-down {
  width: 2rem;
  height: 100%;
  margin-top: -5px;
  border-bottom: 0;
  border-left: 0;
  border-top-right-radius: var(--radius-class);
}

/* Vertical line for mobile */
.roadmap-step--line-vertical {
  width: 0;
  height: 2rem;
}

/* ========================================
   ALTERNATING LAYOUT via wrapper divs
   ======================================== */

/* ODD steps (1, 3, 5...) - indicator on LEFT */
@media (min-width: 768px) {
  .roadmap--container > :nth-child(odd) .roadmap-step--line-corner-ltr {
    display: none;
  }
  .roadmap--container > :nth-child(odd) .roadmap-step--row {
    display: grid;
    grid-template-columns: var(--indicator-width, 25%) 1fr;
  }

  .roadmap--container > :nth-child(odd) .roadmap-step--connector-row {
    grid-template-columns: var(--indicator-width, 25%) 1fr;
  }

  /* ODD: show LTR connector */
  .roadmap--container > :nth-child(odd) .roadmap-step--connector-ltr {
    display: block;
  }

  /* EVEN steps (2, 4, 6...) - indicator on RIGHT */
  .roadmap--container > :nth-child(even) .roadmap-step--row {
    display: grid;
    grid-template-columns: 1fr var(--indicator-width, 25%);
  }

  .roadmap--container > :nth-child(even) .roadmap-step--indicator {
    order: 2;
  }

  .roadmap--container > :nth-child(even) .roadmap-step--content {
    order: 1;
  }

  .roadmap--container > :nth-child(even) .roadmap-step--connector-row {
    grid-template-columns: 1fr var(--indicator-width, 25%);
  }

  /* EVEN: show RTL connector */
  .roadmap--container > :nth-child(even) .roadmap-step--connector-rtl {
    display: block;
  }
}

/* LAST step - hide all connectors */
.roadmap--container > :last-child .roadmap-step--connector {
  display: none !important;
}



/* ========================================
   HIDE CONNECTORS OPTION
   ======================================== */

.roadmap-step--connector {
  display: var(--hide-class) !important;
}

/* ========================================
   MOBILE BEHAVIOR
   ======================================== */

/* Mobile: hidden connectors (default) */
.roadmap--mobile-hidden .roadmap-step--connector-ltr,
.roadmap--mobile-hidden .roadmap-step--connector-rtl {
  display: none;
}

@media (min-width: 768px) {
  .roadmap--mobile-hidden .roadmap--container > :nth-child(odd) .roadmap-step--connector-ltr {
    display: flex;
  }
  .roadmap--mobile-hidden .roadmap--container > :nth-child(even) .roadmap-step--connector-rtl {
    display: flex;
  }
}

/* Mobile: vertical line between steps */
.roadmap--mobile-vertical .roadmap-step--connector-vertical {
  display: flex;
  justify-content: center;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

@media (min-width: 768px) {
  .roadmap--mobile-vertical .roadmap-step--connector-vertical {
    display: none;
  }
}

/* ========================================
   RESPONSIVE: Stack on mobile
   ======================================== */

@media (max-width: 767px) {
  .roadmap-step--row {
    display: flex;
    flex-direction: column;
    grid-template-columns: unset;
  }

  .roadmap-step--indicator {
    order: 1;
    margin-bottom: 1rem;
  }

  .roadmap-step--content {
    order: 2;
  }
}