/*
 * Ecology. Figma 2917:71283 desktop: #035a37 box 1220x511, radius 20, padding 84/100,
 * text column 530 (header 453), photo 466x343 radius 20 on the right.
 * 2917:71536 mobile: full-bleed band, padding 84/20, photo (538:396) then text.
 */

.ecology {
	--ecology-bg: #035a37;               /* Figma fill, no token */
}

.ecology__box {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
	padding: 84px 100px;
	border-radius: var(--r-l);
	background: var(--ecology-bg);
	color: var(--c-text-white);
}

.ecology__text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
	flex: 0 1 530px;
	min-width: 0;
}

.ecology__figure {
	display: flex;
	align-items: flex-end;
	gap: 9px;
	font: 800 100px/126px var(--font);
	white-space: nowrap;
}

.ecology__trees {
	--icon-size: 44px;
	display: flex;
	padding-bottom: 23px;
	color: var(--c-secondary);
}

.ecology__trees .icon + .icon { margin-left: -10px; }

.ecology__stat { margin-bottom: 8px; }

.ecology__label {
	display: flex;
	align-items: center;
	gap: 6px;
	font: var(--f-subtitle-xxl);
}

.ecology__label::before {
	content: "";
	flex: none;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--c-secondary);
}

.ecology__head { max-width: 453px; }
.ecology__head .section-head__title { font: var(--f-header-l); color: var(--c-text-white); }
.ecology__head .section-head__text { font: var(--f-body-s); color: var(--c-text-white); }

.ecology__partner {
	display: flex;
	align-items: center;
	gap: 11px;
	font: var(--f-body-xs);
}

.ecology__partner-logo { width: auto; height: 44px; }

.ecology__media {
	flex: 0 1 466px;
	min-width: 0;
	aspect-ratio: 466 / 343;
	border-radius: var(--r-l);
	overflow: hidden;
}

@media (max-width: 1100px) and (min-width: 768px) {
	.ecology__box { padding: 64px 48px; }
	.ecology__figure { font-size: 72px; line-height: 90px; }
	.ecology__trees { --icon-size: 36px; padding-bottom: 16px; }
}

@media (max-width: 767px) {
	.ecology .container { padding-inline: 0; }

	.ecology__box {
		flex-direction: column;
		align-items: stretch;
		gap: 16px;
		padding: 84px var(--gutter);
		border-radius: 0;
	}

	.ecology__media {
		order: -1;
		flex: none;
		aspect-ratio: 538 / 396;
	}

	.ecology__text { flex: none; gap: 24px; }
	.ecology__stat { margin-bottom: 0; }

	.ecology__figure { gap: 7px; font: var(--f-header-2xl); }
	.ecology__trees { --icon-size: 32px; padding-bottom: 15px; }
	.ecology__trees .icon + .icon { margin-left: -5px; }
	.ecology__label { font: var(--f-subtitle-l); }
	.ecology__head { max-width: 334px; }
}