/* Company History Timeline — frontend */

.cht-history{
	position:relative;
	background:linear-gradient(180deg,var(--cht-bg-top,#f4fafe),var(--cht-bg-bottom,#eaf4fb));
	padding:clamp(40px,6vw,64px) 0 clamp(46px,6vw,70px);
	overflow:hidden;
	font-family:var(--cht-body-font,inherit);
	box-sizing:border-box;
}
.cht-history *,
.cht-history *::before,
.cht-history *::after{box-sizing:border-box;}

.cht-heading{
	text-align:center;
	margin:0 0 10px;
	font-size:clamp(24px,4vw,34px);
	font-weight:700;
	color:var(--cht-year-color,#1f2937);
	font-family:var(--cht-heading-font,inherit);
	letter-spacing:.3px;
}
.cht-sub{
	text-align:center;
	margin:0 auto 28px;
	max-width:520px;
	padding:0 18px;
	font-size:clamp(13px,2.5vw,15px);
	line-height:1.5;
	color:var(--cht-text-color,#6b7280);
}

.cht-bg{
	position:absolute;
	left:50%;bottom:0;
	transform:translateX(-50%);
	width:600px;max-width:90%;
	color:#1f6fa8;
	opacity:.06;
	pointer-events:none;
}

/* Scroll area — scrollbar hidden */
.cht-scroll{
	position:relative;
	overflow-x:auto;
	overflow-y:hidden;
	-webkit-overflow-scrolling:touch;
	padding:0 clamp(16px,4vw,40px);
	cursor:grab;
	scrollbar-width:none;
	-ms-overflow-style:none;
}
.cht-scroll::-webkit-scrollbar{display:none;}
.cht-scroll.cht-dragging{cursor:grabbing;}

/* Track + center line */
.cht-track{
	position:relative;
	display:inline-flex;
	align-items:stretch;
	padding:0 10px;
}
.cht-track::before{
	content:"";
	position:absolute;
	top:50%;left:0;right:0;
	height:2px;
	background:var(--cht-line,#1f2937);
	transform:translateY(-50%);
}

/* Item */
.cht-item{
	position:relative;
	flex:0 0 var(--cht-card-w,270px);
	width:var(--cht-card-w,270px);
	display:grid;
	grid-template-rows:1fr 60px 1fr;
	align-items:center;
}
.cht-node{
	grid-row:2;
	justify-self:center;
	width:22px;height:22px;
	border-radius:50%;
	background:#fff;
	border:5px solid var(--cht-node,#19a7e6);
	box-shadow:0 0 0 4px color-mix(in srgb,var(--cht-node,#19a7e6) 15%,transparent);
	z-index:2;
}
.cht-card{
	background:var(--cht-card-bg,#fff);
	border-radius:10px;
	box-shadow:0 10px 30px rgba(20,80,130,.10);
	padding:20px 18px;
	text-align:center;
	width:calc(var(--cht-card-w,270px) - 40px);
	justify-self:center;
	position:relative;
	transition:transform .25s ease, box-shadow .25s ease;
}
.cht-card:hover{transform:translateY(-4px);box-shadow:0 16px 36px rgba(20,80,130,.16);}
.cht-year{
	font-size:clamp(22px,3vw,26px);
	font-weight:700;
	color:var(--cht-year-color,#1f2937);
	font-family:var(--cht-year-font,inherit);
	margin:0 0 8px;
}
.cht-desc{
	font-size:clamp(13px,2.2vw,14px);
	line-height:1.5;
	color:var(--cht-text-color,#6b7280);
	margin:0;
}
.cht-card::after{
	content:"";position:absolute;left:50%;
	width:2px;height:18px;
	background:color-mix(in srgb,var(--cht-line,#1f2937) 25%,transparent);
	transform:translateX(-50%);
}
.cht-item.is-top .cht-card{grid-row:1;align-self:end;}
.cht-item.is-top .cht-card::after{bottom:-18px;}
.cht-item.is-bottom .cht-card{grid-row:3;align-self:start;}
.cht-item.is-bottom .cht-card::after{top:-18px;}

/* Arrows */
.cht-nav{display:flex;justify-content:center;gap:14px;margin-top:32px;}
.cht-btn{
	width:46px;height:46px;border:none;border-radius:50%;
	background:var(--cht-node,#19a7e6);color:#fff;font-size:20px;line-height:1;cursor:pointer;
	box-shadow:0 6px 16px color-mix(in srgb,var(--cht-node,#19a7e6) 40%,transparent);
	transition:transform .15s ease;
	display:flex;align-items:center;justify-content:center;
}
.cht-btn:hover{transform:scale(1.08);}
.cht-btn:active{transform:scale(.96);}

@media (max-width:600px){ .cht-btn{width:42px;height:42px;} }
@media (prefers-reduced-motion:reduce){ .cht-card{transition:none;} }