/*
 * Ecosystem. Figma 1932:42219 desktop: 1440x517, rings centred 74px from the left
 * edge (disc 480 #f6f3fd, dashed rings 570..1200 every 90), dots 9px, bubbles 54px
 * (white, border rgba(216,216,216,.5), shadow 2/4/8 .05, icon 24 green), logo 120.
 * Content 480 wide at x 752, centred vertically: header/XL, 24 gap, cards 16 apart
 * (card/ecosystem: border light, r16, p20, icon 44 purple, body/S, textlink subtitle/L).
 * Mobile 1699:30596: same graph moved 150 left / 18 up, logo 64; content from y 364.
 * Desktop: the graph sits where the Figma frame edge would be (110px left of the 1220
 * column), so the disc and rings run off the left page edge as in Figma; below 1440 it
 * slides left only until the logo meets the gutter. The section clips at the page edge.
 * Mobile keeps the graph inside the gutters.
 */

.ecosystem {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 517px;
	overflow: hidden;
}

/* ---------- Graph (decoration): Figma frame edge = 110px left of the column ---------- */
.ecosystem__graph {
	position: absolute;
	top: 0;
	bottom: 0;
	left: max(var(--gutter) - 62px, (100% - var(--container)) / 2 - 110px);
	width: 700px;
	pointer-events: none;
}

/* Figma positions are from the frame edge (ring centre 74px in). */
.ecosystem__orbit {
	position: absolute;
	top: calc(50% - 258.5px);
	left: 0;
	width: 700px;
	height: 517px;
}

.ecosystem__disc,
.ecosystem__ring {
	position: absolute;
	left: calc(74px - var(--d) / 2);
	top: calc(258.5px - var(--d) / 2);
	width: var(--d);
	height: var(--d);
	border-radius: 50%;
}

.ecosystem__disc { --d: 480px; background: var(--c-bg-purple); }
.ecosystem__ring { border: 1px dashed var(--c-border-light); }

.ecosystem__dot {
	position: absolute;
	left: var(--x);
	top: var(--y);
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--c-border-light);
}

.ecosystem__bubble {
	--icon-size: 24px;
	position: absolute;
	left: calc(var(--x) - 27px);
	top: calc(var(--y) - 27px);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 54px;
	height: 54px;
	border: 1px solid rgba(216, 216, 216, .5);
	border-radius: 50%;
	background: var(--c-bg-white);
	box-shadow: 2px 4px 8px 0 rgba(0, 0, 0, .05);
	color: var(--c-secondary);
}

.ecosystem__logo {
	position: absolute;
	top: calc(50% - 85px);
	left: 62px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	width: 120px;
}

.ecosystem__logo-mark { width: 120px; height: 120px; }
.ecosystem__logo-name { width: 120px; height: auto; }

/* ---------- Content ---------- */
.ecosystem__inner { position: relative; z-index: 1; }

.ecosystem__content {
	display: flex;
	flex-direction: column;
	gap: 24px;
	width: 100%;
	max-width: 480px;
	margin-left: max(0px, calc(100% - 578px));
	padding-block: 24px;
}

.ecosystem__title { font: var(--f-header-xl); color: var(--c-text-dark); }

.ecosystem__cards {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.ecosystem__card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	padding: 19px;                      /* 20 minus the border */
	border: 1px solid var(--c-border-light);
	border-radius: var(--r-m);
	background: var(--c-bg-white);
}

.ecosystem__card-top { display: flex; flex-direction: column; gap: 10px; }
.ecosystem__icon { --icon-size: 44px; color: var(--c-primary); }
.ecosystem__text { font: var(--f-body-s); color: var(--c-text-dark); }
.ecosystem__link { font: var(--f-subtitle-l); }

@media (max-width: 1023px) {
	.ecosystem__content { margin-left: auto; }
}

/* ---------- Mobile ---------- */
@media (max-width: 767px) {
	.ecosystem {
		display: block;
		min-height: 0;
		padding-top: 364px;
	}

	.ecosystem__graph { left: var(--gutter); right: var(--gutter); bottom: auto; width: auto; height: 364px; overflow: hidden; }
	.ecosystem__orbit { top: 0; left: -64px; transform: translate(-170px, -18px); }

	.ecosystem__logo { top: 195px; left: 30px; gap: 8px; width: 64px; }
	.ecosystem__logo-mark { width: 64px; height: 64px; }
	.ecosystem__logo-name { width: 64px; }

	.ecosystem__content { max-width: none; margin-left: 0; padding-block: 0; }
	.ecosystem__title { font: var(--f-header-l); }
}