/* ============================================
   nav-pages.css — страницы шапочного меню
   (УСЛУГИ, РЕШЕНИЯ, КЕЙСЫ, О НАС)

   ЛОГИКА:
   - Занимают всю рабочую зону (сайдбар и футер скрыты)
   - Открываются кликом на кнопки шапки
   - Закрываются кликом на логотип
   ============================================ */

/* Страница — поверх всего контента */
.nav-page {
    position: absolute;
    inset: 0;
    background: #0d0d12;
    z-index: 20;
    display: flex;
    flex-direction: column;
    opacity: 0;
    pointer-events: none;
    transform: translateY(1vh);
    transition: opacity 0.35s ease, transform 0.35s ease;
}

/* Активная страница */
.nav-page.active {
    opacity: 1;
    pointer-events: all;
    transform: translateY(0);
}

/* Заголовок страницы */
.nav-page-header {
    flex-shrink: 0;
    padding: 1.5vh 3vh;
    background: #111;
    border-bottom: 0.1vh solid #00ff0033;
    display: flex;
    align-items: center;
    gap: 2vh;
}

.nav-page-title {
    color: #00ff0088;
    font-size: 1.3vh;
    font-family: monospace;
    letter-spacing: 0.15vh;
}

/* Скроллируемая зона */
.nav-page-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 3vh 4vh;
    scrollbar-width: thin;
    scrollbar-color: #00ff0066 #1a1a1a;
}

.nav-page-scroll::-webkit-scrollbar       { width: 0.6vh; }
.nav-page-scroll::-webkit-scrollbar-track { background: #1a1a1a; }
.nav-page-scroll::-webkit-scrollbar-thumb { background: #00ff0066; border-radius: 0.3vh; }

/* ── РАСКЛАДКА СТРАНИЦЫ ── */

/* Вводный блок с большой иконкой */
.page-intro {
    display: flex;
    gap: 3vh;
    align-items: flex-start;
    margin-bottom: 4vh;
    padding-bottom: 3vh;
    border-bottom: 0.1vh solid #1a1a2a;
}

.page-intro-icon {
    font-size: 8vh;
    flex-shrink: 0;
    width: 12vh;
    height: 12vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #1a1a2a;
    border: 0.1vh solid #2a2a3a;
    border-radius: 1vh;
    /* Сюда потом вставишь картинку через background-image */
}

.page-intro-text h2 {
    color: #00ff00;
    font-size: 2.5vh;
    margin-bottom: 1vh;
    letter-spacing: 0.1vh;
    font-family: Arial, sans-serif;
}

.page-intro-text p {
    color: #888;
    font-size: 1.5vh;
    line-height: 1.8;
    font-family: Arial, sans-serif;
}

/* Сетка разделов 2×N */
.page-sections {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2vh;
    margin-bottom: 4vh;
}

/* Один раздел */
.page-section {
    background: #1a1a1a;
    border: 0.1vh solid #2a2a2a;
    border-top: 0.3vh solid #00ff0044;
    border-radius: 0.5vh;
    padding: 2vh;
    transition: border-color 0.2s, background 0.2s;
}

.page-section:hover {
    border-color: #00ff0088;
    background: #1f1f1f;
}

/* Иконка раздела — заменишь на картинку */
.section-icon {
    font-size: 5vh;
    margin-bottom: 1.2vh;
    display: block;
    /* background: #111; border-radius: 0.5vh; padding: 1vh; */
    /* раскомментируй если хочешь рамку вокруг иконки */
}

.section-title {
    color: #00ff00;
    font-size: 1.6vh;
    font-weight: bold;
    margin-bottom: 1vh;
    letter-spacing: 0.1vh;
    font-family: Arial, sans-serif;
}

.section-text {
    color: #777;
    font-size: 1.3vh;
    line-height: 1.7;
    font-family: Arial, sans-serif;
}

/* Гиперссылки внутри текстов — в стиле HMI */
.hmi-link {
    color: #00ff00;
    text-decoration: none;
    border-bottom: 0.1vh solid #00ff0044;
    transition: border-color 0.2s, color 0.2s;
    cursor: pointer;
}

.hmi-link:hover {
    color: #66ff66;
    border-bottom-color: #00ff00;
}

/* Блок с командой (для О НАС) */
.team-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2vh;
    margin-top: 3vh;
}

.team-card {
    background: #1a1a1a;
    border: 0.1vh solid #2a2a2a;
    border-radius: 0.5vh;
    padding: 2vh;
    text-align: center;
    transition: border-color 0.2s;
}

.team-card:hover { border-color: #00ff0044; }

/* Аватар — заменишь на фото */
.team-avatar {
    font-size: 5vh;
    margin-bottom: 1vh;
    display: block;
}

.team-name {
    color: #eee;
    font-size: 1.4vh;
    font-weight: bold;
    margin-bottom: 0.5vh;
    font-family: Arial, sans-serif;
}

.team-role {
    color: #00ff0088;
    font-size: 1.1vh;
    letter-spacing: 0.1vh;
    font-family: monospace;
}

/* Блок кейса */
.case-block {
    background: #1a1a1a;
    border: 0.1vh solid #2a2a2a;
    border-left: 0.4vh solid #00ff0066;
    border-radius: 0.5vh;
    padding: 2vh 2.5vh;
    margin-bottom: 2vh;
    display: flex;
    gap: 2.5vh;
    align-items: flex-start;
    transition: border-color 0.2s, background 0.2s;
}

.case-block:hover {
    border-left-color: #00ff00;
    background: #1f1f1f;
}

/* Иконка кейса */
.case-icon {
    font-size: 5vh;
    flex-shrink: 0;
    width: 8vh;
    height: 8vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #111;
    border-radius: 0.5vh;
    /* Сюда потом вставишь картинку */
}

.case-title {
    color: #00ff00;
    font-size: 1.6vh;
    font-weight: bold;
    margin-bottom: 0.8vh;
    font-family: Arial, sans-serif;
}

.case-meta {
    color: #555;
    font-size: 1.1vh;
    font-family: monospace;
    letter-spacing: 0.1vh;
    margin-bottom: 0.8vh;
}

.case-text {
    color: #777;
    font-size: 1.3vh;
    line-height: 1.7;
    font-family: Arial, sans-serif;
}

/* Результат кейса */
.case-result {
    display: inline-block;
    margin-top: 1vh;
    padding: 0.4vh 1vh;
    background: rgba(0,255,0,0.08);
    border: 0.1vh solid #00ff0033;
    border-radius: 0.3vh;
    color: #00ff0099;
    font-size: 1.1vh;
    font-family: monospace;
}