/* ==========================================================================
   1. БАЗОВЫЙ СЕТАП И ПРЕМИАЛЬНАЯ ТИПОГРАФИКА
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

html {
    scroll-behavior: smooth;
}

body.site-body {
    margin: 0;
    padding: 0;
    font-family: 'Plus Jakarta Sans', sans-serif;
    color: #48434c; /* Твой плотный Whisper Violet */
    min-height: 100vh;
    display: flex;
    -webkit-font-smoothing: antialiased;

    /* НАСТРОЙКА ФОНА: Белый слева плавно переходит в картинку справа */
    background-image: 
        linear-gradient(to right, #FFFFFF 50%, rgba(255, 255, 255, 0) 100%), 
        url('/static/images/pictures/background.jpg'); /* Путь к твоему будущему изображению */
    
    background-attachment: fixed;  /* Картинка стоит монолитно при скролле */
    background-position: right top; /* Прижимаем строго к правому верхнему углу */
    background-repeat: no-repeat;
    background-size: contain;       /* Либо 'cover', если нужно растянуть на всю правую половину */
}
/* АДАПТИВ ПОД ТЕЛЕФОНЫ И ВЕРТИКАЛЬНЫЕ ЭКРАНЫ */
@media (max-width: 768px) {
    body.site-body {
        /* На телефонах меняем направление: белый сверху плавно растворяется к низу */
        background-image: 
            linear-gradient(to bottom, #FFFFFF 60%, rgba(255, 255, 255, 0.1) 100%), 
            url('/static/images/pictures/background.jpg');
        
        background-attachment: scroll; /* На мобилках fixed часто лагает при скролле, scroll надежнее */
        background-position: right top; /* Смещаем картинку в самый низ страницы */
        background-size: horizontal; /* Картинка растягивается по ширине экрана снизу */
        background-repeat: no-repeat;
    }
}

/* Мягкое выделение текста в тон Lilac Mist */
::selection {
    background-color: #C5C0DB;
    color: #FFFFFF;
}

/* Бесшовный аккуратный скроллбар */
::-webkit-scrollbar {
    width: 6px;
}
::-webkit-scrollbar-track {
    background: #FFFFFF;
}
::-webkit-scrollbar-thumb {
    background: #C1C4E7;
    border-radius: 10px;
}

/* ==========================================================================
   2. ЛЕВЫЙ САЙДБАР (Припыленный матовый Dusty Mauve)
   ========================================================================== */
.sidebar {
    width: 288px;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    background-color: #8888B3; /* Строго Dusty Mauve — благородная база */
    padding: 56px 40px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-sizing: border-box;
    border: none;
    z-index: 50;
}

/* ==========================================================================
   СТИЛИ ДЛЯ ГРАФИЧЕСКОГО ЛОГОТИПА В САЙДБАРЕ
   ========================================================================== */
.logo {
    display: flex;
    align-items: center; /* Центрируем иконку строго по вертикали относительно текста */
    gap: 10px;           /* Отступ между картинкой и твоим именем */
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--accent-color);
    margin-bottom: 48px;
}

.logo-img {
    width: 24px;         /* Идеальный размер для мелкого аккуратного логотипа */
    height: 24px;
    object-fit: contain; /* Защита от искажения пропорций картинки */
    
    /* Если у тебя логотип белого или черного цвета в формате SVG, 
       можно добавить инверсию для темной темы, чтобы не перерисовывать файл: */
    transition: filter 0.3s ease;
}

/* Адаптивный сброс для мобилок */
@media (max-width: 768px) {
    .sidebar { display: none; }
    .main-content { margin-left: 0 !important; padding: 48px 24px !important; }
}

.sidebar-top {
    display: flex;
    flex-direction: column;
}

.logo {
    color: #FFFFFF; /* Белый контрастный логотип на матовом фоне */
    font-weight: 800;
    font-size: 1.4rem;
    letter-spacing: -0.03em;
    margin-bottom: 64px;
}

.navigation {
    display: flex;
    flex-direction: column;
    gap: 8px; /* Уменьшаем зазор, так как теперь у самих ссылок будут внутренние отступы */
}

.nav-link {
    font-size: 0.95rem;
    font-weight: 600;
    color: #C1C4E7; /* Твой Light Silver */
    text-decoration: none;
    
    /* Делаем ссылку полноценным блоком для заливки */
    display: block;
    padding: 12px 16px;
    border-radius: 8px; /* Мягкое скругление прямоугольника, убьем в 0px если нужен жесткий угол */
    
    transition: all 0.2s ease-in-out;
}

.nav-link span {
    font-weight: 800;
    color: #FFFFFF;
    margin-right: 8px;
}

/* ЭФФЕКТ НАВЕДЕНИЯ НА ВЕСЬ ПРЯМОУГОЛЬНИК */
.nav-link:hover {
    background-color: #48434C; /* ЦВЕТ ХОВЕРА: Пока поставил Silver Periwinkle, замени на любой свой код */
    color: #FFFFFF; /* Текст внутри прямоугольника становится белым при наведении */
    transform: none; /* Убираем сдвиг вправо, так как прямоугольник должен стоять монолитно */
}

.nav-link:hover {
    color: #FFFFFF;
    transform: translateX(4px);
}

.sidebar-bottom {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.chat-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    color: #C1C4E7;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 12px;
}

/* Исправленная монолитная кнопка, которая больше не съезжает */
.cta-button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 14px 16px;
    background-color: #FFFFFF; /* Чистый белый solid-блок */
    color: #8888B3; /* Текст цвета сайдбара */
    font-size: 0.85rem;
    font-weight: 700;
    text-decoration: none;
    border-radius: 12px;
    transition: transform 0.2s ease, background-color 0.2s ease;
    border: none;
    box-sizing: border-box;
}

.cta-button:hover {
    background-color: #C1C4E7; /* Light Silver при наведении */
    color: #8888B3;
    transform: translateY(-1px);
}

/* ==========================================================================
   3. ОСНОВНОЙ КОНТЕНТ И СТРУКТУРА SOLID-ПЛАШЕК
   ========================================================================== */
.main-content {
    margin-left: 288px;
    flex: 1;
    padding: 80px 104px;
    max-width: 1024px;
    box-sizing: border-box;
}

.content-section {
    padding: 88px 0;
    border-bottom: 2px solid #C1C4E7; /* Линия раздела в тоне Light Silver */
}

/* Секция приветствия */
.welcome-text {
    color: #9296C4; /* Silver Periwinkle */
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 12px;
}

.user-name {
    font-size: 4.5rem;
    font-weight: 800;
    color: #898BD9; /* Самый глубокий Periwinkle Twilight на белом фоне */
    margin: 0 0 8px 0;
    letter-spacing: -0.04em;
    line-height: 1.05;
}

.user-role {
    font-size: 2.25rem;
    color: #9296C4; /* Silver Periwinkle */
    margin: 0 0 36px 0;
    font-weight: 600;
    letter-spacing: -0.02em;
}

.user-bio {
    color: #9296C4;
    color:  #3D3066;
    color: #48434C;
    max-width: 44rem;
    line-height: 1.3;
    font-size: 1.15rem;
    margin-bottom: 64px;

    /* Уменьшаем общую высоту строки для плотного текста */
    line-height: 1.2;
}

/* Точечно настраиваем поведение переносов, чтобы они не создавали дыр */
.user-bio br {
    content: "";
    margin-bottom: 0.17rem; /* Регулируй этот параметр: чем он меньше, тем ближе будут строки при ручном переносе */
    display: block;
}

/* Блок экспертизы (Solid плашка Lilac Mist) */
.block-title {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #9296C4;
    color: #48434c;
    font-weight: 700;
    margin-bottom: 24px;
}

.skills-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 32px;
    background-color: #C5C0DB; /* Ровная solid-заливка Lilac Mist */
    background-color: #EEE5F7;
    padding: 40px;
    border-radius: 20px;
}

.category-title {
    font-size: 1.1rem;
    font-weight: 800;
    color:  #3D3066; /* Насыщенный текст внутри плашки */
    margin: 0 0 16px 0;
}

.skills-list {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 0.95rem;
    color: #FFFFFF; /* Белый читаемый текст внутри цветного блока */
    color: #48434C;
}

.skills-list li {
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
}

.skills-list .icon {
    color: #FFFFFF;
}

/* Заголовки основных разделов */
.section-title {
    font-size: 2rem;
    font-weight: 800;
    color: #898BD9; /* Periwinkle Twilight */
    margin-bottom: 12px;
    letter-spacing: -0.03em;
}

.section-title span {
    color: #9296C4;
    margin-right: 6px;
}

.section-subtitle {
    color: #9296C4;
    font-size: 1rem;
    margin-bottom: 48px;
}

/* ==========================================================================
   БЛОК РЕСУРСОВ И КОНТАКТОВ (СТРОГИЕ СВЕТЛЫЕ ПЛАТФОРМЫ)
   ========================================================================== */
.resources-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 24px;
}

.resource-card {
    /* Делаем фон очень светлым, полупрозрачным Light Silver */
    background-color: rgba(193, 196, 231, 0.25); 
    padding: 36px;
    border-radius: 8px; /* Менее круглые, строгие углы */
    border: none;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    box-sizing: border-box;
}

/* Логотипы ресурсов рядом с названиями */
.card-title {
    color: #898BD9; /* Periwinkle Twilight */
    font-size: 1.2rem;
    font-weight: 800;
    margin: 0 0 12px 0;
    display: flex;
    align-items: center;
    gap: 12px; /* Зазор между иконкой и текстом */
}

.card-logo {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.card-text {
    font-size: 0.95rem;
    color: #48434c; /* Твой плотный Whisper Violet */
    line-height: 1.6;
    margin: 0 0 24px 0;
}

/* Единственный интерактивный и наводимый элемент в карточке */
.card-link {
    font-size: 0.9rem;
    font-weight: 700;
    color: #898BD9; /* Базовый цвет ссылки — Periwinkle Twilight */
    text-decoration: none;
    display: inline-block;
    padding: 6px 0;
    transition: color 0.2s ease, transform 0.2s ease;
    cursor: pointer;
}

/* Ховер-эффект ТОЛЬКО для текстовой ссылки */
.card-link:hover {
    color: #8888B3; /* Цвет ховера — Dusty Mauve */
    transform: translateX(4px); /* Легкое смещение стрелочки вправо */
}

/* Блок шоурума проектов */
/* ==========================================================================
   БЛОК ШОУРУМА ПРОЕКТОВ (ПОЛНОЭКРАННЫЕ ПРОДУКТОВЫЕ ЛОНГРИДЫ)
   ========================================================================== */
.projects-list {
    display: flex;
    flex-direction: column;
    gap: 96px; /* Огромный зазор между проектами, чтобы они разделялись как независимые экраны */
}

.project-item {
    background-color: #FFFFFF;
    border: none; /* Полностью убираем коробку */
    border-radius: 0;
    padding: 0;
    width: 100%;
}

/* 1. Заголовок проекта (Крупный, доминирующий сверху) */
.project-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 24px;
    margin-bottom: 32px;
    border-bottom: 2px solid #C1C4E7; /* Горизонтальная черта под каждый большой заголовок */
    padding-bottom: 16px;
}

.project-title {
    font-size: 2.5rem; /* Выделяем проект как полноценный заголовок страницы */
    font-weight: 800;
    color: #898BD9; /* Periwinkle Twilight */
    margin: 0;
    letter-spacing: -0.03em;
}

/* 7. Стек в тегах (Группируется аккуратно возле заголовка) */
.project-tags {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.tag-badge {
    font-size: 12px;
    font-weight: 700;
    padding: 6px 16px;
    background-color: #C1C4E7; /* Light Silver */
    color: #FFFFFF;
    border-radius: 20px; /* Круглые аккуратные пилюли */
}

/* 2. Нативный Медиаскроллер (Схемы, код, видео) */
/* В HTML это тег <p class="project-description">, мы превращаем его в горизонтальную ленту */
.project-description {
    display: flex;
    gap: 24px;
    overflow-x: auto; /* Включаем горизонтальный скролл */
    scroll-snap-type: x mandatory;
    padding-bottom: 24px;
    margin-bottom: 48px;
    width: 100%;
}

/* Кастомизация скроллбара для медиаленты */
.project-description::-webkit-scrollbar {
    height: 6px;
}
.project-description::-webkit-scrollbar-thumb {
    background: #C5C0DB;
    border-radius: 10px;
}

/* Стилизуем контент внутри медиаскроллера (когда ты вставишь туда картинки/видео вместо текста) */
.project-description img, 
.project-description video,
.project-description p {
    flex: 0 0 70%; /* Каждая схема или скриншот занимает 70% ширины экрана */
    scroll-snap-align: start;
    border-radius: 16px;
    background-color: #C5C0DB; /* Подложка Lilac Mist для медиа, если картинка прозрачная */
    object-fit: cover;
    min-height: 350px;
}

/* 3, 4, 5. Описание проблемы, решения, пайплайна и архитектуры */
/* В HTML это блок .technical-details, мы превращаем его в чистый текстовый поток сверху вниз */
.technical-details {
    display: flex;
    flex-direction: column; /* Разворачиваем блоки вертикально друг за другом */
    gap: 40px;
    background-color: transparent; /* Никаких фоновых коробок */
    padding: 0;
    border-radius: 0;
    margin-bottom: 48px;
}

.detail-box {
    font-size: 1.1rem;
    line-height: 1.7;
    color: #48434c; /* Твой Whisper Violet для высокой читаемости текста */
}

.box-label {
    display: block;
    font-weight: 800;
    font-size: 1.3rem;
    margin-bottom: 12px;
    color: #898BD9; /* Выделяем подзаголовки (Проблема, Решение, Архитектура) */
    letter-spacing: -0.01em;
}

.box-content {
    color: #48434c;
}

/* Настройка конкретно для разметки списков, если они будут внутри описания */
.box-content ul {
    list-style: none;
    padding: 0;
    margin: 12px 0 0 0;
}

.box-content li {
    margin-bottom: 8px;
    padding-left: 16px;
    position: relative;
}

.box-content li::before {
    content: "—";
    position: absolute;
    left: 0;
    color: #9296C4;
}

/* 6. ССЫЛКИ НА использование или репозиторий (Нижний футер проекта) */
.project-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 24px;
    padding-top: 32px;
    border-top: 2px solid #C1C4E7; /* Черта, отделяющая проект от следующего */
}

/* Метрики (РПС, Latency и т.д.) */
.project-metrics {
    display: flex;
    gap: 32px;
    flex-wrap: wrap;
}

.metric-item {
    font-size: 1rem;
    font-weight: 700;
    color: #48434c;
    display: flex;
    align-items: center;
    gap: 10px;
}

.metric-item .dot {
    width: 8px;
    height: 8px;
    background-color: #898BD9;
    border-radius: 50%;
}

/* Ссылки на репо/использование */
.project-links {
    display: flex;
    gap: 32px;
    font-size: 1rem;
    font-weight: 800;
}

.link-github {
    color: #48434c;
    text-decoration: none;
    transition: color 0.2s ease;
}
.link-github:hover { 
    color: #898BD9; 
}

.link-demo {
    color: #898BD9;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
}
.link-demo:hover { 
    color: #9296C4; 
}

.pulse-dot {
    width: 8px;
    height: 8px;
    background-color: #C1C4E7;
    border-radius: 50%;
    animation: solidPulse 2s infinite;
}

/* Блок 4: Инженерная культура (Плашки Light Silver) */
.principles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 24px;
    font-size: 0.9rem;
    color: #9296C4;
    line-height: 1.7;
}

.principle-card {
    padding: 36px;
    background-color: #C1C4E7; /* Монолитная плитка */
    border-radius: 20px;
    color: #FFFFFF; /* Текст сливается с плашкой */
}

.principle-title {
    color: #898BD9;
    display: block;
    margin-bottom: 12px;
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}

/* Минималистичный футер */
.site-footer {
    margin-top: 112px;
    padding-top: 32px;
    text-align: center;
    font-size: 0.85rem;
    color: #9296C4;
    font-weight: 600;
    opacity: 0.7;
}
/* ==========================================================================
   ФИКСИРОВАННЫЙ ВЕРТИКАЛЬНЫЙ СТЕК ЛОГОТИПОВ (СПРАВА СВЕРХУ)
   ========================================================================== */
.tech-logos-stack {
    position: fixed;
    top: 40px;
    right: 40px;
    display: flex;
    flex-direction: column;
    gap: 20px; /* Расстояние между логотипами */
    z-index: 100; /* Логотипы всегда поверх контента при скролле */
    align-items: center;
}

.tech-logo {
    width: 36px;       /* Идеальный аккуратный размер для иконок */
    height: 36px;
    object-fit: contain;
    filter: grayscale(20%) opacity(0.8); /* Слегка приглушаем яркость под палитру */
    transition: all 0.25s ease-in-out;
}

/* Эффект при наведении на конкретную иконку */
.tech-logo:hover {
    filter: grayscale(0%) opacity(1);
    transform: scale(1.1);
}

/* Скрываем стек на мобильных экранах, чтобы не перекрывать текст */
@media (max-width: 1024px) {
    .tech-logos-stack {
        display: none;
    }
}

/* ==========================================================================
   ОБЛАКО ТЕГОВ ТЕХНОЛОГИЙ (ВМЕСТО СТОЛБЦОВ)
   ========================================================================== */
.skills-flex-pool {
    display: flex;
    flex-wrap: wrap; /* Разрешаем перенос тегов на новую строку */
    gap: 12px;       /* Расстояние между тегами */
    width: 100%;
    max-width: 44rem; /* Держим блок в границах ширины биографии */
}

.skill-tag-item {
    font-size: 0.95rem;
    font-weight: 700;
    padding: 8px 16px;
    background-color: #C5C0DB; /* Solid заливка Lilac Mist */
    background-color: #238689;
    color: #48434c;            /* Читаемый Whisper Violet */
    color: #FFFFFF;
    border-radius: 10px;       /* Аккуратные углы */
    user-select: none;
    transition: background-color 0.2s ease;
}

/* Мягкий интерактив при наведении */
.skill-tag-item:hover {
    background-color: #C1C4E7; /* Light Silver */
}

/* ==========================================================================
   ПОЛНЫЙ ЗАПРЕТ ВЫДЕЛЕНИЯ ТЕКСТА КРОМЕ BIO И СТЕКА
   ========================================================================== */

/* 1. Глобально запрещаем выделение везде */
body.site-body {
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none;     /* IE 10+ и Edge */
    user-select: none;         /* Стандартное свойство (Chrome, Opera, Firefox) */
}

/* ==========================================================================
   ПОЛНОЕ ОТКЛЮЧЕНИЕ КУРСОРA НАБОРА ТЕКСТА (CARET)
   ========================================================================== */

/* 1. Для всего сайта жестко ставим обычную стрелку по умолчанию */
html, body, p, span, div, h1, h2, h3, h4, h5, h6 {
    cursor: default;
}

/* 2. Для кликабельных элементов (ссылок, кнопок, тегов) ставим палец */
a, 
.cta-button, 
.card-link, 
.nav-link {
    cursor: pointer;
}

/* 3. Даже там, где выделение разрешено (Bio и Стек), принудительно гасим палочку ввода */
.user-bio, 
.user-bio *, 
.skill-tag-item {
    cursor: default !important; /* !important на всякий случай перекроет дефолты браузера */
}

/* ==========================================================================
   ЖЕСТКОЕ ИСПРАВЛЕНИЕ КУРСОРОВ (УНИЧТОЖАЕМ КАРЕТКУ НАБОРА ТЕКСТА)
   ========================================================================== */

/* 1. Глобально для абсолютно всех элементов и их содержимого ставим стрелку */
*, *::before, *::after {
    cursor: default !important;
}

/* 2. Разрешаем палец (pointer) ТОЛЬКО для реальных интерактивных ссылок и кнопок */
a, 
a *,
.cta-button, 
.card-link, 
.nav-link,
.nav-link span {
    cursor: pointer !important;
}

/* 3. Для зон, где разрешено выделение (Bio и Стек), принудительно оставляем 
   обычную стрелку, запрещая браузеру вызывать каретку ввода */
.user-bio, 
.user-bio *, 
.skills-flex-pool,
.skill-tag-item {
    cursor: default !important;
}

.card-emoji-marker {
    font-size: 1.2rem;   /* Подгоняем размер под размер шрифта заголовка */
    line-height: 1;
    display: inline-flex;
    align-items: center;
}