/*
 * SECTION:  Product page: quick facts band
 * File:     assets/css/pages/product/sol-product-facts.css
 * Used by:  template-parts/product/sol-product-facts.php
 * To remove: delete this file and its line in inc/assets.php (handle "sol-product-facts").
 */

/* Grid lines are a 1px gap over the border color, so they stay right
   at every column count. */
.sol-facts {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1px;
	margin-top: clamp(28px, 5vw, 56px);
	overflow: hidden;
	background: var(--sol-line);
	border: 1px solid var(--sol-line);
	border-radius: var(--sol-radius-md);
}

.sol-facts__item {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	padding: 18px 20px;
	background: var(--sol-surface);
}

.sol-facts__item .sol-icon {
	margin-bottom: 6px;
}

.sol-facts__item strong {
	overflow-wrap: anywhere;
	font-size: 1rem;
}

.sol-facts__item span {
	color: var(--sol-muted);
	font-size: 0.75rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* An odd last item on two columns takes the full row. */
.sol-facts__item:last-child:nth-child(odd) {
	grid-column: 1 / -1;
}

@media (min-width: 860px) {
	.sol-facts {
		grid-template-columns: repeat(var(--sol-facts, 5), minmax(0, 1fr));
	}

	.sol-facts__item:last-child:nth-child(odd) {
		grid-column: auto;
	}
}

/* The values must follow the theme colors in light and dark mode. */
.sol-facts__item.sol-facts__item,
.sol-facts__item.sol-facts__item strong {
	color: var(--sol-text);
}