/**
 * Related Products block.
 *
 * Matches the related products band on paybacknutrition.com: a light gray
 * band with up to four white cards (two per row on mobile), each with a bar
 * along the top in its own product's line color (--pl-base-color from the
 * card's pl-color--{slug} class). 1rem = 10px.
 */

.related-products {
	--related-products--bar-width: 1rem;
	/* Card size and spacing measured from paybacknutrition.com: a 250px
	   card (10px bar + 296px white box), 25px above the image, 27px between
	   image and title, the link ~39px off the bottom. */
	--related-products--card-width: 25rem;
	--related-products--card-height: 30.6rem;
	--related-products--card-padding-top: 2.5rem;
	--related-products--card-padding-bottom: 3.9rem;
	--related-products--image-gap: 2.7rem;
	--related-products--image-height: 6.31rem;
	--related-products--subtitle-gap: 1.6rem;

	padding-block: var(--wp--preset--spacing--80);
	background-color: var(--wp--preset--color--off-white);
}

.related-products .related-products__inner {
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--50);
}

.related-products .related-products__heading {
	color: var(--wp--custom--color--black);
	font-family: var(--wp--preset--font-family--inter-sans);
	font-weight: 700;
	margin: 0 0 var(--wp--preset--spacing--70);
	text-align: center;
}

.related-products .related-products__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--50);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media screen and (min-width: 768px) {
	.related-products .related-products__list {
		grid-template-columns: repeat(auto-fit, minmax(0, var(--related-products--card-width)));
		gap: var(--wp--preset--spacing--60);
		justify-content: center;
	}

	/* At least the reference size side by side, growing taller for longer
	   titles or subtitles; stacked two per row on mobile, the cards size to
	   the column and their content. */
	.related-products .related-products__card {
		min-height: var(--related-products--card-height);
	}
}

.related-products .related-products__card {
	display: flex;
	flex-direction: column;
	align-items: center;
	box-sizing: border-box;
	padding: var(--related-products--card-padding-top) var(--wp--preset--spacing--40) var(--related-products--card-padding-bottom);
	border-top: var(--related-products--bar-width) solid var(--pl-base-color, var(--wp--custom--color--primary));
	background-color: var(--wp--preset--color--white);
	box-shadow: var(--wp--custom--shadow--card);
	text-align: center;
}

.related-products .related-products__image-link {
	display: block;
	margin-block-end: var(--related-products--image-gap);
}

.related-products .related-products__image {
	display: block;
	width: auto;
	max-width: 100%;
	height: var(--related-products--image-height);
	object-fit: contain;
}

.related-products .related-products__title {
	margin: 0 0 var(--wp--preset--spacing--30);
	color: var(--wp--preset--color--black);
	font-size: var(--wp--preset--font-size--x-large);
	text-transform: none;
}

.related-products .related-products__subtitle {
	margin: auto 0 var(--related-products--subtitle-gap);
	color: var(--wp--custom--color--text);
	font-size: var(--wp--preset--font-size--medium);
}

/* Pushed to the bottom so the links line up across cards. */
.related-products .related-products__link-wrap {
	margin-block-start: 0;
}

/* Blue Link button with its arrow, as on the Product Line Buckets cards
   (the theme's Link button is brown). */
.related-products .wp-block-button.is-style-link .related-products__link {
	color: var(--wp--custom--color--link-blue);
}

.related-products .wp-block-button.is-style-link .related-products__link:hover {
	color: var(--wp--custom--color--link-blue-hover);
}

.related-products .wp-block-button.is-style-link:not(.has-chs-icon) .related-products__link:not(:has(img))::after {
	border-color: var(--wp--custom--color--link-blue);
}

.related-products .wp-block-button.is-style-link:not(.has-chs-icon) .related-products__link:hover:not(:has(img))::after {
	border-color: var(--wp--custom--color--link-blue-hover);
}

.related-products--placeholder {
	padding: var(--wp--preset--spacing--40);
	border: 1px dashed currentColor;
}