/*
 * Abbey The Food Scientist - Brand logos shared section.
 */

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

.brand-logos__inner {
	max-width: var(--wp--style--global--wide-size, 1440px);
	margin: 0 auto;
	text-align: center;
}

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

.brand-logos__subheading {
	max-width: 62ch;
	margin: 0 auto var(--wp--preset--spacing--60);
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.65;
}

.brand-logos__grid {
	list-style: none;
	margin: 0 0 var(--wp--preset--spacing--60);
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--wp--preset--spacing--40);
}

.brand-logos__card {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 300px;
	padding: var(--wp--preset--spacing--40);
	background-color: var(--wp--preset--color--brand-mauve);
	border-radius: 16px;
}

.brand-logos__logo {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: var(--wp--preset--spacing--30);
}

.brand-logos__logo img {
	display: block;
	/* auto, not the width/height attributes, so max-* scales it in proportion. */
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.brand-logos__placeholder {
	color: var(--wp--preset--color--base);
	font-size: var(--wp--preset--font-size--small);
	opacity: 0.85;
}

.brand-logos__caption {
	margin: 0;
	color: var(--wp--preset--color--base);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
}

.brand-logos__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	white-space: nowrap;
	border-radius: 999px;
	font-family: var(--wp--preset--font-family--eyebrow);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.02em;
	padding: 0.9rem 1.6rem;
	background-color: var(--wp--preset--color--brand-teal);
	color: var(--wp--preset--color--brand-purple);
}

.brand-logos__btn:hover,
.brand-logos__btn:focus-visible {
	background-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

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

	.brand-logos__card {
		width: 100%;
		max-width: 320px;
	}
}