/* ==========================================================================
 * Component: 03 — Timeline / How It Works (.imea-timeline)
 * Final design: two right-aligned flex rows of equal-width cards; heading
 * fills the left of row 1; row-2 left indent falls out of flex-end.
 * Card 01 carries the accent. Dot-grid band + dashed crosshairs continue
 * into the case_log component below.
 * Colors preserved from the project color pass — do not restyle.
 * ========================================================================== */

.imea-timeline {
	position: relative;
	padding: 96px 0;
	color: var(--text-color);
	/* big-dot grid band, per final design */
	background: linear-gradient(0deg, rgba(0, 0, 0, 0.50) 0%, rgba(0, 0, 0, 0.50) 100%), linear-gradient(90deg, #07130F 37.98%, rgba(35, 94, 75, 0.60) 100%);
	background-color: var(--primary-color);
}
/* --- rows: right-aligned, equal 28.2% cards --------------------------------- */
.imea-timeline__row {
	position: relative;
	z-index: 1;
	display: flex;
	gap: 24px;
	justify-content: flex-end;
	flex-wrap: wrap;
}
.imea-timeline__row + .imea-timeline__row { margin-top: 24px; }
.imea-timeline__row .imea-timeline__card { flex: 0 0 28.2%; }

/* --- heading cell (row 1, fills remaining left space) ------------------------ */
.imea-timeline__hcell {
	flex: 1 1 0;
	align-self: center;
	margin-right: auto;
	padding-right: 4%;
	min-width: 300px;
}
.imea-timeline__eyebrow {
	margin: 0 0 14px;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--base-color);
}
.imea-timeline__title {
	margin: 0;
    font-size: 48px;
    line-height: 1.16;
    font-weight: 400;
    letter-spacing: -0.01em;
    background-image: linear-gradient(180deg, #FFFFFF 25%, #0C1711 343.26%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}
.imea-timeline__title span {color: var(--primary-color);}

/* --- step cards -------------------------------------------------------------- */
.imea-timeline__card {
	padding: 25px;
	transition: border-color 0.2s ease, transform 0.2s ease;
	border-radius: 20px;
	border: 1px solid rgba(255, 255, 255, 0.25);
	background: linear-gradient(180deg, rgba(33, 165, 94, 0.06) 0%, rgba(4, 26, 18, 0.20) 67.31%);
	/* height: 225px; */
}
.imea-timeline__card:hover {
	border-color: rgba(214, 255, 65, 0.35);
	transform: translateY(-2px);
}
.imea-timeline__card--accent {border-radius: 20px;border: 1px solid rgba(204, 252, 0, 0.66);background: linear-gradient(180deg, rgba(204, 252, 0, 0.10) 0%, rgba(4, 26, 18, 0.20) 51.44%);}
.imea-timeline__label {
	margin: 0 0 10px;
	font-size: 16px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--primary-color);
}
.imea-timeline__card-title {
	margin: 0px 0 10px;
	font-size: 20px;
	font-weight: 400;
	color: #fff;
}
.imea-timeline__card--accent .imea-timeline__card-title {color: var(--secondary-color);}
.imea-timeline__card-text {
	margin: 0;
	font-size: 24px;
	line-height: 1.55;
	color: #fff; /* muted body */
}

/* --- responsive ----------------------------------------------------------------- */
@media (max-width: 991.98px) {
	.imea-timeline__title {
	    font-size: 24px;
	}
	
	.imea-timeline__card-text {
	    font-size: 18px;
	    line-height: normal;
	}
	.imea-timeline { padding: 64px 0; }
	.imea-timeline::before,
	.imea-timeline::after { display: none; }
	.imea-timeline__row { justify-content: flex-start; }
	.imea-timeline__hcell {
		flex: 1 1 100%;
		padding-right: 0;
		margin-bottom: 8px;
	}
	.imea-timeline__row .imea-timeline__card { flex: 1 1 calc(50% - 12px); }
}
@media (max-width: 575.98px) {
	.imea-timeline__row .imea-timeline__card { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
	.imea-timeline__card { transition: none; }
}

/* ==========================================================================
 * STAIRCASE (layout-2, 3 cards) — scoped by the .imea-timeline__stair
 * wrapper and .imea-timeline__header, which exist ONLY in the staircase
 * markup, so no modifier class is required and the layout-1 rules above are
 * untouched. Bottoms align via Bootstrap's .align-items-lg-end in the
 * template; min-heights ascend left → right to force a clean staircase
 * regardless of how uneven the card copy is. The accent (lime) card is
 * driven by .imea-timeline__card--accent on the last step — NOT by an
 * nth-child rule — so it stays correct if the step count changes.
 *
 * Tuned for 3 steps (nth-child 1/2/3). If a page uses more steps, extend
 * the pattern with taller nth-child(4)/(5) values so the ascent continues.
 * ========================================================================== */
.imea-timeline__stair { position: relative; z-index: 1; }

.imea-timeline__header {
	max-width: 860px;
	margin-bottom: 56px;
}

@media (min-width: 992px) {
	.imea-timeline__stair > .col:nth-child(1) .imea-timeline__card { min-height: 240px; }
	.imea-timeline__stair > .col:nth-child(2) .imea-timeline__card { min-height: 280px; }
	.imea-timeline__stair > .col:nth-child(3) .imea-timeline__card { min-height: 320px; }
}

@media (max-width: 991.98px) {
	.imea-timeline__header { margin-bottom: 36px; }
}

/* ==========================================================================
 * LAYOUT 3 — CHECKLIST CARDS (.imea-timeline--layout-3)
 * Heading top-left; two staggered glass panels (What's Included / Outcomes)
 * with check-marked lists over an optional full-bleed background image
 * (--has-bg, wave render from ACF background_image). All rules scoped under
 * the modifier / --has-bg so layout-1 and the staircase are untouched.
 * Colors follow the project color pass above — no new custom properties.
 * ========================================================================== */

/* dynamic background image (inline style supplies the url) */
.imea-timeline--has-bg {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-color: #050705;
}
/* wave render replaces the dot-grid band — hide the crosshair pseudos */
.imea-timeline--has-bg::before,
.imea-timeline--has-bg::after { display: none; }

.imea-timeline--layout-3 {padding: 80px 0px 90px;background-image: url(https://stg-gruveai-staging.kinsta.cloud/in/wp-content/uploads/sites/3/2026/07/13-scaled.webp);background-size: 100% 100%;}

.imea-timeline--layout-3 .imea-timeline__header {
	max-width: 680px;
	margin-bottom: 48px;
}

/* staggered panel arrangement, per Figma: card 1 left under heading,
   card 2 right and lower */
.imea-timeline--layout-3 .imea-timeline__cards {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	column-gap: 65px;
	row-gap: 32px;
	align-items: start;
}

.imea-timeline--layout-3 .imea-timeline__panel {
	padding: 20px 25px;
	transition: border-color 0.2s ease;
	border-radius: 20px;
	border: 1px solid rgba(255, 255, 255, 0.14);
	background: linear-gradient(160deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.04) 100%);
	box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.14) inset, 0 40px 90px 0 rgba(0, 0, 0, 0.55);
	backdrop-filter: blur(7px);
}
.imea-timeline--layout-3 .imea-timeline__panel:hover {
	border-color: rgba(214, 255, 65, 0.35);
}
.imea-timeline--layout-3 .imea-timeline__panel:nth-child(2) {
	/* grid-column: 7 / span 6; */
	margin-top: 148px;
}
/* any extra panels flow onto new rows, half width */
.imea-timeline--layout-3 .imea-timeline__panel:nth-child(n+3) {
	grid-column: span 6;
	margin-top: 0;
}

.imea-timeline--layout-3 .imea-timeline__panel-eyebrow {
	margin: 0 0 12px;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--base-color);
}
.imea-timeline--layout-3 .imea-timeline__panel-title {
	margin: 0 0 16px;
	font-size: 30px;
	font-weight: 400;
	letter-spacing: -0.01em;
	color: #fff;
}

.imea-timeline--layout-3 .imea-timeline__checklist {
	margin: 0;
	padding: 0;
	list-style: none;
}
.imea-timeline--layout-3 .imea-timeline__checklist-item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 6px 0;
	font-size: 18px;
	line-height: 22px;
	color: #fff;
}
.imea-timeline--layout-3 .imea-timeline__check {
	flex: 0 0 auto;
	margin-top: 4px;
	color: var(--primary-color);
}

/* --- responsive ----------------------------------------------------------- */
@media (max-width: 991.98px) {
	.imea-timeline--layout-3 { padding: 64px 0 88px; }
	.imea-timeline--layout-3 .imea-timeline__header { margin-bottom: 36px; }
	.imea-timeline--layout-3 .imea-timeline__cards {
		grid-template-columns: 1fr;
		row-gap: 20px;
	}
	.imea-timeline--layout-3 .imea-timeline__panel,
	.imea-timeline--layout-3 .imea-timeline__panel:nth-child(2),
	.imea-timeline--layout-3 .imea-timeline__panel:nth-child(n+3) {
		grid-column: 1 / -1;
		margin-top: 0;
	}
}
@media (max-width: 575.98px) {
	.imea-timeline--layout-3 .imea-timeline__panel { padding: 22px 20px 26px; }
	.imea-timeline--layout-3 .imea-timeline__panel-title { font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) {
	.imea-timeline--layout-3 .imea-timeline__panel { transition: none; }
}