/* ==========================================================================
 * Component: 13 — How We Gruve (.imea-gruve)
 * NEW standalone file: IMEA/assets/css/how-we-gruve.css
 * Centered header on the green gradient, then one dark rounded panel per
 * solution stacked vertically. Each panel: centered title + description,
 * the circuit diagram (SVG image), and a lime CTA pill.
 * Colors follow the project color pass — no new custom properties.
 * ========================================================================== */

.imea-gruve {
	position: relative;
	padding: 96px 0 104px;
	color: var(--text-color);
	/* green gradient band behind the header, per design */
	/* background: radial-gradient(120% 80% at 8% 0%, rgba(35, 94, 75, 0.65) 0%, rgba(7, 19, 15, 0) 55%), linear-gradient(180deg, #0B1F17 0%, #060D0A 100%); */
	/* background-color: var(--primary-color); */
	/* NOTE: no overflow:hidden here — it would break the sticky stacking
	   of the panels below. Keep every ancestor of .imea-gruve__panel at
	   overflow: visible (watch for a global body/html overflow-x:hidden in
	   the theme, which also disables sticky). */
	/* background-image: url(https://stg-gruveai-staging.kinsta.cloud/en-in/wp-content/uploads/sites/3/2026/07/Section.png); */
	/* background-size: contain; */
	background: linear-gradient(181deg, rgba(4, 140, 66, 0.84) 0.19%, #04381C 33.56%);
}

/* --- header --------------------------------------------------------------- */
.imea-gruve__header {
	max-width: 936px;
	margin: 0 auto 56px;
	text-align: center;
}
.imea-gruve__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 0;
	padding: 8px 18px;
	border-radius: 999px;
	font-size: 16px;
	font-weight: 500;
	color: #fff;
	/* background: rgba(0, 0, 0, 0.55); */
	/* border: 1px solid rgba(255, 255, 255, 0.10); */
	text-transform: uppercase;
	color: var(--secondary-color);
}
.imea-gruve__eyebrow i {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--secondary-color);
}
.imea-gruve__title {
	margin: 0;
	font-size: 48px;
	line-height: 1.14;
	font-weight: 400;
	letter-spacing: -0.01em;
	color: rgba(255, 255, 255, 0.94);
}
.imea-gruve__title span { color: var(--secondary-color); }

/* --- stacked panels (sticky stacking-cards effect) ------------------------
 * Each panel pins near the top as you scroll; the next panel slides up and
 * covers it, leaving a small peek of each stacked card. The per-panel --i
 * (set inline in PHP) steps the sticky top + pushes the stack visually.
 * margin-bottom on each panel supplies the scroll distance between pins.
 * -------------------------------------------------------------------------- */
.imea-gruve__panels {
	--stack-top: 96px;   /* where the first panel pins */
	--stack-step: 26px;  /* peek height of each stacked card */
	display: block;
}
.imea-gruve__panel {
	position: -webkit-sticky;
	position: sticky;
	top: calc(var(--stack-top) + var(--i, 0) * var(--stack-step));
	/* generous gap = scroll distance a card stays pinned before the next
	   slides up and covers it; this is what makes the overlap read */
	margin-bottom: 12vh;
	padding: 60px 0px;
	border: 1px solid rgba(255, 255, 255, 0.08);
	
	 /* opaque base so stacked cards fully cover */
	overflow: hidden;
	border-radius: 30.476px;
	background: linear-gradient(180deg, rgba(1, 25, 12, 0.50) 0%, rgba(0, 0, 0, 0.50) 100%);
	box-shadow: 0 3.81px 11.429px 0 rgba(0, 0, 0, 0.08), 0 3.81px 81.048px 0 rgba(153, 153, 153, 0.26) inset;
	background-color: var(--text-color);
}
.imea-gruve__panel:last-child { margin-bottom: 0; }

/* --- fade-in entrance -----------------------------------------------------
 * JS toggles .is-inview as each panel scrolls into view. The hidden state
 * is scoped to .imea-gruve--anim (added by JS only when it actually runs),
 * so a delayed or blocked script never leaves panels blank — they just
 * show without animating. transform on a sticky element is safe (only
 * ancestor overflow breaks sticky), and the entrance completes before a
 * panel reaches its pin point.
 * -------------------------------------------------------------------------- */
.imea-gruve--anim .imea-gruve__panel {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 0.6s ease, transform 0.6s ease;
	will-change: opacity, transform;
}
.imea-gruve--anim .imea-gruve__panel.is-inview {
	opacity: 1;
	transform: none;
}

.imea-gruve__panel-head {
	max-width: 640px;
	margin: 0 auto 28px;
	text-align: center;
}
.imea-gruve__panel-title {
	margin: 0 0 14px;
	font-size: 34px;
	font-weight: 300;
	letter-spacing: -0.01em;
	color: #fff;
}
.imea-gruve__panel-desc {
	margin: 0;
	font-size: 18px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.62);
}

/* --- diagram (SVG image, 1320 x ~337 viewBox) ----------------------------- */

.imea-gruve__diagram img {
	display: block;
	width: 100%;
	height: 300px;
	object-fit: contain;
}

/* --- CTA ------------------------------------------------------------------ */
.imea-gruve__panel-actions {
	display: flex;
	justify-content: center;
	margin-top: 30px;
}
.imea-gruve__cta {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 30px;
	border-radius: 999px;
	font-size: 0.95rem;
	font-weight: 500;
	text-decoration: none;
	color: #0a0d05;
	background: var(--secondary-color);
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.imea-gruve__cta:hover {
	transform: translateY(-1px);
	box-shadow: 0 10px 30px -8px var(--lime-glow);
	color: #0a0d05;
}

/* --- responsive ----------------------------------------------------------- */
@media (max-width: 991.98px) {
	.imea-gruve { padding: 64px 0 72px; }
	.imea-gruve__title { font-size: 32px; }
	/* stacking is awkward on short viewports — fall back to normal flow */
	.imea-gruve__panel {
		position: static;
		top: auto;
		margin-bottom: 24px;
		padding: 40px 24px 36px;
		border-radius: 22px;
	}
	.imea-gruve__panel-title { font-size: 28px; }
}
@media (max-width: 575.98px) {
	.imea-gruve__title { font-size: 26px; }
	.imea-gruve__panel-title { font-size: 24px; }
	.imea-gruve__cta { width: 100%; justify-content: center; }
	/* wide diagram would shrink too far on phones — let it scroll instead */
	.imea-gruve__diagram {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	.imea-gruve__diagram img {min-width: 100%;height: auto;}
}
@media (prefers-reduced-motion: reduce) {
	.imea-gruve__cta { transition: none; }
	/* belt-and-suspenders: JS also skips animating under reduced motion */
	.imea-gruve--anim .imea-gruve__panel {
		opacity: 1;
		transform: none;
		transition: none;
	}
}