.milestone h3.title_show,
.award-term .title_show {
  font-size: 14px !important;
  font-weight: 500 !important;
  text-align: center;
}

.award-term {
  text-align: center;
}

.awards-list {
  gap: 15px;
  height: auto;
}

.award-term.carousel-cell {
  width: 150px !important;
  margin: 10px 10px !important;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  overflow-wrap: normal !important;
  word-break: normal !important;
  white-space: normal !important;
}

.award-term.carousel-cell h3 {
  width: 100%;
  padding: 0;
  margin: 0;
  text-wrap: balance;
}

.milestone h3.title_show {
  font-size: 14px;
  font-weight: 500;
  margin-top: 19px !important;
}

.post-awards .awards-list .award-term h3.title_show {
  font-size: 14px;
  padding: 0;
  margin: 10px;
}

.award-term h3.term_year {
  padding: 0 !important;
  margin: 0 !important;
  font-size: 14px;
}

@media screen and (max-width: 426px) {

  .award-term.carousel-cell {
    width: 75px !important; /* Reduced for compactness */
    margin: 3px 5px !important; /* Reduced margins */
  }

  .post-awards .awards-list .award-term h3.title_show {
    margin: 3px !important; /* Reduced margin */
    font-size: 10px !important; /* Smaller text */
  }

  .award-term h3.term_year {
    padding: 0 !important;
    margin: 0 !important;
    font-size: 10px !important; /* Smaller text */
  }
}

@media screen and (max-width: 320px) {

  .award-term.carousel-cell {
    width: 65px !important; /* Even more compact */
    margin: 2px 3px !important;
  }

  .post-awards .awards-list .award-term h3.title_show {
    margin: 2px !important;
    font-size: 9px !important;
  }

  .award-term h3.term_year {
    padding: 0 !important;
    margin: 0 !important;
    font-size: 9px !important;
  }
}

/* MILESTONE */
.milestone_parent {
  display: block; /* Changed to block by default for better mobile compatibility */
  width: 100%;

  /* Removed gap as it's not needed for block layout */
}

/* Legacy flex behavior for old milestone system (when no unified carousel) */
.milestone_parent:not(:has(.unified-milestones-awards)) {
  display: flex;
  flex-direction: row;
  gap: 10px;
}

/* Override for unified carousel - when using the new unified system */
.milestone_parent:has(.unified-milestones-awards) {
  display: block !important;
  gap: 0;
}

/* Robust fallback for browsers that don't support :has() */
.milestone_parent .unified-milestones-awards {
  width: 100%;
  display: block;
}

.milestone_parent .unified-milestones-awards ~ .milestone,
.milestone_parent .unified-milestones-awards ~ .post-awards {
  display: none; /* Hide old separate elements when unified is present */
}

.milestone_parent .post-awards.is_milestone {
  flex-grow: 1 !important;
  min-width: 30%;
  display: inline-block;
  width: 150px;
}

.milestone_parent .milestone {
  width: 150px;
  flex-grow: 0;
  display: inline-block;
  vertical-align: bottom;
  text-align: center;
  align-self: flex-start;
  margin: 10px 0;
}


@media screen and (max-width: 426px) {

  .milestone_parent .milestone {
    width: 75px; /* Reduced for compactness */
    height: 120px; /* Reduced height for less vertical space */
    margin: 0;
  }

  .milestone h3.title_show {
    font-size: 10px !important; /* Smaller text */
    padding: 1px !important;
    margin: 2px 0 !important;
    line-height: 1.1;
  }

  .milestone_parent .milestone img {
    width: 75px !important; /* Scale milestone images on mobile */
    height: auto;
  }
}

@media screen and (max-width: 320px) {

  .milestone_parent .milestone {
    width: 65px !important; /* Even smaller on very small screens */
    height: 100px !important;
    margin: 0;
  }

  .milestone h3.title_show {
    font-size: 9px !important;
    margin: 1px 0 !important;
  }

  .milestone_parent .milestone img {
    width: 65px !important;
  }
}

.awards-list.swiper-container {
  overflow: hidden;
  width: 100%;
}

/* Make swiper-wrapper styles more specific to avoid conflicts with unified carousel */
.awards-list .swiper-wrapper {
  height: auto;
  display: flex;
}

.awards-list .swiper-slide {
  flex-shrink: 0;
}

.awards-list.carousel.swiper-container .swiper-button-next,
.awards-list.carousel.swiper-container .swiper-button-prev {
  display: none !important;
}

/* Adjust navigation button positions for smaller screens */
@media screen and (max-width: 426px) {

  .awards-list .swiper-button-next,
  .awards-list .swiper-button-prev {
    width: 20px;
    height: 20px;
  }
}