/**
 * Component 22 — Enterprise Scale Stats (Hexagon Cards, Staircase)
 * Block: .imea-ent   |   Handle: imea-enterprise-scale
 * Namespaced, additive, token-driven. CSS-only (no JS). No dependency on
 * other components.
 */

.imea-ent {
	position: relative;
	padding: clamp(48px, 7vw, 96px) 0;
	background: var(--bg-deep, #050807);
	color: var(--text-color, #E8F3EC);
	overflow: hidden;
}

/* Soft green glow, top-left, echoing the design. */
.imea-ent::before {
	content: "";
	position: absolute;
	top: -180px;
	left: 50%;
	width: 640px;
	height: 460px;
	transform: translateX(-70%);
	background: radial-gradient(circle, var(--green-glow, rgba(33, 165, 94, .40)) 0%, transparent 66%);
	opacity: .6;
	pointer-events: none;
	z-index: 0;
}

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

/* ---- Heading ------------------------------------------------------------- */
.imea-ent__head {
	text-align: center;
	margin: 0 auto clamp(32px, 4.5vw, 56px);
	max-width: 860px;
}

.imea-ent__eyebrow {
	margin: 0 0 14px;
	font-size: 16px;
	font-weight: 600;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--primary-color, #21A55E);
}

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

.imea-ent__accent { color: var(--primary-color, #21A55E); }

/* ---- Card grid (descending staircase) ------------------------------------ */
/*
 * Cards keep equal size but each is nudged down by its 1-based index, so the
 * row reads as stairs descending to the right (leftmost highest). --imea-ent-i
 * is set per card in PHP; --imea-ent-step controls the drop per step.
 * align-items:start lets the offsets show instead of being stretched away.
 */
.imea-ent__grid {
	display: grid;
	grid-template-columns: repeat(var(--imea-ent-count, 4), 1fr);
	/* gap: clamp(14px, 1.6vw, 22px); */
	align-items: start;
	--imea-ent-step: clamp(26px, 3.2vw, 48px);
}

article.imea-ent__card:first-child {
    height: 485px;
}

article.imea-ent__card:nth-child(2) {
    height: 436px;
}

article.imea-ent__card:nth-child(3) {
    height: 387px;
}

article.imea-ent__card:nth-child(4) {
    height: 338px;
}

/* ---- Card ---------------------------------------------------------------- */
.imea-ent__card {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: 230px;
	padding: 26px 24px;
	border-radius: 18px;
	background:
		radial-gradient(120% 90% at 20% 0%, rgba(33, 165, 94, .18) 0%, transparent 55%),
		linear-gradient(160deg, rgba(20, 53, 42, .55) 0%, rgba(10, 24, 16, .70) 100%);
	border: 1px solid rgba(115, 215, 143, .20);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03);
	/* staircase offset: 0 for the first card, growing by one step each card */
	margin-top: calc((var(--imea-ent-i, 1) - 1) * var(--imea-ent-step, 40px));
	transition: border-color .3s ease, transform .3s ease, box-shadow .3s ease;
	/* CSS-only staggered entrance */
	opacity: 0;
	transform: translateY(18px);
	animation: imea-ent-rise .6s cubic-bezier(.22, .61, .36, 1) both;
	animation-delay: calc((var(--imea-ent-i, 1) - 1) * .09s);
}

.imea-ent__card:hover {
	border-color: rgba(115, 215, 143, .45);
	transform: translateY(-4px);
	box-shadow: 0 18px 40px rgba(0, 0, 0, .35), 0 0 30px rgba(33, 165, 94, .12);
}

@keyframes imea-ent-rise {
	to { opacity: 1; transform: translateY(0); }
}

/* ---- Hexagon icon -------------------------------------------------------- */
.imea-ent__hex {
	/* position: relative; */
	/* width: 60px; */
	/* height: 66px; */
	/* place-items: center; */
}

.imea-ent__hex::before,
.imea-ent__hex::after {
	/* content: ""; */
	/* position: absolute; */
	/* inset: 0; */
	/* clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); */
}

/* outer = green/lime border ring */
.imea-ent__hex::before {
	/* background: linear-gradient(150deg, var(--secondary-color, #CCFC00) 0%, var(--primary-color, #21A55E) 90%); */
	/* opacity: .85; */
	/* filter: drop-shadow(0 0 12px rgba(33, 165, 94, .45)); */
}

/* inner = dark fill, inset by 2px to reveal the ring */
.imea-ent__hex::after {
	/* inset: 2px; */
	/* background: radial-gradient(circle at 50% 30%, #0F3223 0%, #081410 100%); */
}

.imea-ent__glyph {
	/* position: relative; */
	/* z-index: 1; */
	/* display: inline-flex; */
	/* align-items: center; */
	/* justify-content: center; */
	/* width: 30px; */
	/* height: 30px; */
	/* color: var(--secondary-color, #CCFC00); */
	margin-bottom: 40px;
	display: inline-block;
}

.imea-ent__glyph svg { width: 28px; height: 28px; display: block; }
.imea-ent__glyph-img {/* width: 30px; *//* height: 30px; */object-fit: contain;display: block;}

/* ---- Stat text (pinned to the lower half, like the design) --------------- */
.imea-ent__meta { margin-top: auto; }

.imea-ent__label {
	margin: 0 0 6px;
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--primary-color, #21A55E);
}

.imea-ent__value {
	font-size: 60px;
	line-height: 1;
	font-weight: 400;
	color: var(--primary-color);
	margin-bottom: 35px;
}

.imea-ent__cap {
	margin: 0;
	font-size: 18p;
	line-height: normal;
	color: var(--text-muted, #93A79B);
}

/* ---- Responsive ---------------------------------------------------------- */
/* Two columns: keep a gentle staircase within each pair. */
@media (max-width: 991.98px) {
	.imea-ent__grid {
		grid-template-columns: repeat(2, 1fr);
		--imea-ent-step: 22px;
	}
}

/* Single column: stack flat, no staircase. */
@media (max-width: 575.98px) {
	.imea-ent__grid {
		grid-template-columns: 1fr;
		--imea-ent-step: 0px;
	}
	.imea-ent__card {
		min-height: 0;
		margin-top: 0;
	}
}

@media(max-width:768px){
	.imea-ent__title {
	    font-size: 28px;
	}
	.imea-ent__card{
		height: 100% !important;
	}
	.imea-ent__grid{
		gap:20px;
	}
	.imea-ent__value{
		font-size: 34px;
	}
}

/* ---- Reduced motion ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
	.imea-ent__card {
		opacity: 1;
		transform: none;
		animation: none;
		transition: none;
	}
}