/* --- БАЗОВЫЕ НАСТРОЙКИ (РАБОТАЮТ ВЕЗДЕ) --- */
/* 1. РОДИТЕЛЬ (ГРУППА) */
.service-card {
    cursor: pointer;
    position: relative;
    z-index: 20; 
    /* Разрешаем клик по группе */
    pointer-events: auto !important;
    /* Убираем синюю подсветку при нажатии на Android/iOS */
    -webkit-tap-highlight-color: transparent;
}

/* 2. ИГНОР КУРСОРА ВНУТРИ (Чтобы клик проходил сквозь тексты) */
.service-card .tn-atom {
    pointer-events: none; 
}

/* 3. КАРТИНКА (База) */
.service-img {
    overflow: hidden !important; 
    border-radius: 2px;
}
.service-img .tn-atom {
    width: 100% !important; 
    display: block !important;
    /* Ускоряем рендеринг на мобильных */
    will-change: transform; 
}

/* 4. ССЫЛКА И ТЕКСТЫ (База) */
.service-link .tn-atom {
    text-decoration: none !important;
    border: none !important;
}


/* --- МАГИЯ ТОЛЬКО ДЛЯ КОМПЬЮТЕРА (Desktop) --- */
/* Этот код сработает только если ширина экрана больше 992px */
@media screen and (min-width: 992px) {

    /* Включаем плавность только на ПК */
    .service-card {
        transition: transform 0.4s ease !important;
        transform-style: preserve-3d;
    }
    .service-img .tn-atom {
        transition: transform 0.8s ease !important;
    }
    .service-title .tn-atom,
    .service-link .tn-atom {
        transition: color 0.3s ease !important;
    }

    /* --- ХОВЕРЫ (Срабатывают только на ПК) --- */
    
    /* 1. Подъем карточки */
    .service-card:hover {
        transform: translateY(-10px) !important;
        z-index: 50;
    }

    /* 2. Зум картинки */
    .service-card:hover .service-img .tn-atom {
        transform: scale(1.1) !important;
    }

    /* 3. Цвет заголовка */
    .service-card:hover .service-title .tn-atom {
        color: #ff5e14 !important;
    }

    /* 4. Цвет ссылки */
    .service-card:hover .service-link .tn-atom {
        color: #ff5e14 !important;
    }
}



/* --- ОБЩИЕ НАСТРОЙКИ КАРТОЧКИ --- */
.feature-card {
    transition: all 0.3s ease !important;
    cursor: default;
    border-radius: 2px;
}

/* Эффект при наведении на ВСЮ ГРУППУ */
.feature-card:hover {
    transform: translateY(-5px) !important; /* Легкий подъем */
    box-shadow: 0 10px 30px rgba(255, 94, 20, 0.15) !important; /* Тень */
}


/* --- 1. ЛОГИКА ДЛЯ ФОНА (SHAPE) --- */
/* Этот код найдет ТОЛЬКО прямоугольник-подложку */
.feature-card [data-elem-type="shape"] .tn-atom {
    transition: border-color 0.3s ease !important;
    border-style: solid !important;
    border-width: 1px !important;
    box-sizing: border-box !important;
    /* Убедись, что изначально у шейпа в настройках стоит серая обводка #E2E8F0 */
}

/* При наведении красим рамку ФОНА в оранжевый */
.feature-card:hover [data-elem-type="shape"] .tn-atom {
    border-color: #ff5e14 !important;
}


/* --- 2. ЛОГИКА ДЛЯ ИКОНКИ (VECTOR) --- */
/* Этот код найдет ТОЛЬКО векторную иконку */
.feature-card [data-elem-type="vector"] .tn-atom {
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important; /* Пружинистый эффект */
    /* Если вдруг у вектора была рамка - убираем её */
    border: none !important; 
}

/* При наведении зумим ВЕКТОР */
.feature-card:hover [data-elem-type="vector"] .tn-atom {
    transform: scale(1.15) !important; /* Увеличение на 15% */
}

/* --- (Опционально) Если хочешь красить вектор в оранжевый --- */
/* Раскомментируй строки ниже, если вектор черный и ты хочешь его красить */
/*
.feature-card:hover [data-elem-type="vector"] svg path {
    fill: #ff5e14 !important;
    stroke: #ff5e14 !important;
    transition: all 0.3s ease;
}
*/


/* --- 1. ОБЩАЯ КАРТОЧКА --- */
.work-card {
    cursor: pointer;
    /* Включаем GPU для всей карточки заранее */
    transform: translateZ(0);
    -webkit-tap-highlight-color: transparent; 
}

/* --- 2. КАРТИНКА (БЕЗ ИЗМЕНЕНИЙ) --- */
.work-img {
    clip-path: inset(0px round 2px); 
    -webkit-clip-path: inset(0px round 2px);
    -webkit-mask-image: -webkit-radial-gradient(white, black);
    z-index: 1; 
}

.work-img .tn-atom {
    transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    width: 100% !important;
    display: block !important;
    will-change: transform; 
}

.work-card:hover .work-img .tn-atom {
    transform: scale(1.1) !important;
}


/* --- 3. ОВЕРЛЕЙ (ЗАТЕМНЕНИЕ) --- */
.work-overlay {
    transition: opacity 0.5s ease !important;
    opacity: 0 !important;
    z-index: 10; 
    pointer-events: none;
    
    clip-path: inset(0px round 2px);
    -webkit-clip-path: inset(0px round 2px);
}

.work-card:hover .work-overlay {
    opacity: 1 !important;
}

/* --- 4. КНОПКА ВНУТРИ (ЛЕЧЕНИЕ ДРОЖАНИЯ) --- */
.work-overlay .tn-atom {
    /* Плавность */
    transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
    
    /* Начальное положение: Сдвиг вниз + ПРИНУДИТЕЛЬНЫЙ GPU (translateZ) */
    transform: translateY(15px) translateZ(0) !important;
    
    /* Фиксы для шрифта, чтобы не менял толщину */
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    
    /* Фиксы против мерцания */
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
    will-change: transform; /* Говорим браузеру готовиться заранее */
}

/* Состояние при наведении */
.work-card:hover .work-overlay .tn-atom {
    /* Возвращаем на место, сохраняя GPU режим */
    transform: translateY(0) translateZ(0) !important;
}


/* --- 5. ЗАГОЛОВОК --- */
.work-title .tn-atom {
    transition: color 0.3s ease !important;
    /* Тоже фиксим рендеринг шрифта на всякий случай */
    -webkit-font-smoothing: subpixel-antialiased !important;
}
.work-card:hover .work-title .tn-atom {
    color: #ff5e14 !important;
}


/* --- ВАРИАНТ: АВАТАРКА С ПРИЦЕЛОМ --- */

.bio-group {
    cursor: pointer;
    overflow: hidden;
    transform: translateZ(0);
    position: relative;
    /* Убираем подсветку при тапе на мобильных */
    -webkit-tap-highlight-color: transparent;
}

/* 1. ФОТО СТРОЙКИ (ФОН) */
.bio-stairs {
    width: 100% !important;
    height: 100% !important;
    position: absolute !important;
    top: 0; left: 0;
    z-index: 1;
    filter: grayscale(100%);
    transition: transform 0.6s ease !important;
}

/* 2. ФОТО ЛИЦА (КРУЖОК) */
.bio-face {
    z-index: 10;
    width: 100% !important;
    height: 100% !important;
    position: absolute !important;
    top: 0; left: 0;
    
    /* Вырезаем кружок в правом нижнем углу */
    clip-path: circle(12% at 85% 85%); 
    -webkit-clip-path: circle(12% at 85% 85%);
    
    background-color: #fff; /* Белая подложка */
    transition: all 0.6s cubic-bezier(0.65, 0, 0.35, 1) !important;
    
    /* Белая обводка вокруг кружка для красоты */
    /* (Работает как тень внутри клипа) */
    filter: drop-shadow(0 0 0 2px #ffffff) grayscale(100%);
}

/* --- НАСТРОЙКА ПОЗИЦИИ ЛИЦА --- */
.bio-face .tn-atom {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1) !important;
    
    /* ГЛАВНЫЕ ЦИФРЫ: СДВИГ ФОТО 
       Первая цифра (X) - двигает вправо/влево
       Вторая цифра (Y) - двигает вниз/вверх
       Scale - масштаб лица в кружке
    */
    transform: translate(40%, 52%) scale(0.7); 
    
    /* translate(25%, 50%) - значит сдвинуть фото вправо на 25% и вниз на 50%,
       чтобы лицо сверху переехало в угол снизу */
}


/* --- ЭФФЕКТ ПРИ НАВЕДЕНИИ (HOVER) --- */

/* 1. Кружок расширяется на весь блок */
.bio-group:hover .bio-face {
    clip-path: circle(150% at 85% 85%) !important;
    -webkit-clip-path: circle(150% at 85% 85%) !important;
    filter: drop-shadow(0 0 0 0 transparent) grayscale(0%) !important; /* Убираем обводку и ч/б */
}

/* 2. Фото лица возвращается на нормальное место */
.bio-group:hover .bio-face .tn-atom {
    /* Сбрасываем сдвиг в ноль, чтобы фото встало ровно */
    transform: translate(0, 0) scale(1) !important;
}

/* 3. Фон чуть уменьшается для глубины */
.bio-group:hover .bio-stairs {
    transform: scale(0.95);
}


/* --- АНИМАЦИЯ СТАТЕЙ (BLOG CARDS) --- */

/* 1. КАРТОЧКА (ГРУППА) */
.blog-card {
    cursor: pointer;
    /* Включаем GPU-ускорение, чтобы не дрожало */
    transform: translateZ(0); 
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    border-radius: 2px;
    /* Убедись, что в настройках Zero у группы задан белый фон и серая рамка */
}

/* Ховер: Подъем + Тень + Цвет рамки */
.blog-card:hover {
    transform: translateY(-10px) !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08) !important;
    border-color: #ff5e14 !important; /* Оранжевая рамка */
    z-index: 10; /* Выносим поверх соседей */
}

/* 2. КАРТИНКА (ZOOM) */
.blog-img {
    /* Хитрая маска: скругляем только верхние углы (2px), низ прямой (0) */
    clip-path: inset(0px round 2px 2px 0 0);
    -webkit-clip-path: inset(0px round 2px 2px 0 0);
    
    /* Фикс для Safari */
    -webkit-mask-image: -webkit-radial-gradient(white, black);
}

.blog-img .tn-atom {
    transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    width: 100% !important;
    display: block !important;
    will-change: transform;
}

/* Зум при наведении на КАРТОЧКУ */
.blog-card:hover .blog-img .tn-atom {
    transform: scale(1.08) !important;
}

/* 3. ЗАГОЛОВОК (ЦВЕТ) */
.blog-title .tn-atom {
    transition: color 0.3s ease !important;
}

/* Красим заголовок в оранжевый */
.blog-card:hover .blog-title .tn-atom {
    color: #ff5e14 !important;
}


    $(document).ready(function() {
        // ID твоего Zero Block (посмотри в настройках блока, например rec12345678)
        // Но этот скрипт универсальный, должен найти галерею сам внутри текущего блока
        
        // Логика кнопки "ВПЕРЕД"
        $('.btn-next').click(function() {
            // Ищем стандартную (скрытую) кнопку Next внутри галереи и кликаем по ней
            $(this).closest('.t396').find('.t-slds__arrow-right').trigger('click');
        });

        // Логика кнопки "НАЗАД"
        $('.btn-prev').click(function() {
            // Ищем стандартную кнопку Prev и кликаем
            $(this).closest('.t396').find('.t-slds__arrow-left').trigger('click');
        });
    });



/* 1. Делаем рамку телефона "призраком" для курсора */
/* Чтобы можно было свайпать саму галерею пальцем, даже если рамка сверху */
/* ЗАМЕНИ 'image' НА 'img', если ты загрузил рамку как Image element */
/* Лучше всего дать рамке телефона класс .phone-frame */

.phone-frame {
    pointer-events: none; /* Клики проходят сквозь рамку */
    z-index: 20; /* Лежит сверху */
}

/* 2. Стиль для кнопок управления */
.btn-prev, .btn-next {
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-prev:hover, .btn-next:hover {
    transform: scale(1.1);
    /* Если внутри есть шейп, красим его рамку в оранжевый */
}

.btn-prev:hover .tn-atom, 
.btn-next:hover .tn-atom {
   border-color: #ff5e14 !important; 
   /* Если иконка векторная, можно и ее покрасить */
   color: #ff5e14 !important;
}


/* СТИЛИ ДЛЯ КНОПОК-КАРТИНОК */
.btn-prev, .btn-next {
    cursor: pointer;
    transition: transform 0.3s ease !important;
    /* Убираем синюю подсветку при клике на мобильных */
    -webkit-tap-highlight-color: transparent;
}

/* 1. Эффект увеличения при наведении */
.btn-prev:hover, .btn-next:hover {
    transform: scale(1.1) !important;
}

/* 2. Перекраска картинки в ОРАНЖЕВЫЙ (Magic Filter) */
/* Этот код превращает черный цвет иконки в #ff5e14 */
.btn-prev:hover .tn-atom, 
.btn-next:hover .tn-atom {
    filter: invert(46%) sepia(66%) saturate(3085%) hue-rotate(348deg) brightness(97%) contrast(106%) !important;
}


/* Стилизация полей ввода */
.t-input {
    transition: all 0.3s ease;
    border: 1px solid #E2E8F0 !important; /* Базовая серая рамка */
}

/* При клике в поле - оранжевая рамка и легкая тень */
.t-input:focus {
    border-color: #ff5e14 !important;
    box-shadow: 0 4px 12px rgba(255, 94, 20, 0.1) !important;
    background-color: #ffffff !important; /* Становится белым */
}

/* Ховер эффект для кнопок форм */
.t-submit {
    transition: all 0.3s ease !important;
}
.t-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.15) !important;
}


/* --- ФИНАЛЬНЫЙ СТИЛЬ ПОЛЗУНКА (TOGGLE) --- */

/* 1. Контейнер: выравниваем ползунок и текст по центру */
.t-checkbox__control {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important; /* Отступ от ползунка до текста */
}

/* 2. Сама "Дорожка" (Серый фон) */
.t-checkbox__indicator {
    position: relative !important;
    width: 44px !important;        /* Ширина */
    height: 24px !important;       /* Высота */
    background-color: #CBD5E0 !important; /* Светло-серый цвет */
    border-radius: 20px !important;       /* Закругление */
    border: none !important;       /* Убираем рамки */
    opacity: 1 !important;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.1) !important; /* Легкая тень внутри */
    flex-shrink: 0 !important;     /* Не даем сжиматься */
    transition: background-color 0.3s ease !important;
}

/* 3. Белый "Бегунок" (Кружочек) */
.t-checkbox__indicator::after {
    content: '' !important;        /* Обязательно для отображения */
    display: block !important;
    position: absolute !important;
    top: 2px !important;           /* Отступ сверху */
    left: 2px !important;          /* Отступ слева (начало) */
    width: 20px !important;        /* Размер кружка */
    height: 20px !important;
    background-color: #FFFFFF !important; /* Белый цвет */
    border-radius: 50% !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.25) !important; /* Тень кружка */
    transition: left 0.3s ease !important; /* Плавное движение */
    z-index: 2 !important;         /* Лежит поверх дорожки */
}

/* --- АКТИВНОЕ СОСТОЯНИЕ (ВКЛЮЧЕНО) --- */

/* Дорожка становится оранжевой */
.t-checkbox:checked + .t-checkbox__indicator {
    background-color: #ff5e14 !important;
}

/* Бегунок уезжает вправо */
.t-checkbox:checked + .t-checkbox__indicator::after {
    left: 22px !important; /* 44px (ширина) - 20px (кружок) - 2px (отступ) */
}

/* --- ОШИБКА (КРАСНЫЙ, ЕСЛИ НЕ НАЖАЛ) --- */
.js-error-control-box .t-checkbox__indicator {
    background-color: #FED7D7 !important; /* Бледно-красный */
    box-shadow: 0 0 0 2px #E53E3E !important; /* Красная рамка */
}

/* --- ИСПРАВЛЕНИЕ ТЕКСТА --- */
.t-checkbox__labeltext {
    font-family: 'Inter', Arial, sans-serif !important;
    font-size: 13px !important;    /* Нормальный читаемый размер */
    line-height: 1.3 !important;
    color: #4A5568 !important;     /* Темно-серый цвет текста */
    font-weight: 400 !important;
}