/* ==========================================================================
   Timeline Block
   - Dynamic icon colors based on theme contrast
   ========================================================================== */

.timeline-block {
    --timeline-bg:          var(--scheme-bg,          #F2F6E6);
    --timeline-text:        var(--scheme-text,        #313a4c);
    --timeline-accent:      var(--scheme-border,      #E5E5E5);
    --timeline-accent-text: #ffffff;
    --timeline-card-bg:     var(--scheme-box,         #ffffff);
    --timeline-track-bg:    var(--scheme-box,         #ffffff);
    --timeline-card-border: var(--scheme-border,      #E5E5E5);
    --timeline-icon-primary: var(--scheme-text,       #313a4c);
    --timeline-icon-accent:  var(--nebula-pop,        #BAD532);
    background-color: var(--timeline-bg);
    color: var(--timeline-text);
    padding: 80px 0;
}

/* ==========================================================================
   THE "NEGATIVE SELECTOR" FIX
   ========================================================================== */

.story-block__icon svg path,
.story-block__icon svg circle,
.story-block__icon svg rect {
    fill: var(--timeline-icon-primary) !important;
    transition: fill 0.8s ease, stroke 0.8s ease;
}

.story-block__icon svg [stroke] {
    stroke: var(--timeline-icon-primary) !important;
    fill: none !important;
    transition: fill 0.8s ease, stroke 0.8s ease;
}

.story-block.is-active .story-block__icon svg [fill]:not([fill="#BAD532"]):not([fill="#bad532"]):not(.nebula-svg-accent-fill) {
    fill: #ffffff !important;
}


.story-block.is-active .story-block__icon svg [stroke]:not([stroke="#BAD532"]):not([stroke="#bad532"]):not(.nebula-svg-accent-stroke) {
    stroke: #ffffff !important;
}

.timeline-block .story-block__icon svg .nebula-svg-accent-fill,
.timeline-block .story-block__icon svg [fill="#BAD532"],
.timeline-block .story-block__icon svg [fill="#bad532"] {
    fill: var(--timeline-icon-accent, #BAD532) !important;
}

.timeline-block .story-block__icon svg .nebula-svg-accent-stroke,
.timeline-block .story-block__icon svg [stroke="#BAD532"],
.timeline-block .story-block__icon svg [stroke="#bad532"] {
    stroke: var(--timeline-icon-accent, #BAD532) !important;
    fill: none !important;
}


/* ==========================================================================
   THE REST OF YOUR ORIGINAL CSS
   ========================================================================== */

.timeline-block__header {
    max-width: 900px;
    margin: 0 auto 60px;
    text-align: center;
}

.timeline-block__header .section-title {
    color: var(--timeline-text);
}

.timeline-block__subheading {
    font-size: 1.15rem;
    color: var(--timeline-text);
    line-height: 1.6;
    opacity: 0.8;
}

.timeline-block__wrap {
    max-width: 1540px;
    margin: 0 auto;
    padding: 0 50px;
}

.timeline-block__inner {
    max-width: 1440px;
    margin: 0 auto;
}

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

.timeline-block__timeline {
    display: flex;
    flex-direction: column;
    gap: 0;
    position: relative;
}

.timeline-goo-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    overflow: visible;
}

.story-block {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 0 40px;
    position: relative;
    padding-bottom: 80px; /* Added padding to prevent overlapping cards */
    z-index: 1; 
}

.story-block:last-child {
    padding-bottom: 0; /* Prevents extra padding on the very last item */
}

.story-block__marker {
    grid-column: 1;
    grid-row: 1 / 3;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.story-block__marker-inner {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: var(--timeline-track-bg); 
    border: 3px solid var(--timeline-track-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 20px rgba(0,0,0,0.12);
    overflow: hidden;
    padding: 20px;
    box-sizing: border-box;
    position: relative; 
    z-index: 2; 
    transition: background-color 0.8s ease, border-color 0.8s ease, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.story-block.is-active .story-block__marker-inner {
    background: var(--timeline-accent);
    border-color: var(--timeline-accent);
    transform: scale(1.05); 
}

.story-block__step {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--timeline-icon-primary);
    opacity: 0.3;
    line-height: 1;
    letter-spacing: 0;
    transition: color 0.8s ease, opacity 0.8s ease;
}

.story-block.is-active .story-block__step {
    color: #ffffff !important;
    opacity: 1;
    z-index: 10;
}

.story-block__icon-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    opacity: 0.4;
    transition: opacity 0.8s ease;
}

.story-block.is-active .story-block__icon-img {
    opacity: 1;
}

.story-block__icon {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--timeline-icon-primary);
    opacity: 0.3;
    transition: color 0.8s ease, opacity 0.8s ease;
    z-index: 10;
}

.story-block.is-active .story-block__icon {
    color: #ffffff !important;
    opacity: 1;
}

.story-block__body {
    grid-column: 2;
    background: var(--timeline-card-bg);
    border: 2px solid var(--timeline-card-border);
    padding: 30px 40px;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.03);
    opacity: 0;
    transform: translateY(40px);
    pointer-events: none;
    transition: opacity 1s cubic-bezier(0.22, 1, 0.36, 1), 
                transform 1s cubic-bezier(0.22, 1, 0.36, 1);
}

.story-block.is-active .story-block__body {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.story-block__label {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--timeline-text);
    margin: 0 0 16px;
}

.story-block__content p {
    color: var(--timeline-text);
    opacity: 0.9;
    line-height: 1.75;
    font-size: 1.05rem;
    margin-bottom: 1.2em;
}

.story-block__content p:last-child {
    margin-bottom: 0;
}

.story-block__content-image {
    margin-top: 30px;
}

.story-block__content-image img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
}

@media (min-width: 992px) {
    .timeline-block.align--center .story-block {
        grid-template-columns: 1fr 100px 1fr;
        align-items: center; 
    }
    
    .timeline-block.align--center .story-block:nth-child(1) { align-items: flex-start; }
    .timeline-block.align--center .story-block:nth-child(2) { align-items: center; }
    .timeline-block.align--center .story-block:last-child { align-items: flex-end; }
    .timeline-block.align--center .story-block__marker { grid-column: 2; }
    
    .timeline-block.align--center .story-block:nth-child(odd) .story-block__body {
        grid-column: 1;
        grid-row: 1;
        text-align: right;
    }
    
    .timeline-block.align--center .story-block:nth-child(even) .story-block__body {
        grid-column: 3;
        grid-row: 1;
        text-align: left;
    }
}

@media (max-width: 768px) {
    .timeline-goo-svg { display: none; }
    
    .story-block {
        grid-template-columns: 1fr;
        padding-bottom: 60px; 
    }

    .story-block:last-child {
        padding-bottom: 0; 
    }

    .story-block__marker { display: none; }

    .story-block__body {
        grid-column: 1;
        opacity: 1 !important;
        transform: none !important;
        pointer-events: auto !important;
        padding: 24px;
    }
}

.timeline-block.is-editor .story-block__body {
    opacity: 1 !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
}

.timeline-block.is-editor .story-block__marker-inner {
    background: var(--timeline-accent) !important;
    border-color: var(--timeline-accent) !important;
    transform: scale(1.05) !important;
}

.timeline-block.is-editor .story-block__step { color: #ffffff !important; opacity: 1 !important; }
.timeline-block.is-editor .story-block__icon-img { opacity: 1 !important; }
.timeline-block.is-editor .story-block__icon { color: #ffffff !important; opacity: 1 !important; }