/* Timeline Styles - Line on Left, Content on Right */

/* CRITICAL: Ensure parent containers allow sticky positioning */
/* Sticky positioning breaks if ANY ancestor has overflow: hidden/auto/scroll */
/* Only target timeline-specific containers to avoid breaking other sections */
body:has(.locker),
.page-content:has(.locker),
.page-content > .relative:has(.locker),
.page-content > .relative:has(.locker) > .container,
.container:has(.locker) {
    overflow: visible !important;
}

/* Fallback for browsers without :has() - target timeline structure directly */
.page-content > .relative > .container > .locker {
    /* Parent containers must allow overflow */
}

/* Ensure the container wrapping the locker doesn't break sticky */
.container > .locker {
    overflow: visible !important;
}

/* Hide the locker image section on mobile */
@media (max-width: 768px) {
    .locker__image {
        display: none !important;
    }
}

/* Ensure the sticky timeline column always works (even if utilities change) */
.locker {
    display: grid;
    grid-template-columns: minmax(0, 50%) minmax(0, 1fr);
    align-items: stretch; /* Critical: both columns must be same height */
    position: relative;
    overflow: visible !important;
}

@media (max-width: 768px) {
    .locker {
        display: block;
    }
}

.locker__image {
    position: relative;
    align-self: stretch; /* Force this column to match the height of the right column */
    overflow: visible !important;
    height: 100%; /* Take full height of grid row - critical for sticky to work */
    min-height: 100vh; /* Fallback minimum height */
}

.locker__container {
    position: -webkit-sticky !important; /* Safari support */
    position: sticky !important;
    top: 0 !important; /* Stick to top of viewport */
    height: 100vh; /* Full viewport height */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    z-index: 1;
    will-change: transform; /* Optimize for sticky */
}

.timeline-wrapper {
    position: relative;
    padding-left: 0;
}

/* Create a continuous vertical line through pseudo-element */
.timeline-wrapper::before {
    content: '';
    position: absolute;
    left: 2.5rem; /* 40px */
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--color-primary, #D4A853);
    z-index: 1;
}

/* Tablet and below */
@media (max-width: 1024px) {
    .timeline-wrapper::before {
        left: 1.875rem; /* 30px on tablets */
    }
}

/* Mobile */
@media (max-width: 768px) {
    .timeline-wrapper::before {
        left: 1rem; /* 16px on mobile */
        width: 2px; /* Thinner line on mobile */
    }
}

.timeline-item {
    position: relative;
    display: flex;
    min-height: 100vh;
    align-items: center;
    padding: 6.25rem 0; /* 100px top/bottom */
    border-bottom: 1px solid var(--color-primary, #D4A853);
}

/* Large screens but not full desktop */
@media (max-width: 1536px) {
    .timeline-item {
        min-height: auto;
        padding: 5rem 0; /* 80px */
    }
}

/* Tablets landscape */
@media (max-width: 1280px) {
    .timeline-item {
        padding: 3.75rem 0; /* 60px */
    }
}

/* Tablets portrait */
@media (max-width: 1024px) {
    .timeline-item {
        padding: 3rem 0; /* 48px */
    }
}

/* Mobile landscape */
@media (max-width: 768px) {
    .timeline-item {
        padding: 2.5rem 0; /* 40px */
    }
}

/* Mobile portrait */
@media (max-width: 640px) {
    .timeline-item {
        padding: 2rem 0; /* 32px */
    }
}

.timeline-item--last {
    border-bottom: none;
}

/* Timeline line container (now just for positioning the dot) */
.timeline-line {
    position: absolute;
    left: 2.5rem; /* 40px - match the wrapper::before */
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
}

@media (max-width: 1024px) {
    .timeline-line {
        left: 1.875rem; /* 30px on tablets */
    }
}

@media (max-width: 768px) {
    .timeline-line {
        left: 1rem; /* 16px on mobile */
        top: 2rem; /* Position near top on mobile instead of center */
        transform: none;
    }
}

/* Timeline dot */
.timeline-dot {
    position: relative;
    left: -50%;
    width: 18px;
    height: 18px;
    background: var(--color-primary, #D4A853);
    border-radius: 50%;
    border: 3px solid #fff;
    box-shadow: 0 0 0 4px rgba(212, 168, 83, 0.2);
}

@media (max-width: 1024px) {
    .timeline-dot {
        width: 16px;
        height: 16px;
    }
}

@media (max-width: 768px) {
    .timeline-dot {
        width: 14px;
        height: 14px;
        border-width: 2px;
        box-shadow: 0 0 0 3px rgba(212, 168, 83, 0.2);
    }
}

@media (max-width: 480px) {
    .timeline-dot {
        width: 12px;
        height: 12px;
        border-width: 2px;
        box-shadow: 0 0 0 2px rgba(212, 168, 83, 0.2);
    }
}

/* Content container - pushed to the right */
.timeline-content {
    flex: 1;
    padding-left: 6.25rem; /* 100px - space from the line */
    padding-right: 2.5rem; /* 40px */
}

/* Large tablets */
@media (max-width: 1280px) {
    .timeline-content {
        padding-left: 4.5rem; /* 72px */
        padding-right: 1.5rem; /* 24px */
    }
}

/* Tablets */
@media (max-width: 1024px) {
    .timeline-content {
        padding-left: 4rem; /* 64px */
        padding-right: 1.25rem; /* 20px */
    }
}

/* Mobile landscape */
@media (max-width: 768px) {
    .timeline-content {
        padding-left: 3rem; /* 48px from line */
        padding-right: 1rem; /* 16px */
    }
}

/* Mobile portrait */
@media (max-width: 640px) {
    .timeline-content {
        padding-left: 2.5rem; /* 40px from line */
        padding-right: 0.75rem; /* 12px */
    }
}

/* Small mobile */
@media (max-width: 480px) {
    .timeline-content {
        padding-left: 2rem; /* 32px from line */
        padding-right: 0.5rem; /* 8px */
    }
}

/* Responsive adjustments for content inside timeline */
.timeline-content img {
    max-width: 100%;
    height: auto;
}

/* Adjust year font size for mobile */
@media (max-width: 768px) {
    .timeline-content .text-6xl {
        font-size: 3rem; /* Smaller on mobile */
        line-height: 1;
    }
}

@media (max-width: 640px) {
    .timeline-content .text-6xl {
        font-size: 2.5rem; /* Even smaller on small mobile */
    }
}

@media (max-width: 480px) {
    .timeline-content .text-6xl {
        font-size: 2rem; /* Smallest for very small screens */
    }
}

/* Adjust title font size for mobile */
@media (max-width: 768px) {
    .timeline-content .text-2\.2xl {
        font-size: 1.75rem;
        line-height: 1.2;
    }
}

@media (max-width: 640px) {
    .timeline-content .text-2\.2xl {
        font-size: 1.5rem;
    }
}

@media (max-width: 480px) {
    .timeline-content .text-2\.2xl {
        font-size: 1.25rem;
    }
}

/* Adjust paragraph spacing for mobile */
@media (max-width: 768px) {
    .timeline-content .mb-7\.5 {
        margin-bottom: 1.5rem;
    }
    
    .timeline-content .mb-5 {
        margin-bottom: 1rem;
    }
    
    .timeline-content .mb-4 {
        margin-bottom: 0.75rem;
    }
    
    .timeline-content .mb-2 {
        margin-bottom: 0.5rem;
    }
}

/* Ensure proper text wrapping on mobile */
.timeline-content h3,
.timeline-content p {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Adjust font sizes for better mobile readability */
@media (max-width: 768px) {
    .timeline-content p {
        font-size: 0.9375rem; /* 15px */
        line-height: 1.6;
    }
}

@media (max-width: 480px) {
    .timeline-content p {
        font-size: 0.875rem; /* 14px */
        line-height: 1.5;
    }
}

/* Ensure timeline doesn't cause horizontal scroll */
.timeline-wrapper {
    overflow-x: hidden;
    max-width: 100%;
}

/* Adjust for very small screens */
@media (max-width: 375px) {
    .timeline-wrapper::before {
        left: 0.75rem; /* 12px on very small mobile */
    }
    
    .timeline-line {
        left: 0.75rem;
    }
    
    .timeline-content {
        padding-left: 1.75rem; /* 28px from line */
    }
    
    .timeline-dot {
        width: 10px;
        height: 10px;
        border-width: 2px;
    }
}

/* Optional: Fade in animation - disabled by default for better performance */
/*
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.timeline-content {
    animation: fadeInUp 0.6s ease-out;
}
*/