/* ============================================
   LAYOUT.CSS - Сетка, размеры фреймов, адаптивность
   Единая система из 5 фреймов для всех страниц
   ============================================ */

/* === ОСНОВНАЯ СТРУКТУРА === */
.site-wrapper {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto; /* Прокрутка на уровне site-wrapper */
    position: relative;
}

/* === HEADER (Frame 1 и Frame 2) === */
.site-header {
    position: relative; /* Изменено с sticky - Frame 1 теперь fixed */
    z-index: 10000; /* Выше всего контента, чтобы Frame 1 был поверх всего */
    width: 100%;
    background: transparent !important; /* Прозрачный фон - не перекрывает Frame 2 */
}

/* === FRAME 1 - Панель с кнопками (всплывающая) === */
.frame-1,
#frame1,
.frame-1 > .frame1 {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-s);
    padding: var(--spacing-s) var(--spacing-m);
    background: var(--color-bg) !important; /* Цвет фона сайта */
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    z-index: 10000 !important; /* Выше всего контента - кнопки должны быть поверх всего */
    width: 100%;
    box-sizing: border-box;
    min-height: 48px;
    transform: translateY(0) !important;
    opacity: 1 !important;
    pointer-events: auto; /* Гарантируем кликабельность */
}

/* Если Frame1 находится внутри Frame 1, убираем дублирование стилей */
.frame-1 > #frame1 {
    display: contents;
}

.frame-1.is-hidden {
    display: none;
}

/* На мобильных - горизонтальный скролл или перенос */
@media (max-width: 767px) {
    .frame-1 {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }
    
    .frame-1::-webkit-scrollbar {
        height: 4px;
    }
    
    .frame-1::-webkit-scrollbar-thumb {
        background: rgba(0, 0, 0, 0.2);
        border-radius: 2px;
    }
}

/* === FRAME 2 - Логотип + фраза === */
.frame-2,
#frame2 {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--spacing-m);
    padding: var(--spacing-s) var(--spacing-m);
    background: transparent !important; /* Полностью прозрачный фон - никаких плашек */
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    max-height: 20vh;
    box-sizing: border-box;
    width: 100%;
    z-index: var(--z-index-frame-2); /* 1000 - выше контента, но ниже Frame1 */
    position: relative; /* было: position: sticky; */
    top: auto; /* было: top: 0; */
    /* Компенсируем отсутствие Frame 1 в потоке (он теперь fixed) */
    margin-top: 48px; /* Примерная высота Frame 1 для визуального расстояния */
}

.frame-2.is-hidden {
    display: none;
}

.frame-2-logo {
    max-height: 60%;
    height: auto;
    max-width: 30vw;
    flex-shrink: 0;
}

.frame-2-text {
    font-size: clamp(14px, 2vw, 20px);
    font-family: 'Caveat', cursive;
    color: var(--color-dark);
    word-wrap: break-word;
    overflow-wrap: break-word;
    flex: 1;
}

@media (max-width: 767px) {
    .frame-2 {
        flex-direction: column;
        align-items: flex-start;
        max-height: none;
        /* padding переопределяется в секции Mobile ниже */
    }
    
    .frame-2-logo {
        max-width: 60vw;
        max-height: 80px;
    }
    
    .frame-2-text {
        font-size: clamp(16px, 4vw, 20px);
    }
}

/* === MAIN (Frame 3) === */
.site-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative;
    /* Гарантируем правильную прокрутку */
    min-height: 0;
    overflow: visible;
    /* Убираем padding-bottom, так как footer теперь идет после Frame3 в потоке документа */
    padding-bottom: 0;
    /* Добавляем отступ сверху для фиксированного Frame 1 (компенсируется в мобильных стилях) */
    padding-top: 0;
}

/* === FRAME 3 - Основной контент === */
.frame-3,
.frame3 {
    flex: 1;
    padding: var(--spacing-m) var(--spacing-s);
    /* УВЕЛИЧЕННЫЙ отступ сверху для расстояния от Frame2 - устойчив к масштабированию */
    padding-top: clamp(80px, 12vh, 120px); /* Увеличено в 2 раза: минимум 80px, максимум 120px, используем vh для устойчивости */
    position: relative;
    z-index: var(--z-index-content); /* 2 - ниже Frame2, но выше декоративных элементов */
    min-height: 0;
    overflow-x: hidden;
    overflow-y: visible; /* Прокрутка на уровне site-wrapper, не здесь */
    width: 100%;
    /* Убеждаемся, что Frame3 находится в правильном stacking context */
    isolation: isolate; /* Создает новый stacking context, чтобы карточки были выше фразы */
    /* Адаптация под соотношения сторон */
    box-sizing: border-box;
}

/* Декоративный слой для парящих элементов */
.frame-3-decor {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: var(--z-index-decor);
    overflow: hidden;
    /* Фиксируем относительно frame-3, чтобы не создавать артефакты при прокрутке */
    will-change: transform;
}

/* Контентный слой */
.frame-3-content,
.frame3 > .container,
.hub3 > .container {
    position: relative;
    z-index: var(--z-index-content);
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    padding: 40px 24px !important; /* Единый отступ сверху на всех страницах - приоритет над inline стилями */
    box-sizing: border-box;
    text-align: center; /* Центрирование текста */
    display: flex;
    flex-direction: column;
    align-items: center; /* Центрирование по горизонтали */
    justify-content: flex-start; /* Контент начинается сверху */
    /* Адаптация под соотношения сторон */
    min-height: 0;
}

/* Гарантируем одинаковый отступ сверху для всех вариантов */
.frame-3-content[style*="padding"],
.frame3 > .container[style*="padding"],
.hub3 > .container[style*="padding"] {
    padding-top: 40px !important; /* Принудительно устанавливаем одинаковый отступ сверху */
}

/* Старые стили для мобильных удалены - используются стили из секции Mobile ниже */

/* === FOOTER (Frame 4 и Frame 5) === */
.site-footer {
    /* Изменено с fixed на relative - footer теперь часть потока документа */
    position: relative;
    width: 100%;
    z-index: var(--z-index-frame-4);
    /* Убираем transition и transform, так как footer больше не фиксированный */
    margin-top: clamp(20px, 4vw, 40px); /* Отступ сверху от Frame3 */
}

/* Класс hidden-on-scroll больше не нужен, так как footer не фиксированный */
.site-footer.hidden-on-scroll {
    /* Оставляем для обратной совместимости, но не применяем скрытие */
    display: block;
}

/* === FRAME 4 - Правила безопасности === */
.frame-4,
#frame4,
#hub4 {
    padding: clamp(15px, 3vw, 25px) var(--spacing-m);
    padding-top: clamp(20px, 4vw, 30px); /* Отступ сверху от Frame3 */
    font-size: var(--font-size-xs);
    line-height: 1.4;
    background: var(--color-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: var(--z-index-frame-4);
    width: 100%;
    box-sizing: border-box;
    color: var(--color-dark);
    font-family: 'Montserrat', sans-serif;
    text-align: center; /* Центрирование текста */
    max-width: 1200px;
    margin: 0 auto; /* Центрирование блока */
}

.frame-4.is-hidden {
    display: none;
}

/* === FRAME 5 - Информация о создателе === */
.frame-5,
#frame5,
#hub5 {
    padding: var(--spacing-s) var(--spacing-m);
    padding-bottom: clamp(20px, 4vw, 30px); /* Отступ снизу для видимости */
    font-size: var(--font-size-xs);
    line-height: 1.4;
    background: var(--color-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: var(--z-index-frame-4);
    width: 100%;
    box-sizing: border-box;
    color: var(--color-dark);
    font-family: 'Montserrat', sans-serif;
    text-align: center; /* Центрирование текста */
    max-width: 1200px;
    margin: 0 auto; /* Центрирование блока */
}

.frame-5.is-hidden {
    display: none;
}

/* === АДАПТИВНОСТЬ === */
/* Desktop: min-width: 1024px */
@media (min-width: 1024px) {
    .frame-1 {
        justify-content: flex-start;
        padding: var(--spacing-s) var(--spacing-l);
    }
    
    .frame-2 {
        padding: var(--spacing-s) var(--spacing-l);
    }
    
    .frame-3-content,
    .frame3 > .container {
        padding: 40px 24px !important; /* Единый отступ сверху на всех страницах */
    }
    
    /* Гарантируем одинаковый отступ сверху на десктопе */
    .frame-3-content[style*="padding"],
    .frame3 > .container[style*="padding"] {
        padding-top: 40px !important;
    }
    
    .frame-4,
    .frame-5 {
        padding: var(--spacing-m) var(--spacing-l);
        text-align: center; /* Центрирование текста */
        max-width: 1200px;
        margin: 0 auto; /* Центрирование блока */
    }
}

/* Tablet: 768px - 1023px */
@media (min-width: 768px) and (max-width: 1023px) {
    .frame-2-text {
        max-width: 60%;
    }
    
    .frame-3-content,
    .frame3 > .container {
        padding: 40px 24px !important; /* Единый отступ сверху на всех страницах */
    }
    
    /* Гарантируем одинаковый отступ сверху на десктопе */
    .frame-3-content[style*="padding"],
    .frame3 > .container[style*="padding"] {
        padding-top: 40px !important;
    }
}

/* Mobile: max-width: 767px */
@media (max-width: 767px) {
    /* Гарантируем симметричные отступы для body и html на мобильных */
    html, body {
        margin: 0 !important;
        padding: 0 !important;
        overflow-x: hidden;
        width: 100%;
        box-sizing: border-box;
    }
    
    /* site-wrapper - без отступов, чтобы не создавать асимметрию */
    .site-wrapper {
        margin: 0 !important;
        padding: 0 !important;
        width: 100%;
        box-sizing: border-box;
    }
    
    /* Симметричные отступы для всех фреймов */
    .frame-1,
    .frame-1 > .frame1,
    #frame1,
    .frame1 {
        padding-left: clamp(16px, 4vw, 24px) !important;
        padding-right: clamp(16px, 4vw, 24px) !important;
        padding-top: var(--spacing-s) !important;
        padding-bottom: var(--spacing-s) !important;
        gap: var(--spacing-xs);
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    /* Убираем внутренние отступы у frame1-content на мобильных */
    .frame-1 .frame1-content,
    .frame1-content {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    /* Стили для кнопок Frame1 управляются через frame1.css */
    /* Здесь только базовые отступы контейнера */
    
    .frame-2 {
        padding: var(--spacing-s) clamp(16px, 4vw, 24px) !important;
        padding-top: 0 !important; /* Убираем отступ сверху - логотип ближе к кнопкам */
        max-height: none; /* Убираем ограничение высоты на мобильных */
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-top: 48px !important; /* Компенсируем отсутствие Frame 1 в потоке на мобильных */
    }
    
    .frame-3 {
        padding-left: clamp(16px, 4vw, 24px) !important;
        padding-right: clamp(16px, 4vw, 24px) !important;
        padding-top: clamp(40px, 6vh, 60px) !important; /* Уменьшенный отступ сверху на мобильных - меньше расстояние до логотипа */
        padding-bottom: var(--spacing-m);
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    .frame-3-content,
    .frame3 > .container {
        padding: 30px 0 !important; /* Убираем боковые отступы - они уже у frame-3 */
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    .frame-4,
    .frame-5 {
        padding: var(--spacing-s) clamp(16px, 4vw, 24px) !important;
        font-size: clamp(10px, 2vw, 12px);
        text-align: center; /* Центрирование текста */
        max-width: 1200px;
        margin-left: auto !important;
        margin-right: auto !important;
        line-height: 1.5;
    }
}

/* Очень маленькие экраны: max-width: 480px */
@media (max-width: 480px) {
    /* Гарантируем симметричные отступы на очень маленьких экранах */
    html, body {
        margin: 0 !important;
        padding: 0 !important;
        overflow-x: hidden;
        width: 100%;
        box-sizing: border-box;
    }
    
    .site-wrapper {
        margin: 0 !important;
        padding: 0 !important;
        width: 100%;
        box-sizing: border-box;
    }
    
    .frame-1,
    .frame-1 > .frame1,
    #frame1,
    .frame1 {
        padding-left: clamp(12px, 3vw, 16px) !important;
        padding-right: clamp(12px, 3vw, 16px) !important;
        padding-top: 8px !important;
        padding-bottom: 8px !important;
        gap: 6px;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    /* Убираем внутренние отступы у frame1-content на очень маленьких экранах */
    .frame-1 .frame1-content,
    .frame1-content {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    /* Стили для кнопок Frame1 управляются через frame1.css */
    
    .frame-2 {
        padding: 8px clamp(12px, 3vw, 16px) !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    .frame-3 {
        padding-left: clamp(12px, 3vw, 16px) !important;
        padding-right: clamp(12px, 3vw, 16px) !important;
        padding-top: clamp(35px, 5vh, 50px) !important; /* Уменьшенный отступ сверху - меньше расстояние до логотипа */
        padding-bottom: var(--spacing-s);
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    .frame-3-content,
    .frame3 > .container {
        padding: 24px 0 !important; /* Убираем боковые отступы - они уже у frame-3 */
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    .frame-4,
    .frame-5 {
        padding: 8px clamp(12px, 3vw, 16px) !important;
        font-size: clamp(9px, 1.8vw, 11px);
        margin-left: auto !important;
        margin-right: auto !important;
    }
}