/**
 * Blog listing hero: new brand redesign (/web-data-insights/).
 *
 * Hero only; the post grid keeps assets/css/blog.css. Same visual language as
 * the use-case redesigns (assets/css/use-cases/ecommerce-v2.css). Markup and
 * copy are unchanged; everything is scoped under .blog-hero-v2.
 *
 * Brand colors live in the token block below; change them there.
 *
 * @package Bringits
 */

.blog-hero-v2 {
	--bh-primary: #291154;
	--bh-deep: #220d47;
	--bh-dark: #1e0c3f;
	--bh-yellow: #f8c02d;
	--bh-violet-soft: #a98be6;
	--bh-on-dark: #ffffff;
	--bh-on-dark-body: rgba(255, 255, 255, 0.76);

	--bh-max: 1200px;
	--bh-gutter: clamp(16px, 4vw, 32px);
	--bh-font: Inter, Arial, Helvetica, sans-serif;

	min-height: 0;
	padding: clamp(72px, 9vw, 128px) 0;
	background:
		radial-gradient(ellipse 60% 70% at 85% 30%, rgba(69, 34, 93, 0.9) 0%, rgba(69, 34, 93, 0) 70%),
		linear-gradient(165deg, var(--bh-primary) 0%, var(--bh-dark) 55%, var(--bh-deep) 100%);
	font-family: var(--bh-font);
	-webkit-font-smoothing: antialiased;
	isolation: isolate;
}

.blog-hero-v2 *,
.blog-hero-v2 *::before,
.blog-hero-v2 *::after {
	box-sizing: border-box;
}

/* Faint data grid fading out toward the copy side. */
.blog-hero-v2::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
	background-size: 48px 48px;
	-webkit-mask-image: radial-gradient(ellipse 55% 80% at 75% 50%, #000 0%, transparent 75%);
	mask-image: radial-gradient(ellipse 55% 80% at 75% 50%, #000 0%, transparent 75%);
	pointer-events: none;
}

/* Yellow light trail along the bottom edge. */
.blog-hero-v2::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent 5%, rgba(248, 192, 45, 0.75) 55%, transparent 95%);
	box-shadow: 0 0 18px 2px rgba(248, 192, 45, 0.35);
	pointer-events: none;
}

.blog-hero-v2 .learn-hero-container {
	max-width: calc(var(--bh-max) + 2 * var(--bh-gutter));
	margin: 0 auto;
	padding: 0 var(--bh-gutter);
	gap: clamp(32px, 5vw, 80px);
}

.blog-hero-v2 .learn-hero-title-group {
	gap: 22px;
}

.blog-hero-v2 .learn-hero-title {
	font-family: var(--bh-font);
	font-size: clamp(2.75rem, 1.4rem + 4.6vw, 4.75rem);
	font-weight: 400;
	line-height: 1.04;
	letter-spacing: -0.035em;
	color: var(--bh-on-dark);
}

.blog-hero-v2 .learn-hero-title-bold-part {
	font-weight: 800;
	color: var(--bh-yellow);
}

.blog-hero-v2 .learn-hero-subtitle {
	max-width: 540px;
	font-family: var(--bh-font);
	font-size: clamp(1rem, 0.95rem + 0.3vw, 1.1875rem);
	line-height: 1.6;
	color: var(--bh-on-dark-body);
}

/* Illustration: light line art on a soft violet glow. */
.blog-hero-v2 .learn-hero-graphics {
	min-height: 340px;
}

.blog-hero-v2 .learn-hero-graphics::before {
	content: '';
	position: absolute;
	inset: 0 10%;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(122, 79, 224, 0.4), transparent);
	filter: blur(12px);
}

.blog-hero-v2 .learn-hero-vector {
	position: relative;
	top: auto;
	left: auto;
	width: min(100%, 360px);
	height: auto;
	opacity: 1;
	filter: drop-shadow(0 18px 36px rgba(10, 4, 26, 0.45));
}

@media (max-width: 991px) {
	.blog-hero-v2 .learn-hero-container {
		align-items: center;
	}

	.blog-hero-v2 .learn-hero-title-group {
		align-items: center;
	}

	.blog-hero-v2 .learn-hero-subtitle {
		margin: 0 auto;
	}

	.blog-hero-v2 .learn-hero-graphics {
		width: 100%;
		min-height: 220px;
	}

	.blog-hero-v2 .learn-hero-vector {
		width: 240px;
	}
}

@media (max-width: 600px) {
	.blog-hero-v2 {
		padding: 56px 0 48px;
	}

	.blog-hero-v2 .learn-hero-title {
		font-size: 2.5rem;
	}

	.blog-hero-v2 .learn-hero-subtitle {
		font-size: 1rem;
	}

	.blog-hero-v2 .learn-hero-graphics {
		min-height: 180px;
	}

	.blog-hero-v2 .learn-hero-vector {
		width: 180px;
	}
}