/* Blog CTA block
   Desktop: Figma node 1978-87188 (dark green, 120px asymmetric radius, 39/47 title)
   Mobile:  Figma node 2117-25813 (dark green, 40px asymmetric radius, 29/44 title,
                                   bigger 512px decoration, full-width button)

   NOTE: Selectors are intentionally specific (`.blog-cta ...`) because
   `.single__main h3`, `.single__main a` etc. in the post template have
   equal or higher specificity and would otherwise override these rules. */

.blog-cta,
.single__main .blog-cta,
.wp-block[data-type="acf/blog-cta"] .blog-cta {
	margin: 0;
	width: 100%;
}

.blog-cta .blog-cta__inner {
	position: relative;
	background: #03271e;
	border-radius: 120px 0 120px 0; /* top-left + bottom-right, per desktop Figma */
	padding: 56px 32px;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
}

.blog-cta .blog-cta__decoration {
	position: absolute;
	top: -10px;
	right: -40px;
	width: 372px;
	height: 372px;
	background: url('../../images/blog-cta-vector.svg') no-repeat center/contain;
	pointer-events: none;
	z-index: 1;
	margin: 0;
	padding: 0;
}

.blog-cta .blog-cta__content {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 40px;
	max-width: 531px;
	width: 100%;
	text-align: center;
}

/* Override .single__main h3 which otherwise wins with
   text-align:left + 22px/30px sizing. */
.blog-cta .blog-cta__title,
.single__main .blog-cta .blog-cta__title {
	font-family: 'Outfit', sans-serif;
	font-weight: 700;
	font-size: 39px;
	line-height: 47px;
	color: #ffffff;
	margin: 0;
	padding: 0;
	letter-spacing: 0;
	text-align: center;
}

.blog-cta .blog-cta__title-accent {
	color: #a3e625;
}

.blog-cta .blog-cta__title-default {
	color: #ffffff;
}

.blog-cta .blog-cta__actions {
	display: flex;
	gap: 16px;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 0;
	width: auto;
}

/* Override any generic `.single__main a` / `.btn` link rules. */
.blog-cta .blog-cta__btn,
.single__main .blog-cta .blog-cta__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 56px;
	min-height: 56px;
	padding: 12px 32px;
	background: #95e51d;
	color: #000000;
	border: none;
	border-radius: 12px;
	font-family: 'Outfit', sans-serif;
	font-weight: 500;
	font-size: 16px;
	line-height: 19px;
	text-decoration: none;
	box-shadow: none;
	transition: background-color 0.2s ease;
	white-space: nowrap;
	cursor: pointer;
	box-sizing: border-box;
}

.blog-cta .blog-cta__btn:hover,
.blog-cta .blog-cta__btn:focus,
.single__main .blog-cta .blog-cta__btn:hover,
.single__main .blog-cta .blog-cta__btn:focus {
	background: #a3e625;
	color: #000000;
	text-decoration: none;
}

/* Tablet */
@media (max-width: 1024px) {
	.blog-cta .blog-cta__inner {
		border-radius: 80px 0 80px 0;
		padding: 56px 28px;
	}

	.blog-cta .blog-cta__decoration {
		width: 320px;
		height: 320px;
		right: -60px;
	}

	.blog-cta .blog-cta__title,
	.single__main .blog-cta .blog-cta__title {
		font-size: 32px;
		line-height: 40px;
	}
}

/* Mobile — exact match to Figma node 2117-25813 */
@media (max-width: 767px) {
	.blog-cta .blog-cta__inner {
		border-radius: 40px 0 40px 0;
		padding: 78px 24px; /* matches Figma content offset y=78px, x=24px */
		min-height: 412px;
		align-items: flex-start;
	}

	.blog-cta .blog-cta__decoration {
		width: 512px;
		height: 512px;
		top: -69px;
		left: 116px;
		right: auto;
		background-image: url('../../images/blog-cta-vector-mobile.svg');
	}

	.blog-cta .blog-cta__content {
		gap: 24px;
		max-width: 279px;
		align-items: stretch; /* button is full-width per Figma */
		margin: 0 auto;
	}

	.blog-cta .blog-cta__title,
	.single__main .blog-cta .blog-cta__title {
		font-size: 29px;
		line-height: 44px;
		letter-spacing: -0.87px;
		text-align: center;
	}

	.blog-cta .blog-cta__actions {
		width: 100%;
	}

	.blog-cta .blog-cta__btn,
	.single__main .blog-cta .blog-cta__btn {
		display: flex;
		width: 100%;
		height: 56px;
		min-height: 56px;
	}
}

/* Very small screens — clamp the decoration so it doesn't bleed into text */
@media (max-width: 380px) {
	.blog-cta .blog-cta__decoration {
		left: 35%;
	}
}