/*
 * Awards. Figma 1932:42540 desktop: header (header/XL + body/XS grey), 24 gap,
 * 4 cards 287x373 24 apart (white, border light, r20, padding 20/32, gap 24, square
 * badge, year header/S, award subtitle/M). Mobile 1699:30017: cards 164x302, p16,
 * gap 16, 8 apart; nav row "1 / 4" subtitle/M, 187px line, 40px square arrows r8.
 */

.awards__inner { display: flex; flex-direction: column; gap: 24px; }
.awards__head .section-head__text { font: var(--f-body-xs); }

.awards__slider { display: flex; flex-direction: column; gap: 24px; }

.awards__track { gap: 24px; }

.award {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 24px;
	width: calc((100% - 72px) / 4);
	min-width: 230px;
	padding: 19px 31px;                 /* 20/32 minus the border */
	border: 1px solid var(--c-border-light);
	border-radius: var(--r-l);
	background: var(--c-bg-white);
}

.award__badge { position: relative; aspect-ratio: 1; }
.award__badge img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }   /* badges are trimmed files, so they touch the box like Figma's cropped fills */

.award__text { display: flex; flex-direction: column; gap: 6px; color: var(--c-text-dark); }
.award__year { font: var(--f-header-s); }
.award__title { font: var(--f-subtitle-m); }

/* Nav: hidden while all four fit. */
.awards__nav { display: none; align-items: center; justify-content: space-between; gap: 19px; }

.awards--many .awards__nav { display: flex; }

.awards__counter { font: var(--f-subtitle-m); color: var(--c-text-dark); white-space: nowrap; }

.awards__progress {
	position: relative;
	flex: 1;
	max-width: 187px;
	height: 1px;
	background: var(--c-border-light);
}

.awards__progress::after {
	content: "";
	position: absolute;
	inset: -1px auto -1px 0;
	width: calc(var(--progress, 0) * 100%);
	border-radius: 2px;
	background: var(--c-dark-purple);
	transition: width .2s ease;
}

.awards__arrows { display: flex; gap: 16px; }

.awards__arrow {
	--icon-size: 16px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 1px solid var(--c-border-dark);
	border-radius: var(--r-xs);
	background: var(--c-bg-white);
	color: var(--c-text-dark);
	transition: background-color .15s ease, color .15s ease;
}

.awards__arrow:hover { background: var(--c-border-dark); color: var(--c-text-white); }

.awards__arrow[aria-disabled="true"] {
	border-color: var(--c-border-light);
	color: var(--c-border-light);
	pointer-events: none;
}

@media (max-width: 1023px) {
	.awards__nav { display: flex; }
	.awards__track { margin-right: calc(-1 * var(--gutter)); padding-right: var(--gutter); }
}

@media (max-width: 767px) {
	.awards__track { gap: 8px; }

	.award {
		width: 164px;
		min-width: 0;
		min-height: 302px;
		gap: 16px;
		padding: 15px;
	}
}