/*
Theme Name: Сервис Групп
Theme URI: https://groups-service.ru/
Author: Service Group
Description: Тема-клон сайта (Сервис Групп). Услуги редактируются через CPT + SCF, глобальные данные — в «Настройки сайта».
Version: 0.15.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: servicegroup
*/

/* Статичный (вшитый) фид «Наши работы»: прячем прелоадер/служебку Tilda-feed,
   т.к. feed-JS отключён и иначе они резервируют пустую высоту. */
.js-feed-preloader,
.t-feed__post-preloader__container {
	display: none !important;
}

/* Редактируемый логотип: оригинальный слот Tilda был под квадратную эмблему,
   широкий горизонтальный лого в нём выглядит крошечным. Задаём высоту,
   ширина — по пропорции, и снимаем обрезку у контейнеров зеро-блока. */
.sg-logo {
	width: auto !important;
	height: 46px !important;
	max-width: none !important;
}
.tn-atom:has(> .sg-logo),
.tn-elem:has(.sg-logo) {
	overflow: visible !important;
}
/* В футере лого чуть меньше */
#allrecords .t-footer .sg-logo,
[id^="rec8205320"] .sg-logo {
	height: 40px !important;
}

/* ===== Услуги: разделы и карточки (CPT) ===== */
.sg-uslugi {
	max-width: 1200px;
	margin: 0 auto;
	padding: 46px 20px 72px;
	font-family: 'TildaSans', 'Montserrat', Arial, sans-serif;
	color: #090b1a;
	box-sizing: border-box;
}
.sg-uslugi * { box-sizing: border-box; }
.sg-crumbs { font-size: 14px; color: #8a9296; margin-bottom: 18px; }
.sg-crumbs a { color: #8a9296 !important; text-decoration: none; }
.sg-crumbs a:hover { color: #0077b6; }
.sg-uslugi h1 { font-size: 40px; line-height: 1.15; font-weight: 700; margin: 0 0 18px; }
.sg-intro { font-size: 18px; line-height: 1.55; color: #3a4145; max-width: 820px; margin: 0 0 34px; }
.sg-intro p { margin: 0 0 12px; }

/* сетка карточек */
.sg-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.sg-card {
	display: flex; flex-direction: column;
	background: #fff; border-radius: 18px; overflow: hidden;
	box-shadow: 0 6px 26px rgba(20, 40, 60, .08);
	color: #090b1a;
}
.sg-card__img {
	aspect-ratio: 3 / 2; background: #e9eef2 center/cover no-repeat;
	display: flex; align-items: center; justify-content: center;
}
.sg-card__img-ph { width: 56px; height: 56px; opacity: .3; }
.sg-card__body { padding: 22px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.sg-card__title { font-size: 21px; font-weight: 600; line-height: 1.25; margin: 0 0 10px; color: #090b1a; }
.sg-card__text { font-size: 15px; line-height: 1.5; color: #5a6266; margin: 0 0 18px; }
.sg-card__text p { margin: 0 0 8px; }
.sg-card__actions { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.sg-card__btn {
	background: #0077b6 !important; color: #fff !important; text-decoration: none;
	border-radius: 28px; padding: 11px 22px; font-weight: 600; font-size: 14px; transition: background .2s;
}
.sg-card__btn:hover { background: #005f93 !important; }
.sg-card__more { color: #0077b6 !important; font-weight: 600; font-size: 14px; text-decoration: none; }
.sg-card__more:hover { text-decoration: underline; }

/* контент раздела без карточек / детальная карточки */
.sg-detail__lead { font-size: 18px; line-height: 1.6; color: #3a4145; max-width: 860px; margin: 0 0 28px; }
.sg-detail__list-title { font-size: 24px; font-weight: 600; margin: 0 0 16px; }
.sg-detail__list { list-style: none; padding: 0; margin: 0 0 28px; max-width: 720px; }
.sg-detail__list li {
	position: relative; padding: 12px 0 12px 38px; font-size: 17px; line-height: 1.4;
	border-bottom: 1px solid #eef1f3;
}
.sg-detail__list li::before {
	content: ''; position: absolute; left: 4px; top: 14px; width: 18px; height: 18px;
	background: #0077b6; border-radius: 50%;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E") center/14px no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E") center/14px no-repeat;
}
.sg-detail__closing { font-size: 18px; line-height: 1.6; color: #090b1a; font-weight: 500; max-width: 820px; margin: 0 0 32px; }
.sg-detail__closing p { margin: 0 0 8px; }
.sg-detail__img { max-width: 560px; width: 100%; border-radius: 18px; margin: 0 0 30px; }

.sg-btn {
	display: inline-block; background: #0077b6 !important; color: #fff !important; text-decoration: none;
	font-weight: 600; font-size: 16px; padding: 15px 34px; border-radius: 32px;
	transition: background .2s ease;
}
.sg-btn:hover { background: #005f93; }

@media (max-width: 960px) { .sg-cards { grid-template-columns: repeat(2, 1fr); } .sg-uslugi h1 { font-size: 32px; } }
@media (max-width: 620px) { .sg-cards { grid-template-columns: 1fr; } .sg-uslugi { padding: 32px 16px 54px; } .sg-uslugi h1 { font-size: 27px; } }

/* Секция услуг на главной (динамическая из CPT) */
.sg-home-uslugi__uptitle { color: #0077b6; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; font-size: 13px; margin-bottom: 14px; }
.sg-home-uslugi__title { font-size: 38px; font-weight: 700; line-height: 1.15; margin: 0 0 16px; color: #090b1a; }
.sg-home-uslugi__title span { color: #8a9296; font-weight: 600; }
.sg-home-uslugi .sg-intro { margin-bottom: 40px; }
@media (max-width: 620px) { .sg-home-uslugi__title { font-size: 27px; } }

/* Галерея услуг на главной — динамические карточки из CPT razdel.
   Ряды по 3 карточки; вытянутая карточка чередуется: нечётный ряд — первая,
   чётный — последняя (классы .is-wide-first / .is-wide-last на ряду, .is-wide на карточке). */
.sg-uslugi-gallery { background: #f8f8fa; padding: 45px 0 90px; }
.sg-uslugi-gallery__inner { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.sg-uslugi-row { display: flex; gap: 20px; }
.sg-uslugi-row + .sg-uslugi-row { margin-top: 20px; }
.sg-uslugi-card {
	position: relative; box-sizing: border-box;
	display: flex; align-items: flex-end; justify-content: space-between;
	gap: 12px; flex: 1 1 0; min-width: 0; height: 360px;
	padding: 24px; border-radius: 15px; overflow: hidden;
	background: #222222 center center / cover no-repeat;
	text-decoration: none;
}
.sg-uslugi-card.is-wide { flex-grow: 1.4; }
/* Одинокая карточка в неполном последнем ряду — по ширине вытянутой, без растяжки на всю строку. */
.sg-uslugi-card:only-child { max-width: 480px; }
.sg-uslugi-card::before {
	content: ""; position: absolute; inset: 0; z-index: 0;
	background: linear-gradient(180deg, rgba(0,0,0,.12) 35%, rgba(0,0,0,.55) 100%);
	transition: background .25s ease;
}
.sg-uslugi-card:hover::before { background: linear-gradient(180deg, rgba(0,0,0,.22) 35%, rgba(0,0,0,.66) 100%); }
.sg-uslugi-card__title {
	position: relative; z-index: 1;
	color: #fff; font-size: 24px; font-weight: 500; line-height: 1.1; letter-spacing: -.6px;
}
.sg-uslugi-card__arrow { position: relative; z-index: 1; flex: 0 0 auto; width: 20px; height: 20px; }
@media (max-width: 960px) {
	.sg-uslugi-row { flex-wrap: wrap; }
	.sg-uslugi-card { flex: 1 1 calc(50% - 10px); }
	.sg-uslugi-card.is-wide { flex-grow: 1; }
}
@media (max-width: 640px) {
	.sg-uslugi-gallery { padding: 30px 0 50px; }
	.sg-uslugi-card { flex-basis: 100%; height: 240px; }
	.sg-uslugi-card:only-child { max-width: none; }
	.sg-uslugi-card__title { font-size: 20px; letter-spacing: -.5px; }
}

/* Старые услуги боевого, для которых нет раздела — скрыть в меню-баре и футере */
.t396__elem:has(.tn-atom[href="/alyuminievye-konstrukcii"]),
.t396__elem:has(.tn-atom[href="/zhalyuzi"]),
.t-menusub__list-item:has(a[href="/alyuminievye-konstrukcii"]),
.t-menusub__list-item:has(a[href="/zhalyuzi"]) { display: none !important; }

/* Бар услуг под шапкой — динамический, пункты равномерно по ширине */
.sg-uslugibar { background: #fff; border-bottom: 1px solid #eef0f2; margin-bottom: 22px; }
.sg-uslugibar__inner {
	max-width: 1200px; margin: 0 auto;
	display: flex; flex-wrap: wrap; align-items: center;
	gap: 8px 16px;
	padding: 14px 20px 16px;
}
.sg-uslugibar__link {
	flex: 1 1 0; text-align: center; min-width: max-content;
	color: #090b1a !important; text-decoration: none; font-size: 15px; white-space: nowrap;
	font-family: 'TildaSans', 'Montserrat', Arial, sans-serif; transition: color .15s;
}
.sg-uslugibar__link:hover { color: #0077b6; }

#sg-zayavka{display:block;height:0;scroll-margin-top:90px;}
html{scroll-behavior:smooth;}

/* Галерея «Наши работы» */
.sg-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.sg-gallery__item { aspect-ratio: 4 / 3; background: #e9eef2 center/cover no-repeat; border-radius: 14px; }
@media (max-width: 960px) { .sg-gallery { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .sg-gallery { grid-template-columns: 1fr; } }

/* Статический слайдер галереи (О компании) — кроссфейд без зависимости от Tilda-JS */
.tn-atom__gallery .sg-slider { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 20px; overflow: hidden; }
.sg-slider__slide { position: absolute; inset: 0; background: center/cover no-repeat; opacity: 0; animation: sgFade 15s infinite; }
.sg-slider__slide:nth-child(1) { animation-delay: 0s; }
.sg-slider__slide:nth-child(2) { animation-delay: 5s; }
.sg-slider__slide:nth-child(3) { animation-delay: 10s; }
@keyframes sgFade { 0% { opacity: 0; } 4% { opacity: 1; } 30% { opacity: 1; } 34% { opacity: 0; } 100% { opacity: 0; } }

/* Фикс обрезки текста пунктов меню/кнопок — ТОЛЬКО в шапке и футере
   (там пункты раскрываются вправо в пустоту, без наложения на соседей). */
#rec849990197 .tn-atom__button-text, #rec861273674 .tn-atom__button-text,
#rec829009158 .tn-atom__button-text, #rec820532040 .tn-atom__button-text,
#rec849990197 .t396__elem > a.tn-atom, #rec861273674 .t396__elem > a.tn-atom,
#rec820532040 .t396__elem > a.tn-atom { white-space: nowrap !important; }
#rec849990197 .tn-atom__button-content, #rec861273674 .tn-atom__button-content,
#rec829009158 .tn-atom__button-content, #rec820532040 .tn-atom__button-content,
#rec849990197 .t396__elem:has(> a.tn-atom), #rec861273674 .t396__elem:has(> a.tn-atom),
#rec820532040 .t396__elem:has(> a.tn-atom) { overflow: visible !important; }

/* Оригинальные крошки Tilda сломаны (всё на left=20, ширина 10px) — скрываем их
   целиком (в первом блоке страниц это элементы с fontsize=12) + плавающую «‹». */
#rec820771653 .t396__elem[data-field-fontsize-value="12"],
#rec820814950 .t396__elem[data-field-fontsize-value="12"],
#rec822805145 .t396__elem[data-field-fontsize-value="12"],
#rec820770396 .t396__elem[data-field-fontsize-value="12"],
#rec843702444 .t396__elem[data-field-fontsize-value="12"],
.t396__elem:has(> a.tn-atom[href*="history.back"]) { display: none !important; }

/* Самописный компонент хлебных крошек (вместо сломанных Tilda) */
.sg-pagecrumbs { max-width: 1200px; margin: 0 auto; padding: 22px 20px 4px; font-size: 14px; color: #8a9296; font-family: 'TildaSans', 'Montserrat', Arial, sans-serif; }
.sg-pagecrumbs a { color: #8a9296 !important; text-decoration: none; }
.sg-pagecrumbs a:hover { color: #0077b6 !important; }
.sg-pagecrumbs span { color: #090b1a; }

/* Шапка: пункты-кнопки меню с жёсткой узкой шириной (дефект исходника, напр. «Контакты» = 42px)
   расширяем под их текст; снимаем overflow:hidden у самой кнопки (был из-за border-radius). */
#rec849990197 .t396__elem[data-elem-type="button"]:has(> a.tn-atom[href^="/"]),
#rec861273674 .t396__elem[data-elem-type="button"]:has(> a.tn-atom[href^="/"]) {
	width: auto !important; min-width: max-content !important; overflow: visible !important;
}
#rec849990197 .t396__elem[data-elem-type="button"] .tn-atom,
#rec861273674 .t396__elem[data-elem-type="button"] .tn-atom { overflow: visible !important; }

/* Главная: оригинальные карточки услуг — без ссылок, прячем стрелки-ссылки */
#rec813901937 .t396__elem:has(img[data-original*="arrow-top-right"]),
#rec813901937 .t396__elem:has(img[src*="arrow-top-right"]) { display: none !important; }
#rec813901937 a.tn-atom, #rec813901937 .tn-atom[href] { cursor: default !important; }

/* Футер: кредит разработчика — блок стоит на БЕЛОМ фоне артборда (rec820532040),
   поэтому текст тёмный; ссылка seo-groups.ru — фирменный синий с аккуратным подчёркиванием. */
#rec820532040 .tn-elem[data-elem-id="1770736857107"],
#rec820532040 .tn-elem[data-elem-id="1770736857107"] .tn-atom {
	color: #3b2d47 !important; font-size: 24px !important; font-weight: 500; line-height: 1.4;
}
/* Tilda задаёт жёсткую ширину 429px => при крупном кегле текст переносится; растягиваем под контент */
#rec820532040 .tn-elem[data-elem-id="1770736857107"] {
	width: max-content !important; max-width: calc(100% - 40px);
}
/* Мобильные: max-content + левый Tilda-отступ вылезали за экран («SEO» обрезалось).
   Прижимаем к полям 20px, уменьшаем кегль, текст по центру (на ПК — как было, слева). */
@media screen and (max-width: 959px) {
	#rec820532040 .tn-elem[data-elem-id="1770736857107"] {
		left: 20px !important; width: calc(100% - 40px) !important; max-width: none;
		text-align: center;
	}
	#rec820532040 .tn-elem[data-elem-id="1770736857107"],
	#rec820532040 .tn-elem[data-elem-id="1770736857107"] .tn-atom { font-size: 18px !important; }
}
#rec820532040 .tn-elem[data-elem-id="1770736857107"] a {
	color: #0077b6 !important; font-weight: 600; text-decoration: none; border-bottom: 0;
	transition: color .2s ease;
}
#rec820532040 .tn-elem[data-elem-id="1770736857107"] a:hover {
	color: #005a8c !important;
}

/* Соцсети: если в «Настройках сайта» вместо ссылки стоит "#" (или поле пусто —
   фоллбек в шаблонах тоже "#"), иконка на сайте не отрисовывается. */
.t396__elem:has(a.tn-atom[href="#"]) { display: none !important; }

/* Контакты: карта (rec820809429) — t-margin_auto из Tilda-grid не отрабатывает,
   контейнер прижимался влево; центрируем и даём воздух перед футером. */
#rec820809429 .t-width {
	width: auto !important; max-width: 1160px; margin-left: auto !important; margin-right: auto !important;
}
#rec820809429 .t117_map { margin-bottom: 45px; }

/* Контакты: email-кнопка — реальный адрес длиннее донорского, не влезал
   в фиксированную Tilda-ширину (111px) и обрезался. */
#rec822804666 .tn-elem[data-elem-id="1730713190186"],
#rec822804666 .tn-elem[data-elem-id="1730713190186"] .tn-atom {
	width: max-content !important;
}

/* ===== Футер: динамическая колонка «Каталог» (из CPT razdel, как бар в шапке) =====
   Заменяет вшитые кнопки Tilda. Это обычный flow-блок, позиционируем сами:
   на ПК — в колонке артборда rec820532040, на телефоне — по центру стопкой. */
#rec820532040 .sg-footer-catalog {
	position: absolute; z-index: 5; top: 0; left: calc(50% - 600px + 320px);
	width: 260px; display: flex; flex-direction: column; gap: 10px;
	font-family: 'TildaSans', 'Montserrat', Arial, sans-serif;
}
#rec820532040 .sg-footer-catalog__title {
	color: #cccccc; font-size: 14px; font-weight: 700; line-height: 1.55;
	letter-spacing: -0.4px; text-transform: uppercase;
}
#rec820532040 .sg-footer-catalog__link {
	color: #3b2d47; font-size: 14px; font-weight: 500; line-height: 1.55;
	letter-spacing: -0.3px; text-decoration: none; transition: color .2s ease;
}
#rec820532040 .sg-footer-catalog__link:hover { color: #0077b6; }
@media screen and (max-width: 1199px) {
	#rec820532040 .sg-footer-catalog { left: calc(50% - 480px + 250px); width: 230px; }
}
@media screen and (max-width: 959px) {
	#rec820532040 .sg-footer-catalog {
		top: 275px; left: 0; right: 0; width: 100%;
		align-items: center; text-align: center; gap: 8px;
	}
}

/* ===== Футер на телефоне: центрируем всё (Tilda оставляет колонки слева) =====
   Текст и кнопки артборда rec820532040 — на всю ширину по центру.
   Соцсети (img) не трогаем: они уже стоят центрированным рядом. */
@media screen and (max-width: 639px) {
	#rec820532040 .t396__elem[data-elem-type="text"],
	#rec820532040 .t396__elem[data-elem-type="button"] {
		left: 0 !important; right: 0 !important; width: 100% !important;
		text-align: center !important;
	}
	#rec820532040 .t396__elem[data-elem-type="text"] .tn-atom,
	#rec820532040 .t396__elem[data-elem-type="button"] .tn-atom {
		text-align: center !important;
		margin-left: auto !important; margin-right: auto !important;
		justify-content: center !important;
	}
}

/* ===== Футер: динамический ряд соцсетей (из «Настроек сайта», как в шапке) =====
   Заменяет разбросанные Tilda-иконки. Выводятся только заданные сети.
   На ПК — справа в контактной колонке, на телефоне — по центру. */
#rec820532040 .sg-footer-social {
	position: absolute; z-index: 5; top: 252px; left: calc(50% - 600px + 1035px);
	display: flex; align-items: center; gap: 20px;
}
#rec820532040 .sg-footer-social__link { display: inline-flex; line-height: 0; }
#rec820532040 .sg-footer-social__link img {
	width: 20px; height: 20px; display: block; transition: opacity .2s ease;
}
#rec820532040 .sg-footer-social__link:hover img { opacity: .7; }
@media screen and (max-width: 1199px) {
	#rec820532040 .sg-footer-social { left: calc(50% - 480px + 805px); }
}
@media screen and (max-width: 959px) {
	#rec820532040 .sg-footer-social {
		top: 101px; left: 0; right: 0; width: 100%; justify-content: center;
	}
	/* Логотип из админки — по центру на планшете/телефоне */
	#rec820532040 .tn-elem[data-elem-id="1730823156257"] {
		left: 50% !important; right: auto !important;
		transform: translateX(-50%) !important;
	}
}