/* Каталог типовых решений над футером лендинга.
   Перенесён из devline-pages (css/shell.css). Отдельным файлом, потому что
   mainV2.css — минифицированный бандл без исходника.
   Цвета берутся из переменных лендинга, чтобы не разъезжаться с остальной страницей. */

.solutions-footer {
	padding: 64px 0 28px;
	color: var(--white);
	background: var(--black);
	font-family: var(--font-family, "IBM Plex Sans", sans-serif);
}

.solutions-footer * {
	box-sizing: border-box;
}

.solutions-footer .container {
	height: auto;
}

.solutions-footer__header {
	display: grid;
	grid-template-columns: minmax(240px, 0.75fr) minmax(0, 1.45fr);
	gap: 72px;
	padding-bottom: 36px;
	border-bottom: 1px solid #3a3a3a;
}

.solutions-footer__title {
	margin: 0;
	color: var(--white);
	font-size: clamp(28px, 3vw, 42px);
	line-height: 1.08;
	font-weight: 500;
	text-transform: uppercase;
}

.solutions-footer__title::before {
	content: "RTSP /";
	display: block;
	margin-bottom: 18px;
	color: var(--accent);
	font-size: 12px;
	font-weight: 700;
}

.solutions-footer__intro {
	max-width: 720px;
	margin: 0;
	align-self: end;
	color: var(--gray-dark);
	font-size: 17px;
	line-height: 1.6;
}

.solutions-footer__groups {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 36px;
	padding: 42px 0 48px;
}

.solutions-footer__group-title {
	margin: 0 0 18px;
	color: var(--gray-dark);
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
}

.solutions-footer__links {
	display: grid;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.solutions-footer__links li {
	margin: 0;
}

.solutions-footer__faq {
	display: grid;
	grid-template-columns: minmax(240px, 0.75fr) minmax(0, 1.45fr);
	gap: 72px;
	padding: 32px 0;
	border-top: 1px solid #3a3a3a;
}

.solutions-footer__faq .solutions-footer__group-title {
	margin: 4px 0 0;
}

.solutions-footer__link {
	display: inline-flex;
	align-items: baseline;
	gap: 9px;
	width: fit-content;
	color: var(--white);
	font-size: 16px;
	line-height: 1.35;
	text-decoration: none;
}

.solutions-footer__link::before {
	content: "↗";
	color: var(--accent);
	font-size: 13px;
}

.solutions-footer__link:hover,
.solutions-footer__link:focus-visible {
	color: var(--accent);
	text-decoration: underline;
	text-underline-offset: 4px;
}

@media (max-width: 900px) {
	.solutions-footer__header,
	.solutions-footer__faq {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.solutions-footer__groups {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 640px) {
	.solutions-footer {
		padding: 48px 0 24px;
	}

	.solutions-footer__groups {
		grid-template-columns: 1fr;
		gap: 36px;
	}
}