/* =pin recipe block, =pinterest */
.block-pin-recipe {
	border-radius: var(--wp--custom--border-radius--small);
	position: relative;
}

.block-pin-recipe .block-pin-recipe__icon-container {
	box-shadow: var(--wp--custom--box-shadow--1);
	background-color: #165159;
	border-radius: 50%;
	width: 60px;
	height: 60px;
	line-height: 0;
	display: inline-flex;
	justify-content: center;
	align-items: center;
}

.block-pin-recipe .block-pin-recipe__pinterest-icon {
	fill: white;
	width: 38px;
	height: 38px;
}

.block-pin-recipe .block-pin-recipe__content-container p:not(.block-pin-recipe__title) {
	margin: 0;
}

.block-pin-recipe .block-pin-recipe__title {
	font-family: var(--wp--preset--font-family--primary);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 700;
}

.block-pin-recipe .block-pin-recipe__button-container a {
	font-family: var(--wp--preset--font-family--primary);
	border-radius: var(--wp--custom--border-radius--tiny);
	line-height: var(--wp--custom--line-height--small);
	font-weight: 700;
	background: black;
	color: white;
	text-decoration: none;
	display: inline-block;
}

.block-pin-recipe .block-pin-recipe__button-container a:is(:hover, :focus) {
	filter: brightness(85%);
}

@media only screen and (max-width: 767px) {

	.block-pin-recipe.has-background,
	.editor-styles-wrapper .block-pin-recipe.has-background {
		text-align: center;
		padding: 46px 24px 32px;
		margin-top: calc( var(--wp--custom--layout--block-gap-large) + 12px ) !important; /* extra margin for icon */
	}

	.block-pin-recipe .block-pin-recipe__icon-container {
		position: absolute;
		top: -24px;
		left: 50%;
		transform: translateX(-50%);
	}

	.block-pin-recipe .block-pin-recipe__content-container {
		margin-bottom: 14px;
	}

	.block-pin-recipe .block-pin-recipe__title {
		margin: 0 0 4px;
	}

	.block-pin-recipe .block-pin-recipe__button-container a {
		font-size: 0.9375rem;
		padding: 11px 16px;
	}

}

@media only screen and (min-width: 768px) {

	.block-pin-recipe.has-background,
	.editor-styles-wrapper .block-pin-recipe.has-background {
		padding: 22px 38px 28px 50px;
		display: flex;
		gap: 16px;
		align-items: center;
	}

	.block-pin-recipe .block-pin-recipe__icon-container {
		position: absolute;
		left: -30px;
		top: 50%;
		transform: translateY(-50%);
	}

	.block-pin-recipe .block-pin-recipe__content-container {
		flex-grow: 1;
	}

	.block-pin-recipe .block-pin-recipe__title {
		margin: 0 0 3px;
	}

	.block-pin-recipe .block-pin-recipe__button-container {
		flex-shrink: 0;
	}

	.block-pin-recipe .block-pin-recipe__button-container a {
		font-size: 1.1875rem;
		padding: 16px 23px;
	}

}