/* Shared storybook pill button (used across sections). */
.wp-block-button.is-style-ylb-pill .wp-block-button__link {
	border-radius: 999px;
	padding: 0.6em 1.35em;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
	box-shadow: 0 3px 0 rgba(0, 0, 0, 0.18), 0 5px 8px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

/* Hover, focus and press effects for all buttons live in assets/css/buttons.css. */

/* Core's mark default is a yellow highlight; colour-only marks stay transparent. */
.ylb-hero mark {
	background: transparent;
}

/* Hero: text column centred at 35.6% of the width, like the mockup. */
.ylb-hero.wp-block-cover {
	align-items: flex-start;
	justify-content: flex-start;
}

.ylb-hero .wp-block-cover__inner-container {
	width: 39.1%;
	margin-left: 16.05%;
	padding-top: 5.9vw;
	text-align: center;
}

.ylb-hero .wp-block-separator.is-style-ylb-heart {
	width: 25vw;
	transform: translateX(0.7vw);
	font-size: 2.3vw;
	max-width: 100%;
}

@media (max-width: 781px) {
	.ylb-hero.wp-block-cover {
		min-height: 0 !important;
		align-items: flex-start;
		padding-bottom: 60vw !important;
	}

	.ylb-hero .wp-block-cover__image-background {
		object-position: 80% 100%;
		height: auto;
		top: auto;
		bottom: 0;
		min-height: 60vw;
	}

	.ylb-hero .wp-block-cover__inner-container {
		width: 100%;
		margin: 0;
		padding: 1.5rem 1.25rem;
		background: linear-gradient(180deg, rgba(247, 230, 205, 0.92), rgba(247, 230, 205, 0.7));
	}

	.ylb-hero .wp-block-cover__inner-container .wp-block-buttons {
		margin-top: 1rem !important;
	}
}

/* The hero's heart divider uses the same gold as the heart dividers across the site. */
.ylb-hero .wp-block-separator.is-style-ylb-heart {
	--ylb-heart-line: var(--wp--preset--color--gold);
}