/* =cookbook block */

.block-cookbook {
	background: var(--wp--custom--color--neutral-900);
	border-radius: var(--wp--custom--border-radius--small);
	color: white;
	position: relative;
	margin-top: calc( var(--wp--custom--layout--block-gap-large) + 30px ) !important; /* extra margin for icon */
}

.block-cookbook .block-cookbook__icon-container {
	box-shadow: var(--wp--custom--box-shadow--1);
	background: var(--wp--preset--gradient--diagonal-tertiary-to-primary);
	width: 60px;
	height: 60px;
	line-height: 0;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	border-radius: 50%;
	position: absolute;
	top: -30px;
}

.block-cookbook .block-cookbook__icon-container svg {
	fill: white;
}

.block-cookbook .block-cookbook__content p:not(.block-cookbook__title, .block-cookbook__subtitle) {
	font-size: var(--wp--preset--font-size--small);
}

.block-cookbook .block-cookbook__content .block-cookbook__subtitle {
	line-height: var(--wp--custom--line-height--medium);
	font-weight: 900;
	font-size: 1.1875rem;
	text-transform: uppercase;
	margin: 0;
}

.block-cookbook .block-cookbook__content :is(p.block-cookbook__title, > h2:first-child, > h3:first-child ) {
	font-family: var(--wp--preset--font-family--primary);
	font-size: var(--wp--preset--font-size--x-large);
	line-height: var(--wp--custom--line-height--medium);
	font-weight: 700;
	margin: 0;
}

.block-cookbook .block-cookbook__content .block-cookbook__title + * {
	margin-top: 4px; /* spacing between title and content */
}

.block-cookbook .block-cookbook__content a:is(.wp-element-button, .wp-block-button__link) {
	font-size: 0.9375rem;
	padding: 12px 16px;
}

.block-cookbook .block-cookbook__image {
	box-shadow: var(--wp--custom--box-shadow--1);
}

@media only screen and (max-width: 767px) {
	.block-cookbook {
		padding: 42px 24px 1px;
	}

	.block-cookbook .block-cookbook__content {
		margin-bottom: 24px;
	}

	.block-cookbook .block-cookbook__image {
		max-width: 234px;
		margin: 0 auto -27px;
	}
}

@media only screen and (min-width: 768px) {
	.block-cookbook {
		padding: 42px 30px 30px 26px;
	}

	.block-cookbook .block-cookbook__inner {
		display: grid;
		grid-template-columns: 1fr 234px;
		gap: 24px;
	}

	.block-cookbook .block-cookbook__image {
		margin-top: calc(-42px + -30px);
	}
}