/*
 * "Product Categories I Work In" - shared across Home and (eventually)
 * Product Development.
 */

.product-categories {
	background-color: var(--wp--preset--color--brand-cream);
	padding: var(--wp--preset--spacing--70) var(--wp--preset--spacing--40);
}

.product-categories__inner {
	max-width: var(--wp--style--global--wide-size, 1440px);
	margin: 0 auto;
}

.product-categories__heading {
	margin: 0 0 var(--wp--preset--spacing--60);
	font-family: var(--wp--preset--font-family--heading);
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--brand-purple);
	font-size: var(--wp--preset--font-size--x-large);
}

.product-categories__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	gap: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
}

.product-categories__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 140px;
	text-align: center;
}

.product-categories__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 6.5rem;
	height: 6.5rem;
	margin-bottom: var(--wp--preset--spacing--30);
	border-radius: 50%;
}

.product-categories__icon img {
	display: block;
	width: 60px;
	height: 60px;
	object-fit: contain;
}

.product-categories__item--1 .product-categories__icon {
	background-color: var(--wp--preset--color--brand-purple);
}

.product-categories__item--2 .product-categories__icon {
	background-color: var(--wp--preset--color--category-coral);
}

.product-categories__item--3 .product-categories__icon {
	background-color: var(--wp--preset--color--category-teal);
}

.product-categories__item--4 .product-categories__icon {
	background-color: var(--wp--preset--color--category-gold);
}

.product-categories__item--5 .product-categories__icon {
	background-color: var(--wp--preset--color--category-green);
}

.product-categories__item--6 .product-categories__icon {
	background-color: var(--wp--preset--color--brand-purple);
}

.product-categories__label {
	font-family: var(--wp--preset--font-family--eyebrow);
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.4;
}

@media (max-width: 600px) {
	.product-categories {
		padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--30);
	}

	.product-categories__grid {
		gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
	}

	.product-categories__item {
		width: 100px;
	}

	.product-categories__icon {
		width: 5rem;
		height: 5rem;
	}

	.product-categories__icon img {
		width: 32px;
		height: 32px;
	}
}