/* ============================================
   AI-TRIP ГЛАВНАЯ СТРАНИЦА
   Дизайн: Tinkoff-inspired
============================================ */

/* ============================================
   ПЕРЕМЕННЫЕ (ЦВЕТА, ТЕНИ, СКРУГЛЕНИЯ)
============================================ */

:root {
    /* ЦВЕТА */
    --primary-yellow: #FFDD2D;     /* Жёлтый для кнопок */
    --primary-blue: #32a8dd;       /* Синий для ссылок */
    --black: #333333;              /* Основной текст */
    --white: #FFFFFF;              /* Фон */
    --gray-light: #F5F5F5;         /* Светло-серый фон */
    --gray-medium: #E0E0E0;        /* Рамки */
    --gray-dark: #666666;          /* Второстепенный текст */
    
    /* ТЕНИ */
    --shadow-sm: 0 2px 8px rgba(0,0,0,0.06);   /* Маленькая тень */
    --shadow-md: 0 4px 16px rgba(0,0,0,0.08);  /* Средняя тень */
    --shadow-lg: 0 8px 32px rgba(0,0,0,0.12);  /* Большая тень */
    
    /* СКРУГЛЕНИЯ УГЛОВ */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    
    /* ШРИФТ */
    --font-main: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ============================================
   ОБЩИЕ СТИЛИ
============================================ */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-main);  /* Основной шрифт */
    background: var(--white);       /* Белый фон */
    color: var(--black);            /* Чёрный текст */
    line-height: 1.6;               /* Межстрочный интервал */
    overflow-x: hidden;             /* Убираем горизонтальный скролл */
}

.container {
    max-width: 1200px;              /* Максимальная ширина контента */
    margin: 0 auto;                 /* Центрируем */
    padding: 0 20px;                /* Отступы по бокам */
}

/* ============================================
   ШАПКА (HEADER)
============================================ */

.header {
    background: var(--white);               /* Белый фон */
    border-bottom: 1px solid var(--gray-medium);  /* Рамка снизу */
    padding: 20px 0;                        /* Отступы сверху/снизу */
    position: sticky;                       /* Прилипает при скролле */
    top: 0;                                 /* Прилипает к верху */
    z-index: 1000;                          /* Над всем контентом */
}

.header-content {
    display: flex;                          /* Элементы в ряд */
    align-items: center;                    /* По центру вертикально */
    justify-content: space-between;         /* Лого слева, кнопка справа */
}

.logo a {
    font-size: 28px;                        /* Размер лого */
    font-weight: 800;                       /* Жирность */
    color: var(--black);                    /* Цвет */
    text-decoration: none;                  /* Без подчёркивания */
}

.nav {
    display: flex;                          /* Меню в ряд */
    gap: 32px;                              /* Расстояние между пунктами */
}

.nav a {
    color: var(--black);                    /* Цвет текста */
    text-decoration: none;                  /* Без подчёркивания */
    font-weight: 500;                       /* Жирность */
    transition: color 0.2s;                 /* Плавная смена цвета */
}

.nav a:hover {
    color: var(--primary-blue);             /* Синий при наведении */
}

.btn-cabinet {
    padding: 12px 24px;                     /* Внутренние отступы */
    background: var(--gray-light);          /* Серый фон */
    border: none;                           /* Без рамки */
    border-radius: var(--radius-md);        /* Скруглённые углы */
    font-weight: 600;                       /* Жирность */
    cursor: pointer;                        /* Курсор-палец */
    transition: all 0.2s;                   /* Плавная анимация */
}

.btn-cabinet:hover {
    background: var(--gray-medium);         /* Темнее при наведении */
}

/* ============================================
   ГЕРОБЛОК (ЗАГОЛОВОК + КНОПКА + КАРТИНКА)
============================================ */

.hero {
    padding: 80px 0 120px;                          /* Отступы сверху/снизу */
    text-align: center;                             /* Центрируем текст */
    background: linear-gradient(180deg, var(--white) 0%, var(--gray-light) 100%);  /* Градиент */
}

.hero-title {
    font-size: 56px;                        /* Размер заголовка (МЕНЯЙ ЦИФРУ) */
    font-weight: 800;                       /* Жирность */
    line-height: 1.2;                       /* Межстрочный интервал */
    margin-bottom: 20px;                    /* Отступ снизу */
    color: var(--black);                    /* Цвет */
}

.hero-subtitle {
    font-size: 20px;                        /* Размер подзаголовка (МЕНЯЙ ЦИФРУ) */
    color: var(--gray-dark);                /* Серый цвет */
    margin-bottom: 40px;                    /* Отступ снизу */
}

.btn-primary {
    padding: 18px 48px;                     /* Внутренние отступы */
    background: var(--primary-yellow);      /* Жёлтый фон */
    border: none;                           /* Без рамки */
    border-radius: var(--radius-md);        /* Скруглённые углы */
    font-size: 18px;                        /* Размер текста */
    font-weight: 700;                       /* Жирность */
    color: var(--black);                    /* Цвет текста */
    cursor: pointer;                        /* Курсор-палец */
    transition: all 0.2s;                   /* Плавная анимация */
    box-shadow: var(--shadow-md);           /* Тень */
}

.btn-primary:hover {
    transform: translateY(-2px);            /* Поднимается при наведении */
    box-shadow: var(--shadow-lg);           /* Тень больше */
    background: #FFE74D;                    /* Светлее */
}

.hero-image {
    margin-top: 40px;                       /* Отступ сверху от кнопки */
    margin-bottom: 40px;                    /* Отступ снизу */
    max-width: 600px;                       /* Макс. ширина */
    margin-left: auto;                      /* Центрируем */
    margin-right: auto;                     /* Центрируем */
}

.hero-image img {
    width: 100%;                            /* На всю ширину */
    height: auto;                           /* Высота автоматом */
}

/* ============================================
   ПРОДУКТЫ (5 КАРТОЧЕК)
============================================ */

.products {
    padding: 80px 0;                        /* Отступы сверху/снизу секции */
    background: var(--white);               /* Белый фон */
}

.products-grid {
    display: grid;                          /* Сетка */
    grid-template-columns: repeat(6, 1fr);  /* 6 колонок одинаковой ширины */
    gap: 20px;                              /* Расстояние между карточками */
}

.product-card {
    background: var(--white);               /* Белый фон */
    border: 2px solid var(--gray-medium);   /* Серая рамка */
    border-radius: var(--radius-lg);        /* Скруглённые углы */
    padding: 32px 20px;                     /* Внутренние отступы */
    text-align: center;                     /* Текст по центру */
    cursor: pointer;                        /* Курсор-палец */
    transition: all 0.2s;                   /* Плавная анимация */
    min-width: 0; /* ← ДОБАВЬ ЭТУ СТРОКУ */
    width: 100%;  /* ← И ЭТУ */
}

.product-card:hover {
    transform: translateY(-4px);            /* Поднимается при наведении */
    box-shadow: var(--shadow-md);           /* Тень */
    border-color: var(--primary-yellow);    /* Жёлтая рамка */
}

.product-icon {
    font-size: 48px;                        /* Размер иконки */
    margin-bottom: 16px;                    /* Отступ снизу */
}

.product-card h3 {
    font-size: 18px;                        /* Размер заголовка карточки */
    font-weight: 700;                       /* Жирность */
    margin-bottom: 8px;                     /* Отступ снизу */
}

.product-card p {
    font-size: 14px;                        /* Размер текста */
    color: var(--gray-dark);                /* Серый цвет */
}

/* ============================================
   ВИДЖЕТ ГОРЯЩИХ ТУРОВ
============================================ */

.hot-tours {
    padding: 80px 0;                        /* Отступы сверху/снизу секции */
    background: var(--gray-light);          /* Светло-серый фон */
}

.section-title {
    font-size: 40px;                        /* Размер заголовка секции (МЕНЯЙ ЦИФРУ) */
    font-weight: 800;                       /* Жирность */
    text-align: center;                     /* По центру */
    margin-bottom: 12px;                    /* Отступ снизу */
}

.section-subtitle {
    font-size: 18px;                        /* Размер подзаголовка */
    color: var(--gray-dark);                /* Серый цвет */
    text-align: center;                     /* По центру */
    margin-bottom: 48px;                    /* Отступ снизу */
}

.widget-container {
    background: var(--white);               /* Белый фон */
    border-radius: var(--radius-xl);        /* Скруглённые углы */
    padding: 30px;                          /* Внутренние отступы */
    box-shadow: var(--shadow-md);           /* Тень */
}

/* ============================================
   О СЕРВИСЕ (2 КАРТОЧКИ: ПАРТНЁРЫ + ИНФО)
============================================ */

.about {
    padding: 80px 0;                        /* Отступы сверху/снизу секции */
    background: var(--white);               /* Белый фон */
}

.about-grid {
    display: grid;                          /* Сетка */
    grid-template-columns: repeat(2, 1fr);  /* 2 колонки */
    gap: 32px;                              /* Расстояние между карточками */
}

.about-card {
    background: var(--gray-light);          /* Светло-серый фон */
    border-radius: var(--radius-xl);        /* Скруглённые углы */
    padding: 40px;                          /* Внутренние отступы */
}

.about-card h3 {
    font-size: 24px;                        /* Размер заголовка карточки */
    font-weight: 700;                       /* Жирность */
    margin-bottom: 16px;                    /* Отступ снизу */
}

.about-card p {
    font-size: 16px;                        /* Размер текста */
    color: var(--gray-dark);                /* Серый цвет */
    margin-bottom: 12px;                    /* Отступ снизу */
}

/* ЛОГОТИПЫ ПАРТНЁРОВ */

.partners-logos {
    display: grid;                          /* Сетка */
    grid-template-columns: 1fr 1fr;         /* 2 колонки */
    gap: 32px;                              /* Расстояние между логотипами */
    margin-top: 24px;                       /* Отступ сверху */
}

.partners-logos a {
    display: flex;                          /* Flexbox для центрирования */
    align-items: center;                    /* По центру вертикально */
    justify-content: center;                /* По центру горизонтально */
    padding: 20px;                          /* Внутренние отступы */
    background: var(--white);               /* Белый фон */
    border: 2px solid var(--gray-medium);   /* Серая рамка */
    border-radius: var(--radius-md);        /* Скруглённые углы */
    transition: all 0.3s;                   /* Плавная анимация */
}

.partners-logos a:hover {
    border-color: var(--primary-yellow);    /* Жёлтая рамка при наведении */
    transform: translateY(-4px);            /* Поднимается */
    box-shadow: var(--shadow-md);           /* Тень */
}

.partners-logos img {
    height: 60px;                           /* Высота логотипа (МЕНЯЙ ЦИФРУ) */
    width: auto;                            /* Ширина автоматом */
    max-width: 100%;                        /* Не больше контейнера */
    object-fit: contain;                    /* Сохраняем пропорции */
}

/* ЛОГО В КАРТОЧКЕ "О НАС" */

.logo-big {
    font-size: 36px;                        /* Размер большого лого (МЕНЯЙ ЦИФРУ) */
    font-weight: 800;                       /* Жирность */
    margin-bottom: 16px;                    /* Отступ снизу */
    color: var(--primary-blue);             /* Синий цвет */
}

.about-text strong {
    font-weight: 700;                       /* Жирность для жирного текста */
    color: var(--black);                    /* Чёрный цвет */
}

/* ============================================
   БЛОГ (3 КАРТОЧКИ)
============================================ */

.blog {
    padding: 80px 0;                        /* Отступы сверху/снизу секции */
    background: var(--gray-light);          /* Светло-серый фон */
}

.blog-grid {
    display: grid;                          /* Сетка */
    grid-template-columns: repeat(3, 1fr);  /* 3 колонки */
    gap: 32px;                              /* Расстояние между карточками */
    margin-bottom: 48px;                    /* Отступ снизу */
}

.blog-card {
    background: var(--white);               /* Белый фон */
    border-radius: var(--radius-xl);        /* Скруглённые углы */
    overflow: hidden;                       /* Обрезаем что вылезает */
    box-shadow: var(--shadow-sm);           /* Маленькая тень */
    transition: all 0.2s;                   /* Плавная анимация */
    cursor: pointer;                        /* Курсор-палец */
}

.blog-card:hover {
    transform: translateY(-4px);            /* Поднимается при наведении */
    box-shadow: var(--shadow-md);           /* Тень больше */
}

.blog-image {
    width: 100%;                            /* На всю ширину */
    height: 200px;                          /* Высота изображения */
    overflow: hidden;                       /* Обрезаем */
    background: var(--gray-medium);         /* Серый фон если нет картинки */
}

.blog-image img {
    width: 100%;                            /* На всю ширину */
    height: 100%;                           /* На всю высоту */
    object-fit: cover;                      /* Обрезаем пропорционально */
}

.blog-content {
    padding: 24px;                          /* Внутренние отступы */
}

.blog-content h3 {
    font-size: 20px;                        /* Размер заголовка статьи */
    font-weight: 700;                       /* Жирность */
    margin-bottom: 12px;                    /* Отступ снизу */
    line-height: 1.3;                       /* Межстрочный интервал */
}

.blog-content p {
    font-size: 15px;                        /* Размер текста */
    color: var(--gray-dark);                /* Серый цвет */
    margin-bottom: 16px;                    /* Отступ снизу */
    line-height: 1.6;                       /* Межстрочный интервал */
}

.btn-link {
    background: none;                       /* Без фона */
    border: none;                           /* Без рамки */
    color: var(--primary-blue);             /* Синий цвет */
    font-weight: 600;                       /* Жирность */
    cursor: pointer;                        /* Курсор-палец */
    font-size: 15px;                        /* Размер */
}

.btn-link:hover {
    text-decoration: underline;             /* Подчёркивание при наведении */
}

.blog-all {
    text-align: center;                     /* По центру */
}

.btn-secondary {
    padding: 16px 40px;                     /* Внутренние отступы */
    background: var(--white);               /* Белый фон */
    border: 2px solid var(--black);         /* Чёрная рамка */
    border-radius: var(--radius-md);        /* Скруглённые углы */
    font-size: 16px;                        /* Размер текста */
    font-weight: 600;                       /* Жирность */
    cursor: pointer;                        /* Курсор-палец */
    transition: all 0.2s;                   /* Плавная анимация */
    text-decoration: none;
    display: inline-block;
    color: inherit;
    text-decoration: none;
}

.btn-secondary:hover {
    background: var(--black);               /* Чёрный фон при наведении */
    color: var(--white);                    /* Белый текст */
}

/* ============================================
   ФУТЕР (ПОДВАЛ)
============================================ */

.footer {
    background: var(--black);               /* Чёрный фон */
    color: var(--white);                    /* Белый текст */
    padding: 60px 0 32px;                   /* Отступы сверху/снизу */
}

.footer-content {
    display: grid;                          /* Сетка */
    grid-template-columns: 1fr 2fr;         /* 2 колонки (1:2) */
    gap: 60px;                              /* Расстояние между колонками */
    margin-bottom: 40px;                    /* Отступ снизу */
}

.footer-logo .logo {
    font-size: 28px;                        /* Размер лого */
    font-weight: 800;                       /* Жирность */
    margin-bottom: 12px;                    /* Отступ снизу */
}

.footer-logo p {
    color: var(--gray-medium);              /* Серый цвет */
}

.footer-links {
    display: grid;                          /* Сетка */
    grid-template-columns: repeat(3, 1fr);  /* 3 колонки */
    gap: 40px;                              /* Расстояние между колонками */
}

.footer-column h4 {
    font-size: 16px;                        /* Размер заголовка колонки */
    font-weight: 700;                       /* Жирность */
    margin-bottom: 16px;                    /* Отступ снизу */
}

.footer-column a {
    display: block;                         /* Каждая ссылка на своей строке */
    color: var(--gray-medium);              /* Серый цвет */
    text-decoration: none;                  /* Без подчёркивания */
    margin-bottom: 12px;                    /* Отступ снизу */
    transition: color 0.2s;                 /* Плавная смена цвета */
}

.footer-column a:hover {
    color: var(--white);                    /* Белый при наведении */
}

.footer-bottom {
    text-align: center;                     /* По центру */
    padding-top: 32px;                      /* Отступ сверху */
    border-top: 1px solid #444;             /* Рамка сверху */
}

.footer-bottom p {
    color: var(--gray-medium);              /* Серый цвет */
    font-size: 14px;                        /* Размер текста */
    margin-bottom: 8px;                     /* Отступ снизу */
}

/* ============================================
   АДАПТИВ ДЛЯ ПЛАНШЕТОВ (1024px)
============================================ */

@media (max-width: 1024px) {
    .products-grid {
        grid-template-columns: repeat(3, 1fr);  /* 3 колонки вместо 5 */
    }
    
    .blog-grid {
        grid-template-columns: repeat(2, 1fr);  /* 2 колонки вместо 3 */
    }
}

/* ============================================
   АДАПТИВ ДЛЯ МОБИЛОК (768px И МЕНЬШЕ)
============================================ */

@media (max-width: 768px) {
    
    /* ШАПКА КОМПАКТНАЯ */
    .header {
        padding: 12px 0;                    /* Меньше отступы (МЕНЯЙ ЦИФРУ) */
    }
    
    .header-content {
        flex-direction: row;                /* Лого и кнопка в ряд */
        justify-content: space-between;     /* Лого слева, кнопка справа */
        align-items: center;                /* По центру вертикально */
        padding: 0 16px;                    /* Отступы по бокам */
        gap: 0;                             /* Без зазора */
    }
    
    .logo a {
        font-size: 20px;                    /* Размер лого меньше (МЕНЯЙ ЦИФРУ) */
    }
    
    /* СКРЫВАЕМ МЕНЮ НА МОБИЛКЕ */
    .header-nav,
    .nav {
        display: none;                      /* Прячем */
    }
    
    /* КНОПКА "ЛИЧНЫЙ КАБИНЕТ" */
    .btn-cabinet {
        padding: 8px 16px;                  /* Компактнее */
        font-size: 13px;                    /* Меньше текст */
    }
    
    /* ГЕРОБЛОК */
    .hero {
        padding: 40px 0;                    /* Меньше отступы (МЕНЯЙ ЦИФРУ) */
    }
    
.hero-title {
    font-size: 26px;
    line-height: 1.2;
    text-transform: uppercase;
}

.hero-title br:nth-of-type(1) {
    display: inline;
}

.hero-title br:nth-of-type(1)::after {
    content: '\A';
    white-space: pre;
}

.hero-title br:nth-of-type(2) {
    display: inline;
}

.hero-title br:nth-of-type(2)::after {
    content: ' ';
}
    
    .hero-subtitle {
        font-size: 16px;                    /* Размер подзаголовка (МЕНЯЙ ЦИФРУ) */
    }
    
    .hero-image {
        margin-top: 24px;                   /* Отступ сверху */
        margin-bottom: 24px;                /* Отступ снизу */
    }
    
    /* ПРОДУКТЫ В 2 КОЛОНКИ */
    .products-grid {
        grid-template-columns: 1fr 1fr;   /* 2 одинаковые колонки вместо 6*/
        gap: 12px;                          /* Меньше расстояние */
    }
    
    /* ПАРТНЁРЫ В 2 КОЛОНКИ */
    .partners-logos {
        grid-template-columns: 1fr 1fr;     /* 2 колонки */
        gap: 16px;                          /* Расстояние между логотипами (МЕНЯЙ ЦИФРУ) */
    }
    
    .partners-logos a {
        padding: 12px;                      /* Внутренние отступы (МЕНЯЙ ЦИФРУ) */
    }
    
    .partners-logos img {
        height: 40px;                       /* Высота логотипа меньше (МЕНЯЙ ЦИФРУ) */
    }
    
    /* О СЕРВИСЕ В 1 КОЛОНКУ */
    .about-grid {
        grid-template-columns: 1fr;         /* 1 колонка вместо 2 */
    }
    
    /* ЛОГО В БЛОКЕ "О НАС" */
    .logo-big {
        font-size: 24px;                    /* Размер лого (МЕНЯЙ ЦИФРУ) */
        text-align: center;                 /* По центру */
    }
    
    /* ЗАГОЛОВОК "СЕРВИС УМНОГО ПОДБОРА..." */
    .about-card h3 {
        font-size: 24px;                    /* Размер заголовка (МЕНЯЙ ЦИФРУ) */
        text-align: center;                 /* По центру */
    }
    
    /* ОСНОВНОЙ ТЕКСТ В КАРТОЧКЕ */
    .about-card p {
        font-size: 14px;                    /* Размер текста (МЕНЯЙ ЦИФРУ) */
        line-height: 1.4;                   /* Межстрочный интервал */
    }
    
    /* БЛОГ В 1 КОЛОНКУ */
    .blog-grid {
        grid-template-columns: 1fr;         /* 1 колонка вместо 3 */
    }
    
    /* ФУТЕР В 1 КОЛОНКУ */
    .footer-content,
    .footer-links {
        grid-template-columns: 1fr;         /* 1 колонка */
        gap: 24px;                          /* Расстояние */
    }
    
    /* КОНТЕЙНЕР КОМПАКТНЕЕ */
    .container {
        padding: 0 16px;                    /* Меньше отступы по бокам */
    }
    
    /* ЗАГОЛОВКИ СЕКЦИЙ */
    .section-title {
        font-size: 28px;                    /* Размер заголовка секции (МЕНЯЙ ЦИФРУ) */
    }
    
    /* РАССТОЯНИЕ ОТ "ГОРЯЩИХ ТУРОВ" ДО "ПАРТНЁРОВ" */
    .hot-tours {
        margin-bottom: 0px;                /* Отступ снизу (МЕНЯЙ ЦИФРУ) */
    }
    
    /* РАССТОЯНИЕ ОТ "ПАРТНЁРОВ" ДО "О НАС" */
    .about-section {
        margin-top: 20px;                   /* Отступ сверху (МЕНЯЙ ЦИФРУ) */
    }
    
    /* РАССТОЯНИЕ ОТ "О НАС" ДО "БЛОГА" */
    .blog {
        margin-top: 0px;                   /* Отступ сверху (МЕНЯЙ ЦИФРУ) */
    }
    
/* ВИДЖЕТ ГОРЯЩИХ ТУРОВ — БОЛЬШЕ ОТСТУПЫ ВНУТРИ */
.widget-container {
    padding: 10px;                      /* Уменьшили с 20 до 10 для мобилок */
    overflow: visible !important;       
    height: auto !important;            /* Разрешаем расти вниз */
}

/* СЕКЦИЯ "О НАС" — УМЕНЬШАЕМ ВЫСОТУ ПОДЛОЖКИ */
.about {
    padding: 55px 0;                    /* ← Отступы сверху/снизу секции (МЕНЯЙ ЦИФРЫ) */
}

/* КАРТОЧКИ "ПАРТНЁРЫ" И "О НАС" — ВНУТРЕННИЕ ОТСТУПЫ */
.about-card {
    padding: 20px;                      /* ← Внутренние отступы карточки (МЕНЯЙ ЦИФРУ) */
}

/* Лечим обрезку контента в результатах */
    .results-content, 
    .accordion-content {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }
}

}