/* ===================================
   Awards list: a timeline of awards by year. Script: script.mjs (the enhanced timeline below).
=================================== */

.section_all_awards .container {
	max-width: 1032px;
}
.section_all_awards .section_description {
	margin-bottom: 50px;
}

.award_list_wrap {
	margin-top: 80px;
}
.award_list_wrap .award_item {
	display: flex;
	gap: 50px;
}
.award_list_wrap .award_item .award_year {
	min-width: 180px;
	margin-top: -38px;
	letter-spacing: -5%;
	transition: color 0.3s var(--ease-out);
}
.award_list_wrap .award_item.active .award_year {
	color: var(--wp--preset--color--darkgreen) !important;
}
.award_list_wrap .award_info_outer {
	width: 100%;
	padding-bottom: 40px;
	position: relative;
	flex: 1;
	padding-left: 63px;
}

.award_list_wrap .award_info_outer::after {
	content: "";
	width: 3px;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	background: var(--wp--preset--color--xtralightgrey);
	transition: background 0.3s var(--ease-out);
}
.award_list_wrap .award_info_outer::before {
	content: "";
	width: 3px;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	background: var(--wp--preset--gradient--dark-green-gradient);
	transform: scaleY(0);
	transform-origin: top;
	transition: transform 0.9s var(--ease-out);
	z-index: 1;
}
.award_list_wrap .award_item.active .award_info_outer::before {
	transform: none;
}

.award_list_wrap .award_info_outer span.dot {
	width: 19px;
	height: 19px;
	border-radius: 50px;
	background: var(--wp--preset--color--xtralightgrey);
	position: absolute;
	left: -8px;
	top: -3px;
	border: 3px solid #fff;
	z-index: 1;
	transition: background 0.3s var(--ease-out);
}
.award_list_wrap .award_item.active .award_info_outer span.dot {
	background: var(--wp--preset--color--darkgreen) !important;
}
.award_list_wrap .award_info {
	border-radius: 20px;
	padding: 42px 47px;
	display: flex;
	flex-direction: column;
	gap: 25px;
	width: 100%;
	transition:
		background 0.3s var(--ease-out),
		color 0.3s var(--ease-out);
}

.award_list_wrap .award_item.active .award_info {
	background: var(--wp--preset--color--darkgreen) !important;
	color: var(--wp--preset--color--white) !important;
}

.award_list_wrap .award_info .award_detail .award_row {
	display: flex;
}
.award_list_wrap .award_info .award_detail .award_row.award_name {
	font-weight: bold;
}

.award_list_wrap .award_info .award_detail .award_row .label {
	width: 100px;
}
.award_list_wrap .award_info .award_detail .award_row .value {
	flex: 1;
}
@media only screen and (max-width: 980px) {
	.award_list_wrap .award_item .award_year {
		min-width: 127px;
	}
	.award_list_wrap .award_item {
		gap: 15px;
	}
	.award_list_wrap .award_info {
		padding: 30px;
	}
	.award_list_wrap .award_info_outer {
		padding-bottom: 30px;
		padding-left: 30px;
	}
}

@media only screen and (max-width: 768px) {
	.award_list_wrap .award_item {
		gap: 0;
		flex-direction: column;
		position: relative;
	}
	.award_list_wrap .award_item .award_year {
		position: absolute;
		left: 30px;
	}
	.award_list_wrap .award_info_outer {
		padding-bottom: 60px;
		padding-left: 30px;
		padding-top: 40px;
	}
}

/* ===================================
   Awards timeline, enhanced (blocks/awards-list/script.mjs)
=================================== */
/* the green line draws with scroll (--fill 0..1 per year); past years stay filled. It scales, so a
   scroll frame does no layout (QA 2026-10-28). */
.award_list_wrap.is-enhanced .award_info_outer::before,
.award_list_wrap.is-enhanced .award_item.active .award_info_outer::before {
	transform: scaleY(var(--fill, 0));
	transition: none;
}
/* dot: green once the line reaches it, with one soft pulse */
.award_list_wrap.is-enhanced .award_info_outer span.dot {
	transition:
		background-color 400ms var(--ease-out),
		transform 500ms var(--ease-out);
}
.award_list_wrap.is-enhanced .award_item:is(.is-current, .is-past) span.dot {
	background: var(--wp--preset--color--darkgreen) !important;
}
.award_list_wrap.is-enhanced .award_item.is-current span.dot::after {
	content: "";
	position: absolute;
	inset: -6px;
	border-radius: 50%;
	border: 2px solid var(--wp--preset--color--darkgreen);
	animation: exc-dot-pulse 1.6s var(--ease-out) 1 both;
}
@keyframes exc-dot-pulse {
	from {
		opacity: 0.8;
		transform: scale(0.6);
	}
	to {
		opacity: 0;
		transform: scale(1.8);
	}
}
/* years: upcoming grey, current green, past a calm dark tone */
.award_list_wrap.is-enhanced .award_item .award_year {
	transition: color 600ms var(--ease-out);
}
.award_list_wrap.is-enhanced .award_item.is-past .award_year {
	color: var(--wp--preset--color--darkblue) !important;
}
/* the card being read eases to green; others ease back */
.award_list_wrap.is-enhanced .award_info {
	/* background and text change together, so text is never the same colour as the card mid-way
	   (different timings flash when scrolling back and forth) */
	transition:
		background-color 450ms var(--ease-out),
		color 450ms var(--ease-out);
}
/* each award (Award / Category / Client) rises in as it scrolls into view, without blur: up to 55 rows
   play at once, and blur runs on the main thread (QA 2026-10-28). Awards entering together
   are queued (blocks/awards-list/script.mjs), and the three lines follow each other within an award */
.award_list_wrap.is-enhanced .award_item .award_row {
	opacity: 0;
	transform: translate3d(0, 14px, 0);
}
.award_list_wrap.is-enhanced .award_detail.is-in .award_row {
	opacity: 1;
	transform: none;
	transition:
		opacity 700ms var(--ease-out),
		transform 950ms var(--ease-out);
	transition-delay: calc(var(--r, 0) * 110ms);
}

/* Years write in letter by letter as their awards start (blocks/awards-list/script.mjs),
   same language as the highlighted words. */
.award_list_wrap.is-enhanced .award_item.has-yr .yr-ch {
	display: inline-block;
	opacity: 0;
	filter: blur(6px);
	transform: translate3d(0, 0.3em, 0);
}
.award_list_wrap.is-enhanced .award_item.yr-in .yr-ch {
	animation: yr-in 900ms var(--ease-out) both;
	animation-delay: calc(var(--i, 0) * 60ms);
}
@keyframes yr-in {
	to {
		opacity: 1;
		filter: none;
		transform: none;
	}
}