/* ==========================================================================
   Зелёное строительство — стили НОВЫХ блоков страницы
   Раздел: /strategiya-ustojchivogo-razvitiya/zelenoe-stroitelstvo/

   Блоки 2, 4, 5 используют существующие классы шаблона cementum_2024
   (b-top-energo, strateg-energo, bottom-energo) и стилизуются боевым CSS сайта.
   Здесь описаны только те стили, которых нет в шаблоне:
     — Блок 1 (вводный лид-текст)
     — Блок 3 (гексагон с ключевыми аргументами)
     — плейсхолдеры под фото клиента
   Все значения (шрифты, цвета #1c3564/#1d4370, отступы) согласованы
   с template CSS сайта.
   ========================================================================== */

/* --- Блок 1. Вводный текст --------------------------------------------- */
.green-lead{
	margin:58px 0 60px 0;
	position: relative;
	z-index: 50;
}
.green-lead:before{
	content:'';
	position:absolute;
	z-index:-1;
	top:-80px;             /* декор начинается чуть выше верха 4-го блока */
	right:-260px;          /* уходит вправо, за фото — не наезжает на текст */
	width:823px;
	height:969px;
	max-width:none;
	background:url(decor-energo.svg) no-repeat right top;
	background-size:contain;
	pointer-events:none;
}
.green-lead p{
	font-size:24px;
	line-height:35px;
	color:#333;
	margin:0 0 20px 0;
	padding:0;
}
.green-lead p:last-child{margin-bottom:0}

/* --- Блок 2. Фото слева, текст справа (меняем порядок колонок) --------- */
.b-top-energo{flex-direction:row-reverse;position: relative;z-index: 50;}
.b-top-energo__left{margin:0 0 0 70px}     /* было 0 70px 0 0 — переносим отступ на левую сторону */
@media screen and (max-width:1200px){
	.b-top-energo__left{margin-left:30px}
}
@media screen and (max-width:999px){
	.b-top-energo{flex-direction:column}   /* на мобильных — как было: фото сверху/текст снизу */
	.b-top-energo__left{margin:0 0 30px 0}
}

/* --- Блок 4. Декоративный фон-гексагон (как на «Экономике замкнутого цикла») --- */
.strateg-energo{position:relative;z-index:1;}

@media screen and (max-width:999px){
	.strateg-energo:before{display:none}
}

/* --- Блок 3. Ключевые аргументы (гексагон) ----------------------------- */
.b-hex-green{
	position:relative;
	margin:0 0 120px 0;
	position: relative;
	z-index: 50;
}
.b-hex-green h2{
	font-size:36px;
	line-height:43px;
	font-weight:600;
	color:#1c3564;
	margin:0 0 44px 0;
	padding:0;
}
/* 4 карточки с серым фоном, по 2 в ряд; внутри — заголовок, затем текст */
.hex-cards{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:20px;
}
.hex-card{
	background:#f4f4f4;
	border-radius:10px;
	padding:30px 34px;
}
.hex-card .hexrow__arg{margin-bottom:18px}
.hexrow__descr{padding-top:0}
.hexrow__descr p{
	font-size:18px;
	line-height:28px;
	color:#333;
	margin:0 0 16px 0;
	padding:0;
}
.hexrow__descr p:last-child{margin-bottom:0}
.hexrow__descr b{color:#1c3564}

/* Аргумент с гексагональным маркером */
.hexrow__arg{
	position:relative;
	padding:0 0 0 68px;
	min-height:48px;
}
.hex-args__ico{
	position:absolute;
	left:0;
	top:0;
	width:54px;
	height:48px;
	box-sizing:border-box;
	display:flex;
	align-items:center;
	justify-content:center;
	color:#fff;
	font-size:20px;
	font-weight:600;
	line-height:1;
	/* скруглённый гексагон (stroke-linejoin:round как у иконок ЦУР) */
	background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 88'><polygon points='30.93,10.43 69.07,10.43 88,44 69.07,77.57 30.93,77.57 12,44' fill='%231c3564' stroke='%231c3564' stroke-width='22' stroke-linejoin='round'/></svg>");
	background-repeat:no-repeat;
	background-position:center;
	background-size:contain;
}
.hex-args__t{
	font-size:20px;
	line-height:26px;
	font-weight:600;
	color:#1c3564;
	padding-top:9px;
}
.hex-args__t sup{font-size:.7em}
.hex-args__sub{
	list-style:none;
	margin:12px 0 0 0;
	padding:0;
}
.hex-args__sub li{
	position:relative;
	padding:0 0 0 22px;
	margin:0 0 8px 0;
	font-size:16px;
	line-height:23px;
	font-weight:400;
	color:#333;
}
.hex-args__sub li:last-child{margin-bottom:0}
.hex-args__sub li:before{
	content:'';
	position:absolute;
	left:0;
	top:8px;
	width:9px;
	height:8px;
	background:#2e6b4f;
	-webkit-clip-path:polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
	clip-path:polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
}

/* --- Блок 4. Заголовок + вводный абзац на всю ширину ------------------- */
.green-results__head{
	margin:0 0 40px 0;
}
.green-results__head h2{
	font-size:36px;
	line-height:43px;
	font-weight:600;
	color:#1c3564;
	margin:0 0 20px 0;
	padding:0;
}
.green-results__head p{
	font-size:24px;
	line-height:35px;
	color:#333;
	margin:0;
	padding:0;
}
@media screen and (max-width:767px){
	.green-results__head h2{font-size:28px;line-height:36px}
	.green-results__head p{font-size:18px;line-height:28px}
}

/* --- Плейсхолдеры под фото (предоставит клиент) ------------------------- */
.photo-placeholder{
	position:relative;
	width:100%;
	min-height:432px;
	background:#eef2f7;
	border:2px dashed #b9c6d8;
	border-radius:10px;
	display:flex;
	align-items:center;
	justify-content:center;
	text-align:center;
	padding:24px;
	box-sizing:border-box;
	color:#6a7f9c;
	font-size:16px;
	line-height:24px;
}
.photo-placeholder span{max-width:320px}

/* --- Блок 5. Иконки ЦУР: компактные, по центру, равная высота карточек --- */
.bottom-energo__body{align-items:stretch}       /* обе колонки одинаковой высоты */
.bottom-energo__item{display:flex;flex-direction:column}
.bottom-energo__descr{
	flex:1 1 auto;                              /* карточка тянется на всю высоту колонки */
	width:100%;
	min-height:0;
	display:flex;
	flex-direction:column;
}
.bottom-energo__icons{margin-top:10px;}
.bottom-energo__icons ul{
	justify-content:center;                     /* иконки по центру блока */
	margin:0;
}
.bottom-energo__icons li{max-width:179px;}           /* меньше исходных ~33% */


/* ======================================================================
   Адаптив
   ====================================================================== */
@media screen and (max-width:999px){
	.b-hex-green{margin-bottom:70px}
	/* карточки в одну колонку */
	.hex-cards{grid-template-columns:1fr}
	.hex-card{padding:26px}
}

@media screen and (max-width:767px){
	.green-lead{margin:30px 0 60px 0}
	.green-lead p{font-size:18px;line-height:28px}
	.b-hex-green h2{font-size:28px;line-height:36px;margin-bottom:30px}
	.hexrow__descr p{font-size:16px;line-height:25px}
	.photo-placeholder{min-height:260px}

	.hexrow__arg{padding-left:60px}
	.hex-args__ico{width:46px;height:41px;font-size:18px}
	.hex-args__t{font-size:18px;line-height:24px;padding-top:8px}
}

@media screen and (max-width: 500px) {
	.bottom-energo__icons li {width: 70px;}
}