/**
 * Blog Banner widget — widgets/blog-banner-variation.php
 *
 * Replaces the per-instance inline <style> blocks and the nine
 * widgets/layout/layout-N.php template files that came from the removed
 * "RRdevs For Elementor" plugin.
 *
 * Class names are deliberately UNCHANGED (.blog_banner, .blog_banner1/2/3/5,
 * .rrdevs-btn-cion): style.css lines ~1689 and the widget's own Elementor
 * style-control selectors both target them.
 *
 * Only four variants were ever used in content (DB-verified 2026-07-27):
 *   blog_banner2  (layout-2)  calculator
 *   blog_banner3  (layout-3)  Remote Sensei
 *   blog_banner5  (layout-5)  Asana
 *   blog_banner1  (layout-4)  Asana, larger type, no bottom margin
 */

.blog_banner {
	position: relative;
	z-index: 1;
	padding: 30px;
	border-radius: 4px;
}

.blog_banner .blog_banner_overlay {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: -1;
	border-radius: 4px;
	background-position: bottom right;
	background-repeat: no-repeat;
	background-size: contain;
}

.blog_banner .title {
	margin-bottom: 20px;
}

.blog_banner .banner_content .title h4 {
	margin: 0;
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 700;
	line-height: 140%;
	color: #34383C;
}

.blog_banner .button a {
	display: inline-block;
	padding: 15px 30px;
	border-radius: 4px;
	color: #34383C;
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 600;
	line-height: 22px;
	background-color: #FFC94B;
	box-shadow: 0px 20px 40px -10px rgba(38, 50, 56, 0.2);
	cursor: pointer;
	transition: all .3s ease-in-out;
}

.blog_banner .button a:hover {
	color: #34383C;
	background-color: #FFB710;
	box-shadow: 0px 10px 20px -5px rgba(38, 50, 56, 0.3);
}

.blog_banner .button a:focus {
	background-color: #E5B137;
	box-shadow: 0px 5px 10px -5px rgba(38, 50, 56, 0.4);
}

.blog_banner .button .rrdevs-btn-cion {
	margin-left: 20px;
}

/* --- Variants 2 / 3 / 5 — identical apart from the overlay image ---------- */

.blog_banner2,
.blog_banner3,
.blog_banner5 {
	background-color: #F9F9F9;
	margin-bottom: 2.45rem;
}

.blog_banner2 .banner_content .title h4,
.blog_banner3 .banner_content .title h4,
.blog_banner5 .banner_content .title h4 {
	font-size: 18px;
}

.blog_banner2:hover .title h4,
.blog_banner3:hover .title h4,
.blog_banner5:hover .title h4 {
	color: #408897;
}

.blog_banner2 .button a,
.blog_banner3 .button a,
.blog_banner5 .button a {
	font-size: 14px;
}

@media (min-width: 992px) {
	.blog_banner2 .banner_content .title h4,
	.blog_banner3 .banner_content .title h4,
	.blog_banner5 .banner_content .title h4 {
		font-size: 20px;
	}

	.blog_banner2 .button a,
	.blog_banner3 .button a,
	.blog_banner5 .button a {
		font-size: 18px;
	}
}

@media (max-width: 767px) {
	.blog_banner2,
	.blog_banner3,
	.blog_banner5 {
		padding: 20px;
	}
}

/* --- Variant 4 (.blog_banner1) — larger type, flush bottom ---------------- */

.blog_banner1 {
	background-color: #f1f1f1;
}

.blog_banner1 .banner_content .title h4 {
	font-size: 24px;
}

.blog_banner1 .button a {
	font-size: 18px;
}