/* === ЭТАП 2 ===
   Стили для page-how.php («Как мы работаем»)
   Переиспользует токены/классы из page-flexible-content.css
   (.stl2-hero, .stl2-h2, .stl2-container и т.д. — оба файла подключены вместе)
*/

.stl2-how-hero { padding-bottom: 48px; }
.stl2-how-hero__decor { position: absolute; right: 0; top: 0; bottom: 0; left: calc(50% + 60px); z-index: 1; pointer-events: none; overflow: hidden; }

.stl2-how-page-bg { background: #fff; }

.stl2-how-grid {
	max-width: 1140px; margin: 0 auto; padding: 0 20px;
	display: grid; grid-template-columns: 240px 1fr; gap: 40px;
}

.stl2-how-sidecol { padding-top: 56px; }
.stl2-how-sidenav { position: sticky; top: 220px; }
.stl2-how-sidelink {
	display: flex; align-items: center; gap: 10px;
	padding: 10px 0 10px 14px; font-size: 13px; font-weight: 600;
	color: var(--stl2-text-muted); text-decoration: none;
	font-family: Montserrat, sans-serif; border-left: 2px solid transparent;
}
.stl2-how-sidenum {
	width: 22px; height: 22px; border-radius: 50%; background: #F0F0F0; color: #888;
	display: flex; align-items: center; justify-content: center;
	font-size: 11px; font-weight: 700; flex-shrink: 0;
}
.stl2-how-sidelink.active { color: var(--stl2-dark); border-left-color: var(--stl2-brand); }
.stl2-how-sidelink.active .stl2-how-sidenum { background: var(--stl2-brand); color: #fff; }

.stl2-how-step { padding: 56px 0; scroll-margin-top: 160px; background: #fff; }
.stl2-how-step:nth-child(even) { background: var(--stl2-gray-bg); }
.stl2-how-step__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.stl2-how-step__text { font-size: 15px; color: #444; line-height: 1.7; font-family: Montserrat, sans-serif; }
.stl2-how-step__text strong, .stl2-how-step__text b { font-weight: 700 !important; }
.stl2-how-step__visual img { width: 100%; height: 240px; object-fit: cover; border-radius: 14px; }

.stl2-how-pq { margin-top: 24px; background: #fff; border: 1px solid var(--stl2-border); border-radius: 12px; padding: 20px; }
.stl2-how-pq__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: center; }
.stl2-how-pq__person { display: flex; align-items: center; gap: 14px; }
.stl2-how-pq__avatar-img { width: 100px; height: 100px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.stl2-how-pq__name { display: block; font-size: 14px; font-weight: 700; font-family: Montserrat, sans-serif; margin-bottom: 2px; }
.stl2-how-pq__position { font-size: 12px; color: var(--stl2-text-muted); font-family: Montserrat, sans-serif; display: block; margin-bottom: 6px; }
.stl2-how-pq__contacts { display: flex; gap: 6px; }
.stl2-how-pq__contacts a {
	width: 24px; height: 24px; background: var(--stl2-gray-bg); border-radius: 5px;
	display: flex; align-items: center; justify-content: center; color: #666; font-size: 11px; text-decoration: none;
}
.stl2-how-pq__quote {
	border-left: 3px solid var(--stl2-brand); padding: 14px 16px;
	background: var(--stl2-gray-bg); border-radius: 0 8px 8px 0;
	font-size: 15px; color: var(--stl2-text-muted); font-weight: 500; line-height: 1.5;
	font-family: Montserrat, sans-serif;
}

@media (max-width: 900px) {
	.stl2-how-sidecol { display: none; }
	.stl2-how-grid { grid-template-columns: 1fr; }
	.stl2-how-step__grid { grid-template-columns: 1fr; }
	.stl2-how-pq__grid { grid-template-columns: 1fr; gap: 16px; }
}