/**
 * CPS Timeline Styles
 * Vertical and horizontal timeline layouts with scrolling support
 */

/* Remove Fusion Builder column margins */
.fusion_builder_column:has(.cps-timeline) {
    --awb-margin-bottom-large: 0px !important;
    --awb-margin-top-large: 0px !important;
    margin-bottom: 0 !important;
    margin-top: 0 !important;
}

.fusion-column-wrapper:has(.cps-timeline) {
    margin-bottom: 0 !important;
    margin-top: 0 !important;
    padding: 0 !important;
}

/* Edge-to-Edge Container */
.cps-timeline {
    width: 100vw;
    margin: 0 !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding: 80px 0;
}

.cps-timeline-inner {
    max-width: var(--awb-content-max-width, 1280px);
    margin: 0 auto;
    padding: 0 var(--awb-content-padding-left, 30px) 0 var(--awb-content-padding-right, 30px);
}

/* Header (Heading + Subheading) */
.cps-timeline-header {
    margin-bottom: 48px;
}

.cps-timeline-heading {
    font-family: refrigerator-deluxe, Impact, Charcoal, sans-serif !important;
    font-size: 48px !important;
    font-weight: 900 !important;
    line-height: 1.1 !important;
    text-transform: uppercase !important;
    letter-spacing: -0.02em !important;
    margin: 0 0 12px 0 !important;
}

.cps-timeline-subheading {
    font-family: DIN, sans-serif !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    margin: 0 !important;
    opacity: 0.9;
}

/* Scrollable Container */
.cps-timeline-container {
    position: relative;
}

/* Scrollable for vertical orientation */
.cps-timeline-container:has(.orientation-vertical) {
    max-height: var(--timeline-height);
    overflow-y: auto;
    overflow-x: hidden;
}

/* Scrollable for horizontal orientation */
.cps-timeline-container:has(.orientation-horizontal) {
    overflow-x: auto;
    overflow-y: hidden;
}

/* Fade/Blur effect at bottom of scrollable container (vertical only) */
.cps-timeline-container:has(.orientation-vertical)::after {
    content: '';
    position: sticky;
    position: -webkit-sticky;
    bottom: 0;
    left: 0;
    right: 0;
    height: 80px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 60%, rgba(255, 255, 255, 1) 100%);
    pointer-events: none;
    z-index: 5;
    display: block;
    margin-top: -80px;
}

/* Fade effect at right edge for horizontal orientation */
.cps-timeline-container:has(.orientation-horizontal)::before {
    content: '';
    position: sticky;
    position: -webkit-sticky;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100px;
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 60%, rgba(255, 255, 255, 1) 100%);
    pointer-events: none;
    z-index: 5;
    display: block;
    margin-left: -100px;
}

/* Custom Scrollbar */
.cps-timeline-container::-webkit-scrollbar {
    width: 8px;
}

.cps-timeline-container::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.cps-timeline-container::-webkit-scrollbar-thumb {
    background: var(--line-color, #D41F38);
    border-radius: 4px;
}

.cps-timeline-container::-webkit-scrollbar-thumb:hover {
    background: #7F182C;
}

/* =================================
   VERTICAL ORIENTATION
   ================================= */

.cps-timeline-track.orientation-vertical {
    display: flex;
    flex-direction: column;
    position: relative;
    padding: 0;
    padding-bottom: 100px; /* Extra space to scroll and see last card fully */
}

/* Vertical Timeline Line - extends from first dot to last dot */
.cps-timeline-track.orientation-vertical::before {
    content: '';
    position: absolute;
    left: 50%;
    top: var(--timeline-line-top, 20px); /* Set by JS from first dot */
    width: 4px;
    background: var(--line-color, #D41F38);
    transform: translateX(-50%);
    z-index: 1;
    height: var(--timeline-line-height, calc(100% - 100px)); /* Set by JS from first to last dot */
}

/* Vertical Timeline Item */
.cps-timeline-track.orientation-vertical .cps-timeline-item {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    margin-bottom: 60px;
    position: relative;
}

.cps-timeline-track.orientation-vertical .cps-timeline-item:last-child {
    margin-bottom: 0;
}

/* Vertical: Position Left */
.cps-timeline-track.orientation-vertical .cps-timeline-item.position-left .cps-timeline-card,
.cps-timeline-track.orientation-vertical .cps-timeline-item.position-left .cps-timeline-card-link {
    grid-column: 1;
}

/* Vertical: Position Right */
.cps-timeline-track.orientation-vertical .cps-timeline-item.position-right .cps-timeline-card,
.cps-timeline-track.orientation-vertical .cps-timeline-item.position-right .cps-timeline-card-link {
    grid-column: 2;
}

/* Vertical Timeline Dot */
.cps-timeline-track.orientation-vertical .cps-timeline-dot {
    position: absolute;
    left: 50%;
    top: 20px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--dot-color, #D41F38);
    border: 4px solid #ffffff;
    box-shadow: 0 0 0 2px var(--dot-color, #D41F38);
    transform: translateX(-50%);
    z-index: 2;
}

/* Ensure first item dot aligns with line start */
.cps-timeline-track.orientation-vertical .cps-timeline-item:first-child .cps-timeline-dot {
    top: 20px;
}

/* Ensure last item dot aligns with line end - line will extend to here */
.cps-timeline-track.orientation-vertical .cps-timeline-item:last-child {
    padding-bottom: 0;
}


/* =================================
   HORIZONTAL ORIENTATION
   ================================= */

.cps-timeline-track.orientation-horizontal {
    display: flex;
    flex-direction: row;
    gap: 100px;
    position: relative;
    padding: 250px 0 250px 50px; /* Left padding for first card, top/bottom for card clearance */
    min-height: 600px;
}

/* Add space after last item to allow full card visibility when scrolled */
.cps-timeline-track.orientation-horizontal::after {
    content: '';
    flex-shrink: 0;
    width: 450px; /* Enough space to see the full last card when scrolled */
    height: 1px;
}

/* Horizontal Timeline Line - extends from first dot to last dot */
.cps-timeline-track.orientation-horizontal::before {
    content: '';
    position: absolute;
    left: var(--timeline-line-left, 250px); /* Set by JS from first dot */
    top: 50%;
    height: 4px;
    background: var(--line-color, #D41F38);
    transform: translateY(-50%);
    z-index: 1;
    width: var(--timeline-line-width, calc(100% - 700px)); /* Set by JS from first to last dot */
}

/* Horizontal Timeline Item - container for dot and card */
.cps-timeline-track.orientation-horizontal .cps-timeline-item {
    position: relative;
    flex-shrink: 0;
    width: 400px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Horizontal Timeline Dot - centered on the line */
.cps-timeline-track.orientation-horizontal .cps-timeline-dot {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--dot-color, #D41F38);
    border: 4px solid #ffffff;
    box-shadow: 0 0 0 2px var(--dot-color, #D41F38);
    transform: translate(-50%, -50%);
    z-index: 2;
}

/* Horizontal: Card Above - absolute positioned above center */
.cps-timeline-track.orientation-horizontal .cps-timeline-item.position-above .cps-timeline-card,
.cps-timeline-track.orientation-horizontal .cps-timeline-item.position-above .cps-timeline-card-link {
    position: absolute;
    bottom: 50%;
    left: 0;
    right: 0;
    margin-bottom: 50px;
}

/* Horizontal: Card Below - absolute positioned below center */
.cps-timeline-track.orientation-horizontal .cps-timeline-item.position-below .cps-timeline-card,
.cps-timeline-track.orientation-horizontal .cps-timeline-item.position-below .cps-timeline-card-link {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    margin-top: 50px;
}


/* =================================
   TIMELINE CARDS (COMMON)
   ================================= */

.cps-timeline-card-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

.cps-timeline-card {
    background: var(--card-bg, #ffffff);
    padding: 32px;
    border-radius: var(--card-radius, 12px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.cps-timeline-card-link:hover .cps-timeline-card,
.cps-timeline-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}

/* Card Content - takes remaining space */
.cps-timeline-card-content {
    flex: 1;
}

/* Card Image - fixed width on right */
.cps-timeline-card-image {
    flex: 0 0 auto;
}

.cps-timeline-card-image img {
    width: 150px;
    height: 150px;
    border-radius: 8px;
    object-fit: cover;
    display: block;
}

/* Card Year */
.cps-timeline-card-year {
    font-family: refrigerator-deluxe, Impact, Charcoal, sans-serif !important;
    font-size: 36px !important;
    font-weight: 900 !important;
    line-height: 1.1 !important;
    color: var(--year-color, #D41F38);
    margin: 0 0 12px 0 !important;
}

/* Card Title */
.cps-timeline-card-title {
    font-family: refrigerator-deluxe, Impact, Charcoal, sans-serif !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    margin: 0 0 12px 0 !important;
}

/* Card Description */
.cps-timeline-card-description {
    font-family: DIN, sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.6 !important;
    color: #333;
    margin: 0 !important;
}

.cps-timeline-card-description p {
    margin: 0 0 12px 0;
}

.cps-timeline-card-description p:last-child {
    margin-bottom: 0;
}

/* =================================
   RESPONSIVE: TABLET
   ================================= */

@media (max-width: 1024px) {
    .cps-timeline {
        padding: 60px 0;
    }

    .cps-timeline-heading {
        font-size: 40px !important;
    }

    .cps-timeline-track.orientation-vertical .cps-timeline-item {
        gap: 40px;
        margin-bottom: 40px;
    }

    .cps-timeline-track.orientation-horizontal {
        gap: 40px;
    }

    .cps-timeline-track.orientation-horizontal .cps-timeline-item {
        width: 300px;
    }
}

/* =================================
   RESPONSIVE: MOBILE
   ================================= */

@media (max-width: 768px) {
    .cps-timeline {
        padding: 40px 0;
    }

    .cps-timeline-inner {
        padding: 0 var(--awb-content-padding-left, 20px) 0 var(--awb-content-padding-right, 20px);
    }

    .cps-timeline-header {
        margin-bottom: 32px;
    }

    .cps-timeline-heading {
        font-size: 36px !important;
    }

    .cps-timeline-subheading {
        font-size: 16px !important;
    }

    /* Force single column for both orientations */
    .cps-timeline-track.orientation-vertical,
    .cps-timeline-track.orientation-horizontal {
        flex-direction: column;
        padding: 20px 0 20px 40px;
    }

    .cps-timeline-track.orientation-vertical .cps-timeline-item,
    .cps-timeline-track.orientation-horizontal .cps-timeline-item {
        grid-template-columns: 1fr;
        margin-bottom: 32px;
        width: 100%;
        padding: 0;
    }

    /* Timeline line on left side for mobile */
    .cps-timeline-track.orientation-vertical::before,
    .cps-timeline-track.orientation-horizontal::before {
        left: 20px;
        right: auto;
        top: 0;
        bottom: 0;
        width: 4px;
        height: auto;
        transform: none;
    }

    /* Dots on left side for mobile */
    .cps-timeline-track.orientation-vertical .cps-timeline-dot,
    .cps-timeline-track.orientation-horizontal .cps-timeline-dot {
        left: 20px;
        top: 20px;
        transform: translateX(-50%);
    }

    /* Cards always in same column on mobile */
    .cps-timeline-track.orientation-vertical .cps-timeline-item.position-left .cps-timeline-card,
    .cps-timeline-track.orientation-vertical .cps-timeline-item.position-right .cps-timeline-card,
    .cps-timeline-track.orientation-vertical .cps-timeline-item.position-left .cps-timeline-card-link,
    .cps-timeline-track.orientation-vertical .cps-timeline-item.position-right .cps-timeline-card-link {
        grid-column: 1;
    }

    /* Reduce scroll height on mobile */
    .cps-timeline-container {
        max-height: 400px !important;
    }

    /* Reduce card padding on mobile */
    .cps-timeline-card {
        padding: 24px;
    }

    /* Reduce font sizes on mobile */
    .cps-timeline-card-year {
        font-size: 30px !important;
    }

    .cps-timeline-card-title {
        font-size: 20px !important;
    }

    .cps-timeline-card-description {
        font-size: 15px !important;
    }
}