/* Timeline */
.story-wrapper {
	padding: 200px 0;
	/* Spacing so you can actually scroll through it */
	background: var(--color-tertiary);
}

.story-container {
	position: relative;
	margin: 0 auto;
	height: 4px;
}

/* Background Gray Line */
.story-main-line {
	position: absolute;
	width: 100%;
	height: 9px;
	background: #333;
	top: 50%;
	transform: translateY(-50%);
	border-radius: 25px;
}

/* The Animated Blue Line */
.story-progress-line {
	position: absolute;
	width: 0%;
	height: 10px;
	background: yellow;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	border-radius: 25px;
}

.story-items {
	display: flex;
	justify-content: space-between;
	width: 100%;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
}

.story-node {
	position: relative;
	width: 20px;
	opacity: 0;
	/* JS will reveal this */
	transform: scale(0.5) translateY(20px);
}

.story-dot {
	width: 30px;
	height: 30px;
	background: var(--color-tertiary);
	border: 4px solid #fff;
	border-radius: 50%;
	box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.story-box {
	position: absolute;
	width: 240px;
	left: 50%;
	transform: translateX(-50%);
	text-align: center;
	color: #fff;
}

.story-node.top .story-box {
	bottom: 40px;
}

.story-node.bottom .story-box {
	top: 40px;
}

.story-year {
	font-size: 25px;
	font-weight: 900;
	color: var(--color-white);
	display: block;
}
.story-box h3 { 
	margin: 10px 0; 
	font-size: 16px;
    color: var(--color-white);
    font-weight: 600;
}
.story-box p { font-size: 14px; color: var(--color-white); line-height: 1.4; }


/* --- Mobile Responsive (768px and below) --- */
@media (max-width: 1199px){
	.story-container{
		max-width: 750px;
	}
}
@media (max-width: 991px) {
    .story-wrapper {
        padding: 50px 20px;
    }

    /* 1. Turn the container into a vertical stack */
    .story-container {
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding-left: 30px; /* Space for the vertical line */
    }

    /* 2. Rotate the background lines to be vertical */
    .story-main-line, 
    .story-progress-line {
        left: 10px;
        top: 0;
        width: 8px !important; /* Force width for vertical line */
        height: 100%;
        transform: none;
    }

    .story-progress-line {
        height: 0%; /* GSAP will now animate 'height' instead of 'width' */
        width: 10px !important;
    }

    /* 3. Adjust the items to stack */
    .story-items {
        position: relative;
        flex-direction: column;
        top: 0;
        transform: none;
        gap: 60px; /* Space between story boxes */
        width: 100%;
		left: 30px;
    }

    .story-node {
        width: 100%;
        display: flex;
        align-items: flex-start;
        opacity: 1; /* Ensure visibility on mobile if JS struggles */
        transform: none !important;
    }

    /* 4. Position the dot on the vertical line */
    .story-dot {
        position: absolute;
        left: -28px;
        top: 5px;
		width: 25px;
    	height: 25px;
        transform: none;
        margin: 0;
        z-index: 5;
    }

    /* 5. Reset the content boxes */
    .story-box {
        position: relative;
        width: 100%;
        left: 0;
        transform: none !important;
        text-align: left;
        padding-left: 20px;
    }

    /* Remove the top/bottom alternating offset */
    .story-node.top .story-box,
    .story-node.bottom .story-box {
        bottom: 0;
        top: 0;
    }
    .story-year {
        font-size: 22px;
        margin-bottom: 5px;
    }
	.story-box h3{
		font-size: 14px;
	}
	.story-box p {
    	font-size: 12px;
	}
}