/* Унифицированная система типографики для всех страниц сайта Рекхаус */

/* ========================================
   БАЗОВЫЕ НАСТРОЙКИ
   ======================================== */

:root {
    /* Базовый размер шрифта */
    --font-size-base: 16px;
    
    /* Типографическая шкала */
    --font-size-xs: 12px;      /* Мелкий текст, подписи */
    --font-size-sm: 14px;      /* Небольшой текст */
    --font-size-md: 16px;      /* Основной текст */
    --font-size-lg: 18px;      /* Крупный текст */
    --font-size-xl: 20px;      /* Очень крупный текст */
    
    /* Заголовки */
    --font-size-h6: 16px;      /* H6 - как основной текст */
    --font-size-h5: 20px;      /* H5 - подзаголовки */
    --font-size-h4: 24px;      /* H4 - средние заголовки */
    --font-size-h3: 28px;      /* H3 - крупные заголовки */
    --font-size-h2: 32px;      /* H2 - основные заголовки */
    --font-size-h1: 40px;      /* H1 - главные заголовки */
    
    /* Специальные размеры */
    --font-size-hero: 48px;    /* Героические заголовки */
    --font-size-display: 56px; /* Отображаемые заголовки */
    
    /* Межстрочный интервал */
    --line-height-tight: 1.1;
    --line-height-normal: 1.4;
    --line-height-relaxed: 1.6;
    
    /* Отступы */
    --margin-xs: 8px;
    --margin-sm: 12px;
    --margin-md: 16px;
    --margin-lg: 24px;
    --margin-xl: 32px;
    --margin-xxl: 48px;
}

/* ========================================
   ОСНОВНЫЕ ЭЛЕМЕНТЫ
   ======================================== */

/* Основной текст */
p, 
.text-base {
    font-size: var(--font-size-md);
    line-height: var(--line-height-normal);
    margin-bottom: var(--margin-md);
}

/* Крупный текст */
.text-lg {
    font-size: var(--font-size-lg);
    line-height: var(--line-height-normal);
}

/* Мелкий текст */
.text-sm {
    font-size: var(--font-size-sm);
    line-height: var(--line-height-normal);
}

/* ========================================
   ЗАГОЛОВКИ - ДЕСКТОПНАЯ ВЕРСИЯ
   ======================================== */

h1, .h1 {
    font-size: var(--font-size-h1);
    line-height: var(--line-height-tight);
    font-weight: 700;
    margin-bottom: var(--margin-lg);
}

h2, .h2 {
    font-size: var(--font-size-h2);
    line-height: var(--line-height-tight);
    font-weight: 600;
    margin-bottom: var(--margin-lg);
}

h3, .h3 {
    font-size: var(--font-size-h3);
    line-height: var(--line-height-tight);
    font-weight: 600;
    margin-bottom: var(--margin-md);
}

h4, .h4 {
    font-size: var(--font-size-h4);
    line-height: var(--line-height-tight);
    font-weight: 600;
    margin-bottom: var(--margin-md);
}

h5, .h5 {
    font-size: var(--font-size-h5);
    line-height: var(--line-height-tight);
    font-weight: 600;
    margin-bottom: var(--margin-sm);
}

h6, .h6 {
    font-size: var(--font-size-h6);
    line-height: var(--line-height-tight);
    font-weight: 600;
    margin-bottom: var(--margin-sm);
}

/* ========================================
   СПЕЦИАЛЬНЫЕ ЗАГОЛОВКИ
   ======================================== */

/* Героические заголовки (слайдеры, главные страницы) */
.hero-title,
.display-title {
    font-size: var(--font-size-hero);
    line-height: var(--line-height-tight);
    font-weight: 700;
    margin-bottom: var(--margin-xl);
}

/* Заголовки услуг */
.service-title {
    font-size: var(--font-size-h2);
    line-height: var(--line-height-tight);
    font-weight: 600;
    margin-bottom: var(--margin-lg);
    text-align: center;
}

/* Заголовки слайдеров */
.slider-title {
    font-size: var(--font-size-hero);
    line-height: var(--line-height-tight);
    font-weight: 700;
    text-align: center;
    color: #ffffff;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}

/* ========================================
   МОБИЛЬНАЯ ВЕРСИЯ (до 768px)
   ======================================== */

@media (max-width: 767px) {
    :root {
        /* Уменьшенные размеры для мобильных */
        --font-size-h1: 28px;      /* H1 мобильный */
        --font-size-h2: 24px;      /* H2 мобильный */
        --font-size-h3: 22px;      /* H3 мобильный */
        --font-size-h4: 20px;      /* H4 мобильный */
        --font-size-h5: 18px;      /* H5 мобильный */
        --font-size-hero: 32px;    /* Героические заголовки мобильный */
        --font-size-display: 36px; /* Отображаемые заголовки мобильный */
        
        /* Более компактные отступы */
        --margin-lg: 20px;
        --margin-xl: 24px;
        --margin-xxl: 32px;
    }
    
    /* Основной текст на мобильных */
    p, .text-base {
        font-size: var(--font-size-sm);
        line-height: var(--line-height-relaxed);
    }
    
    /* Заголовки услуг на мобильных */
    .service-title {
        font-size: var(--font-size-h3);
        font-weight: 700;
    }
    
    /* Слайдеры на мобильных */
    .slider-title {
        font-size: var(--font-size-hero);
    }
}

/* ========================================
   СПЕЦИФИЧНЫЕ КЛАССЫ ДЛЯ СТРАНИЦ
   ======================================== */

/* Главная страница - заголовок "РЕКХАУС" */
.brand-title {
    font-size: var(--font-size-hero);
    font-weight: 700;
    line-height: var(--line-height-tight);
    margin-bottom: var(--margin-sm);
}

@media (max-width: 767px) {
    .brand-title {
        font-size: var(--font-size-h1);
    }
}

/* Описания услуг */
.service-description {
    font-size: var(--font-size-md);
    line-height: var(--line-height-relaxed);
    margin-bottom: var(--margin-lg);
}

@media (max-width: 767px) {
    .service-description {
        font-size: var(--font-size-sm);
        padding: 0 var(--margin-md);
    }
}

/* Слоган компании */
.company-slogan {
    font-size: var(--font-size-lg);
    line-height: var(--line-height-relaxed);
    font-weight: 400;
    text-align: center;
    margin-bottom: var(--margin-xl);
}

@media (max-width: 767px) {
    .company-slogan {
        font-size: var(--font-size-md);
        padding: 0 var(--margin-md);
    }
}

/* ========================================
   УТИЛИТАРНЫЕ КЛАССЫ
   ======================================== */

/* Выравнивание текста */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }

/* Вес шрифта */
.font-light { font-weight: 300; }
.font-normal { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }

/* Межстрочный интервал */
.leading-tight { line-height: var(--line-height-tight); }
.leading-normal { line-height: var(--line-height-normal); }
.leading-relaxed { line-height: var(--line-height-relaxed); }

/* Отступы */
.mb-xs { margin-bottom: var(--margin-xs); }
.mb-sm { margin-bottom: var(--margin-sm); }
.mb-md { margin-bottom: var(--margin-md); }
.mb-lg { margin-bottom: var(--margin-lg); }
.mb-xl { margin-bottom: var(--margin-xl); }
.mb-xxl { margin-bottom: var(--margin-xxl); }

/* ========================================
   ПЕРЕОПРЕДЕЛЕНИЯ ДЛЯ СУЩЕСТВУЮЩИХ ЭЛЕМЕНТОВ
   ======================================== */

/* Заголовки слайдеров на главной странице - единая тень для всех */
#carouselSlides .carousel-caption h1,
#carouselSlides .carousel-caption h2,
#carouselSlides .carousel-caption h3,
#carouselSlides .carousel-caption.text-center h1,
#carouselSlides .carousel-caption.text-center h2,
#carouselSlides .carousel-caption.text-center h3,
#carouselSlides .carousel-item.slide1 .carousel-caption h1,
#carouselSlides .carousel-item.slide1 .carousel-caption h2,
#carouselSlides .carousel-item.slide1 .carousel-caption h3,
#carouselSlides .carousel-item.slide2 .carousel-caption h1,
#carouselSlides .carousel-item.slide2 .carousel-caption h2,
#carouselSlides .carousel-item.slide2 .carousel-caption h3,
#carouselSlides .carousel-item.slide3 .carousel-caption h1,
#carouselSlides .carousel-item.slide3 .carousel-caption h2,
#carouselSlides .carousel-item.slide3 .carousel-caption h3,
#carouselSlides .carousel-item.slide4 .carousel-caption h1,
#carouselSlides .carousel-item.slide4 .carousel-caption h2,
#carouselSlides .carousel-item.slide4 .carousel-caption h3 {
    font-size: 60px !important; /* Увеличено с 54px до 60px для десктопа */
    font-weight: 700 !important;
    line-height: var(--line-height-tight) !important;
    color: #ffffff !important;
    /* Умеренная тень для всех слайдов */
    text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.8), 
                 1px 1px 3px rgba(0, 0, 0, 0.7),
                 0 0 8px rgba(0, 0, 0, 0.5) !important;
    -webkit-text-stroke: 1px transparent !important;
    text-stroke: 1px transparent !important;
    /* Убираем все возможные артефакты */
    text-decoration: none !important;
    outline: none !important;
    border: none !important;
    background: transparent !important;
    text-rendering: auto !important;
    -webkit-font-smoothing: none !important;
    -moz-osx-font-smoothing: auto !important;
    font-family: Arial, sans-serif !important;
    /* Убираем подложку и другие эффекты из bundles/index.css */
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    display: block !important;
    width: auto !important;
    animation: none !important;
}

/* Унифицируем вертикальное позиционирование для всех слайдов на десктопе */
#carouselSlides .slide1 .carousel-caption,
#carouselSlides .slide2 .carousel-caption,
#carouselSlides .slide3 .carousel-caption,
#carouselSlides .slide4 .carousel-caption,
.slide1 #carouselSlides .carousel-caption,
.slide2 #carouselSlides .carousel-caption,
.slide3 #carouselSlides .carousel-caption,
.slide4 #carouselSlides .carousel-caption {
    transform: translate(-50%, -50%) !important; /* Идеальный центр для всех */
    top: 50% !important;
    left: 50% !important;
    position: absolute !important;
}

@media (max-width: 767px) {
    #carouselSlides .slide1 .carousel-caption,
    #carouselSlides .slide2 .carousel-caption,
    #carouselSlides .slide3 .carousel-caption,
    #carouselSlides .slide4 .carousel-caption,
    .slide1 #carouselSlides .carousel-caption,
    .slide2 #carouselSlides .carousel-caption,
    .slide3 #carouselSlides .carousel-caption,
    .slide4 #carouselSlides .carousel-caption {
        transform: translate(-50%, -50%) !important; /* Идеальный центр для мобильных */
        top: 50% !important;
        left: 50% !important;
        position: absolute !important;
    }
}

/* Убираем все псевдоэлементы с заливкой, которые создают "внутренний контур" */
#carouselSlides .carousel-caption h1::before,
#carouselSlides .carousel-caption h2::before,
#carouselSlides .carousel-caption h3::before,
#carouselSlides .carousel-caption h1::after,
#carouselSlides .carousel-caption h2::after,
#carouselSlides .carousel-caption h3::after,
#carouselSlides .carousel-caption.text-center h1::before,
#carouselSlides .carousel-caption.text-center h2::before,
#carouselSlides .carousel-caption.text-center h3::before,
#carouselSlides .carousel-caption.text-center h1::after,
#carouselSlides .carousel-caption.text-center h2::after,
#carouselSlides .carousel-caption.text-center h3::after,
.carousel-caption h1::before,
.carousel-caption h2::before,
.carousel-caption h3::before,
.carousel-caption h1::after,
.carousel-caption h2::after,
.carousel-caption h3::after {
    content: none !important;
    display: none !important;
    background: none !important;
    background-color: transparent !important;
    filter: none !important;
    opacity: 0 !important;
    z-index: -999 !important;
}

/* Принудительно применяем ТАКУЮ ЖЕ умеренную тень к первому слайду */
#carouselSlides .carousel-item.slide1 .carousel-caption h2.clean-slider-text,
#carouselSlides .carousel-item.slide1 .carousel-caption.text-center h2.clean-slider-text,
#carouselSlides .carousel-item.slide1 .carousel-caption h2,
#carouselSlides .carousel-item.slide1 .carousel-caption * {
    text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.8), 
                 1px 1px 3px rgba(0, 0, 0, 0.7),
                 0 0 8px rgba(0, 0, 0, 0.5) !important;
}

@media (max-width: 767px) {
    #carouselSlides .carousel-item.slide1 .carousel-caption h2.clean-slider-text,
    #carouselSlides .carousel-item.slide1 .carousel-caption.text-center h2.clean-slider-text,
    #carouselSlides .carousel-item.slide1 .carousel-caption h2,
    #carouselSlides .carousel-item.slide1 .carousel-caption * {
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8), 
                     1px 1px 2px rgba(0, 0, 0, 0.7),
                     0 0 6px rgba(0, 0, 0, 0.5) !important;
    }
}

/* Специальный класс для чистого текста слайдеров с черной обводкой и тенью */
h2.clean-slider-text,
.clean-slider-text {
    font-size: 60px !important; /* Увеличено для десктопа */
    font-weight: 700 !important;
    color: #ffffff !important;
    /* Добавляем бесцветную обводку и умеренную тень */
    -webkit-text-stroke: 1px transparent !important;
    text-stroke: 1px transparent !important;
    text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.8), 
                 1px 1px 3px rgba(0, 0, 0, 0.7),
                 0 0 8px rgba(0, 0, 0, 0.5) !important;
    line-height: 1.1 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
    background-color: transparent !important;
    text-decoration: none !important;
    outline: none !important;
    box-shadow: none !important;
    filter: none !important;
    backdrop-filter: none !important;
    text-rendering: auto !important;
    -webkit-font-smoothing: none !important;
    -moz-osx-font-smoothing: auto !important;
    font-family: Arial, sans-serif !important;
    text-align: center !important;
    display: block !important;
    width: 100% !important;
}

@media (max-width: 767px) {
    h2.clean-slider-text,
    .clean-slider-text {
        font-size: 28px !important; /* Уменьшено с 36px до 28px для мобильных */
        /* Умеренная тень для мобильных */
        -webkit-text-stroke: 1px transparent !important;
        text-stroke: 1px transparent !important;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8), 
                     1px 1px 2px rgba(0, 0, 0, 0.7),
                     0 0 6px rgba(0, 0, 0, 0.5) !important;
    }
}

@media (max-width: 767px) {
    #carouselSlides .carousel-caption h1,
    #carouselSlides .carousel-caption h2,
    #carouselSlides .carousel-caption h3,
    #carouselSlides .carousel-caption.text-center h1,
    #carouselSlides .carousel-caption.text-center h2,
    #carouselSlides .carousel-caption.text-center h3,
    #carouselSlides .carousel-item.slide1 .carousel-caption h1,
    #carouselSlides .carousel-item.slide1 .carousel-caption h2,
    #carouselSlides .carousel-item.slide1 .carousel-caption h3,
    #carouselSlides .carousel-item.slide2 .carousel-caption h1,
    #carouselSlides .carousel-item.slide2 .carousel-caption h2,
    #carouselSlides .carousel-item.slide2 .carousel-caption h3,
    #carouselSlides .carousel-item.slide3 .carousel-caption h1,
    #carouselSlides .carousel-item.slide3 .carousel-caption h2,
    #carouselSlides .carousel-item.slide3 .carousel-caption h3,
    #carouselSlides .carousel-item.slide4 .carousel-caption h1,
    #carouselSlides .carousel-item.slide4 .carousel-caption h2,
    #carouselSlides .carousel-item.slide4 .carousel-caption h3 {
        font-size: 28px !important; /* Уменьшено с 36px до 28px для мобильных */
        /* Умеренная тень для всех слайдов на мобильных */
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8), 
                     1px 1px 2px rgba(0, 0, 0, 0.7),
                     0 0 6px rgba(0, 0, 0, 0.5) !important;
        -webkit-text-stroke: 1px transparent !important;
        text-stroke: 1px transparent !important;
        /* Убираем все возможные артефакты на мобильных */
        text-decoration: none !important;
        outline: none !important;
        border: none !important;
        background: transparent !important;
        text-rendering: auto !important;
        -webkit-font-smoothing: none !important;
        -moz-osx-font-smoothing: auto !important;
        font-family: Arial, sans-serif !important;
        /* Убираем подложку и другие эффекты из bundles/index.css */
        box-shadow: none !important;
        border-radius: 0 !important;
        padding: 0 !important;
        display: block !important;
        width: auto !important;
        animation: none !important;
    }
}

/* Заголовки услуг */
.ourService-title h5,
.smallShow.ourService-title h5,
.smallDontShow h5,
.ourServices .smallDontShow h5 {
    font-size: var(--font-size-h2) !important;
    font-weight: 600 !important;
    line-height: var(--line-height-tight) !important;
}

@media (max-width: 767px) {
    .ourService-title h5,
    .smallShow.ourService-title h5,
    .smallDontShow h5,
    .ourServices .smallDontShow h5 {
        font-size: var(--font-size-h3) !important;
        font-weight: 700 !important;
    }
}

/* Заголовок "Почему выбирают нас" */
.additional-block h2,
.container.additional-block h2,
div.container.mt-5.additional-block h2 {
    font-size: var(--font-size-h2) !important;
    font-weight: 600 !important;
    line-height: var(--line-height-tight) !important;
}

@media (max-width: 767px) {
    .additional-block h2,
    .container.additional-block h2,
    div.container.mt-5.additional-block h2 {
        font-size: var(--font-size-h3) !important;
        font-weight: 700 !important;
    }
}

/* Слоган компании - уменьшен на 4px от размера "Почему выбирают нас" */
.sloganIndexWhyChooseUscontainer h2,
.sloganIndexWhyChooseUscontainer.mt-5.additional-block.call h2,
div.sloganIndexWhyChooseUscontainer h2 {
    font-size: 28px !important; /* 32px - 4px = 28px */
    font-weight: 600 !important;
    line-height: var(--line-height-tight) !important;
    text-shadow: none !important;
}

@media (max-width: 767px) {
    .sloganIndexWhyChooseUscontainer h2,
    .sloganIndexWhyChooseUscontainer.mt-5.additional-block.call h2,
    div.sloganIndexWhyChooseUscontainer h2 {
        font-size: 18px !important; /* 22px - 4px = 18px */
        font-weight: 700 !important;
        padding: 0 var(--margin-md) !important;
        text-shadow: none !important;
    }
}

/* Описания услуг */
.ourServices-text p,
.ourServices-text_2 p {
    font-size: var(--font-size-md) !important;
    line-height: var(--line-height-relaxed) !important;
}

@media (max-width: 767px) {
    .ourServices-text p,
    .ourServices-text_2 p {
        font-size: var(--font-size-sm) !important;
        padding: 0 var(--margin-md) !important;
        text-align: center !important;
    }
}

/* ========================================
   ШИРИНА БЛОКОВ
   ======================================== */

/* Увеличиваем ширину блока слогана */
.sloganIndexWhyChooseUscontainer {
    max-width: 900px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: var(--margin-lg) !important;
    padding-right: var(--margin-lg) !important;
}

@media (max-width: 767px) {
    .sloganIndexWhyChooseUscontainer {
        max-width: 100% !important;
        padding-left: var(--margin-md) !important;
        padding-right: var(--margin-md) !important;
    }
}

/* Увеличиваем ширину карточек "Почему выбирают нас" */
.indexWhyChooseUs1 .equal-grid .grid-item {
    max-width: 420px !important;
    margin: 0 auto var(--margin-lg) auto !important;
}

.indexWhyChooseUs1 .equal-grid .grid-item .card-body {
    padding: var(--margin-lg) var(--margin-md) !important;
}

/* Увеличиваем размер заголовков всех карточек */
.card-title,
.card-title h5,
h5.card-title {
    font-size: 22px !important;
    font-weight: 600 !important;
    line-height: var(--line-height-tight) !important;
}

@media (max-width: 767px) {
    .indexWhyChooseUs1 .equal-grid .grid-item {
        max-width: 100% !important;
        margin-bottom: var(--margin-lg) !important;
    }
    
    .indexWhyChooseUs1 .equal-grid .grid-item .card-body {
        padding: var(--margin-md) var(--margin-sm) !important;
    }
    
    /* Размер заголовков всех карточек на мобильных */
    .card-title,
    .card-title h5,
    h5.card-title {
        font-size: 20px !important;
        font-weight: 700 !important;
    }
}

/* ========================================
   ПЕРЕНОСЫ СТРОК
   ======================================== */

/* Условные переносы для мобильной версии */
.br-mobile {
    display: none;
}

.br-desktop {
    display: inline;
}

@media (max-width: 767px) {
    .br-mobile {
        display: inline;
    }
    
    .br-desktop {
        display: none;
    }
}