/* WML Timeline Widget Styles */

:root {
    --wml-timeline-bg-color: #e3f2fd;
    --wml-timeline-text-color: #1565c0;
    --wml-timeline-accent-color: #1e88e5;
}

.wml-timeline-wrapper {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
    /* Default vars */
    color: var(--wml-timeline-text-color);
    /* Background contained within widget */
    background-color: var(--wml-timeline-bg-color);
    transition: background-color 0.8s ease;
}

.wml-timeline-wrapper * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* --- FIXED BACKGROUND YEARS --- */
.wml-timeline-years-container {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 0;
    /* Behind content */
    pointer-events: none;
    overflow: hidden;
    /* Prevent spillover */
}

.wml-timeline-year {
    position: absolute;
    /* Font size handled by controls */
    display: flex;
    overflow: hidden;
    color: var(--wml-timeline-accent-color);
    opacity: 0.15;
    /* Subtle background opacity */
    transition: color 0.5s ease;
}

.wml-timeline-year span {
    display: inline-block;
    transform: translateY(100%);
    /* Will be animated by GSAP */
}

/* --- LAYOUT & SECTIONS --- */
.wml-timeline-content {
    position: relative;
    z-index: 1;
    width: 100%;
    margin-top: -100vh;
    /* IMPORTANT: Pull content up to overlap the sticky years container */
}

.wml-timeline-section {
    min-height: 100vh;
    width: 100%;
    padding: 4rem 10%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    /* Background transition handled by body/html or wrapper?
       The example applied it to HTML/Body. 
       In Bricks/WP, we can't easily animate body bg without affecting other things.
       Ideally we animate a fixed background layer or the wrapper if it covers viewport.
       For this widget, since sections are transparent, we might need a fixed bg layer 
       OR simply let the JS animate the body background if that's what the user wants.
       However, enabling body animation is risky.
       Better approach: The widget wrapper has a fixed background div content?
       Actually, the prompt showed: :root vars changing.
       If we want to scope it, we should maybe have a fixed background div inside our wrapper.
       But the wrapper scrolls.
       Let's stick to the prompt: The SECTION triggers the variable change on HTML/BODY.
       We will implement that in JS. */
}

/* Grid wrapper for content to handle layouts */
.wml-timeline-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
    max-width: 1400px;
    width: 100%;
}

.wml-timeline-text h1 {
    margin-bottom: 1.5rem;
}

.wml-timeline-text p {
    margin-bottom: 1rem;
}

.wml-timeline-image {
    position: relative;
    width: 100%;
    height: auto;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.wml-timeline-image img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* --- SPECIFIC LAYOUT VARIATIONS --- */

/* 1. Image Left, Text Right */
/* Handled by DOM order in PHP + Grid default */
.wml-layout-left .wml-timeline-grid {
    /* Image (1st child) left, Text (2nd child) right */
    display: grid;
    /* Explicitly state grid to avoid empty rule */
}

/* 2. Text Left, Image Right */
/* Handled by PHP logic: Text is 1st child, Image is 2nd */
.wml-layout-right .wml-timeline-grid {
    /* Text (1st child) left, Image (2nd child) right */
    display: grid;
    /* Explicitly state grid to avoid empty rule */
}

/* 3. Split: Images scattered, Text center */
.wml-layout-split .wml-timeline-grid {
    grid-template-columns: 1fr;
    /* Single column stack */
    position: relative;
    padding: 5rem 0;
}

.wml-layout-split .wml-timeline-text {
    text-align: center;
    z-index: 2;
    margin: 4rem 0;
    grid-row: 1;
    /* Ensure text is conceptually in middle if we were using rows, but here grid-template is 1 col */
}

/* Text is middle child in PHP for split layout */

.wml-layout-split .wml-img-top-left {
    position: absolute;
    top: 0;
    left: 0;
    width: 300px;
}

.wml-layout-split .wml-img-bottom-right {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 350px;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .wml-timeline-grid {
        grid-template-columns: 1fr !important;
        gap: 2rem;
    }

    /* Reorder text to be below image for mobile usually, or keep as is? */
    .wml-layout-left .wml-timeline-text {
        order: 2;
    }

    .wml-layout-left .wml-timeline-image {
        order: 1;
    }

    .wml-layout-right .wml-timeline-text {
        order: 2;
    }

    .wml-layout-right .wml-timeline-image {
        order: 1;
    }

    .wml-timeline-text {
        text-align: center !important;
    }

    .wml-layout-split .wml-img-top-left,
    .wml-layout-split .wml-img-bottom-right {
        position: relative;
        width: 100%;
        margin: 1rem 0;
        top: auto;
        left: auto;
        bottom: auto;
        right: auto;
    }

    /* Adjust text order in split for mobile? */
    .wml-layout-split .wml-timeline-text {
        margin: 2rem 0;
    }
}