/* =========================================================
	   Rankings and Awards
	   ========================================================= */

.rankings-awards {
	--rankings-background: #FFFFFF;

	box-sizing: border-box;

	width: 100%;

	padding: clamp(2rem, 5vw, 4rem) 1rem;

	background-color: var(--rankings-background);
}

	.rankings-awards *,
	.rankings-awards *::before,
	.rankings-awards *::after {
		box-sizing: border-box;
	}

/* =========================================================
   Section Backgrounds
   ========================================================= */

/* White */

.rankings-awards--white {
	--rankings-background: #FFFFFF;
}

/* Light Purple */

.rankings-awards--light-purple {
	--rankings-background: #EDE3F7;
}

/* Light Gold */

.rankings-awards--light-gold {
	--rankings-background: #FFFBEA;
}

	/* =========================================================
	   Inner container
	   ========================================================= */

	.rankings-awards__inner {
		width: min(100%, 75rem);
		margin-inline: auto;
	}


	/* =========================================================
	   Component header

	   Heading typography intentionally comes from sitewide
	   h2, h3, and h4 styles.
	   ========================================================= */

	.rankings-awards__header {
		max-width: 52rem;

		margin:
			0
			auto
			clamp(1.75rem, 4vw, 3rem);

		text-align: center;
	}

	.rankings-awards__description {
		margin: 0.75rem 0 0;

		color: #444444;

		font-size: 1.125rem;
		line-height: 1.6;
	}


	/* =========================================================
	   Desktop grid
	   ========================================================= */

	.rankings-awards__grid {
		display: grid;

		grid-template-columns:
			repeat(6, minmax(0, 1fr));

		gap: clamp(1rem, 2vw, 1.5rem);

		width: 100%;
		max-width: 72rem;

		margin: 0 auto;
		padding: 0;

		list-style: none;
	}

	.rankings-awards__item {
		grid-column: span 2;

		min-width: 0;

		margin: 0;
		padding: 0;

		list-style: none;
	}

	/* One card in final row */

	.rankings-awards__item:nth-child(3n + 1):last-child {
		grid-column: 3 / span 2;
	}

	/* Two cards in final row */

	.rankings-awards__item:nth-child(3n + 1):nth-last-child(2) {
		grid-column: 2 / span 2;
	}


	/* =========================================================
	   Card
	   ========================================================= */

	.rankings-awards__card {
		display: flex;
		position: relative;

		width: 100%;
		height: 100%;
		min-height: 18rem;

		overflow: hidden;

		flex-direction: column;
		align-items: center;
		justify-content: flex-start;

		padding: clamp(1.5rem, 4vw, 2.25rem);

		background-color: rgba(255, 255, 255, 0.96);

		border: 1px solid var(--rankings-border);

		box-shadow:
			0 0.4rem 1.25rem rgba(0, 0, 0, 0.08),
			inset 0 1px 0 rgba(255, 255, 255, 0.75);

		color: #444444;
		text-align: center;

		transition:
			transform 180ms ease,
			box-shadow 180ms ease,
			border-color 180ms ease;
	}

	.rankings-awards__card > * {
		position: relative;
		z-index: 1;
	}


	/* =========================================================
	   Animated card accent
	   ========================================================= */

	.rankings-awards__card::before {
		content: "";

		position: absolute;
		z-index: 0;

		top: 0;
		right: 0;
		left: 0;

		width: 100%;
		height: 0.4rem;

		background-color: #723AB6;

		transition:
			height 220ms ease,
			background-color 220ms ease;
	}

	.rankings-awards__card[data-badge-color="purple"]::before,
	.rankings-awards__card[data-badge-color="Purple"]::before {
		background-color: #723AB6;
	}

	.rankings-awards__card[data-badge-color="gold"]::before,
	.rankings-awards__card[data-badge-color="Gold"]::before {
		background-color: #FFD100;
	}

	.rankings-awards__card[data-badge-color="white"]::before,
	.rankings-awards__card[data-badge-color="White"]::before {
		background-color: #FFD100;
	}

	.rankings-awards__card[data-badge-color="none"]::before,
	.rankings-awards__card[data-badge-color="None"]::before {
		background-color: #723AB6;
	}


	/* =========================================================
	   Visual container
	   ========================================================= */

	.rankings-awards__visual {
		display: grid;
		position: relative;

		width: 10rem;
		height: 10rem;

		flex: 0 0 10rem;

		place-items: center;

		margin: 0 0 1.25rem;
		padding: 1rem;

		overflow: hidden;

		box-shadow:
			0 0.25rem 0.75rem rgba(0, 0, 0, 0.12),
			inset 0 1px 0 rgba(255, 255, 255, 0.35);

		transition:
			background-color 220ms ease,
			border-color 220ms ease,
			color 220ms ease,
			box-shadow 220ms ease;
	}

	.rankings-awards__visual--purple,
	.rankings-awards__visual--Purple {
		background-color: #723AB6;
		color: #FFD100;
	}

	.rankings-awards__visual--gold,
	.rankings-awards__visual--Gold {
		background-color: #FFD100;
		color: #723AB6;
	}

	.rankings-awards__visual--white,
	.rankings-awards__visual--White {
		background-color: #FFFFFF;

		border: 1px solid rgba(0, 0, 0, 0.16);

		color: #723AB6;
	}

	.rankings-awards__visual--none,
	.rankings-awards__visual--None {
		background-color: transparent;

		border: 0;

		box-shadow: none;

		color: #723AB6;
	}


	/* =========================================================
	   Graphics
	   ========================================================= */

	.rankings-awards__graphic {
		display: grid;

		width: 100%;
		height: 100%;

		place-items: center;
	}


	/* Text */

	.rankings-awards__graphic--text {
		color: inherit;

		font-size: clamp(2rem, 5vw, 3.5rem);
		font-weight: 900;
		letter-spacing: -0.045em;
		line-height: 0.95;

		text-align: center;

		transition: color 220ms ease;
	}

	.rankings-awards__graphic--text > span {
		max-width: 100%;

		overflow-wrap: break-word;
	}


	/* Font Awesome */

	.rankings-awards__graphic--icon {
		color: inherit;

		font-size: clamp(3rem, 6vw, 4.25rem);
		line-height: 1;

		transition: color 220ms ease;
	}

	.rankings-awards__graphic--icon > span {
		color: inherit;

		transition: color 220ms ease;
	}


	/* Image */

	.rankings-awards__graphic--image {
		display: flex;

		width: 100%;
		height: 100%;

		align-items: center;
		justify-content: center;
	}

	.rankings-awards__graphic--image img {
		display: block;

		width: auto;
		height: auto;

		max-width: 100%;
		max-height: 100%;

		margin: auto;

		object-fit: contain;
		object-position: center;
	}


	/* =========================================================
	   Freestanding image
	   ========================================================= */

	.rankings-awards__card[data-selected-graphic="Image"]
	.rankings-awards__visual--none,

	.rankings-awards__card[data-selected-graphic="image"]
	.rankings-awards__visual--none,

	.rankings-awards__card[data-selected-graphic="Image"]
	.rankings-awards__visual--None,

	.rankings-awards__card[data-selected-graphic="image"]
	.rankings-awards__visual--None {
		display: flex;

		width: min(100%, 16rem);
		height: 10rem;

		flex: 0 0 10rem;

		align-items: center;
		justify-content: center;

		margin: 0 0 1.25rem;
		padding: 0;

		overflow: visible;

		border: 0;

		background: transparent;

		box-shadow: none;
	}


	/* =========================================================
	   Source

	   Award heading styling is intentionally absent.
	   Sitewide h3, h4, and h5 rules control the title.
	   ========================================================= */

	.rankings-awards__source {
		margin: 0.75rem 0 0;

		color: #444444;

		font-size: 0.95rem;
		line-height: 1.45;

		text-align: center;

		transition: color 220ms ease;
	}

	.rankings-awards__source a,
	.rankings-awards__source a:link,
	.rankings-awards__source a:visited {
		color: #723AB6;

		font-size: 0.95rem;
		font-weight: 700;

		text-decoration: none;

		transition: color 220ms ease;
	}

	.rankings-awards__source a:hover {
		color: #723AB6;

		text-decoration: underline;
		text-decoration-thickness: 0.1em;
		text-underline-offset: 0.18em;
	}

	.rankings-awards__source a:focus-visible {
		color: #723AB6;

		outline: 0.2rem solid #723AB6;
		outline-offset: 0.2rem;
	}


	/* =========================================================
	   Hover themes

	   Heading colors are overridden only during hover because
	   contrast changes when the card background changes.
	   Normal heading appearance remains entirely sitewide.
	   ========================================================= */

	@media (hover: hover) {

		.rankings-awards__card:hover {
			transform: translateY(-0.2rem);

			box-shadow:
				0 0.75rem 1.5rem rgba(0, 0, 0, 0.14),
				inset 0 1px 0 rgba(255, 255, 255, 0.5);
		}

		.rankings-awards__card:hover::before {
			height: 100%;
		}


		/* -----------------------------------------------------
		   Purple

		   Purple background.
		   Badge becomes gold.
		   Heading/source becomes white.
		   ----------------------------------------------------- */

		.rankings-awards__card[data-badge-color="purple"]:hover::before,
		.rankings-awards__card[data-badge-color="Purple"]:hover::before {
			background-color: #723AB6;
		}

		.rankings-awards__card[data-badge-color="purple"]:hover
		.rankings-awards__visual--purple,

		.rankings-awards__card[data-badge-color="Purple"]:hover
		.rankings-awards__visual--Purple {
			background-color: #FFD100;
			border-color: #FFD100;

			color: #723AB6;
		}

		.rankings-awards__card[data-badge-color="purple"]:hover
		.rankings-awards__title,

		.rankings-awards__card[data-badge-color="Purple"]:hover
		.rankings-awards__title,

		.rankings-awards__card[data-badge-color="purple"]:hover
		.rankings-awards__source,

		.rankings-awards__card[data-badge-color="Purple"]:hover
		.rankings-awards__source,

		.rankings-awards__card[data-badge-color="purple"]:hover
		.rankings-awards__source a,

		.rankings-awards__card[data-badge-color="Purple"]:hover
		.rankings-awards__source a {
			color: #FFFFFF;
		}


		/* -----------------------------------------------------
		   Gold

		   Gold background.
		   Badge becomes purple.
		   Sitewide heading color is overridden to dark gray
		   for contrast consistency.
		   ----------------------------------------------------- */

		.rankings-awards__card[data-badge-color="gold"]:hover::before,
		.rankings-awards__card[data-badge-color="Gold"]:hover::before {
			background-color: #FFD100;
		}

		.rankings-awards__card[data-badge-color="gold"]:hover
		.rankings-awards__visual--gold,

		.rankings-awards__card[data-badge-color="Gold"]:hover
		.rankings-awards__visual--Gold {
			background-color: #723AB6;
			border-color: #723AB6;

			color: #FFD100;
		}

		.rankings-awards__card[data-badge-color="gold"]:hover
		.rankings-awards__title,

		.rankings-awards__card[data-badge-color="Gold"]:hover
		.rankings-awards__title,

		.rankings-awards__card[data-badge-color="gold"]:hover
		.rankings-awards__source,

		.rankings-awards__card[data-badge-color="Gold"]:hover
		.rankings-awards__source {
			color: #444444;
		}

		.rankings-awards__card[data-badge-color="gold"]:hover
		.rankings-awards__source a,

		.rankings-awards__card[data-badge-color="Gold"]:hover
		.rankings-awards__source a {
			color: #723AB6;
		}


		/* -----------------------------------------------------
		   White

		   Gold background.
		   White visual remains white.
		   ----------------------------------------------------- */

		.rankings-awards__card[data-badge-color="white"]:hover::before,
		.rankings-awards__card[data-badge-color="White"]:hover::before {
			background-color: #FFD100;
		}

		.rankings-awards__card[data-badge-color="white"]:hover
		.rankings-awards__visual--white,

		.rankings-awards__card[data-badge-color="White"]:hover
		.rankings-awards__visual--White {
			background-color: #FFFFFF;

			border-color: rgba(0, 0, 0, 0.16);

			color: #723AB6;
		}

		.rankings-awards__card[data-badge-color="white"]:hover
		.rankings-awards__title,

		.rankings-awards__card[data-badge-color="White"]:hover
		.rankings-awards__title,

		.rankings-awards__card[data-badge-color="white"]:hover
		.rankings-awards__source,

		.rankings-awards__card[data-badge-color="White"]:hover
		.rankings-awards__source {
			color: #444444;
		}

		.rankings-awards__card[data-badge-color="white"]:hover
		.rankings-awards__source a,

		.rankings-awards__card[data-badge-color="White"]:hover
		.rankings-awards__source a {
			color: #723AB6;
		}


		/* -----------------------------------------------------
		   None

		   Purple background.
		   Graphic changes to gold.
		   Heading/source becomes white.
		   ----------------------------------------------------- */

		.rankings-awards__card[data-badge-color="none"]:hover::before,
		.rankings-awards__card[data-badge-color="None"]:hover::before {
			background-color: #723AB6;
		}

		.rankings-awards__card[data-badge-color="none"]:hover
		.rankings-awards__visual--none,

		.rankings-awards__card[data-badge-color="None"]:hover
		.rankings-awards__visual--None,

		.rankings-awards__card[data-badge-color="none"]:hover
		.rankings-awards__graphic--text,

		.rankings-awards__card[data-badge-color="None"]:hover
		.rankings-awards__graphic--text,

		.rankings-awards__card[data-badge-color="none"]:hover
		.rankings-awards__graphic--icon,

		.rankings-awards__card[data-badge-color="None"]:hover
		.rankings-awards__graphic--icon,

		.rankings-awards__card[data-badge-color="none"]:hover
		.rankings-awards__graphic--icon > span,

		.rankings-awards__card[data-badge-color="None"]:hover
		.rankings-awards__graphic--icon > span {
			color: #FFD100;
		}

		.rankings-awards__card[data-badge-color="none"]:hover
		.rankings-awards__title,

		.rankings-awards__card[data-badge-color="None"]:hover
		.rankings-awards__title,

		.rankings-awards__card[data-badge-color="none"]:hover
		.rankings-awards__source,

		.rankings-awards__card[data-badge-color="None"]:hover
		.rankings-awards__source,

		.rankings-awards__card[data-badge-color="none"]:hover
		.rankings-awards__source a,

		.rankings-awards__card[data-badge-color="None"]:hover
		.rankings-awards__source a {
			color: #FFFFFF;
		}

	}


	/* =========================================================
	   Controls
	   ========================================================= */

	.rankings-awards__controls {
		display: none;
	}

	.rankings-awards__controls[hidden="hidden"] {
		display: none;
	}


	/* =========================================================
	   Visually hidden
	   ========================================================= */

	.rankings-awards .visually-hidden {
		position: absolute !important;

		width: 1px !important;
		height: 1px !important;

		padding: 0 !important;
		margin: -1px !important;

		overflow: hidden !important;

		clip: rect(0, 0, 0, 0) !important;
		clip-path: inset(50%) !important;

		white-space: nowrap !important;

		border: 0 !important;
	}


	/* =========================================================
	   Tablet
	   ========================================================= */

	@media (min-width: 48rem) and (max-width: 63.999rem) {

		.rankings-awards__grid {
			grid-template-columns:
				repeat(4, minmax(0, 1fr));
		}

		.rankings-awards__item {
			grid-column: span 2;
		}

		.rankings-awards__item:nth-child(2n + 1):last-child {
			grid-column: 2 / span 2;
		}

	}


	/* =========================================================
	   Mobile carousel
	   ========================================================= */

	@media (max-width: 47.999rem) {

		.rankings-awards {
			padding-inline: 1rem;
		}

		.rankings-awards__header {
			margin-inline: 0;
		}

		.rankings-awards__grid {
			display: flex;

			width: 100%;
			max-width: none;

			gap: 1rem;

			overflow-x: auto;
			overflow-y: hidden;

			margin: 0;
			padding: 0.5rem 0 1rem;

			scroll-behavior: smooth;
			scroll-snap-type: x mandatory;

			overscroll-behavior-x: contain;

			-webkit-overflow-scrolling: touch;

			scrollbar-width: none;
		}

		.rankings-awards__grid::-webkit-scrollbar {
			display: none;
		}

		.rankings-awards__item,
		.rankings-awards__item:nth-child(3n + 1):last-child,
		.rankings-awards__item:nth-child(3n + 1):nth-last-child(2),
		.rankings-awards__item:nth-child(2n + 1):last-child {
			grid-column: auto;

			display: block;

			width: 100%;
			min-width: 100%;

			flex: 0 0 100%;

			margin: 0;
			padding: 0;

			scroll-snap-align: start;
			scroll-snap-stop: always;
		}

		.rankings-awards__card {
			width: 100%;
			min-width: 0;
			min-height: 19rem;

			align-items: center;
			justify-content: center;

			margin: 0;

			text-align: center;
		}

		.rankings-awards__controls {
			display: flex;

			align-items: center;
			justify-content: center;

			gap: 0.75rem;

			margin: 0.75rem 0 0;
		}

		.rankings-awards__controls[hidden="hidden"] {
			display: none;
		}

		.rankings-awards__button {
			display: inline-grid;

			width: 2.25rem;
			height: 2.25rem;

			flex: 0 0 2.25rem;

			place-items: center;

			margin: 0;
			padding: 0;

			background-color: #FFD100;

			border: 0.125rem solid #FFD100;
			border-radius: 50%;

			box-shadow:
				0 0.15rem 0.4rem rgba(0, 0, 0, 0.12);

			color: #723AB6;

			cursor: pointer;

			font: inherit;
			font-size: 1.4rem;
			line-height: 1;
		}

		.rankings-awards__button:hover {
			background-color: #723AB6;
			border-color: #723AB6;

			color: #FFFFFF;
		}

		.rankings-awards__button:focus-visible {
			outline: 0.2rem solid #723AB6;
			outline-offset: 0.15rem;
		}

		.rankings-awards__button[disabled="disabled"] {
			cursor: not-allowed;
			opacity: 0.35;
		}

		.rankings-awards__visual {
			width: 8rem;
			height: 8rem;

			flex: 0 0 8rem;
		}

		.rankings-awards__card[data-selected-graphic="Image"]
		.rankings-awards__visual--none,

		.rankings-awards__card[data-selected-graphic="image"]
		.rankings-awards__visual--none,

		.rankings-awards__card[data-selected-graphic="Image"]
		.rankings-awards__visual--None,

		.rankings-awards__card[data-selected-graphic="image"]
		.rankings-awards__visual--None {
			width: min(100%, 16rem);
			height: 10rem;

			flex: 0 0 10rem;

			margin-bottom: 1.25rem;
			padding: 0;
		}

	}


	/* =========================================================
	   Reduced motion
	   ========================================================= */

	@media (prefers-reduced-motion: reduce) {

		.rankings-awards__card,
		.rankings-awards__card::before,
		.rankings-awards__visual,
		.rankings-awards__graphic--text,
		.rankings-awards__graphic--icon,
		.rankings-awards__graphic--icon > span,
		.rankings-awards__source,
		.rankings-awards__source a {
			transition: none;
		}

		.rankings-awards__card:hover {
			transform: none;
		}

		.rankings-awards__grid {
			scroll-behavior: auto;
		}

	}