.milestone-container h1 {
  color: var(--color-primary);
  font-size: var(--font-size-fixed-h3);
  line-height: var(--line-height-heading-2);
  margin-bottom: 2.5rem;
  text-align: center;
  padding-top: 1.75rem;

  @media (width > 768px) {
    font-size: var(--font-size-fixed-heading-1);
    line-height: var(--line-height-heading-2);
    margin-bottom: 2.5rem;
    text-align: left;
    margin-top: 0;
  }
}

.milestone-wrapper {
  position: relative;
}

.milestone-left-image {
  padding-top: 9rem;
  border-radius: 1rem;
  background: var(--color-mo-light-blue);
  width: 78%;
  position: relative;

  @media (width > 768px) {
    width: 93%;
  }
}

.milestone-left-image img {
  width: 100%;
}

.milestone-year-vertical-wrapper {
  position: absolute;
  right: 1.5rem;
  top: -1.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.188rem;
  z-index: 10;
  overflow: hidden;

  @media (width > 768px) {
    right: 0;
  }
}

.milestone-year-vertical-wrapper::before {
  content: "";
  position: absolute;
  top: 1.625rem;
  left: 0;
  right: 0;
  height: 3rem;
  background: var(--gradient-milestone-blur-effect);
  z-index: 2;
  pointer-events: none;
}

.milestone-year-vertical-wrapper::after {
  content: "";
  position: absolute;
  bottom: 1.625rem;
  left: 0;
  right: 0;
  height: 3rem;
  background: var(--gradient-milestone-blur-effect);
  z-index: 2;
  pointer-events: none;
}

.milestone-year-vertical-track {
  display: flex;
  flex-direction: column;
  gap: 0.063rem;
  height: 18.75rem;
  overflow-y: auto;
  scrollbar-width: none;
}

.milestone-year-vertical-track::-webkit-scrollbar {
  display: none;
}

.milestone-year-item {
  color: var(--color-primary);
  font-size: var(--font-size-body-xl);
  font-weight: 600;
  line-height: var(--line-height-fixed-sm);
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 0.625rem;
  background: var(--color-white);
  box-shadow: var(--color-milestone-year-item);

  @media (width > 768px) {
    font-size: var(--font-size-body-base);
    line-height: var(--line-height-fixed-md);
  }
}

.milestone-year-item:hover {
  opacity: 1;
  background: var(--color-mo-light-blue);
  color: var(--color-primary);
  font-size: var(--font-size-fixed-body-xl);
  font-weight: 600;
  line-height: var(--line-height-fixed-md-2);

  @media (width > 768px) {
    padding: 0.625rem 0.25rem;
  }
}

.milestone-year-item.active {
  opacity: 1;
  background: var(--color-primary);
  box-shadow: var(--color-milestone-year-item);
  color: var(--color-white);
}

.year-arrow {
  border: none;
  background: transparent;
  cursor: pointer;
  touch-action: manipulation; /* Prevent double-tap zoom on iOS */
  -webkit-tap-highlight-color: transparent; /* Remove tap highlight */
  user-select: none; /* Prevent text selection */
}

.milestone-accordion-item {
  /* border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: var(--color-border-milestone-gray); */
  border-bottom: 1px solid rgb(46 42 148 / 20%) !important;
  cursor: pointer;
}

.milestone-accordion-header {
  margin: 1.125rem 0 0.75rem;
  display: flex;
  justify-content: space-between;
  align-items: center;

  @media (width > 768px) {
    margin: 1.5rem 0 2rem;
  }
}

.milestone-accordion-header h3 {
  color: var(--color-primary);
  font-size: var(--font-size-body-xl);
  font-weight: 600;
  line-height: var(--line-height-fixed-heading-5);

  @media (width > 768px) {
    font-size: var(--font-size-body-xxl);
    font-weight: 500;
    line-height: var(--line-height-fixed-heading-6);
  }
}

.milestone-accordion-body p {
  color: var(--color-primary);
  font-size: var(--font-size-body-lg);
  font-weight: 400;
  line-height: var(--line-height-fixed-sm);
  margin-bottom: 1.5rem;
  width: 100%;

  @media (width > 768px) {
    font-size: var(--font-size-body-xl);
    font-weight: 400;
    line-height: var(--line-height-fixed-heading-6);
    margin-bottom: 2rem;
  }

  @media (width > 1024px) {
    width: 63.25rem;
  }
}

.accordion-arrow svg {
  width: 1.25rem;
  height: 1.25rem;

  @media (width > 768px) {
    width: 2rem;
    height: 2rem;
  }
}

.milestone-mountain-tooltip {
  position: absolute;
  top: 34%;
  left: 37%;
  display: flex;
  align-items: center;
  gap: 1rem;
  z-index: 5;
  background-color: var(--color-primary);
  width: 1px;
  height: 6.75rem;

  @media (width > 768px) {
    top: 32%;
  }
}

.mountain-tooltip-tip,
.mountain-tooltip-year {
  position: absolute;
  top: -0.625rem;
  left: 0.563rem;
  margin-bottom: 0.25rem;
  color: var(--color-primary);
  font-size: var(--font-size-fixed-lg);
  font-weight: 500;
  line-height: var(--line-height-fixed-sm);

  @media (width > 768px) {
    font-weight: 600;
    line-height: var(--line-height-fixed-md);
  }
}

.milestone-mountain-tooltip::before {
  content: "";
  position: absolute;
  top: -0.375rem;
  left: 50%;
  transform: translateX(-50%);
  width: 0.625rem;
  height: 0.625rem;
  background-color: var(--color-primary);
  border-radius: 50%;
}

.mountain-tooltip-title {
  position: absolute;
  left: 0.563rem;
  min-width: 7.75rem;
  top: 0.625rem;
  color: var(--color-primary);
  font-size: var(--font-size-fixed-sm);
  font-weight: 500;
  line-height: var(--line-height-fixed-ml);

  @media (width > 768px) {
    font-size: var(--font-size-body-base);
    font-weight: 400;
    line-height: var(--line-height-fixed-md);
    width: 25rem;
  }
}

.mountain-tooltip-title:empty {
  display: none;
}

.mountain-prev,
.mountain-next {
  border: none;
  border-radius: 0.25rem;
  background: var(--gradient-milestone-prenext);
  box-shadow: var(--color-boxshadow-prenext-milestone);
  padding: 1rem 1rem 1rem 1.125rem;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--font-size-body-lg);
  font-weight: 500;
  line-height: var(--line-height-fixed-heading-6);
  color: var(--color-white);
  cursor: pointer;
  transition: opacity 0.2s ease;
  height: 2.5rem;
  touch-action: manipulation; /* Prevent double-tap zoom on iOS */
  -webkit-tap-highlight-color: transparent; /* Remove tap highlight */
  user-select: none; /* Prevent text selection */

  @media (width > 768px) {
    border-radius: 0.5rem;
    padding: 1rem 1rem 1rem 1.5rem;
    font-size: var(--font-size-body-base);
    font-weight: 400;
    line-height: var(--line-height-fixed-md);
  }
}

.mountain-prev.disabled,
.mountain-next.disabled {
  display: none;
}

.mountain-prev {
  position: absolute;
  left: 0;
  bottom: 1.25rem;

  @media (width > 768px) {
    bottom: 3.75rem;
  }
}

.mountain-next {
  position: absolute;
  right: 0;
  top: 1.25rem;

  @media (width > 768px) {
    top: 3.75rem;
  }
}

.milestone-search-input {
  width: 100%;
  margin: 2.5rem 0 1.25rem;
  height: 2.5rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
  font-size: 16px; /* Prevent iOS Safari auto-zoom (must be >= 16px) */

  @media (width > 768px) {
    width: 25rem;
    margin: 3.75rem 0 1.25rem;
    font-size: inherit; /* Use default font-size on desktop */
  }
}

.milestone-search-input::placeholder {
  color: var(--color-primary);
  font-size: var(--font-size-fixed-lg);
  font-weight: 400;
  line-height: var(--line-height-fixed-sm);

  @media (width > 768px) {
    font-size: var(--font-size-body-base);
    line-height: var(--line-height-fixed-md);
  }
}

.milestone-left-text {
  margin-top: 2.5rem;
}

.milestone-left-text h3 {
  color: var(--color-primary);
  font-size: var(--font-size-fixed-h3);
  font-weight: 600;
  line-height: var(--line-height-heading-2);
  margin-bottom: 0.875rem;

  @media (width > 768px) {
    font-size: var(--font-size-heading-3);
    line-height: var(--line-height-heading-4);
    margin-bottom: 1rem;
  }
}

.milestone-left-text p {
  color: var(--color-primary);
  font-size: var(--font-size-fixed-md);
  font-weight: 600;
  line-height: var(--line-height-fixed-sm);
  margin-bottom: 0;

  @media (width > 768px) {
    font-size: var(--font-size-body-xxl);
    line-height: var(--line-height-fixed-l);
    margin-bottom: 0;
  }
}

.milestone-load-more {
  margin: 2.5rem auto 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 10.25rem;
  height: 2.5rem;
  padding: 0.75rem;
  color: var(--color-white);
  font-size: var(--font-size-fixed-lg);
  font-weight: 500;
  line-height: var(--line-height-fixed-sm);
  background: var(--color-primary);
  border: none;
  cursor: pointer;
  border-radius: 0.5rem;
  gap: 0.5rem;

  @media (width > 768px) {
    width: 12rem;
    height: 3rem;
    font-size: var(--font-size-body-lg);
    line-height: var(--line-height-fixed-md);
    padding: 1.25rem 0.75rem;
  }
}

.milestone-slider-viewport {
  width: 100%;
  overflow: hidden;
  position: relative;
}

.milestone-slider-track {
  display: flex;
  transform: translateX(-100%);
}

.milestone-slider-track img,
.milestone-slider-track picture {
  width: 100%;
  flex-shrink: 0;
  object-fit: cover;
}

.milestone-no-results {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 1rem;
  text-align: center;
}

.milestone-no-results h4 {
  color: var(--color-primary);
  font-size: var(--font-size-body-xl);
  font-weight: 600;
  line-height: var(--line-height-fixed-heading-5);
  margin-bottom: 0.75rem;

  @media (width > 768px) {
    font-size: var(--font-size-body-xxl);
    font-weight: 500;
    line-height: var(--line-height-fixed-heading-6);
    margin-bottom: 1rem;
  }
}

.milestone-no-results p {
  color: var(--color-primary);
  font-size: var(--font-size-body-lg);
  font-weight: 400;
  line-height: var(--line-height-fixed-sm);
  margin: 0;

  @media (width > 768px) {
    font-size: var(--font-size-body-xl);
    line-height: var(--line-height-fixed-heading-6);
  }
}

.year-arrow.disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}