/**
 * Regulatory Bento Grid — .imea-bento
 * Target: IMEA/assets/css/regulatory-bento.css
 * 3 cards left · large feature centre · 3 cards right. Glassmorphism to match
 * the Continuous Security Assurance section. Scoped, additive.
 */

.imea-bento {
	--bn-lime:   var(--secondary-color, #ccfc00);
	--bn-green:  var(--primary-color, #21a55e);
	--bn-accent: #4bdc8e;
	--bn-text:   var(--text-light, #eaf6ef);
	--bn-muted:  var(--text-muted, #8fab9d);
	--bn-bg:     var(--bg-deep, #000);
	--bn-border: rgba(255, 255, 255, 0.08);
	--bn-radius: 18px;
	--bn-card: linear-gradient(160deg, rgba(255, 255, 255, 0.05) 0%, rgba(6, 26, 18, 0.28) 100%);
	--bn-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 30px 70px -34px rgba(0, 0, 0, 0.65);
	position: relative;
	padding: clamp(40px, 5vw, 84px) 0;
	background: rgba(0, 0, 0, 1);
	color: var(--bn-text);
	overflow: hidden;
}

.imea-bento__inner { position: relative; z-index: 1; }

/* ---------- Grid: 1fr / ~1.9fr / 1fr ---------- */
.imea-bento__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.9fr) minmax(0, 1fr);
	gap: 16px;
	align-items: stretch;
}

.imea-bento__col { display: flex; flex-direction: column; gap: 16px; }

/* ---------- Cards (side) ---------- */
.imea-bento__card {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 40px;
	min-height: 200px;
	padding: 22px 24px;
	border-radius: var(--bn-radius);
	box-shadow: var(--bn-shadow);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	transition: transform 0.5s ease, opacity 0.5s ease;
	background: linear-gradient(114.52deg, rgba(33, 165, 94, 0.21) 8.64%, rgba(33, 165, 94, 0.02) 96.35%);
	border-top: 0.55px solid rgba(33, 165, 94, 0.35);
}

.imea-bento__tag {
	align-self: flex-start;
	color: var(--bn-lime);
	font-size: 14px;
	font-weight: 400;
	letter-spacing: 0.01em;
}

.imea-bento__card-body { display: flex; flex-direction: column; gap: 6px; }
.imea-bento__card-title {margin: 0;font-size: 18px;font-weight: 400;color: #fff;line-height: 1.25;}
.imea-bento__card-desc { margin: 0; font-size: 14px; color: var(--bn-muted); line-height: 1.45; }

/* ---------- Feature (centre) ---------- */
.imea-bento__feature {
	position: relative;
	display: flex;
	flex-direction: column;
	/* padding: 30px 34px; */
	border: 1px solid var(--bn-border);
	border-radius: var(--bn-radius);
	background: var(--bn-card);
	box-shadow: var(--bn-shadow);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	overflow: hidden;
}

/* soft green pool + faint scanlines in the lower half, like the Figma */
.imea-bento__feature::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 62%;
	z-index: 0;
	pointer-events: none;
	background:
		radial-gradient(80% 90% at 50% 120%, rgba(33, 165, 94, 0.35) 0%, rgba(33, 165, 94, 0) 70%),
		repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0px, rgba(255, 255, 255, 0.03) 1px, transparent 1px, transparent 26px);
	/* background-image: url(https://stg-gruveai-staging.kinsta.cloud/in/wp-content/uploads/sites/3/2026/07/Body-2-1.png); */
	/* background-repeat: no-repeat; */
	/* background-position: bottom; */
}

.imea-bento__feature > * {position: relative;z-index: 1;}

.imea-bento__eyebrow {
	margin: 0 0 20px;
	color: var(--bn-green);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.imea-bento__heading {
	margin: 0 0 22px;
	font-size: clamp(30px, 3.4vw, 46px);
	line-height: 1.1;
	font-weight: 400;
	color: #fff;
	letter-spacing: -0.01em;
}
.imea-bento__accent { color: var(--bn-green); }

.imea-bento__lead {
	margin: 0;
	max-width: 60ch;
	font-size: 16px;
	line-height: 1.6;
	color: var(--bn-muted);
}

.imea-bento__feature-visual { flex: 1 1 auto; min-height: 40px; }
.imea-bento__visual-img { display: block; width: 100%; height: auto; }

/* stat row with gradient dividers */
.imea-bento__stats {
	display: flex;
	margin-top: 40px;
	padding-top: 6px;
	padding-bottom: 30px;
}
.imea-bento__stat {
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 6px 16px;
	text-align: center;
}
.imea-bento__stat + .imea-bento__stat {
	border-left: 1px solid;
	border-image: linear-gradient(180deg, rgba(33, 165, 94, 0) 0%, rgba(33, 165, 94, 0.55) 50%, rgba(33, 165, 94, 0) 100%) 1;
}
.imea-bento__stat-value { font-size: clamp(24px, 2.2vw, 30px); font-weight: 400; color: #fff; line-height: 1; }
.imea-bento__stat-label { font-size: 13px; color: var(--bn-muted); }

/* ---------- Scroll-in reveal (JS adds .is-in-view) ---------- */
.imea-bento .imea-bento__card,
.imea-bento .imea-bento__feature { opacity: 1; }

.imea-bento.is-armed .imea-bento__card,
.imea-bento.is-armed .imea-bento__feature { opacity: 0; transform: translateY(16px); }

.imea-bento.is-in-view .imea-bento__card,
.imea-bento.is-in-view .imea-bento__feature {opacity: 1;transform: none;}

.imea-bento.is-in-view .imea-bento__col--left .imea-bento__card:nth-child(2) { transition-delay: 0.06s; }
.imea-bento.is-in-view .imea-bento__col--left .imea-bento__card:nth-child(3) { transition-delay: 0.12s; }
.imea-bento.is-in-view .imea-bento__feature { transition-delay: 0.09s; }
.imea-bento.is-in-view .imea-bento__col--right .imea-bento__card:nth-child(2) { transition-delay: 0.06s; }
.imea-bento.is-in-view .imea-bento__col--right .imea-bento__card:nth-child(3) { transition-delay: 0.12s; }

.imea-bento__feature-top {padding: 30px 30px 0px;}

/* ---------- Responsive ---------- */
@media (max-width: 991.98px) {
	.imea-bento__grid { grid-template-columns: 1fr; }
	.imea-bento__feature { order: -1; }
	.imea-bento__col { flex-direction: row; flex-wrap: wrap; }
	.imea-bento__col .imea-bento__card { flex: 1 1 240px; min-height: 160px; }
}

@media(max-width:768px){
	.imea-bento__feature-top {
	    padding: 0;
	}
}

@media (max-width: 575.98px) {
	.imea-bento__col { flex-direction: column; }
	.imea-bento__feature { padding: 22px; }
	.imea-bento__stats { flex-wrap: wrap; gap: 12px; }
	.imea-bento__stat { flex: 1 1 40%; }
	.imea-bento__stat + .imea-bento__stat { border-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.imea-bento.is-armed .imea-bento__card,
	.imea-bento.is-armed .imea-bento__feature { opacity: 1; transform: none; }
	.imea-bento__card,
	.imea-bento__feature { transition: none; }
}