/*
 * The product card and the grid it sits in.
 *
 * One card for every place a product is listed: the shop page, the category pages, and the three
 * services on the Home page (montessori_bees_product_cards()). Markup is woocommerce/content-product.php.
 *
 * Loaded by shop.css's pages and by the front page, after brand.css (the colours, fonts and buttons).
 * The card sets its own type and its selectors carry their own scope (`.mb-product-card`, next to
 * `.entry-content`), so the front page's global heading, paragraph and list rules do not restyle it.
 */

/* The grid ---------------------------------- */
/*
 * One rule for every group: three service cards fill a row, four card sets fill a row, and a fifth
 * product wraps by itself. `auto-fit` keeps three cards wide instead of leaving an empty fourth track.
 */

.mb-products,
:is(.entry-content, #mb) ul.products {
	display: grid;
	gap: 28px;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	list-style: none;
	margin: 26px 0 0;
	max-width: none;
	padding: 0;
	width: 100%;
}


/*
 * A group with a single product: laid out sideways, the photo on the left and the words on the right,
 * so one card does not stretch into a page-wide photo. With two or more, the cards share the row as usual.
 */
@media (min-width: 782px) {
	.mb-products:has(> .mb-product-card:only-child) .mb-product-card {
		align-content: center;
		column-gap: 32px;
		display: grid;
		grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
		padding: 10px 28px 22px 10px;
	}

	.mb-products:has(> .mb-product-card:only-child) .mb-product-card > * {
		grid-column: 2;
	}

	.mb-products:has(> .mb-product-card:only-child) .mb-product-card__media {
		align-self: start;
		grid-column: 1;
		grid-row: 1 / span 10;
	}

	.mb-products:has(> .mb-product-card:only-child) .mb-product-card__title,
	.mb-products:has(> .mb-product-card:only-child) .mb-product-card__blurb,
	.mb-products:has(> .mb-product-card:only-child) .mb-product-card__chips,
	.mb-products:has(> .mb-product-card:only-child) .mb-product-card__price,
	.mb-products:has(> .mb-product-card:only-child) .mb-product-card__action {
		margin-left: 0;
		margin-right: 0;
	}

	.mb-products:has(> .mb-product-card:only-child) .mb-product-card__action {
		max-width: 320px;
	}
}


/* The card ---------------------------------- */

.mb-product-card {
	background: var(--mb-white);
	border: 1px solid var(--mb-primary);
	border-radius: var(--mb-radius);
	box-sizing: border-box;
	color: var(--mb-charcoal);
	display: flex;
	flex-direction: column;
	font-family: var(--mb-font-body);
	font-size: 16px;
	letter-spacing: -0.01em;
	line-height: 1.5;
	list-style: none;
	margin: 0;
	padding: 10px 10px 22px;
	transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.mb-product-card:hover,
.mb-product-card:focus-within {
	border-color: var(--mb-deep);
	box-shadow: 0 4px 10px rgb(62 65 66 / 10%);
	transform: translateY(-2px);
}

.mb-product-card__media {
	aspect-ratio: 3 / 2;
	border-radius: calc(var(--mb-radius) / 2);
	display: block;
	overflow: hidden;
	position: relative;
}

.mb-product-card__media img {
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

/* The second photo, laid over the first and faded in while the card is pointed at (content-product.php). */
.mb-product-card__media .mb-product-card__hover {
	inset: 0;
	opacity: 0;
	position: absolute;
	transition: opacity 0.3s ease;
}

.mb-product-card:hover .mb-product-card__hover,
.mb-product-card:focus-within .mb-product-card__hover {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.mb-product-card__media .mb-product-card__hover {
		transition: none;
	}
}

:is(.entry-content, #mb, .mb-product-card) .mb-product-card__title {
	color: var(--mb-deep);
	font-family: var(--mb-font-heading);
	font-size: clamp(20px, 17.4px + 0.667vw, 26px);
	font-weight: 400;
	letter-spacing: -0.04em;
	line-height: 1.05;
	margin: 16px 12px 0;
	text-wrap: wrap;
}

.mb-product-card__title a {
	color: inherit;
	text-decoration: none;
}

.mb-product-card__title a:hover {
	text-decoration: underline;
}

:is(.entry-content, #mb, .mb-product-card) .mb-product-card__blurb {
	font-size: 15px;
	line-height: 1.45;
	margin: 8px 12px 0;
}

:is(.entry-content, #mb, .mb-product-card) .mb-product-card__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 14px 12px 0;
	padding: 0;
}

:is(.entry-content, #mb, .mb-product-card) .mb-product-card__chip {
	background: var(--mb-beige);
	border-radius: 4px;
	font-size: 13px;
	line-height: 1.2;
	margin: 0;
	padding: 5px 10px;
}

:is(.entry-content, #mb, .mb-product-card) .mb-product-card__price {
	color: var(--mb-deep);
	font-family: var(--mb-font-heading);
	font-size: 28px;
	letter-spacing: -0.03em;
	line-height: 1.1;
	margin: auto 12px 0; /* `auto` on top: prices and buttons line up across a row. */
	padding-top: 18px;
}

.mb-product-card__price .woocommerce-Price-amount {
	font-family: var(--mb-font-heading);
}

.mb-product-card__price-on-request {
	color: var(--mb-charcoal);
	font-size: 22px;
}

.mb-product-card__action {
	margin: 14px 12px 0;
}