/* ================================================
   Animated Timeline Widget — frontend.css
   ================================================ */

.atw-timeline {
	position: relative;
	box-sizing: border-box;
}

.atw-inner {
	position: relative;
	margin: 0 auto;
}

/* ---- Track + Progress (direct children of .atw-inner) ---- */

/* Static track: JS positions from first dot → last dot */
.atw-track {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top: 0;
	height: 0;
	width: var(--atw-line-width, 4px);
	background: var(--atw-line-track-color, #d1d5db);
	border-radius: 999px;
	pointer-events: none;
	z-index: 1;
}

/* Animated progress: JS grows from first dot downward on scroll */
.atw-progress {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top: 0;
	height: 0;
	width: var(--atw-line-width, 4px);
	background: var(--atw-line-color, #003B46);
	border-radius: 999px;
	pointer-events: none;
	z-index: 2;
}

/* ---- Rows container ---- */
.atw-rows {
	display: flex;
	flex-direction: column;
	position: relative;
	z-index: 3;
}

/* ---- Row ---- */
.atw-row {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	position: relative;
}

/* ---- Dot ---- */
.atw-dot-col {
	display: flex;
	align-items: center;
	justify-content: center;
}

.atw-dot {
	width: var(--atw-dot-size, 40px);
	height: var(--atw-dot-size, 40px);
	border-radius: 50%;
	background: var(--atw-dot-bg, #B1FF6A);
	border: var(--atw-dot-border-width, 3px) solid var(--atw-dot-border-color, #003B46);
	box-sizing: border-box;
	flex-shrink: 0;
	position: relative;
	z-index: 4;
	transform: scale(0);
	transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.atw-row.atw-active .atw-dot {
	transform: scale(1);
}

/* ---- Text columns ---- */
.atw-heading-col {
	text-align: right;
	padding-right: var(--atw-text-gap, 32px);
}

.atw-body-col {
	text-align: left;
	padding-left: var(--atw-text-gap, 32px);
}

/* ---- Text elements ---- */
.atw-heading {
	margin: 0;
	opacity: 0;
	transform: translateX(-30px);
	transition: opacity 0.5s ease, transform 0.5s ease;
}

.atw-body {
	margin: 0;
	opacity: 0;
	transform: translateX(30px);
	transition: opacity 0.5s ease, transform 0.5s ease;
}

.atw-row.atw-active .atw-heading {
	opacity: 1;
	transform: translateX(0);
}

.atw-row.atw-active .atw-body {
	opacity: 1;
	transform: translateX(0);
}

/* ---- Mobile: dot left, text right ---- */
@media (max-width: 767px) {
	.atw-row {
		grid-template-columns: auto 1fr;
		grid-template-rows: auto auto;
		column-gap: var(--atw-text-gap, 20px);
	}

	.atw-dot-col {
		grid-row: 1 / 3;
		grid-column: 1;
		align-self: start;
		padding-top: 4px;
	}

	.atw-heading-col {
		grid-column: 2;
		grid-row: 1;
		text-align: left;
		padding-right: 0;
		padding-left: 0;
	}

	.atw-body-col {
		grid-column: 2;
		grid-row: 2;
		padding-left: 0;
	}

	.atw-heading {
		transform: translateY(-15px);
	}
	.atw-body {
		transform: translateY(15px);
	}
	.atw-row.atw-active .atw-heading,
	.atw-row.atw-active .atw-body {
		transform: translateY(0);
	}

	.atw-track,
	.atw-progress {
		left: calc(var(--atw-dot-size, 40px) / 2);
	}
}