/* Circular Timeline Styles */

.circular-timeline-section {
    min-height: 80vh;
    padding: 4rem 0;
    position: relative;
    overflow: visible;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, var(--rgba-primary-05) 50%, rgba(255, 255, 255, 0) 100%);
}

.circular-timeline-section .container {
    position: relative;
    overflow: visible;
}

/* Hide radio buttons */
input[type="radio"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

.cards-container {
    --base-rotation: 0deg;
    --full-circle: 360deg;
    --radius: 40vw;
    --duration: 200ms;
    --cards-container-size: calc(var(--radius) * 2);
    --cards-container-padding: 2rem;
    --border-color: transparent;
    --label-offset: calc(var(--radius) * -1 - 1rem);
    --label-size: 30px;
    --label-color: #0a4567;
    --label-color-active: var(--secondary);
    --label-color-hover: var(--primary);
    --label-line-h: 0;
    --label-line-h-current: 2rem;
    --label-dot-size: 10px;
    --content-top: 50%;
    --content-offset-y: -50%;
    --title-offset-y: 0px;
    --info-top: calc(var(--content-top) + 3rem);
    --info-width: min(85%, 600px);
    --info-offset-y: 0px;
    --content-opacity: 0;
    --title-opacity: 0;
    --info-opacity: 0;
    --content-transform-origin: center;
    --title-font-size: clamp(1rem, 3.5vw, 1.4rem);
    --description-font-size: clamp(0.85rem, 3vw, 1rem);

    box-sizing: content-box;
    position: relative;
    margin: 5rem auto;
    width: var(--cards-container-size);
    height: var(--cards-container-size);
    padding: var(--cards-container-padding);
    max-width: 90vw;
}

@media (max-width: 480px) {
    .cards-container {
        --radius: 38vw;
        --content-top: 50%;
        --info-top: calc(var(--content-top) + 2.5rem);
        --content-offset-y: -50%;
        --title-offset-y: 0px;
        --info-offset-y: 0px;
        --content-transform-origin: center;
        --title-font-size: clamp(0.9rem, 2.8vw, 1.1rem);
        --description-font-size: clamp(0.75rem, 2.5vw, 0.9rem);
        --info-width: min(95%, 450px);
    }
    
    .timeline-content {
        padding: 0 0.5rem;
    }
}

@media (min-width: 481px) and (max-width: 600px) {
    .cards-container {
        --radius: 35vw;
        --content-top: 50%;
        --info-top: calc(var(--content-top) + 3rem);
        --content-offset-y: -50%;
        --title-offset-y: 0px;
        --info-offset-y: 0px;
        --content-transform-origin: center;
        --title-font-size: clamp(0.95rem, 3vw, 1.2rem);
        --description-font-size: clamp(0.8rem, 2.8vw, 0.95rem);
        --info-width: min(90%, 500px);
    }
    
    .timeline-content {
        padding: 0 0.75rem;
    }
}

/* Removed clip-path to show full circle on desktop */

/* Tablet portrait */
@media (min-width: 601px) and (max-width: 767px) {
    .cards-container {
        --radius: 33vw;
        --label-size: 34px;
        --label-dot-size: 12px;
        --label-line-h-current: 3rem;
        --content-top: 50%;
        --info-top: calc(var(--content-top) + 3.2rem);
        --content-offset-y: -50%;
        --title-offset-y: 0px;
        --info-offset-y: 0px;
        --content-transform-origin: center;
        --title-font-size: clamp(1.05rem, 3.2vw, 1.35rem);
        --description-font-size: clamp(0.85rem, 2.9vw, 1rem);
        --info-width: min(85%, 520px);
    }
    
    .timeline-content {
        padding: 0 1rem;
    }
}

/* Tablet landscape */
@media (min-width: 768px) and (max-width: 799px) {
    .cards-container {
        --radius: 32vw;
        --label-size: 35px;
        --label-dot-size: 12px;
        --label-line-h-current: 3rem;
        --content-top: 50%;
        --info-top: calc(var(--content-top) + 3.5rem);
        --content-offset-y: -50%;
        --title-offset-y: 0px;
        --info-offset-y: 0px;
        --content-transform-origin: center;
        --title-font-size: clamp(1.1rem, 3.5vw, 1.5rem);
        --description-font-size: clamp(0.9rem, 3vw, 1.05rem);
        --info-width: min(80%, 550px);
    }
    
    .timeline-content {
        padding: 0 1.25rem;
    }
}

/* Small desktop */
@media (min-width: 800px) and (max-width: 991px) {
    .cards-container {
        --radius: 25vw;
        --label-size: 35px;
        --label-dot-size: 12px;
        --label-line-h-current: 3.5rem;
        --content-top: 50%;
        --info-top: calc(var(--content-top) + 3.8rem);
        --content-offset-y: -50%;
        --title-offset-y: 0px;
        --info-offset-y: 0px;
        --content-transform-origin: center;
        --title-font-size: clamp(1.2rem, 3.2vw, 1.6rem);
        --description-font-size: clamp(0.9rem, 2.4vw, 1.05rem);
        --info-width: min(75%, 580px);
    }
    
    .timeline-content {
        padding: 0 1.5rem;
    }
}

/* Medium desktop */
@media (min-width: 992px) and (max-width: 1199px) {
    .cards-container {
        --radius: 24vw;
        --label-size: 36px;
        --label-dot-size: 13px;
        --label-line-h-current: 3.5rem;
        --content-top: 50%;
        --info-top: calc(var(--content-top) + 4rem);
        --content-offset-y: -50%;
        --title-offset-y: 0px;
        --info-offset-y: 0px;
        --content-transform-origin: center;
        --title-font-size: clamp(1.3rem, 3.5vw, 1.8rem);
        --description-font-size: clamp(0.95rem, 2.5vw, 1.1rem);
        --info-width: min(75%, 600px);
    }
    
    .timeline-content {
        padding: 0 1.75rem;
    }
}

/* Large desktop */
@media (min-width: 1200px) and (max-width: 1399px) {
    .cards-container {
        --radius: 23vw;
        --label-size: 40px;
        --label-dot-size: 13px;
        --border-color: var(--label-color);
        --content-top: 13%;
        --info-top: calc(var(--content-top) + 4.3rem);
        --content-offset-y: -55px;
        --title-offset-y: -35px;
        --info-offset-y: -35px;
        --content-transform-origin: top center;
        --title-font-size: clamp(1.5rem, 2.8vw, 2rem);
        --description-font-size: clamp(0.98rem, 2.3vw, 1.12rem);
        --info-width: min(75%, 630px);
    }
    
    .timeline-content {
        padding: 0 2rem;
    }
}

/* Extra large desktop */
@media (min-width: 1400px) {
    .cards-container {
        --radius: 22vw;
        --label-size: 42px;
        --label-dot-size: 14px;
        --border-color: var(--label-color);
        --content-top: 12%;
        --info-top: calc(var(--content-top) + 4.5rem);
        --content-offset-y: -60px;
        --title-offset-y: -40px;
        --info-offset-y: -40px;
        --content-transform-origin: top center;
        --title-font-size: clamp(1.6rem, 3vw, 2.2rem);
        --description-font-size: clamp(1rem, 2.2vw, 1.15rem);
        --info-width: min(75%, 650px);
    }
    
    .timeline-content {
        padding: 0 2.5rem;
    }
}

.cards {
    position: absolute;
    inset: var(--cards-container-padding);
    aspect-ratio: 1;
    border-radius: 50%;
    border: 3px solid var(--border-color);
    border-style: double;
    border-width: 6px;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) var(--duration);
    list-style: none;
    margin: 0;
    padding: 0;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
}

@media (min-width: 800px) {
    .cards {
        border-width: 8px;
    }
}

@media (min-width: 1200px) {
    .cards {
        border-width: 10px;
    }
}

.cards li {
    position: absolute;
    inset: 0;
    margin: 0;
    padding: 0;
    transform-origin: center;
    display: grid;
    place-content: center;
    transform: rotate(calc(var(--i) * 360deg / var(--items)));
    pointer-events: none;
}

.cards li > label {
    position: absolute;
    inset: 0;
    margin: auto;
    transform: translateY(var(--label-offset));
    width: var(--label-size);
    height: var(--label-size);
    cursor: pointer;
    pointer-events: initial;
    text-align: center;
    color: var(--label-color);
    font-size: clamp(.8rem, 2.5vw + .04rem, 1rem);
    font-weight: 600;
    transition: var(--duration) ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cards li > label::before {
    content: '';
    position: absolute;
    top: var(--cards-container-padding);
    left: 50%;
    width: var(--label-dot-size);
    height: var(--label-dot-size);
    aspect-ratio: 1;
    border-radius: 50%;
    background-color: var(--label-color);
    transition: all var(--duration) ease-in-out;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Ensure non-active dots are blue */
.cards li:not(:has(input:checked)) > label::before {
    background-color: var(--label-color);
}

.cards li > label::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    translate: -50% 5px;
    width: 2px;
    height: var(--label-line-h);
    background: linear-gradient(180deg, var(--secondary) 0%, transparent 100%);
    transition: height 300ms ease-in-out var(--label-line-delay, 0ms);
    opacity: 0.6;
}

li:has(input:checked) > label::after {
    background: linear-gradient(180deg, var(--secondary) 0%, transparent 100%);
}

.cards li > label:hover {
    --label-color: var(--label-color-hover);
    transform: translateY(var(--label-offset)) scale(1.05);
}

.cards li > label:hover::before {
    /* transform: translate(-50%, 0) scale(1.15); */
    box-shadow: 0 0 0 3px var(--rgba-primary-1), 0 4px 12px rgba(0, 0, 0, 0.2);
}

.timeline-content {
    position: absolute;
    left: 50%;
    top: var(--content-top);
    text-align: center;
    transform: translate(-50%, var(--content-offset-y, 0px));
    transform-origin: var(--content-transform-origin, center);
    width: 100%;
    max-width: 100%;
    padding: 0 1rem;
    box-sizing: border-box;
    opacity: var(--content-opacity, 0);
    transition: opacity var(--duration) ease-in-out var(--content-delay, 0ms),
                transform var(--duration) ease-in-out var(--content-delay, 0ms);
    overflow: hidden;
}

/* Center content for mobile, tablet, and desktop below 1200px */
@media (max-width: 1199px) {
    .timeline-content {
        transform: translate(-50%, var(--content-offset-y, -50%));
        transform-origin: center;
    }
    
    li:has(input:checked) .timeline-content {
        --content-offset-y: -50%;
    }
}

/* Desktop 1200px and above: content slides from top */
@media (min-width: 1200px) {
    .timeline-content {
        transform: translate(-50%, var(--content-offset-y, 0px));
        transform-origin: top center;
    }
}

/* Show content for checked item by default */
li:has(input:checked) .timeline-content {
    --content-opacity: 1;
    --title-opacity: 1;
    --info-opacity: 1;
}

.timeline-content h2 {
    position: relative;
    margin: 0 auto 1rem;
    font-size: var(--title-font-size, clamp(1rem, 3.5vw, 1.4rem));
    color: var(--primary);
    font-weight: 700;
    width: 100%;
    max-width: 100%;
    text-align: center;
    line-height: 1.3;
    opacity: var(--title-opacity, 0);
    transform: translateY(var(--title-offset-y, 0px));
    transition: opacity var(--duration) ease-in-out var(--title-delay, 0ms),
                transform var(--duration) ease-in-out var(--title-delay, 0ms);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    box-sizing: border-box;
    padding: 0 0.5rem;
}

/* Extra small mobile */
@media (max-width: 480px) {
    .timeline-content h2 {
        margin: 0 auto 0.6rem;
        line-height: 1.2;
        font-size: clamp(0.9rem, 2.8vw, 1.1rem);
        padding: 0 0.25rem;
    }
}

/* Small mobile */
@media (min-width: 481px) and (max-width: 600px) {
    .timeline-content h2 {
        margin: 0 auto 0.8rem;
        line-height: 1.25;
        font-size: clamp(0.95rem, 3vw, 1.2rem);
        padding: 0 0.5rem;
    }
}

/* Tablet portrait */
@media (min-width: 601px) and (max-width: 767px) {
    .timeline-content h2 {
        font-size: clamp(1.05rem, 3.2vw, 1.35rem);
        margin: 0 auto 1rem;
        line-height: 1.28;
        padding: 0 0.75rem;
    }
}

/* Tablet landscape */
@media (min-width: 768px) and (max-width: 799px) {
    .timeline-content h2 {
        font-size: clamp(1.1rem, 3.5vw, 1.5rem);
        margin: 0 auto 1rem;
        line-height: 1.3;
        padding: 0 1rem;
    }
}

/* Small desktop */
@media (min-width: 800px) and (max-width: 991px) {
    .timeline-content h2 {
        font-size: clamp(1.2rem, 3.2vw, 1.6rem);
        margin: 0 auto 1.1rem;
        line-height: 1.3;
        padding: 0 1rem;
    }
}

/* Medium desktop */
@media (min-width: 992px) and (max-width: 1199px) {
    .timeline-content h2 {
        font-size: clamp(1.3rem, 3.5vw, 1.8rem);
        margin: 0 auto 1.2rem;
        line-height: 1.32;
        padding: 0 1.25rem;
    }
}

/* Large desktop */
@media (min-width: 1200px) and (max-width: 1399px) {
    .timeline-content h2 {
        margin: 0 auto 1.2rem;
        line-height: 1.32;
        font-size: clamp(1.25rem, 2.4vw, 1.65rem);
        padding: 0 1.25rem;
    }
}

/* Extra large desktop */
@media (min-width: 1400px) {
    .timeline-content h2 {
        margin: 0 auto 1.5rem;
        line-height: 1.35;
        font-size: clamp(1.6rem, 3vw, 2.2rem);
        padding: 0 2rem;
    }
}

.timeline-content p {
    position: relative;
    margin: 0 auto;
    width: var(--info-width);
    max-width: 100%;
    z-index: 2;
    font-size: var(--description-font-size, clamp(0.85rem, 3vw, 1.05rem));
    text-align: center;
    text-wrap: pretty;
    opacity: var(--info-opacity, 0);
    transform: translateY(var(--info-offset-y, 0px));
    transition: opacity var(--duration) ease-in-out var(--info-delay, 0ms),
                transform var(--duration) ease-in-out var(--info-delay, 0ms);
    color: #555;
    line-height: 1.7;
    padding: 0 1.5rem;
    box-sizing: border-box;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

@media (max-width: 480px) {
    .timeline-content p {
        line-height: 1.55;
        padding: 0 0.5rem;
    }
}

@media (min-width: 481px) and (max-width: 600px) {
    .timeline-content p {
        line-height: 1.6;
        padding: 0 1rem;
    }
}

@media (min-width: 601px) and (max-width: 767px) {
    .timeline-content p {
        line-height: 1.7;
        padding: 0 1.25rem;
    }
}

@media (min-width: 768px) and (max-width: 799px) {
    .timeline-content p {
        line-height: 1.75;
        padding: 0 1.5rem;
    }
}

@media (min-width: 800px) and (max-width: 991px) {
    .timeline-content p {
        line-height: 1.75;
        padding: 0 1.5rem;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .timeline-content p {
        line-height: 1.78;
        padding: 0 1.75rem;
    }
}

@media (min-width: 1200px) and (max-width: 1399px) {
    .timeline-content p {
        line-height: 1.8;
        padding: 0 2rem;
    }
}

@media (min-width: 1400px) {
    .timeline-content p {
        line-height: 1.8;
        padding: 0 2.5rem;
    }
}

.timeline-image {
    display: none;
    position: relative;
    width: 100%;
    max-width: var(--image-width, 100%);
    margin: 0 auto var(--image-margin-bottom, 1.5rem);
    opacity: var(--image-opacity, 0);
    transform: translateY(var(--image-offset-y, 30px));
    transition: opacity var(--duration) ease-in-out var(--image-delay, 0ms),
                transform var(--duration) ease-in-out var(--image-delay, 0ms);
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1), 0 2px 8px rgba(0, 0, 0, 0.08);
    background: #ffffff;
    padding: 4px;
    z-index: 1;
}

.timeline-image img {
    width: 100%;
    height: var(--image-height, 280px);
    object-fit: cover;
    border-radius: 10px;
    display: block;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    transform: scale(1);
}

.timeline-image::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(10, 69, 103, 0.1) 0%, rgba(10, 69, 103, 0.05) 100%);
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 1;
    border-radius: 10px;
    pointer-events: none;
}

.timeline-image:hover {
    box-shadow: 0 12px 35px rgba(10, 69, 103, 0.25), 0 8px 20px rgba(0, 0, 0, 0.15);
    transform: translateY(var(--image-offset-y, 0px)) translateY(-8px);
}

.timeline-image:hover img {
    transform: scale(1.05);
}

.timeline-image:hover::before {
    opacity: 1;
}

/* Hide images on mobile, tablet, and desktop below 1200px */
@media (max-width: 1199px) {
    .timeline-image {
        display: none !important;
    }
}

/* Show images on large desktop only (≥1200px) */
/* Smaller size for 1200-1399px to prevent overlap */
@media (min-width: 1200px) and (max-width: 1399px) {
    .timeline-image {
        display: block;
        --image-width: min(70%, 240px);
        --image-height: 170px;
        --image-margin-bottom: 2.5rem;
        --image-offset-y: 30px;
    }
    
    .timeline-content h2 {
        margin-top: 0;
    }
}

/* Larger size for 1400px and above */
@media (min-width: 1400px) {
    .timeline-image {
        display: block;
        --image-width: min(80%, 320px);
        --image-height: 230px;
        --image-margin-bottom: 3rem;
        --image-offset-y: 30px;
    }
    
    .timeline-content h2 {
        margin-top: 0;
    }
}

/* Update custom properties for checked item */
/* Desktop: content slides from top, Mobile/Tablet: content centered */
/* Animation order: Image first, then Title, then Description */
li:has(input:checked) {
    --label-opacity: 1;
    --label-color: var(--label-color-active);
    --label-line-h: var(--label-line-h-current);
    --label-line-delay: calc(var(--duration) * 2);
    --content-opacity: 1;
    --content-delay: calc(var(--duration) * 2);
    --image-opacity: 1;
    --image-offset-y: 0;
    --image-delay: calc(var(--duration) * 2);
    --title-opacity: 1;
    --title-delay: calc(var(--duration) * 3);
    --info-opacity: 1;
    --info-delay: calc(var(--duration) * 4);
}

/* Desktop 1200px and above: content slides from top when checked */
@media (min-width: 1200px) {
    li:has(input:checked) {
        --content-offset-y: 0px;
        --title-offset-y: 0px;
        --info-offset-y: 0px;
        --image-opacity: 1;
        --image-offset-y: 0;
        --image-delay: calc(var(--duration) * 2);
    }
}

/* Mobile, Tablet, and Desktop below 1200px: content stays centered when checked */
@media (max-width: 1199px) {
    li:has(input:checked) {
        --content-offset-y: -50%;
        --title-offset-y: 0px;
        --info-offset-y: 0px;
    }
}

/* Set default blue color for non-active labels */
.cards li > label {
    color: var(--label-color);
}

.cards li:not(:has(input:checked)) > label {
    color: var(--label-color);
}

li:has(input:checked) > label::before {
    background-color: var(--secondary);
    box-shadow: 0 0 0 4px var(--rgba-secondary-1), 0 4px 12px rgba(0, 0, 0, 0.2);
    transform: translate(-50%, 0) scale(1.2);
    animation: pulse 2s ease-in-out infinite;
}

li:has(input:checked) > label {
    color: var(--label-color-active);
    font-weight: 700;
    font-size: clamp(1rem, 3vw + 0.1rem, 1.3rem);
    transform: translateY(var(--label-offset)) scale(1.1);
    animation: wave 2s ease-in-out infinite;
}

@media (min-width: 800px) {
    li:has(input:checked) > label {
        font-size: clamp(1.1rem, 3.2vw + 0.1rem, 1.4rem);
    }
}

@media (min-width: 1200px) {
    li:has(input:checked) > label {
        font-size: clamp(1.2rem, 3.5vw + 0.1rem, 1.5rem);
    }
}

/* Wave effect animation for active year */
@keyframes wave {
    0%, 100% {
        transform: translateY(calc(var(--label-offset) + 0px)) scale(1.1);
    }
    25% {
        transform: translateY(calc(var(--label-offset) + -3px)) scale(1.1);
    }
    50% {
        transform: translateY(calc(var(--label-offset) + 0px)) scale(1.1);
    }
    75% {
        transform: translateY(calc(var(--label-offset) + 3px)) scale(1.1);
    }
}

/* Rotate container based on checked radio */
.cards:has(input:checked) {
    transform: rotate(calc(var(--base-rotation) - (var(--index) * var(--full-circle) / var(--items))));
}

/* Add pulse animation for active item dot */
@keyframes pulse {
    0%, 100% {
        box-shadow: 0 0 0 4px var(--rgba-secondary-1), 0 4px 12px rgba(0, 0, 0, 0.2);
    }
    50% {
        box-shadow: 0 0 0 8px var(--rgba-secondary-1), 0 4px 16px rgba(0, 0, 0, 0.3);
    }
}


/* Dynamic index selection for up to 11 items */
.cards:has(li:nth-child(1) > input:checked) { --index: 0; }
.cards:has(li:nth-child(2) > input:checked) { --index: 1; }
.cards:has(li:nth-child(3) > input:checked) { --index: 2; }
.cards:has(li:nth-child(4) > input:checked) { --index: 3; }
.cards:has(li:nth-child(5) > input:checked) { --index: 4; }
.cards:has(li:nth-child(6) > input:checked) { --index: 5; }
.cards:has(li:nth-child(7) > input:checked) { --index: 6; }
.cards:has(li:nth-child(8) > input:checked) { --index: 7; }
.cards:has(li:nth-child(9) > input:checked) { --index: 8; }
.cards:has(li:nth-child(10) > input:checked) { --index: 9; }
.cards:has(li:nth-child(11) > input:checked) { --index: 10; }
.cards:has(li:nth-child(12) > input:checked) { --index: 11; }
.cards:has(li:nth-child(13) > input:checked) { --index: 12; }
.cards:has(li:nth-child(14) > input:checked) { --index: 13; }
.cards:has(li:nth-child(15) > input:checked) { --index: 14; }
.cards:has(li:nth-child(16) > input:checked) { --index: 15; }
.cards:has(li:nth-child(17) > input:checked) { --index: 16; }
.cards:has(li:nth-child(18) > input:checked) { --index: 17; }
.cards:has(li:nth-child(19) > input:checked) { --index: 18; }
.cards:has(li:nth-child(20) > input:checked) { --index: 19; }
.cards:has(li:nth-child(21) > input:checked) { --index: 20; }
.cards:has(li:nth-child(22) > input:checked) { --index: 21; }
.cards:has(li:nth-child(23) > input:checked) { --index: 22; }
.cards:has(li:nth-child(24) > input:checked) { --index: 23; }
.cards:has(li:nth-child(25) > input:checked) { --index: 24; }
.cards:has(li:nth-child(26) > input:checked) { --index: 25; }