/*
 * "Recipe Card" block style — applied to a `workbench/shop-collection`
 * block via `is-style-recipe-card`. Turns the standard product /
 * category cards into menu-card / recipe-card stock with cream paper,
 * subtle texture, irregular edges, and a hand-drawn dotted border.
 *
 * Targets both `.wb-category-card` (categories mode) and
 * `.wb-product-card` (products mode) so the style works regardless of
 * what content-type the author picks.
 */

.wp-block-workbench-shop-collection.is-style-recipe-card .wb-category-card,
.wp-block-workbench-shop-collection.is-style-recipe-card .wb-product-card {
	background: #fdfaf2; /* clean off-white card stock */
	border-radius: 3px 5px 4px 3px;
	padding: 1.25rem 1.25rem 1.5rem;
	box-shadow:
		0 10px 22px rgba(40, 30, 20, 0.22),
		0 3px 6px rgba(40, 30, 20, 0.14),
		inset 0 0 0 1px rgba(120, 100, 80, 0.06);
	transition:
		transform 0.25s ease,
		box-shadow 0.25s ease;
	overflow: hidden;
	position: relative;
	/* Subtly irregular edges so the cards feel hand-cut, not laser. */
	clip-path: polygon(
		0.4% 0.3%,
		25% 0.5%,
		50% 0.2%,
		75% 0.4%,
		99.5% 0.3%,
		99.7% 33%,
		99.5% 66%,
		99.6% 99.6%,
		75% 99.5%,
		50% 99.7%,
		25% 99.4%,
		0.4% 99.5%,
		0.3% 66%,
		0.4% 33%
	);
}

.wp-block-workbench-shop-collection.is-style-recipe-card
	.wb-category-card:hover,
.wp-block-workbench-shop-collection.is-style-recipe-card
	.wb-product-card:hover {
	transform: translateY(-4px);
	box-shadow:
		0 16px 30px rgba(40, 30, 20, 0.28),
		0 5px 10px rgba(40, 30, 20, 0.18),
		inset 0 0 0 1px rgba(120, 100, 80, 0.06);
}

/*
 * Inner dotted border — sits inside the card padding, mimicking the
 * dotted line on a recipe card / index card. Implemented as an
 * absolutely-positioned pseudo-element so it doesn't compete with
 * the card's clip-path.
 */
.wp-block-workbench-shop-collection.is-style-recipe-card
	.wb-category-card::before,
.wp-block-workbench-shop-collection.is-style-recipe-card
	.wb-product-card::before {
	content: "";
	position: absolute;
	inset: 0.6rem;
	border: 1.5px dashed rgba(140, 110, 80, 0.32);
	border-radius: 2px;
	pointer-events: none;
}

/* Image wrap: rectangular within the card, slight inset so the
 * dotted border sits clearly around it. */
.wp-block-workbench-shop-collection.is-style-recipe-card
	.wb-category-card__image-wrap,
.wp-block-workbench-shop-collection.is-style-recipe-card
	.wb-product-card__image-wrap {
	margin: 0.4rem 0.4rem 0.9rem;
	border-radius: 2px;
	overflow: hidden;
}

/* Hand-drawn / serif title: matches the polaroid figcaption +
 * Specials Board typography for visual cohesion. Color flows from
 * the wrapper's Color → Text picker (or theme default) via
 * `currentColor` so authors can rebrand without editing CSS. */
.wp-block-workbench-shop-collection.is-style-recipe-card
	.wb-category-card__title,
.wp-block-workbench-shop-collection.is-style-recipe-card
	.wb-product-card__title {
	font-family: "Caveat", "Patrick Hand", "Georgia", serif;
	font-size: 1.65em;
	font-weight: 600;
	letter-spacing: 0.01em;
	margin: 0.5rem 1rem 0.25rem;
	text-align: center;
}

.wp-block-workbench-shop-collection.is-style-recipe-card
	.wb-category-card__description,
.wp-block-workbench-shop-collection.is-style-recipe-card
	.wb-product-card__description {
	font-size: 0.95em;
	line-height: 1.45;
	margin: 0.25rem 1rem 0.5rem;
	text-align: center;
	opacity: 0.8;
}

/* Reduced motion: keep the static look — no hover lift. */
@media (prefers-reduced-motion: reduce) {
	.wp-block-workbench-shop-collection.is-style-recipe-card .wb-category-card,
	.wp-block-workbench-shop-collection.is-style-recipe-card .wb-product-card {
		transition: none;
	}
	.wp-block-workbench-shop-collection.is-style-recipe-card
		.wb-category-card:hover,
	.wp-block-workbench-shop-collection.is-style-recipe-card
		.wb-product-card:hover {
		transform: none;
	}
}