/* ============================================= */
/* Roadmap Timeline Styles (JS Lines)           */
/* ============================================= */

#roadmapDisplayContainer {
  position: relative;
  padding: 20px 1rem; /* Add some horizontal padding for spacing from edges */
  overflow: visible; /* Ensure container allows overflow for lines/plugs */
  /* Use Flexbox wrap layout */
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between; /* Creates space between columns */
  /* Remove column direction and align-items */
  /* flex-direction: column; */
  /* align-items: center; */
}

/* Base style for flex items (the container for each card) */
.roadmap-flex-item {
  width: calc(
    50% - 5em
  ); /* Further increased gap: 50% minus half the new gap (e.g., 6rem total gap) */
  box-sizing: border-box;
}

/* Push left items to the left edge */
.roadmap-flex-item.item-pos-left {
  margin-right: auto;
  margin-left: 0; /* Ensure no conflicting auto margin */
}

/* Push right items to the right edge */
.roadmap-flex-item.item-pos-right {
  margin-left: auto;
  margin-right: 0; /* Ensure no conflicting auto margin */
}

/* --- Staggering based on JS class --- */
.roadmap-flex-item.stagger-down {
  margin-top: 6rem; /* Stagger amount */
}

/* If an item starts a new group, ensure its top margin is reset (overrides stagger-down) */
.roadmap-flex-item.new-group-start {
  margin-top: 0 !important;
}

/* Style the dedicated anchor DIV */
.roadmap-dot-anchor {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  background-color: white;
  border: 4px solid var(--bs-secondary);
  border-radius: 50%;
  z-index: 3;
  border-color: inherit;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

/* Anchors for LEFT items (based on JS class) */
.roadmap-flex-item.item-pos-left .roadmap-dot-anchor {
  right: -5px; /* Position anchor on the right edge */
  left: auto;
}

/* Anchors for RIGHT items (based on JS class) */
.roadmap-flex-item.item-pos-right .roadmap-dot-anchor {
  left: -5px; /* Position anchor on the left edge */
  right: auto;
}

/* Ensure card itself is relative for anchor positioning */
.roadmap-card {
  position: relative;
  width: 100%; /* Ensure card fills its flex item container */
}

/* Leader line customization */
.leader-line {
  z-index: 10;
}
.leader-line .leader-line-plug {
  width: 8px !important;
  height: 8px !important;
}
.leader-line-outline {
  z-index: 1;
}

/* Custom card margins for roadmap grouping - REMOVED */
/* .roadmap-card.card-mb-lg {} */

/* Spacer element inserted by JS between groups */
.roadmap-group-spacer {
  width: 100%; /* Take full container width */
  flex-basis: 100%; /* Required for flex items to force break */
  height: 1.5rem; /* Adjust height for desired spacing between groups */
  content: ""; /* Ensure it's empty visually */
  visibility: hidden; /* Hide it, just use for spacing */
}

/* Add some basic styling if needed */
.roadmap-card .card-body {
}

.roadmap-description ul,
.roadmap-description ol {
  padding-left: 1.2rem;
  margin-bottom: 0.5rem;
}
.roadmap-description p:last-child {
  margin-bottom: 0;
}

/* ============================================= */
/* Responsive Mobile Styles                      */
/* ============================================= */
@media (max-width: 767.98px) {
  #roadmapDisplayContainer {
    /* Stack items vertically */
    flex-direction: column;
    flex-wrap: nowrap; /* Prevent wrapping in single column */
    padding: 1rem; /* Adjust padding for mobile */
  }

  .roadmap-flex-item {
    width: 100%; /* Full width */
    margin: 0 0 1rem 0 !important; /* Reset auto margins and stagger, add consistent bottom margin */
    padding-left: 15px; /* Add padding to align content away from the dot */
  }

  /* Hide elements not needed in mobile list view */
  .roadmap-group-spacer {
    display: none !important;
  }
  /* Don't hide leader lines anymore */
  /* .leader-line {
        display: none !important;
    } */

  /* Reposition anchors for vertical line */
  .roadmap-dot-anchor {
    left: -5px !important; /* Position consistently on the left */
    right: auto !important;
    /* Top/transform already centers it vertically */
  }

  /* --- Collapsible Card Styles --- */
  .roadmap-card .card-header {
    cursor: pointer;
    position: relative; /* For positioning pseudo-elements like arrows */
  }

  /* Remove the explicit left alignment for mobile header content */
  /* .roadmap-card .card-header h6 {
        justify-content: flex-start !important; 
    } */

  .roadmap-card .card-header h6 span:first-child {
    /* The title span */
    margin-right: 0.5rem; /* Add space between title and badge */
  }

  .roadmap-card .card-header h6 span.badge {
    /* The status badge */
    margin-right: 20px; /* Add space after the badge before the +/- */
  }

  /* Optional: Add expand/collapse indicator */
  .roadmap-card .card-header::after {
    content: "+"; /* Plus sign for collapsed */
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    font-weight: bold;
    font-size: 1.2em;
    transition: transform 0.2s ease-in-out;
  }

  .roadmap-card .card-header.active::after {
    content: "−"; /* Minus sign for expanded */
    /* transform: translateY(-50%) rotate(45deg); Example for arrow */
  }

  .roadmap-collapsible-content {
    display: none; /* Collapsed by default */
    /* Add padding or border if needed */
    padding-top: 0.5rem; /* Space between header and body */
  }

  .roadmap-collapsible-content.show {
    display: block; /* Shown when active */
  }
}