/**
 * Кластер «Проектирование слаботочных сетей» — ThemeVSS.
 *
 * Стили хаба и дочерних страниц услуг. Подключается только на страницах
 * кластера (см. themevss_design_services_scripts).
 */

.design-services {
	--ds-primary: #10244a;
	--ds-primary-mid: #1a305a;
	--ds-primary-light: #2a4a7a;
	--ds-accent: #8c0e10;
	--ds-accent-hover: #e69c31;
	--ds-text: #212529;
	--ds-text-muted: #606a78;
	--ds-bg-gray: #f5f7fa;
	--ds-border: #e3e6ea;
	--ds-radius: 8px;
	--ds-shadow: 0 4px 24px rgba(16, 36, 74, 0.08);
	--ds-shadow-hover: 0 12px 32px rgba(16, 36, 74, 0.14);
	--ds-container: 1140px;
	--ds-font: GolosUI, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--ds-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

.design-services__hero {
	background: var(--ds-bg-gray);
	padding: 32px 0 24px;
}

.design-services__breadcrumbs {
	margin: 0 0 12px;
	font-size: 13px;
}

.design-services__breadcrumbs a {
	color: var(--ds-text-muted);
}

.design-services__title {
	margin: 0;
	font-size: clamp(24px, 3.2vw, 40px);
	line-height: 1.2;
	color: var(--ds-primary);
}

.design-services__content {
	padding: 32px 0;
}

.design-services__body {
	max-width: 900px;
}

.design-services__body h2 {
	margin: 32px 0 12px;
	font-size: clamp(20px, 2.2vw, 28px);
	line-height: 1.25;
	color: var(--ds-primary);
}

.design-services__body h3 {
	margin: 24px 0 10px;
	font-size: 20px;
	color: var(--ds-primary-mid);
}

.design-services__body p {
	margin: 0 0 16px;
	line-height: 1.7;
}

.design-services__body ul,
.design-services__body ol {
	margin: 0 0 20px;
	padding-left: 24px;
	line-height: 1.7;
}

.design-services__body li {
	margin: 0 0 8px;
}

/* --- Общие блоки контента (хаб + услуги) --- */

.lead-answer {
	border-left: 4px solid var(--ds-accent-hover, #e69c31);
	background: var(--ds-bg-gray, #f5f7fa);
	padding: 16px 20px;
	margin: 0 0 24px;
	font-size: 17px;
	line-height: 1.7;
	border-radius: 0 8px 8px 0;
}

.design-services__cover {
	margin: 0 0 24px;
	border-radius: 8px;
	overflow: hidden;
}

.design-services__cover img,
.page-cover.design-services__cover img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 8px;
}

.design-services__inline {
	margin: 8px 0 28px;
}

.design-services__inline img {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid var(--ds-border, #e3e6ea);
	border-radius: 8px;
}

.design-services__inline figcaption {
	margin: 8px 0 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--ds-text-muted, #606a78);
}

.design-services__table {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 24px;
	font-size: 15px;
}

.design-services__table th,
.design-services__table td {
	border: 1px solid var(--ds-border, #e3e6ea);
	padding: 10px 12px;
	text-align: left;
	vertical-align: top;
}

.design-services__table thead th {
	background: var(--ds-primary, #10244a);
	color: #fff;
	font-weight: 600;
}

.design-services__table tbody tr:nth-child(even) {
	background: var(--ds-bg-gray, #f5f7fa);
}

.design-services__faq {
	margin: 0 0 24px;
}

.design-services__faq-q {
	margin: 20px 0 6px;
	color: var(--ds-primary, #10244a);
}

.design-services__faq-a {
	margin: 0 0 16px;
	color: var(--ds-text-muted, #606a78);
}

.design-services__links {
	margin: 0 0 24px;
	padding-left: 24px;
}

.design-services__links a {
	color: var(--ds-primary-light, #2a4a7a);
}

.design-services__cta {
	background: var(--ds-primary, #10244a);
	color: #fff;
	border-radius: 8px;
	padding: 20px 24px;
	margin: 24px 0;
}

.design-services__cta p {
	margin: 0;
	color: #fff;
}

.design-services__cta a {
	color: var(--ds-accent-hover, #e69c31);
	font-weight: 600;
}

/* --- Хаб: сетка направлений --- */

.design-services__grid-section {
	padding: 8px 0 32px;
}

.design-services__grid-title {
	margin: 0 0 20px;
	font-size: clamp(20px, 2.2vw, 28px);
	color: var(--ds-primary);
}

.design-services__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 16px;
}

.design-services__card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--ds-border);
	border-radius: 8px;
	padding: 20px;
	text-decoration: none;
	color: var(--ds-text);
	box-shadow: var(--ds-shadow);
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.design-services__card:hover,
.design-services__card:focus {
	box-shadow: var(--ds-shadow-hover);
	transform: translateY(-2px);
	color: var(--ds-text);
}

.design-services__card-title {
	margin: 0 0 8px;
	font-size: 18px;
	color: var(--ds-primary);
}

.design-services__card-text {
	margin: 0 0 12px;
	font-size: 14px;
	line-height: 1.6;
	color: var(--ds-text-muted);
	flex: 1 1 auto;
}

.design-services__card-more {
	font-weight: 600;
	color: var(--ds-accent);
}

.design-services__faq-section {
	padding: 8px 0 24px;
}

.design-services__cta-section {
	padding: 0 0 40px;
}

@media (max-width: 720px) {
	.design-services__table {
		display: block;
		overflow-x: auto;
		white-space: nowrap;
	}
}

/* --- Хаб /services/ --- */

.page-services__intro {
	max-width: 900px;
	margin: 0 0 24px;
	font-size: 16px;
	line-height: 1.7;
}

.page-services__design {
	padding: 8px 0 40px;
	background: var(--ds-bg-gray, #f5f7fa);
}

.page-services__design-more a {
	font-weight: 600;
	color: var(--ds-primary, #10244a);
}