/**
 * About Us pattern — fixed-height cover, accent card absolutely positioned at top center.
 */

.bnb-about {
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
}

.bnb-about .wp-block-cover.bnb-about__media {
	--bnb-about-media-radius: 2rem;

	position: relative;
	box-sizing: border-box;
	width: 100%;
	height: 440px;
	min-height: 440px !important;
	/*
	 * Core .wp-block-cover sets overflow:hidden. We had overflow:visible here so
	 * the CTA could extend past the card; that also let parallax scale() escape
	 * the rounded box. Keep hidden + border-radius so the image stays contained.
	 */
	overflow: hidden;
	border-radius: var(--bnb-about-media-radius);
	background-color: #dfe2ea;
	isolation: isolate;
	/* Full-bleed image to the rounded frame (core cover defaults to padding:1em). */
	padding: 0 !important;
}

/*
 * Cover image: object-fit cover + JS parallax (scale + translateY).
 * Clipping is handled by .bnb-about__media (overflow:hidden + border-radius).
 */
.wp-site-blocks .bnb-about .wp-block-cover.bnb-about__media .wp-block-cover__image-background,
.editor-styles-wrapper .bnb-about .wp-block-cover.bnb-about__media .wp-block-cover__image-background,
.bnb-about .wp-block-cover.bnb-about__media .wp-block-cover__image-background {
	object-fit: cover;
	object-position: center;
	width: 100%;
	height: 100%;
	min-height: 0;
	transform-origin: center center;
}

.bnb-about .wp-block-cover__inner-container {
	width: 100%;
	max-width: none !important;
	height: 100%;
	min-height: 440px;
	position: relative;
	box-sizing: border-box;
}

.bnb-about__inner {
	box-sizing: border-box;
	position: relative;
	height: 100%;
	min-height: 0;
	padding: 0;
	margin: 0;
}

.bnb-about__card {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	box-sizing: border-box;
	width: min(100%, 790px);
	max-width: 790px;
	margin: 0;
	padding: 50px 75px;
	background-color: var(--wp--preset--color--accent, #ecc4c0);
	border-radius: clamp(1.25rem, 3vw, 2rem);
	color: #000;
	text-align: center;
}

.bnb-about__card > .wp-block-heading {
	margin-top: 0;
}

.bnb-about__text {
	margin: 0 0 1rem !important;
	font-size: 14px !important;
	line-height: 1.55 !important;
	font-weight: 400 !important;
	color: #000 !important;
}

.bnb-about__text:last-of-type {
	margin-bottom: 0 !important;
}

.bnb-about__cta {
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translate(-50%, 50%);
	display: flex;
	justify-content: center;
	width: 100%;
	pointer-events: none;
}

.bnb-about__cta .wp-block-button {
	pointer-events: auto;
}

.bnb-about__cta .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: fit-content;
	max-width: 100%;
	padding: 20px 38px !important;
	margin: 0 !important;
	background-color: #000 !important;
	color: var(--wp--preset--color--accent, #ecc4c0) !important;
	font-size: 16px !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	text-decoration: none !important;
	border: none !important;
	border-radius: 2rem !important;
	outline: 3px solid var(--wp--preset--color--accent, #ecc4c0);
	box-shadow: none !important;
	transition: background-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}

.bnb-about__cta .wp-block-button__link:hover,
.bnb-about__cta .wp-block-button__link:focus-visible,
.bnb-about__cta .wp-block-button__link:active,
.bnb-about__cta .wp-block-button__link:visited {
	background-color: #000 !important;
	color: var(--wp--preset--color--accent, #ecc4c0) !important;
}

.bnb-about__cta .wp-block-button__link:focus-visible {
	outline: 3px solid var(--wp--preset--color--accent, #ecc4c0);
	outline-offset: 5px;
}

@media (max-width: 499px) {
	.bnb-about .wp-block-cover.bnb-about__media {
		height: 500px;
		min-height: 500px !important;
	}

	.bnb-about .wp-block-cover__inner-container {
		min-height: 500px;
	}
	.bnb-about__text {
		font-size: 13px !important;
	}
}

@media (max-width: 781px) {
	.bnb-about__card {
		width: calc(100% - 2rem);
		max-width: 790px;
		padding: 32px 24px;
	}
}