/* Accolade Aboutus Timeline Styles */

.accolade-aboutus-timeline {
	width: 100%;
	background-color: var(--atl-section-bg, #ffffff);
	padding-top: var(--atl-section-padding-top, 96px);
	padding-bottom: var(--atl-section-padding-bottom, 96px);
	position: relative;
}

.accolade-aboutus-timeline__container {
	width: 100%;
	max-width: var(--atl-content-width, 1340px);
	margin: 0 auto;
	padding-left: 15px;
	padding-right: 15px;
	position: relative;
}

/* Timeline Vertical Line */
.accolade-aboutus-timeline__line {
	position: absolute;
	left: 50%;
	top: 0;
	bottom: 0;
	width: var(--atl-line-w, 2px);
	background-color: var(--atl-line-color, #e0e0e0);
	transform: translateX(-50%);
	z-index: 1;
}

.accolade-aboutus-timeline__list {
	display: flex;
	flex-direction: column;
	gap: 60px;
	position: relative;
	z-index: 2;
}

/* Grid Layout for Timeline Rows */
.accolade-aboutus-timeline__row {
	display: grid;
	grid-template-columns: 1fr var(--atl-node-size, 50px) 1fr;
	gap: 40px;
	align-items: center;
	position: relative;
}

/* Force all columns in a row to sit on the same vertical grid row on desktop */
.accolade-aboutus-timeline__row .accolade-aboutus-timeline__year-side,
.accolade-aboutus-timeline__row .accolade-aboutus-timeline__node-side,
.accolade-aboutus-timeline__row .accolade-aboutus-timeline__copy-side {
	grid-row: 1;
}

.accolade-aboutus-timeline__node-side {
	grid-column: 2;
	justify-self: center;
	position: relative;
	z-index: 3;
}

.accolade-aboutus-timeline__node {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--atl-node-size, 50px);
	height: var(--atl-node-size, 50px);
	border-radius: 50%;
	background-color: var(--atl-node-bg, #1d82ea);
	color: var(--atl-node-color, #ffffff);
	font-size: var(--atl-node-icon-sz, 18px);
	box-shadow: 0 4px 10px rgba(29, 130, 234, 0.2);
}

.accolade-aboutus-timeline__node svg,
.accolade-aboutus-timeline__node i {
	width: 1em;
	height: 1em;
}

/* Year Card Styles */
.accolade-aboutus-timeline__year-box {
	display: inline-block;
	background-color: var(--atl-card-bg, #ffffff);
	color: var(--atl-card-color, #062250);
	font-family: "Inter", sans-serif;
	font-weight: 700;
	font-size: 1.15rem;
	padding: var(--atl-card-pad, 20px 30px);
	border-radius: 0;
	transition: all 0.3s ease;
}

/* Details Panel copy styles */
.accolade-aboutus-timeline__copy-side {
	display: flex;
	flex-direction: column;
	gap: 12px;
	max-width: 480px;
}

.accolade-aboutus-timeline__milestone-title {
	font-family: "Inter", sans-serif;
	font-weight: 700;
	font-size: 1.35rem;
	color: var(--atl-title-color, #062250);
	margin: 0;
	line-height: 1.2;
}

.accolade-aboutus-timeline__milestone-desc {
	font-family: "DM Sans", sans-serif;
	font-size: 0.95rem;
	line-height: 1.6;
	color: var(--atl-desc-color, #848484);
	margin: 0;
}

/* Left-aligned Row styles (Odd index items) */
.accolade-aboutus-timeline__row.is-left .accolade-aboutus-timeline__year-side {
	grid-column: 1;
	justify-self: end;
	text-align: right;
}

.accolade-aboutus-timeline__row.is-left .accolade-aboutus-timeline__copy-side {
	grid-column: 3;
	justify-self: start;
	text-align: left;
}

/* Right-aligned Row styles (Even index items) */
.accolade-aboutus-timeline__row.is-right .accolade-aboutus-timeline__copy-side {
	grid-column: 1;
	justify-self: end;
	text-align: right;
}

.accolade-aboutus-timeline__row.is-right .accolade-aboutus-timeline__year-side {
	grid-column: 3;
	justify-self: start;
	text-align: left;
}

/* Responsive styles */
@media (max-width: 1024px) {
	.accolade-aboutus-timeline {
		padding-top: var(--atl-section-padding-top-tablet, 80px);
		padding-bottom: var(--atl-section-padding-bottom-tablet, 80px);
	}
}

@media (max-width: 767px) {
	.accolade-aboutus-timeline {
		padding-top: var(--atl-section-padding-top-mobile, 60px);
		padding-bottom: var(--atl-section-padding-bottom-mobile, 60px);
	}
	
	.accolade-aboutus-timeline__container {
		padding-left: 10px;
		padding-right: 10px;
	}

	/* Hide the vertical line on mobile */
	.accolade-aboutus-timeline__line {
		display: none;
	}

	.accolade-aboutus-timeline__row {
		display: grid;
		grid-template-rows: auto auto;
		gap: 15px;
		align-items: start;
	}

	/* Reset grid-row from desktop and force mobile positions using specific selectors */
	.accolade-aboutus-timeline__row.is-left .accolade-aboutus-timeline__year-side,
	.accolade-aboutus-timeline__row.is-left .accolade-aboutus-timeline__node-side,
	.accolade-aboutus-timeline__row.is-left .accolade-aboutus-timeline__copy-side,
	.accolade-aboutus-timeline__row.is-right .accolade-aboutus-timeline__year-side,
	.accolade-aboutus-timeline__row.is-right .accolade-aboutus-timeline__node-side,
	.accolade-aboutus-timeline__row.is-right .accolade-aboutus-timeline__copy-side {
		grid-row: auto;
	}

	/* Year box is centered at row 1 spanning all columns on mobile */
	.accolade-aboutus-timeline__row.is-left .accolade-aboutus-timeline__year-side,
	.accolade-aboutus-timeline__row.is-right .accolade-aboutus-timeline__year-side {
		grid-row: 1;
		grid-column: 1 / span 2;
		justify-self: center !important;
		text-align: center !important;
		margin-bottom: 5px;
	}

	/* Left-aligned Row styles (Odd index items) */
	.accolade-aboutus-timeline__row.is-left {
		grid-template-columns: var(--atl-node-size, 50px) 1fr;
	}

	.accolade-aboutus-timeline__row.is-left .accolade-aboutus-timeline__node-side {
		grid-row: 2;
		grid-column: 1;
		justify-self: center;
		align-self: start;
	}

	.accolade-aboutus-timeline__row.is-left .accolade-aboutus-timeline__copy-side {
		grid-row: 2;
		grid-column: 2;
		justify-self: start;
		text-align: left;
		max-width: 100%;
	}

	/* Right-aligned Row styles (Even index items) */
	.accolade-aboutus-timeline__row.is-right {
		grid-template-columns: 1fr var(--atl-node-size, 50px);
	}

	.accolade-aboutus-timeline__row.is-right .accolade-aboutus-timeline__node-side {
		grid-row: 2;
		grid-column: 2;
		justify-self: center;
		align-self: start;
	}

	.accolade-aboutus-timeline__row.is-right .accolade-aboutus-timeline__copy-side {
		grid-row: 2;
		grid-column: 1;
		justify-self: end;
		text-align: right;
		max-width: 100%;
	}
}