/* Milestones Table Styles - CFS Style */

.milestones-section {
  padding: 60px 0;
  background-color: #F0F0EB;
}

.milestones-wrapper {
  width: 100%;
  max-width: 100%;
  padding: 0;
}

.milestones-table {
  width: 100%;
  background-color: #F0F0EB;
  position: relative;
}

/* Table Header with Title and Column Headers */
.table-title-row {
  display: flex;
  align-items: center;
  min-height: 70px;
  border-bottom: 1px solid #ccc8c3;
  color: #333;
  position: relative;
}

.table-title-row .milestones-title {
  width: 55%;
  font-size: 40px;
  font-weight: 300;
  color: #333;
  margin: 0;
  padding: 20px 0;
  letter-spacing: -0.02em;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Status headers container - creates grid columns */
.status-headers {
  width: 45%;
  display: flex;
  align-items: center;
  height: 100%;
  position: relative;
}

/* Create vertical lines that span entire table */
.status-headers::before,
.status-headers::after {
  position: absolute;
  top: -70px;
  border-left: 1px solid #ccc8c3;
  content: "";
  height: calc(20vh); /* Updated for desktop/tablet */
  z-index: 1;
}

.status-headers::before {
  left: 0; /* First vertical line */
}

.status-headers::after {
  left: 33.33%; /* Second vertical line */
}

/* Third vertical line */
.status-headers > .status-header:last-child::after {
  position: absolute;
  top: -70px;
  left: 0;
  border-left: 1px solid #ccc8c3;
  content: "";
  height: calc(20vh); /* Updated for desktop/tablet */
  z-index: 1;
}

.status-header {
  width: 33.33%;
  font-size: 16px;
  font-weight: 300;
  color: #152536;
  text-align: center;
  padding: 20px 10px;
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Vertical separator lines for headers */
.status-header:before {
  position: absolute;
  top: -70px; /* Extend to top of table */
  left: 0;
  border-left: 1px solid #ccc8c3;
  content: "";
  height: calc(100% + 70px);
}

.status-header:first-child:before {
  display: block; /* Show first border */
}

/* Table Rows */
.table-row {
  display: flex;
  align-items: stretch;
  min-height: 60px;
  border-bottom: 1px solid #ccc8c3;
  background-color: #F0F0EB;
  color: #333;
  position: relative;
}

.table-cell.milestone-text {
  width: 55%;
  font-size: 17px;
  font-weight: 300;
  color: #333;
  letter-spacing: -0.01em;
  padding: 20px 0;
  display: flex;
  align-items: center;
}

/* Status dots container - creates grid columns */
.status-dots {
  width: 45%;
  display: flex;
  align-items: stretch;
  position: relative;
}

.table-cell.status-cell {
  width: 33.33%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 10px;
  position: relative;
}

/* Vertical separator lines for status cells */
.table-cell.status-cell:before {
  position: absolute;
  top: 0;
  left: 0;
  border-left: 1px solid #ccc8c3;
  content: "";
  height: 100%;
}

/* Status Dots */
.status-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1.5px solid #152536;
  transition: all 0.3s ease;
}

.status-dot.filled {
  background-color: #152536;
}

.status-dot.empty {
  background-color: transparent;
}

/* Hover Effects */
.status-dot:hover {
  transform: scale(1.1);
}

/* Mobile Responsive Design */
@media screen and (max-width: 767px) {
  .milestones-section {
    padding: 40px 0;
  }
  
  .milestones-wrapper {
    padding: 0;
  }
  
  /* Adjust vertical line heights for mobile */
  .status-headers::before,
  .status-headers::after,
  .status-headers > .status-header:last-child::after {
    height: calc(60vh); /* Mobile height */
  }
  
  /* Title row with headers */
  .table-title-row {
    min-height: auto;
    padding: 20px 0;
  }
  
  .table-title-row .milestones-title {
    width: 40%;
    font-size: 28px;
  }
  
  /* Adjust status headers width on mobile */
  .status-headers {
    width: 60%;
  }
  
  .status-header {
    font-size: 13px;
    padding: 5px;
  }
  
  /* Table rows */
  .table-row {
    padding: 15px 0;
    min-height: auto;
  }
  
  .table-cell.milestone-text {
    width: 40%;
    font-size: 15px;
    padding: 10px 10px 10px 0;
  }
  
  /* Status dots container */
  .status-dots {
    width: 60%;
  }
  
  .table-cell.status-cell {
    padding: 5px;
  }
  
  /* Make status dots smaller on mobile */
  .status-dot {
    width: 14px;
    height: 14px;
  }
}

/* Extra small devices - more compact */
@media screen and (max-width: 480px) {
  .table-title-row .milestones-title {
    font-size: 24px;
  }
  
  .status-header {
    font-size: 11px;
  }
  
  .table-cell.milestone-text {
    font-size: 14px;
  }
  
  .status-dot {
    width: 12px;
    height: 12px;
  }
}

/* Tablet Responsive */
@media screen and (min-width: 768px) and (max-width: 991px) {
  .table-title-row .milestones-title {
    font-size: 36px;
  }
  
  .table-cell.milestone-text {
    font-size: 16px;
  }
}

/* Animation on scroll */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.milestones-table {
  animation: fadeInUp 0.8s ease;
}

.table-row {
  animation: fadeInUp 0.8s ease;
  animation-fill-mode: both;
}

.table-row:nth-child(2) {
  animation-delay: 0.1s;
}

.table-row:nth-child(3) {
  animation-delay: 0.2s;
}

.table-row:nth-child(4) {
  animation-delay: 0.3s;
}

.table-row:nth-child(5) {
  animation-delay: 0.4s;
}