/*
 * Оформление в стиле UI-кита Silicon поверх шаблона enzolab_v2.
 * Подключается в header.php последним, после объединённого CSS Битрикса.
 * Откат — убрать <link> на этот файл в header.php.
 */
:root {
	--el-font: "Manrope", "Montserrat", -apple-system, "Segoe UI", sans-serif;
	--el-primary: #755686;
	--el-primary-hover: #5f4570;
	--el-primary-soft: rgba(117, 86, 134, .1);
	--el-accent: #ffb22e;
	--el-heading: #0b0f19;
	--el-text: #565973;
	--el-nav: #33354d;
	--el-muted: #9397ad;
	--el-border: #e2e5f1;
	--el-border-strong: #d4d7e5;
	--el-bg-soft: #f3f6ff;
	--el-dark: #0b0f19;
	--el-radius: 8px;
	--el-radius-sm: 6px;
	--el-shadow: 0 .275rem .75rem -.0625rem rgba(11, 15, 25, .06), 0 .125rem .4rem -.0625rem rgba(11, 15, 25, .03);
	--el-shadow-lg: 0 .3rem 1.525rem -.375rem rgba(11, 15, 25, .1), 0 .25rem .8125rem -.125rem rgba(11, 15, 25, .06);
}

/* ---------- Типографика ---------- */
body {
	font-family: var(--el-font);
	font-size: 16px;
	line-height: 1.6;
	color: var(--el-text);
	background: #fff;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4 {
	font-family: var(--el-font);
	font-weight: 800;
	color: var(--el-heading);
	line-height: 1.3;
}

h1, .h1 { font-size: 2.0625rem; }
h2, .h2 { font-size: 1.75rem; }
h3, .h3 { font-size: 1.375rem; }
h4, .h4 { font-size: 1.125rem; }

a {
	color: var(--el-primary);
	text-decoration: none;
	transition: color .2s ease-in-out;
}

a:hover, a:focus {
	color: var(--el-primary-hover);
}

p { margin-bottom: 1.25rem; }

::selection { background: var(--el-primary-soft); }

/* ---------- Кнопки ---------- */
.btn {
	font-weight: 600;
	font-size: .875rem;
	border-radius: var(--el-radius-sm);
	padding: .625rem 1.75rem;
	transition: all .2s ease-in-out;
}

.btn-primary, .btn-primary:focus {
	background: var(--el-primary);
	border-color: var(--el-primary);
	color: #fff;
	box-shadow: 0 .5rem 1.125rem -.5rem rgba(117, 86, 134, .9);
}

.btn-primary:hover, .btn-primary:active {
	background: var(--el-primary-hover);
	border-color: var(--el-primary-hover);
	color: #fff;
}

.btn-default, .btn-secondary {
	background: #fff;
	border: 1px solid var(--el-border-strong);
	color: var(--el-nav);
}

.btn-default:hover, .btn-secondary:hover {
	border-color: var(--el-primary);
	color: var(--el-primary);
	background: #fff;
}

/* ---------- Шапка ---------- */
#tophead {
	position: sticky;
	top: 0;
	z-index: 1030;
	background: #fff;
	border-bottom: 0;
	box-shadow: var(--el-shadow);
	padding: .5rem 0;
}

#tophead #logo img {
	max-height: 36px;
	width: auto;
}

#topnav .nav > li > a,
#topnav .nav-pills > li > a {
	font-weight: 600;
	font-size: 1rem;
	color: var(--el-nav);
	padding: .5rem .875rem;
	background: none;
}

#topnav .nav > li > a:hover,
#topnav .nav > li.active > a,
#topnav .nav > li > a.selected {
	color: var(--el-primary);
	background: none;
}

#topnav .dropdown-menu {
	border: 0;
	border-radius: var(--el-radius);
	box-shadow: var(--el-shadow-lg);
	padding: .5rem 0;
	min-width: 15rem;
}

#topnav .dropdown-menu a {
	display: block;
	padding: .375rem 1.25rem;
	font-size: .875rem;
	font-weight: 500;
	color: var(--el-nav);
}

#topnav .dropdown-menu a:hover {
	color: var(--el-primary);
	background: transparent;
}

/* ---------- Хлебные крошки и заголовок страницы ---------- */
.gray-area-top {
	background: transparent;
	padding: 2.5rem 0 0;
}

.bx-breadcrumb {
	margin: 0;
	font-size: .875rem;
	font-weight: 600;
}

.bx-breadcrumb .bx-breadcrumb-item,
.bx-breadcrumb .bx-breadcrumb-item span {
	font-size: .875rem;
	color: var(--el-text);
	line-height: 1.6;
}

.bx-breadcrumb .bx-breadcrumb-item a,
.bx-breadcrumb .bx-breadcrumb-item a span {
	color: var(--el-nav);
}

.bx-breadcrumb .bx-breadcrumb-item a:hover span {
	color: var(--el-primary);
}

.bx-breadcrumb i {
	color: var(--el-muted);
}

.title {
	padding-top: 1rem;
}

.title h1 {
	font-size: 2.5rem;
	font-weight: 800;
	color: var(--el-heading);
	margin-bottom: 1.5rem;
	padding-bottom: 0;
}

/* ---------- Боковая колонка — карточка как в Silicon ---------- */
.border-start.ps-lg-5 {
	border-left: 0 !important;
	padding-left: 0 !important;
}

.vertcal_menu {
	border: 1px solid var(--el-border);
	border-radius: var(--el-radius);
	padding: 1.5rem;
	background: #fff;
	margin-bottom: 1.5rem;
}

.vertcal_menu:empty,
.vertcal_menu:not(:has(li)) { display: none; }

.vertcal_menu > ul::before {
	content: "Разделы";
	display: block;
	font-size: 1.125rem;
	font-weight: 800;
	color: var(--el-heading);
	margin-bottom: .75rem;
}

.vertcal_menu ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.vertcal_menu li {
	margin: 0;
}

.vertcal_menu a,
.vertcal_menu a:hover {
	display: block;
	padding: .375rem 0;
	font-size: .875rem;
	font-weight: 500;
	line-height: 1.5;
	color: var(--el-nav);
	border: 0;
	background: none;
}

.vertcal_menu a:hover {
	color: var(--el-primary);
}

.vertcal_menu .selected {
	padding: .375rem 0;
	font-size: .875rem;
	font-weight: 700;
	color: var(--el-primary);
	background: none;
	border: 0;
}

/* ---------- Список статей блога — карточки ---------- */
.blog .news-item {
	position: relative;
	padding: 1.5rem;
	margin-bottom: 1.5rem;
	border: 1px solid var(--el-border);
	border-radius: var(--el-radius);
	background: #fff;
	font-size: 1rem;
	line-height: 1.6;
	transition: box-shadow .2s ease-in-out, border-color .2s ease-in-out;
}

.blog .news-item:hover {
	border-color: transparent;
	box-shadow: var(--el-shadow-lg);
}

.blog .news-item:after { display: none; }

.blog .post-meta {
	display: block;
	margin: 0 0 .5rem;
	padding: 0;
	border: 0;
}

.blog .post-date,
.news-detail .post-date {
	display: inline-block;
	margin: 0;
	padding: 0;
	border: 0;
	font-size: .875rem;
	font-weight: 500;
	letter-spacing: normal;
	text-transform: none;
	color: var(--el-muted);
}

.blog .news-item h2 {
	font-size: 1.375rem;
	font-weight: 800;
	line-height: 1.4;
	margin: 0 0 .75rem;
}

.blog .news-item h2 a {
	color: var(--el-heading);
}

.blog .news-item h2 a:hover {
	color: var(--el-primary);
}

.blog .news-item p:last-child { margin-bottom: 0; }

.blog .promo-pic img {
	border-radius: var(--el-radius-sm);
	max-width: 100%;
	height: auto;
	margin-bottom: 1rem;
}

/* ---------- Кейсы (news.list/portfolio) — под токены Silicon ---------- */
.portfolio-cards {
	--pc-accent: var(--el-primary);
	--pc-accent-soft: var(--el-primary-soft);
	--pc-hover: var(--el-primary-hover);
	--pc-border: var(--el-border);
	--pc-muted: var(--el-muted);
}

.portfolio-card { border-radius: var(--el-radius); }
.portfolio-card:hover { box-shadow: var(--el-shadow-lg); }
.portfolio-card__pic { background: var(--el-bg-soft); border-radius: var(--el-radius-sm); }
.portfolio-card__title { font-weight: 800; }
.portfolio-card__title a { color: var(--el-heading); }
.portfolio-card__text { color: var(--el-text); }
.portfolio-card__stack li { border-color: var(--el-border-strong); color: var(--el-nav); font-weight: 600; }

/* Детальная страница кейса и статьи */
.news-detail-portfolio .detail_picture,
.news-detail-portfolio .detail_picture img {
	border-bottom: 0;
	border-radius: var(--el-radius);
}

/* Таймлайн, паспорт и стек кейса — news.detail/portfolio/style.css */

/* ---------- Главная ---------- */
/* Слайдер на тёмном фото — заголовки остаются белыми */
.carouselHome h1, .carouselHome h2, .carouselHome h3,
.carouselHome .h1, .carouselHome .h2, .carouselHome .h3,
.carouselHome a {
	color: #fff;
}

.gray-area,
.enzolab-bg-gray {
	background: var(--el-bg-soft);
}

.main-services__title {
	font-weight: 800;
	color: var(--el-heading);
}

.service-item {
	border: 1px solid var(--el-border);
	border-radius: var(--el-radius);
	background: #fff;
	box-shadow: none;
	color: var(--el-text);
}

.service-item:hover {
	background: #fff;
	border-color: transparent;
	box-shadow: var(--el-shadow-lg);
	color: var(--el-text);
	transform: translateY(-.25rem);
}

.service-item:hover .services-list__title,
.service-item:hover .services-list__text {
	color: inherit;
}

.services-list__title {
	font-size: 1.125rem;
	font-weight: 800;
	color: var(--el-heading);
}

.services-list__text {
	font-size: .875rem;
	color: var(--el-text);
}

.main-projects-item .item a.link span {
	border-bottom: 0;
	font-weight: 700;
	color: var(--el-heading);
}

.main-projects-item .item img,
.main-projects-item .preview_picture {
	border-radius: var(--el-radius);
}

.review-item {
	border: 1px solid var(--el-border);
	border-radius: var(--el-radius);
	padding: 1.5rem;
	background: #fff;
}

.more-button {
	color: var(--el-primary);
	font-weight: 600;
}

/* ---------- Подвал — тёмный, как в Silicon ---------- */
#footer {
	margin-top: 6rem;
	padding: 3rem 0 2rem;
	background: var(--el-dark);
	color: var(--el-muted);
	font-size: .875rem;
}

#footer a {
	color: #fff;
	font-weight: 600;
	text-decoration: none;
}

#footer a:hover {
	color: var(--el-accent);
}

/* ---------- Пагинация Битрикса ---------- */
.modern-page-navigation a,
.modern-page-navigation .modern-page-current,
.bx-pagination .bx-pagination-container ul li span {
	display: inline-block;
	min-width: 2.5rem;
	padding: .375rem .75rem;
	margin: 0 .125rem;
	border-radius: 50%;
	font-weight: 600;
	text-align: center;
	color: var(--el-nav);
}

.modern-page-navigation .modern-page-current {
	background: var(--el-primary);
	color: #fff;
}

/* ---------- Формы ---------- */
.form-control {
	border-color: var(--el-border-strong);
	border-radius: var(--el-radius-sm);
	color: var(--el-heading);
}

.form-control:focus {
	border-color: var(--el-primary);
	box-shadow: 0 0 0 .2rem var(--el-primary-soft);
}

.news-detail .post-meta {
	margin: 0 0 1rem;
}

/* ---------- Мобильная версия ---------- */
@media (max-width: 991.98px) {
	.title h1 { font-size: 2rem; }
	.vertcal_menu { margin-top: 2rem; }
}

/* Мобильное меню (mmenu) в стиле сайта */
.mm-menu {
	font-family: var(--el-font);
	background: #fff;
	color: var(--el-nav);
}

.mm-menu .mm-listview > li > a,
.mm-menu .mm-listview > li > span {
	padding: .875rem 1.25rem;
	font-size: 1rem;
	font-weight: 600;
	color: var(--el-nav);
}

.mm-menu .mm-listview > li > a:hover,
.mm-menu .mm-listview > li.selected > a {
	color: var(--el-primary);
}

.mm-menu .mm-listview > li:not(.mm-divider):after,
.mm-menu .mm-listview {
	border-color: var(--el-border);
}

.mm-menu .mm-navbar a,
.mm-menu .mm-navbar > * {
	font-weight: 700;
	color: var(--el-heading);
}

/* Бургер (виден только на мобильных, класс d-md-none) */
.el-burger {
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0 .625rem;
	border: 1px solid var(--el-border);
	border-radius: var(--el-radius-sm);
	background: #fff;
}

.el-burger span {
	display: block;
	height: 2px;
	border-radius: 2px;
	background: var(--el-heading);
	transition: background .2s ease-in-out;
}

.el-burger:hover span { background: var(--el-primary); }

@media (max-width: 767.98px) {
	/* меню — в бургере (mmenu), в шапке только логотип и кнопки */
	#topnav { display: none !important; }

	#tophead .container > .d-flex {
		align-items: center;
		justify-content: space-between;
	}

	#tophead #logo {
		padding: .75rem 0;
		transform: none;
	}

	#tophead #logo img { max-height: 30px; }

	#tophead .tel {
		padding-top: 0;
		line-height: 1;
	}

	#tophead .tel .fa-2x { font-size: 1.75em; }

	.gray-area-top { padding-top: 1.5rem; }
	.title h1 { font-size: 1.75rem; }
	.blog .news-item { padding: 1.25rem; }
	.blog .news-item h2 { font-size: 1.25rem; }
	.carouselHome .h1, .carouselHome h1 { font-size: 2.25rem; overflow-wrap: anywhere; }
}