/* Timeline Carousel CSS - Final Version */

* {
    box-sizing: border-box;
}

.timeline-container {
    font-family: "IBM Plex Sans", sans-serif;
    position: relative;
  
    margin: 0 auto;
    width: 100%;
}
.timeline-header{
       max-width: 1400px;
       margin: auto;
}
/* Header with Title and Navigation */
.timeline-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
    padding: 0 20px;
}

.timeline-title {
    font-size: 46px;
    font-weight: 300;
    color: #1f513f;
    margin: 0;
    font-family: "IBM Plex Sans", sans-serif;
}

.timeline-navigation {
    display: flex;
    gap: 12px;
}

.nav-arrow {
    width: 48px;
    height: 48px;
    border: 2px solid #1f513f;
    background: white;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    font-size: 20px;
    color: #1f513f;
}

.nav-arrow:hover:not(.disabled) {
    background: #1f513f;
    color: white;
}

.nav-arrow.disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* Mobile: Hide desktop navigation */
@media (max-width: 991px) {
    .timeline-header {
        margin-bottom: 20px;
    }
    .timeline-navigation {
        display: none;
    }
    .timeline-title {
        font-size: 28px;
    }
}

/* Carousel Wrapper */
.carousel-wrapper {
    width: 100%;
    min-height: 483px;
    position: relative;
    overflow: hidden;
    padding: 31px 0;
}

.carousel-track {
    display: flex;
    align-items: center;
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94); 
    /*transition: transform 0.9s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;*/
    will-change: transform;
}

/* Desktop view */
@media (min-width: 992px) {
    .carousel-track {
        gap: 48px;
        padding-left: calc(50% - 420px);
        padding-right: calc(50% - 420px);
    }
}

/* Mobile view */
@media (max-width: 991px) {
    .carousel-track {
        gap: 20px;
    }
    .carousel-wrapper {
    min-height: 389px;
    }
}

/* Slide styling */
.timeline-slide {
    flex-shrink: 0;
    transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    opacity: 0;
    transform: scale(0.8);
    will-change: transform, opacity;
}

.timeline-slide.visible {
    opacity: 1;
    transform: scale(1);
}

/* Desktop inactive slides */
@media (min-width: 992px) {
    .timeline-slide {
        width: 120px;
        height: 200px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 42px;
        font-weight: 300;
        color: #666;
        cursor: pointer;
        position: relative;
    }

    .timeline-slide:hover:not(.active) {
        color: #1f513f;
    }

    .timeline-slide:hover:not(.active) .year-label {
        color: #1f513f;
    }

    /* Divider after each inactive slide */
    .timeline-slide:not(.active)::after {
        content: "";
        position: absolute;
        right: -24px;
        width: 1px;
        top: 5%;
        bottom: 5%;
        background: #333;
        opacity: 0.4;
    }

    /* Hide year text on active */
    .timeline-slide.active .year-label {
        display: none;
    }

    /* Active slide expanded */
    .timeline-slide.active {
        width: 820px;
        height: 420px;
        cursor: default;
        transform: scale(1);
    }

    .timeline-slide.active::after {
        display: none;
    }
}

/* Mobile view */
@media (max-width: 991px) {
    .carousel-wrapper { 
    padding: 0px 0;
}

    .carousel-track {
        gap: 20px;
        padding-left: 0;
        padding-right: 0;
    }
    
    .timeline-slide {
        width: 350px;
        /*min-width: 350px !important;*/
        min-height: 400px;
        height: auto;
    }
    
    .timeline-slide.active {
        width: 350px ;
        height: auto;
    }

    .year-label {
        display: none;
    }
}

/* Small mobile adjustments */
@media (max-width: 400px) {
    .timeline-slide {
        width: calc(100vw - 121px);
        min-width: calc(100vw - 121px);
    }
    
    .timeline-slide.active {
        width: calc(100vw - 121px);
              
    }
}


.year-label {

    color: #c4c4c4;
}
/* Content card */
.slide-content {
    display: flex;
    justify-content: space-between;
    height: 100%;
    background: #1f513f;
    color: #fff; 
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease 0.2s, visibility 0.4s ease 0.2s;
}

.timeline-slide.active .slide-content {
    opacity: 1;
    visibility: visible;
}

/* Desktop layout */
@media (min-width: 992px) {
    .slide-content {
        flex-direction: row;
        height: 100%;
    }

    .content-text {
        flex: 0 0 60%;
        max-width: 60%;
        padding: 48px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 100%;
    }

    .content-image {
        flex: 0 0 40%;
        max-width: 40%;
        height: 100%;
        overflow: hidden;
        position: relative;
    }

    .content-image img {
        width: 100%;
        height: 100%;
        min-height: 100%;
        object-fit: cover;
        object-position: center;
        display: block;
    }
}

/* Mobile layout */
@media (max-width: 991px) {
    .slide-content {
        flex-direction: column-reverse; 
        height: auto;
    }

    .content-text {
        padding: 32px 24px;
    }

    .content-image {
        width: 100%;
        /*height: 201px;*/
        overflow: hidden;
        position: relative;
    }

    .content-image img {
        width: 100%;
        /*height: 201px !important;*/
        object-fit: cover;
        object-position: center; 
        object-position: top;
        /*aspect-ratio: auto 800 / 887;*/
    }
}

.content-text h4 {
    font-size: 48px;
    margin: 0 0 20px 0;
    font-weight: 300 ;
    font-family: "IBM Plex Sans", sans-serif ;
}

.content-text p {
    font-size: 16px ;
    line-height: 1.6 ;
    margin: 0;
    font-family: "IBM Plex Sans", sans-serif;
    max-width: 320px;
}

.year-label {
    font-size: 48px;
    font-weight: 300;
    font-family: "IBM Plex Sans", sans-serif;
}

/* Mobile navigation */
.mobile-navigation {
    display: none;
}

@media (max-width: 991px) {
    .mobile-navigation {
        display: flex;
        justify-content: center;
        gap: 20px;
        margin-top: 30px;
    }

    .mobile-nav-arrow {
        width: 56px;
        height: 56px;
        border: 2px solid #1f513f;
        background: white;
        border-radius: 50%;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        color: #1f513f;
        transition: all 0.3s ease;
    }

    .mobile-nav-arrow:active {
        background: #1f513f;
        color: white;
    }

    .mobile-nav-arrow.disabled {
        opacity: 0.3;
        cursor: not-allowed;
    }
}

/* Pagination dots */
.pagination {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 40px;
}

.pagination-dot {
    width: 12px;
    height: 12px;
    border: 2px solid #1f513f;
    background: transparent;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
}

.pagination-dot.active {
    background: #1f513f;
    transform: scale(1.2);
}

.pagination-dot:hover {
    transform: scale(1.1);
}

@media (max-width: 991px) {
    .pagination {
        margin-top: 20px;
    }
}

/* Responsive Typography Adjustments */
@media (max-width: 767px) {
    .content-text h4 {
        font-size: 32px ;
    }

    .content-text p {
        font-size: 12px ;
    }

    .content-text {
        padding: 24px 18px;
    }

    .timeline-slide {
        min-height: 350px;
    }
  
    
}

/* Tablet adjustments */
@media (min-width: 768px) and (max-width: 991px) {
    .timeline-slide {
        min-height: 380px;
    }

    .content-text h4 {
        font-size: 40px;
    }

    .content-text p {
        font-size: 17px;
    }

    .content-image {
        height: 220px;
    }

    .content-text {
        padding: 28px 22px;
    }
}

/* Additional utility classes */
.timeline-slide.transitioning {
    pointer-events: none;
}

/* Ensure proper stacking context */
.timeline-slide {
    z-index: 1;
}

.timeline-slide.active {
    z-index: 2;
}

/* Smooth animations */
@media (prefers-reduced-motion: no-preference) {
    .timeline-slide,
    .slide-content,
    .carousel-track {
        transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }
}

/* Accessibility - Focus states */
.nav-arrow:focus,
.mobile-nav-arrow:focus,
.pagination-dot:focus {
    outline: 2px solid #1f513f;
    outline-offset: 2px;
}

/* Print styles */
@media print {
    .timeline-navigation,
    .mobile-navigation,
    .pagination {
        display: none;
    }
    
    .timeline-slide {
        page-break-inside: avoid;
    }
}

/* === Make timeline images behave like mainstaymedical.com === */

/* Base styles */
.content-image {
  position: relative;
  overflow: hidden;
}

.content-image img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: center;
  transition-duration: 0.5s !important;
}



.content-image {
  min-height: 196px; /* or your desired height */
}


  .content-text p
    { 
               transition: none !important;
    }
    

/* Desktop: image fills height */
@media (min-width: 992px) {
  .content-image img {
    width: 100%;
    height: 100% ;
    object-fit: cover;
    object-position: center;
  }
}

/* Mobile: image covers entire container */
@media (max-width: 991px) {
  .content-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
}

/* Desktop-first: default = largest */
.timeline-slide.active {
  width: 820px; /* ≥1200px */
}

/* 1200 > width ≥ 992 -> 649px */
@media (max-width: 1199.98px) and (min-width: 992px) {
  .timeline-slide.active {
    width: 640px;
  }
      .carousel-track { 
        padding-left: calc(50% - 320px);
        padding-right: calc(50% - 320px);
    }
      .mobile-nav-arrow{
        position: absolute;
        top: 50%;
        width: 40px;
        height: 40px;
        border: 0;
        background-color: #ffffff00;
    }
     .pre-arrow{
      left:9px;
    }
     .next-arrow{
        right:9px
    }
    .content-text p
    {
        max-width: 288px;
        font-size: 16px; 
          transition: none;
    }
}

/* 991.98px > width ≥ 768 -> 592px */
@media (max-width: 991.98px) and (min-width: 768px) {
  .timeline-slide.active {
    width: 592px;
  }
    .mobile-nav-arrow{
        position: absolute;
        top: 50%;
        width: 57px;
        height: 57px ;
        border: 0;
        background-color: #ffffff00;
        
    }
     .pre-arrow{
      left:31px;
    }
     .next-arrow{
        right:31px;
    }
    
    .content-image{
        height: 444px;
    }
     .content-text p
    {
        max-width: 560px;
        font-size: 12px; 
           transition: none !important;
    }
}

/* 767.98px > width ≥ 576 -> 412px */
@media (max-width: 767.98px) and (min-width: 576px) {
  .timeline-slide.active {
    width: 412px;
  }
    .mobile-nav-arrow{
        position: absolute;
        top: 50%;
        width: 45px;
        height: 45px;
        border: 0;
        background-color: #ffffff00;
    }
     .pre-arrow{
      left:9px;
    }
     .next-arrow{
        right:9px
    }
     .content-image{
        height: 309px;
    }
    
       .content-text p
    {
        max-width: 380px;
        font-size: 12px; 
      transition: none !important;
    }
}


   .content-text 
    { 
      transition: none !important;
    }
/* For viewports 575px and below:
   - At 575px -> 447px
   - At 574px -> 446px
   - ...
   - Decreases 1px per 1px viewport until 250px (or below).
   Linear formula derived: width = 100vw - 128px
   Because 575 - 128 = 447  (matches desired)
   At viewport 250 -> 250 - 128 = 122px (minimum)
*/
@media (max-width: 575px) {
    
    
  .timeline-slide.active { 
    width: clamp(122px, calc(100vw - 128px), 447px);
  }
 
   .content-image { 
    height: calc(335px - (576px   - 100vw));
  }
  
   .content-text p {
        max-width: calc(415px - (575px - 100vw));
        font-size: 12px; 
        transition-duration: 0s !important;
    }
    
    
   .mobile-nav-arrow{
        position: absolute;
        top: 50%;
        width: 40px;
        height: 40px;
        border: 0;
        background-color: #ffffff00;
    }
     .pre-arrow{
      left:9px;
    }
     .next-arrow{
        right:9px
    }
       
    
  
}