/* =====================================================
   SCROLL TIMELINE  — aboutPage
   ===================================================== */

/* ── wrapper ── */
.tl-wrap {
	position: relative;
	padding: 60px 0 40px;
}

/* เส้นกลางสร้างโดย JS เป็น #tl-line — ไม่ใช้ ::before */

/* ── แต่ละ item ── */
.tl-item {
	display: grid;
	grid-template-columns: 1fr 48px 1fr;
	align-items: start;
	gap: 0 0;
	margin-bottom: 64px;
	position: relative;
}

/* ── dot บนเส้น ── */
.tl-dot {
	grid-column: 2;
	display: flex;
	justify-content: center;
	padding-top: 18px;
}
.tl-dot-inner {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #fff;
	border: 3px solid #3e9aa1;
	box-shadow: 0 0 0 4px rgba(62,154,161,0.18);
	transition: transform 0.4s ease, background 0.4s ease, box-shadow 0.4s ease;
	position: relative;
	z-index: 2;
}
.tl-item.visible .tl-dot-inner {
	background: linear-gradient(135deg, #218bc3, #76ad59);
	border-color: #218bc3;
	transform: scale(1.25);
	box-shadow: 0 0 0 6px rgba(33,139,195,0.2);
}

/* ── card ── */
.tl-card {
	background: #fff;
	border-radius: 18px;
	padding: 24px 28px;
	box-shadow: 0 4px 24px rgba(0,0,0,0.07);
	position: relative;
	opacity: 0;
	transition: opacity 0.6s ease, transform 0.6s ease;
}

/* ── item เลข คี่: card อยู่ซ้าย ── */
.tl-item:nth-child(odd) .tl-card {
	grid-column: 1;
	grid-row: 1;
	margin-right: 28px;
	transform: translateX(-40px);
}
.tl-item:nth-child(odd) .tl-dot  { grid-column: 2; grid-row: 1; }
.tl-item:nth-child(odd) .tl-empty { grid-column: 3; grid-row: 1; }

/* ── item เลข คู่: card อยู่ขวา ── */
.tl-item:nth-child(even) .tl-empty { grid-column: 1; grid-row: 1; }
.tl-item:nth-child(even) .tl-dot   { grid-column: 2; grid-row: 1; }
.tl-item:nth-child(even) .tl-card  {
	grid-column: 3;
	grid-row: 1;
	margin-left: 28px;
	transform: translateX(40px);
}

/* ── visible state ── */
.tl-item.visible .tl-card {
	opacity: 1;
	transform: translateX(0) !important;
}

/* ── arrow pointer ── */
.tl-card::before {
	content: '';
	position: absolute;
	top: 26px;
	border: 9px solid transparent;
}
.tl-item:nth-child(odd) .tl-card::before {
	right: -18px;
	border-left-color: #fff;
	filter: drop-shadow(2px 0 4px rgba(0,0,0,0.06));
}
.tl-item:nth-child(even) .tl-card::before {
	left: -18px;
	border-right-color: #fff;
	filter: drop-shadow(-2px 0 4px rgba(0,0,0,0.06));
}

/* ── date badge ── */
.tl-date {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 0.75rem;
	font-weight: 700;
	color: #fff;
	background: linear-gradient(135deg, #218bc3, #3e9aa1);
	border-radius: 50px;
	padding: 4px 14px;
	margin-bottom: 12px;
	letter-spacing: 0.4px;
}
.tl-title {
	font-size: 1.05rem;
	font-weight: 700;
	color: #1e293b;
	margin-bottom: 10px;
}
.tl-body {
	font-size: 0.88rem;
	color: #475569;
	line-height: 1.75;
}
.tl-body ol {
	padding-left: 18px;
	margin: 0;
}
.tl-body li { margin-bottom: 4px; }

/* ── accent left bar per category ── */
.tl-card.accent-blue  { border-left: 4px solid #218bc3; }
.tl-card.accent-teal  { border-left: 4px solid #3e9aa1; }
.tl-card.accent-green { border-left: 4px solid #76ad59; }

/* ══════════════ MOBILE ══════════════ */
@media (max-width: 768px) {
	.tl-wrap::before { left: 20px; }

	.tl-item {
		grid-template-columns: 40px 1fr;
		margin-bottom: 40px;
	}
	.tl-item:nth-child(odd) .tl-dot,
	.tl-item:nth-child(even) .tl-dot  { grid-column: 1; grid-row: 1; }

	.tl-item:nth-child(odd) .tl-card,
	.tl-item:nth-child(even) .tl-card {
		grid-column: 2;
		grid-row: 1;
		margin: 0 0 0 12px;
		transform: translateX(30px);
	}
	.tl-item:nth-child(odd) .tl-empty,
	.tl-item:nth-child(even) .tl-empty { display: none; }

	.tl-card::before {
		top: 20px;
		right: auto !important;
		left: -16px !important;
		border-right-color: #fff !important;
		border-left-color: transparent !important;
	}
}