/**
 * Cards Circle
 *
 * Layout and spacing only — the .card.circle component itself lives in
 * style.css alongside the other card variants.
 */

.module.cards-circle:has(.shape-top.shape-outside) .container {
	padding-top: var(--text-spacing-large);
}

.module.cards-circle:has(.shape-bottom.shape-outside) .container {
	padding-bottom: var(--text-spacing-large);
}

.module.cards-circle header {
	margin-bottom: var(--module-spacing-small);
	text-align: center;
}

.module.cards-circle header .eyebrow {
	display: block;
	margin-bottom: var(--text-spacing-xsmall);
}

/** Card grid **/

.module.cards-circle ul.grid {
	align-items: flex-start;
	gap: var(--text-spacing-xlarge) var(--text-spacing-medium);
	justify-items: center;
}

.module.cards-circle.columns-2 ul.grid {
	grid-template-columns: repeat(2, 1fr);
}

.module.cards-circle.columns-3 ul.grid {
	grid-template-columns: repeat(3, 1fr);
}

.module.cards-circle.columns-4 ul.grid {
	grid-template-columns: repeat(4, 1fr);
}

.module.cards-circle ul.grid li {
	max-width: 360px;
	width: 100%;
}

.module.cards-circle ul.grid li > .card {
	height: 100%;
}

/*
 * ====================================================================== *
 * MQ <=1200px — Laptop
 * ====================================================================== *
 */

@media only screen and (max-width: calc(1200rem / 16)) {

	/* Four across gets cramped before tablet — drop to three first so the
	   circles keep their size instead of shrinking twice. */

	.module.cards-circle.columns-4 ul.grid {
		grid-template-columns: repeat(3, 1fr);
	}

}

/*
 * ====================================================================== *
 * MQ <=950px — Tablet
 * ====================================================================== *
 */

@media only screen and (max-width: calc(950rem / 16)) {

	.module.cards-circle.columns-3 ul.grid,
	.module.cards-circle.columns-4 ul.grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.module.cards-circle .card.circle .media,
	.module.cards-circle .card.circle .icon {
		width: 150px;
	}

}

/*
 * ====================================================================== *
 * MQ <=650px — Mobile
 * ====================================================================== *
 */

@media only screen and (max-width: calc(650rem / 16)) {

	.module.cards-circle header {
		margin-bottom: var(--text-spacing-large);
	}

	.module.cards-circle.columns-2 ul.grid,
	.module.cards-circle.columns-3 ul.grid,
	.module.cards-circle.columns-4 ul.grid {
		grid-template-columns: 1fr;
	}

	.module.cards-circle ul.grid {
		gap: var(--text-spacing-large);
	}

	.module.cards-circle ul.grid li {
		max-width: none;
	}

	.module.cards-circle .card.circle .media,
	.module.cards-circle .card.circle .icon {
		width: 160px;
	}

}