/* =========================================================================
   Heights Timeline — desktop hover columns + mobile vertical scroll-fill
   ========================================================================= */
.htl, .htl * { box-sizing: border-box; }

.htl {
	position: relative;
	width: 100%;
	border-radius: 20px;
	overflow: hidden;
}

/* ----------------------------------------------------------------------
   Desktop
   ------------------------------------------------------------------- */
.htl-desktop {
	position: relative;
	height: 380px;
	width: 100%;
}

/* Background image stack — crossfade between steps */
.htl-bg-layer { position: absolute; inset: 0; }
.htl-bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	opacity: 0;
	transition: opacity .6s ease;
}
.htl-bg.is-active { opacity: 1; }
.htl-kenburns .htl-bg.is-active { animation: htl-kb 7s ease-out forwards; }
@keyframes htl-kb {
	from { transform: scale(1); }
	to   { transform: scale(1.08); }
}
.htl-overlay { position: absolute; inset: 0; background: rgba(10,40,50,0.30); }

/* Columns */
.htl-cols {
	position: relative;
	z-index: 2;
	display: flex;
	height: 100%;
}
.htl-col {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	cursor: default;
	transition: flex-grow .4s ease;
}
.htl-col:not(:last-child) { border-right: 1px solid rgba(255,255,255,0.25); }
.htl-col-inner {
	width: 100%;
	padding: 28px 22px;
	display: flex;
	flex-direction: column;
	background: transparent;
	transition: background .4s ease;
}
.htl-col.is-active .htl-col-inner { background: rgba(70,90,110,0.55); }

.htl-col-head { display: flex; flex-direction: column; gap: 10px; }
.htl-title {
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #fff;
	line-height: 1.3;
}
.htl-time {
	font-size: 26px;
	font-weight: 700;
	color: #fff;
	line-height: 1.1;
}

/* Description: only visible on the active column, fades in */
.htl-desc {
	margin: 18px 0 0;
	font-size: 13px;
	line-height: 1.6;
	color: rgba(255,255,255,0.92);
	opacity: 0;
	transform: translateY(6px);
	transition: opacity .4s ease .1s, transform .4s ease .1s;
	pointer-events: none;
}
.htl-col.is-active .htl-desc { opacity: 1; transform: translateY(0); }

/* Hide mobile layout on desktop */
.htl-mobile { display: none; }

/* ----------------------------------------------------------------------
   Mobile (toggled by JS adding .is-mobile)
   ------------------------------------------------------------------- */
.htl.is-mobile .htl-desktop { display: none; }
.htl.is-mobile .htl-mobile { display: block; }

.htl-mobile {
	position: relative;
	padding: 8px 0 8px 34px;
}

/* Vertical line + fill */
.htl-line {
	position: absolute;
	left: 15px;
	top: 0;
	bottom: 0;
	width: 3px;
	background: rgba(255,255,255,0.30);
	border-radius: 3px;
	overflow: hidden;
}
.htl-line-fill {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 0;
	background: #F2C2D6;
	transition: height .15s linear;
}
/* When the timeline sits over a light page, give the track a visible base */
.htl-mobile { --htl-track-fallback: rgba(0,0,0,0.12); }

.htl-m-steps { display: flex; flex-direction: column; gap: 18px; }
.htl-m-step { position: relative; }

/* Dot on the line */
.htl-dot {
	position: absolute;
	left: -27px;
	top: 50%;
	margin-top: -7px;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: rgba(255,255,255,0.5);
	border: 2px solid rgba(255,255,255,0.7);
	transition: background .3s ease, border-color .3s ease, transform .3s ease;
	z-index: 2;
}
.htl-m-step.is-active .htl-dot { background: #F2C2D6; border-color: #F2C2D6; transform: scale(1.25); }

/* Card */
.htl-m-card {
	position: relative;
	border-radius: 16px;
	overflow: hidden;
	background-size: cover;
	background-position: center;
	min-height: 200px;
	display: flex;
	align-items: flex-end;
}
.htl-m-card .htl-overlay { background: rgba(10,40,50,0.38); }
.htl-m-content {
	position: relative;
	z-index: 2;
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.htl-m-content .htl-time { font-size: 22px; }
.htl-m-content .htl-desc { opacity: 1; transform: none; margin-top: 10px; }

/* Slight dim for not-yet-reached steps */
.htl-m-step { opacity: .55; transition: opacity .4s ease; }
.htl-m-step.is-active,
.htl-m-step.is-passed { opacity: 1; }


/* 2026-08-06 — stop the mobile track at the final timeline dot */
@media (max-width: 768px) {
	.htl-line { bottom: 108px; }
}