/* GG How It Works ---------------------------------------------------------- */
.gg-how-it-works {
	font-family: var(--gg-font-sans, 'Poppins', sans-serif);
	text-align: center;
}

.gg-how-it-works__eyebrow {
	display: block;
	letter-spacing: 2px;
	font-size: 12px;
	font-weight: 600;
	color: #F0705C;
	margin-bottom: 22px;
}

/* Flex row (not CSS grid) so the dashed divider elements can sit interspersed between
   steps in the DOM while each step and each divider still get correct, independent sizing.
   flex-direction is itself a responsive Elementor control (Style → Layout), defaulting to
   row on desktop/tablet and column on mobile, so the 3 STEPS stack vertically on phones —
   this is separate from each individual step's OWN internal layout below. */
.gg-how-it-works__steps {
	display: flex;
	align-items: stretch;
	flex-direction: row;
}

/* Each individual step: Number | (Title above Description) | Icon/Image, always as one row
   on every device — this never changes, only the sizing does (via the responsive Icon Size,
   Gap, and Padding controls, plus each text element's own responsive typography). Using
   flex-wrap: nowrap explicitly (rather than the default) guarantees these three pieces can
   never break onto separate lines regardless of how narrow the screen gets; text and numbers
   shrink to fit instead via min-width:0 + the responsive font sizes. */
.gg-how-it-works__step {
	position: relative;
	flex: 1 1 0;
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 14px;
	text-align: left;
	padding: 0 24px;
	min-width: 0;
	overflow: visible;
}

.gg-how-it-works__number {
	flex: 0 0 auto;
	line-height: 0.8;
}

.gg-how-it-works__text {
	flex: 1 1 auto;
	min-width: 0;
}

.gg-how-it-works__title {
	margin: 0 0 4px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.gg-how-it-works__desc {
	margin: 0;
	line-height: 1.4;
}

.gg-how-it-works__icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.gg-how-it-works__icon .gg-icon-svg {
	width: 56px;
	height: 56px;
}

.gg-how-it-works__image {
	display: block;
	width: 70px;
	height: auto;
	object-fit: contain;
	flex: 0 0 auto;
}

/* The final step's palm illustration is taller than the row and allowed to sit slightly
   higher without affecting row height, matching the reference where the palm tree
   visually extends past the section's top edge. */
.gg-how-it-works__step--palm .gg-how-it-works__icon .gg-icon-svg {
	width: 100px;
	height: 150px;
}

.gg-how-it-works__step--palm .gg-how-it-works__icon {
	position: relative;
	top: -10px;
}

.gg-how-it-works__sep {
	flex: 0 0 auto;
	align-self: stretch;
	width: 0;
	border-left: 1px dashed #e3ddd0;
	margin: 4px 0;
}

@media (max-width: 900px) {
	.gg-how-it-works__sep { display: none; }
}

@media (max-width: 480px) {
	/* The final step's palm illustration shrinks in step with the general Icon Size control
	   at mobile, keeping proportions sane on very narrow phones — admin can still override
	   via the responsive Icon Size slider (Style tab → mobile device icon). */
	.gg-how-it-works__step--palm .gg-icon-svg {
		width: 60px;
		height: 90px;
	}
	.gg-how-it-works__step--palm .gg-how-it-works__icon {
		top: -4px;
	}
}