/**
 * Component 21 — Industries We Serve (Horizontal Accordion)
 * Block: .imea-ind   |   Handle: imea-industries-serve
 * Namespaced, additive, token-driven. No dependency on other components.
 */

.imea-ind {
	position: relative;
	padding: clamp(48px, 7vw, 96px) 0;
	/* background: var(--bg-deep, #050807); */
	/* color: var(--text-color, #E8F3EC); */
	overflow: hidden;
	background-image: url(https://stg-gruveai-staging.kinsta.cloud/in/wp-content/uploads/sites/3/2026/07/Section-1.png);
}

/* Soft green glow, top-left, echoing the design. */
.imea-ind::before {
	content: "";
	position: absolute;
	top: -160px;
	left: -120px;
	width: 460px;
	height: 460px;
	background: radial-gradient(circle, var(--green-glow, rgba(33, 165, 94, .45)) 0%, transparent 68%);
	opacity: .55;
	pointer-events: none;
	z-index: 0;
}

.imea-ind > .container { position: relative; z-index: 1; }

/* ---- Heading ------------------------------------------------------------- */
.imea-ind__head {
	text-align: center;
	margin: 0 auto clamp(28px, 4vw, 48px);
	max-width: 900px;
}

.imea-ind__eyebrow {
	margin: 0 0 12px;
	font-size: .82rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--text-muted, #8FA79A);
}

.imea-ind__title {
	margin: 0;
	font-size: 48px;
	line-height: 1.15;
	font-weight: 400;
	color: var(--text-light, #F4FAF6);
}

.imea-ind__accent {
	background: linear-gradient(180deg, #177241 37.04%, #CCFC00 100%);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

/* ---- Accordion track ----------------------------------------------------- */
.imea-ind__accordion {
	display: flex;
	gap: clamp(10px, 1.2vw, 16px);
	align-items: stretch;
	min-height: 640px;
}

/* ---- Panel --------------------------------------------------------------- */
.imea-ind__panel {
	position: relative;
	flex: 0 0 clamp(78px, 8vw, 104px);
	min-width: clamp(78px, 8vw, 104px);
	border-radius: 22px;
	/* background: linear-gradient(180deg, var(--bg-mid, #0C1712) 0%, var(--bg-light, #0A130F) 100%); */
	/* border: 1px solid rgba(115, 215, 143, .12); */
	overflow: hidden;
	transition: flex-basis .48s cubic-bezier(.4, 0, .2, 1),
				min-width .48s cubic-bezier(.4, 0, .2, 1),
				border-color .3s ease,
				background .3s ease;
}

.imea-ind__panel:hover { border-color: rgba(115, 215, 143, .28); }

.imea-ind__panel.is-open {
	flex: 1 1 auto;
	min-width: 0;
	/* border-color: rgba(115, 215, 143, .30); */
	/* background:
		radial-gradient(120% 90% at 85% 20%, rgba(33, 165, 94, .16) 0%, transparent 60%),
		linear-gradient(180deg, var(--bg-mid, #0C1712) 0%, var(--bg-light, #0A130F) 100%); */
}

/* ---- Collapsed spine (rotated label + foot chip) ------------------------- */
.imea-ind__toggle {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	min-height: inherit;
	padding: 0;
	margin: 0;
	border: 0;
	color: inherit;
	font: inherit;
	cursor: pointer;
	text-align: left;
	background: #0A1810;
	transition: opacity .3s ease;
}

.imea-ind__panel.is-open .imea-ind__toggle {
	position: absolute;
	inset: 0;
	pointer-events: none; /* open panel: body handles interaction, toggle just holds a11y */
	width: 0;
	height: 0;
	overflow: hidden;
	opacity: 0;
}

.imea-ind__spine {
	position: absolute;
	inset: 0 0 96px 0;
	display: flex;
	/* align-items: center; */
	justify-content: center;
	transition: opacity .3s ease;
}

.imea-ind__spine-label {
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	white-space: nowrap;
	font-size: 28px;
	font-weight: 400;
	letter-spacing: .02em;
	color: rgba(109, 109, 109, 1);
	transition: color .3s ease;
}

.imea-ind__toggle:hover .imea-ind__spine-label,
.imea-ind__toggle:focus-visible .imea-ind__spine-label {color: #fff;}

.imea-ind__panel.is-open .imea-ind__spine { opacity: 0; }

/* Circular icon chip */
.imea-ind__chip {
	position: absolute;
	left: 50%;
	bottom: 28px;
	transform: translateX(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 54px;
	height: 54px;
	border-radius: 50%;
	background: radial-gradient(circle at 50% 35%, rgba(33, 165, 94, .38), rgba(33, 165, 94, .10));
	border: 1px solid rgba(115, 215, 143, .55);
	color: var(--secondary-color, #CCFC00);
	box-shadow: 0 0 22px rgba(33, 165, 94, .28);
}

.imea-ind__chip svg { width: 26px; height: 26px; display: block; }
.imea-ind__chip-img {/* width: 26px; *//* height: 26px; *//* object-fit: contain; *//* display: block; */}

.imea-ind__panel.is-open .imea-ind__toggle .imea-ind__chip { opacity: 0; }

/* ---- Expanded body ------------------------------------------------------- */
/*
 * The body itself only handles show/hide + a close fade (visibility keeps it
 * out of the a11y tree + tab order when closed, WITHOUT display:none which
 * would kill transitions). The SLIDE-IN is done per child below so the content
 * slides into the space the panel just opened.
 */
.imea-ind__body {
	height: 100%;
	opacity: 0;
	visibility: hidden;
	transition: opacity .35s ease,
				visibility 0s linear .4s;
}

.imea-ind__panel.is-open .imea-ind__body {
	opacity: 1;
	visibility: visible;
	transition: opacity .3s ease,
				visibility 0s linear 0s;
}

/* No-JS fallback only. The JS strips [hidden] on init and drives the panel
   purely via .is-open, so with JS this rule never matches and the animation
   above runs in both directions. */
.imea-ind__body[hidden] { display: none; }

.imea-ind__body-inner {
	position: relative;
	height: 100%;
	/* padding: clamp(24px, 2.6vw, 40px); */
	display: block;
	min-width: 520px; /* stops text reflow while the panel animates open */
	border-radius: var(--Radius-radius-7, 20px);
	background: #0A1810;
}

/* ---- Slide-in reveal ----------------------------------------------------- */
/*
 * Each block starts shifted right + transparent and slides to its resting
 * place when the panel opens, staggered top-to-bottom. `both` fill mode holds
 * the from-state during the per-child delay (no flash) and the to-state after.
 * Re-triggers every time .is-open is added, so it plays on each expand.
 */
@keyframes imea-ind-slidein {
	from { opacity: 0; transform: translateX(36px); }
	to   { opacity: 1; transform: translateX(0); }
}

.imea-ind__body-inner > * {
	opacity: 0;
	will-change: transform, opacity;
}

.imea-ind__panel.is-open .imea-ind__body-inner > * {
	animation: imea-ind-slidein .55s cubic-bezier(.22, .61, .36, 1) both;
}

.imea-ind__panel.is-open .imea-ind__chip--head { animation-delay: .10s; }
.imea-ind__panel.is-open .imea-ind__body-head  { animation-delay: .20s; }
.imea-ind__panel.is-open .imea-ind__desc       { animation-delay: .30s; }
.imea-ind__panel.is-open .imea-ind__points     { animation-delay: .40s; }

.imea-ind__chip--head {
	position: static;
	transform: none;
	margin: 50px 40px 20px;
}

.imea-ind__body-head {position: relative;margin: 0px 0px 20px 40px;}

.imea-ind__name {
	margin: 0 0 8px;
	font-size: 38px;
	font-weight: 400;
	color: var(--primary-color, #21A55E);
	position: relative;
	z-index: 1;
}

.imea-ind__figure {
	position: absolute;
	top: -95px;
	right: 0;
	margin: 0;
	pointer-events: none;
}

.imea-ind__figure img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: contain;
}

.imea-ind__desc {
	max-width: 535px;
	margin-top: clamp(90px, 10vh, 200px); /* clears the floating illustration */
	color: #fff;
	font-size: 16px;
	line-height: normal;
	padding-left: 45px;
}

.imea-ind__desc p { margin: 0 0 1em; }
.imea-ind__desc p:last-child { margin-bottom: 0; }

.imea-ind__points {
	list-style: none;
	margin: 22px 0 0;
	padding: 0;
	max-width: 620px;
	display: grid;
	gap: 12px;
	padding-left: 45px;
}

.imea-ind__points li {
	position: relative;
	padding-left: 22px;
	color: #fff;
	line-height: normal;
}

.imea-ind__points li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: .55em;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--secondary-color, #CCFC00);
	box-shadow: 0 0 8px rgba(204, 252, 0, .55);
}

/* Screen-reader-only text on collapsed toggles */
.imea-ind__sr {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.imea-ind__toggle:focus-visible {
	outline: 2px solid var(--secondary-color, #CCFC00);
	outline-offset: -3px;
	border-radius: 22px;
}

/* =========================================================================
 * Component 21 — Industries We Serve · MOBILE RESPONSIVE
 * REPLACE the existing "@media (max-width: 991.98px)" block at the bottom of
 * IMEA/assets/css/industries-serve.css with everything below (keep the
 * prefers-reduced-motion block that follows it).
 *
 * The horizontal accordion becomes a VERTICAL stack:
 *   • collapsed panel = a full-width header bar (name on the left, icon chip
 *     on the right)
 *   • open panel      = the header bar is replaced by the full body card
 *     (icon, title, illustration, paragraph, bullets)
 * One-open-at-a-time is unchanged (driven by the existing JS / .is-open).
 * ========================================================================= */

@media (max-width: 991.98px) {

	.imea-ind {padding: clamp(36px, 8vw, 56px) 0;}

	.imea-ind__head { margin-bottom: clamp(20px, 5vw, 32px); }
	.imea-ind__title { font-size: clamp(1.5rem, 6vw, 2.1rem); }

	/* stack the track */
	.imea-ind__accordion {
		flex-direction: column;
		align-items: stretch;
		min-height: 0;
		gap: 12px;
	}

	/* every panel is full width; height driven by content */
	.imea-ind__panel {
		flex: 0 0 auto;
		width: 100%;
		min-width: 0;
		border-radius: 16px;
	}
	.imea-ind__panel:not(.is-open) { min-height: 64px; }
	.imea-ind__panel.is-open { background: none; } /* body-inner supplies the card bg */

	/* ---- Collapsed header bar (the toggle) ---- */
	.imea-ind__toggle {
		position: relative;      /* undo the desktop absolute-when-open rule */
		inset: auto;
		display: flex;
		align-items: center;
		gap: 14px;
		width: 100%;
		height: auto;
		min-height: 64px;
		padding: 0 16px;
		overflow: visible;
		opacity: 1;
		pointer-events: auto;
		border-radius: 16px;
	}

	/* name → horizontal, left-aligned, fills the row */
	.imea-ind__spine {
		position: static;
		inset: auto;
		flex: 1 1 auto;
		justify-content: flex-start;
		opacity: 1;
	}
	.imea-ind__spine-label {
		writing-mode: horizontal-tb;
		transform: none;
		font-size: 1.05rem;
		font-weight: 500;
		color: var(--text-light, #F4FAF6);
	}

	/* icon chip → static, right side, smaller */
	.imea-ind__toggle .imea-ind__chip {
		position: static;
		left: auto;
		bottom: auto;
		transform: none;
		margin-left: auto;
		flex: none;
		width: 40px;
		height: 40px;
	}
	.imea-ind__toggle .imea-ind__chip svg,
	.imea-ind__toggle .imea-ind__chip-img { width: 20px; height: 20px; }

	/* when open: drop the header bar entirely; the body carries its own
	   icon + name, so there is no duplication */
	.imea-ind__panel.is-open .imea-ind__toggle { display: none; }

	/* ---- Open body card ---- */
	.imea-ind__body { height: auto; }

	.imea-ind__body-inner {
		height: auto;
		min-width: 0;
		padding: 22px 18px 26px;
	}

	.imea-ind__chip--head { margin: 0 0 14px; }

	.imea-ind__body-head { margin: 0 0 14px; }
	.imea-ind__name { font-size: clamp(1.5rem, 6vw, 1.9rem); }

	/* illustration → static, below the name, full width */
	.imea-ind__figure {
		position: static;
		width: 100%;
		max-width: 320px;
		margin: 2px 0 18px;
	}

	/* copy → remove the desktop left indent + illustration clearance */
	.imea-ind__desc {
		margin-top: 0;
		padding-left: 0;
		max-width: none;
		font-size: 0.98rem;
	}
	.imea-ind__points {
		margin-top: 18px;
		padding-left: 0;
		max-width: none;
	}

	/* shorten the children slide-in travel on small screens */
	.imea-ind__panel.is-open .imea-ind__body-inner > * { animation-duration: .45s; }
}

/* ---- Tighter phone tier ------------------------------------------------- */
@media (max-width: 575.98px) {
	.imea-ind__toggle { min-height: 58px; padding: 0 14px; }
	.imea-ind__panel:not(.is-open) { min-height: 58px; }
	.imea-ind__spine-label { font-size: 1rem; }
	.imea-ind__toggle .imea-ind__chip { width: 36px; height: 36px; }
	.imea-ind__toggle .imea-ind__chip svg,
	.imea-ind__toggle .imea-ind__chip-img { width: 18px; height: 18px; }
	.imea-ind__body-inner { padding: 20px 16px 24px; }
	.imea-ind__figure { max-width: 100%; }
	.imea-ind__points li { padding-left: 20px; }
}

/* ---- Responsive: switch to a vertical (stacked) accordion --------------- */
@media (max-width: 991.98px) {
	.imea-ind__accordion {
		flex-direction: column;
		min-height: 0;
		gap: 12px;
	}
	.imea-ind__panel {
		flex: 0 0 auto;
		min-width: 0;
		width: 100%;
	}
	.imea-ind__panel:not(.is-open) {height: 74px;}
	.imea-ind__toggle { min-height: 74px; height: auto; }
	.imea-ind__spine {
		inset: 0;
		justify-content: flex-start;
		padding-left: 22px;
	}
	.imea-ind__spine-label {
		writing-mode: horizontal-tb;
		transform: none;
	}
	.imea-ind__chip {
		left: auto;
		right: 20px;
		bottom: 50%;
		transform: translateY(50%);
		width: 44px;
		height: 44px;
	}
	.imea-ind__chip svg, .imea-ind__chip-img { width: 22px; height: 22px; }
	.imea-ind__panel.is-open .imea-ind__toggle {
		position: static;
		width: 100%;
		height: auto;
		overflow: visible;
		min-height: 60px;
		pointer-events: auto;
		opacity: 1;
	}
	.imea-ind__panel.is-open .imea-ind__spine { opacity: 1; }
	.imea-ind__panel.is-open .imea-ind__toggle .imea-ind__chip { opacity: 1; }
	.imea-ind__body-inner {
		min-width: 0;
		padding: 20px;
	}
	.imea-ind__figure {
		position: static;
		width: 100%;
		max-width: 360px;
		margin: 0 0 16px;
	}
	.imea-ind__desc { margin-top: 4px; }
}

@media(max-width:768px){
	.imea-ind{
		background: var(--text-color);
	}
}

/* ---- Reduced motion ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
	.imea-ind__panel,
	.imea-ind__body,
	.imea-ind__toggle,
	.imea-ind__spine,
	.imea-ind__spine-label { transition: none; }

	/* no slide, no stagger — just show the content */
	.imea-ind__body-inner > * { opacity: 1; }
	.imea-ind__panel.is-open .imea-ind__body-inner > * { animation: none; }
}

@media(max-width:768px){
	.imea-ind__desc br {
	    display: none;
	}
	.imea-ind__figure{
	display: none;
	}
}