/* Milestones Timeline — vertical company-history slider */

#wrapper .milestones-timeline {
   display: flex;
   align-items: flex-start;
   gap: 20px;
}

/* Rail column: index counter, vertical line, prev/next icons */

#wrapper .milestones-timeline__rail-col {
   display: flex;
   flex-direction: column;
   align-items: center;
   align-self: stretch;
   gap: 16px;
   flex: 0 0 auto;
}

#wrapper .milestones-timeline__index {
   writing-mode: vertical-rl;
   transform: rotate(180deg);
   font-size: 11px;
   font-weight: 600;
   letter-spacing: 1px;
   color: #9ca3af;
}

#wrapper .milestones-timeline__line {
   flex: 1;
   width: 1px;
   min-height: 40px;
   background-color: #A15200;
}

#wrapper .milestones-timeline__nav {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 10px;
}

#wrapper .milestones-timeline__nav-btn {
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 2px;
   background: none;
   border: none;
   color: #A15200;
   cursor: pointer;
   transition: opacity 0.2s ease;
   margin: 0;
}

#wrapper .milestones-timeline__nav-btn:hover {
   opacity: 0.65;
}

/* Years column: active year + upcoming years preview */

#wrapper .milestones-timeline__years {
   display: flex;
   flex-direction: column;
   gap: 6px;
   flex: 0 0 auto;
   padding-top: 4px;
   width: 180px;
}

#wrapper .milestones-timeline__year {
   font-size: 20px;
   line-height: 1.3;
   font-weight: 700;
   color: #d1d5db;
   cursor: pointer;
   transition: color 0.25s ease, font-size 0.25s ease;
}

#wrapper .milestones-timeline__year:hover {
   color: #e2231a;
}

#wrapper .milestones-timeline__year.is-active {
   font-size: 28px;
   font-weight: 800;
   color: #e2231a;
}

/* Card: bordered box containing the active slide */

#wrapper .milestones-timeline__card {
   flex: 1 1 auto;
   min-width: 0;
   border: 1px solid #e2231a;
   border-radius: 2px;
   padding: 16px;
   min-height: 500px;
}

#wrapper .milestones-timeline__slide {
   display: none;
}

#wrapper .milestones-timeline__slide.is-active {
   display: block;
}

#wrapper .milestones-timeline__image {
   display: block;
   width: 100%;
   height: 200px;
   object-fit: cover;
   border-radius: 2px;
   margin-bottom: 16px;
}

#wrapper .milestones-timeline__title {
   margin: 0 0 10px;
   font-size: 16px;
   line-height: 1.3;
   font-weight: 700;
   color: #e2231a;
   text-transform: uppercase;
}

#wrapper .milestones-timeline__description {
   font-size: 14px;
   line-height: 1.5;
   color: #6b7280;
   text-align: justify;

   overflow: hidden;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 6;
}

#wrapper .milestones-timeline__description.is-expanded {
   display: block;
   -webkit-line-clamp: unset;
   overflow: visible;
}

#wrapper .milestones-timeline__toggle {
   margin: 0;
   padding: 0;
   border: none;
   background: none;
   color: #6b7280;
   font-weight: 400;
   font-size: 14px;
   line-height: 1.6;
   color: #6b7280;
   text-transform: initial;
   font-style: italic;
}

#wrapper .milestones-timeline__toggle:hover {
   opacity: .8;
}

#wrapper .milestones-timeline__description p {
   margin: 0 0 12px;
}

#wrapper .milestones-timeline__description ul,
#wrapper .milestones-timeline__description ol {
   margin: 0;
   padding-left: 18px;
}

#wrapper .milestones-timeline__description li {
   margin-bottom: 8px;
}

#wrapper .milestones-timeline__description li::marker {
   color: #e2231a;
}

#wrapper .milestones-timeline__description p:last-child,
#wrapper .milestones-timeline__description li:last-child {
   margin-bottom: 0;
}

/* Desktop */
@media (min-width: 1024px) {
   #wrapper .milestones-timeline__year {
      font-size: 22px;
   }

   #wrapper .milestones-timeline__image {
      height: 240px;
   }
}

@media (max-width: 768px) {
   #wrapper .milestones-timeline {
      flex-direction: column;
      justify-content: center;
   }

   #wrapper .milestones-timeline__rail-col {
      flex-direction: row;
   }

   #wrapper .milestones-timeline__line {
      height: 1px;
      min-height: 1px;
   }

   #wrapper .milestones-timeline__years {
      flex-direction: row;
      align-items: center;
      gap: 10px;
      width: 100%;
      flex-wrap: wrap;
      justify-content: center;
      min-height: 46px;
   }

   #wrapper .milestones-timeline__index {
      font-size: 13px;
   }
}