@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@400;700;800&display=swap');
/* Общие настройки */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Figtree', Arial, sans-serif;
    background-color: #fff;
    color: #000;
}
.logo {
    display: flex;
    align-items: center;
    height: 100%; /* Чтобы логотип был по центру хедера */
    text-decoration: none;
}

.logo img {
    height: 40px;    /* Установи нужную высоту логотипа */
    width: auto;      /* Ширина подстроится автоматически, чтобы не искажать пропорции */
    display: block;
    object-fit: contain;
}

/* Навигация (Общее для хедера и футера) */
.navbar {
    position: fixed;
    left: 0;
    right: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 40px;
    font-size: 14px;
    z-index: 100;
    background-color: rgba(255, 255, 255, 0.9);
    box-sizing: border-box; 
}


.location-text {
    font-style: italic; /* Тот самый курсив */
    cursor: default;    /* Мышка не превращается в палец */
    user-select: none;  /* Текст нельзя случайно выделить (по желанию) */
}

/* Выбираем ссылки в хедере и элементы в футере */
.nav-links a, 
.footer span {
    text-decoration: none;
    color: #000;
    position: relative; /* Обязательно: это «якорь» для нашей линии */
    padding-bottom: 2px; /* Небольшой отступ для линии */
    cursor: pointer;
    transition: color 0.3s ease;
    cursor: pointer;
    position: relative; /* Плавная смена цвета, если захочешь */
}

/* Создаем саму линию (пока невидимую) */
.nav-links a::after, 
.footer span::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;             /* Линия начинается с нулевой ширины */
    height: 1px;          /* Тоненькая линия, как ты и просила */
    background-color: #000;
    transition: width 0.3s ease; /* Плавность анимации (0.3 секунды) */
}

/* Анимация ПРИ наведении (hover) */
.nav-links a:hover::after, 
.footer span:hover::after {
    width: 100%;          /* Линия растягивается на всю ширину текста */
}

.header { top: 0; }
.footer { bottom: 0; }

.logo {
    font-family: 'Figtree', sans-serif;
    font-weight: 800;          /* Жирный шрифт, как в заголовке */
    font-size: 22px;           /* Подбери размер на глаз */
    text-transform: lowercase; /* Все буквы маленькие, как на скрине */
    letter-spacing: -1px;      /* Немного сдвинем буквы для плотности */
    cursor: pointer;           /* Чтобы при наведении курсор становился пальчиком */
}

.nav-links a {
    text-decoration: none;
    color: #000;
    margin-left: 30px;
}
/* Контейнер всего блока "Next Project" */
.next-project-link {
    /* Ограничиваем ширину, чтобы он был компактным как на скрине */
    max-width: 800px; 
    margin: 100px auto; /* auto центрирует блок по горизонтали */
    padding: 0 20px;
}

.next-project-link a {
    text-decoration: none;
    color: #000;
}

/* Контейнер для фото */
.next-image {
    width: 100%;
    margin-bottom: 25px;
}

.next-image img {
    width: 100%; /* Фото займет все 900px ширины */
    height: auto;
    display: block;
    object-fit: cover;
}

/* Текст и стрелка */
.next-details {
    display: flex;
    justify-content: space-between; /* Разносит текст и стрелку по краям 900-пиксельного блока */
    align-items: flex-end;
}

.next-text h3 {
    font-weight: 800;
    font-size: 18px;
    margin-bottom: 5px;
}

.next-text p {
    font-size: 14px;
}

.next-arrow img {
    width: 25px; /* Размер стрелочки */
    height: auto;
}




/* Основная сетка (Hero Section) */
.hero {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Две колонки равной ширины */
    height: 100vh;
    padding: 80px 40px; /* Отступы, чтобы текст не залезал под хедер */
    gap: 40px;
}

/* Левая часть: Картинка */
.hero-image {
    height: 100%;
    overflow: hidden;
}

.hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Чтобы картинка заполняла блок */
}

/* Правая часть: Текст */
.hero-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Это растолкает заголовок вверх, а текст вниз */
    
    padding-top: 10px;
    padding-bottom: 0; /* ИЗМЕНИ ЭТО: было 60px, ставим 0 */
    
    height: 100%; /* Убеждаемся, что блок растянут на всю высоту */
}

.description {
    max-width: 550px;
    font-size: 14px;
    line-height: 1.4;
    color: #333;
    align-self: flex-start; 

    margin-bottom: 0; /* Убедись, что здесь стоит 0 */
}

/* На всякий случай сбросим отступ у последнего абзаца */
.description p:last-child {
    margin-bottom: 0;
}
h1 {
    font-size: clamp(80px, 15vw, 220px);
    font-weight: 800;
    line-height: 0.8;
    margin: 0;
    letter-spacing: -5px;

    /* ПРИЖИМАЕМ ЗАГОЛОВОК ВПРАВО */
    align-self: flex-end; 
}

.description {
    max-width: 550px;
    font-size: 14px;
    line-height: 1.4;
    color: #333;

    /* ПРИЖИМАЕМ ТЕКСТ ВЛЕВО (ближе к картинке) */
    align-self: flex-start; 
    
    /* Добавим небольшой отступ от самой картинки, если нужно */
    margin-left: 0px; 
}

h1 {
    font-size: 100px; /* Очень крупный заголовок */
    font-weight: bold;
    margin-bottom: 40px;
}

.description {
    font-size: 14px;
    line-height: 1.5;
    max-width: 820px; /* Ограничиваем ширину текста как в макете */
}

.description p {
    margin-bottom: 0px;
}
/* Разрешаем странице скроллиться */
body {
    overflow-x: hidden;
    overflow-y: auto;
}

.category-title {
    grid-column: 1 / -1; 
    /*text-align: center;/* Заголовок занимает всю ширину сетки */
    font-size: 24px;
    font-weight: 800;
    text-transform: uppercase; /* Делаем капсом для строгости */
    margin-top: 120px;    /* Отступ сверху от предыдущего блока */
    margin-bottom: 40px; /* Отступ снизу до картинок */
    letter-spacing: -1px;
}
/* Секция галереи */
.gallery {
    padding: 100px 40px; /* Отступы сверху и снизу, чтобы не перекрывалось меню */
    background-color: #fff;
    display: flex;
    flex-direction: column;
    gap: 0px; /* Расстояние между блоками картинок */
}

/* Блок с одной крупной картинкой */
.gallery-item.large  {
    display: flex;
    justify-content: center; 
    margin-bottom: 0px;/* Центрируем вертикальное фото */
}

.gallery-item.large  img {
    width: 60%; /* Делаем её чуть уже, как на твоем дизайне */
    height: auto;
    object-fit: cover;
    margin-bottom: 40px;
}
/* Создаем НОВОЕ правило только для тех, у кого есть класс full-width */
.gallery-item.large.full-width img {
    width: 100%; /* Растягиваем до краев белого поля (40px от края экрана) */
}

/* Ряд с двумя картинками (используем Grid) */
.gallery-row {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Две равные колонки */
    gap: 40px; /* Расстояние между двумя фото */
    margin-bottom: 40px;
}

.gallery-item_1 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    
}
.gallery-item_2 img {
    width: 100%;
    height: 80%;
    object-fit: cover;
    display: block;
    
}

/* Начальное состояние панели — спрятана внизу */
.info-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    z-index: 200; /* Выше всего на сайте */
    transform: translateY(100%); /* Полностью уходит вниз за экран */
    transition: transform 0.6s cubic-bezier(0.19, 1, 0.22, 1); /* Очень плавный ход */
    padding: 20px 40px;
    overflow-y: auto; /* Если текста много — можно скроллить */
}

/* Состояние, когда панель открыта (добавим через JS) */
.info-overlay.active {
    transform: translateY(0); /* Возвращается в поле зрения */
}

/* Навигация внутри панели */
.overlay-nav {
    display: flex;
    justify-content: space-between;
    padding-bottom: 60px;
    font-size: 14px;
}

.close-btn {
    cursor: pointer;
    font-weight: 800;
}

/* Сетка контента в 3 колонки */
.overlay-content {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 60px;
    align-items: start;
}

.column h4 {
    margin-bottom: 20px;
    font-weight: 800;
    font-size: 20px;
}

/* 1. Убираем или уменьшаем отступ у всех абзацев внутри колонки */
.column p {
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 0; /* Убираем нижний отступ, чтобы текст слипся */
}

/* 2. Настраиваем отступ МЕЖДУ категориями (группами) */
.data-item {
    margin-bottom: 12px; /* Регулируй этот параметр для отступа между блоками */
}

/* 3. Делаем микро-отступ внутри группы, чтобы текст не слипался совсем вплотную */
.data-item .label {
    font-weight: 800; /* Делаем заголовок жирным как на макете */
    margin-bottom: 2px; /* Совсем крошечный отступ между заголовком и датой */
}

/* Сетка для планов */
.plans-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 колонки */
    gap: 40px;
    padding-top: 40px;
}

.plan-item img {
    width: 100%;
    height: auto;
    display: block;
    filter: grayscale(100%); /* Если хочешь сделать их ч/б как на скрине */
    transition: filter 0.3s ease;
}

.plan-item img:hover {
    filter: grayscale(0%); /* Цвет при наведении */
}

/* Стили для ссылок-переключателей внутри оверлеев */
.nav-item {
    cursor: pointer;
    position: relative;
}

@media (max-width: 768px) {
    /* --- ХЕДЕР --- */
    .nav-links a { display: none; } /* Прячем обычные ссылки */
    .mobile-menu-btn { display: block; cursor: pointer; }

    /* --- ГЛАВНОЕ МЕНЮ (Черное) --- */
    .main-menu-overlay {
        position: fixed; top: 0; left: 0; width: 100%; height: 100%;
        background: #000; color: #fff; z-index: 300;
        display: flex; flex-direction: column;
        transform: translateY(-100%); /* Выезжает сверху */
        transition: transform 0.5s ease;
    }
    .main-menu-overlay.active { transform: translateY(0); }
    .main-menu-links {
        display: flex; flex-direction: column;
        padding: 100px 40px; gap: 40px;
    }
    .main-menu-links a {
        color: #fff; font-size: 48px; font-weight: 700; text-decoration: none;
    }

    /* --- INFO OVERLAY (Черный на мобилке по дизайну) --- */
    #info-overlay {
        background-color: #000;
        color: #fff;
    }
    #info-overlay .overlay-nav { color: #fff; }
    #info-overlay .close-btn { color: #fff; text-align: center; flex: 1; }
    #info-overlay .overlay-content { grid-template-columns: 1fr; }

    /* --- PLANS OVERLAY (Белый на мобилке) --- */
    #plans-overlay {
        background-color: #fff;
        color: #000;
    }
    #plans-overlay .plans-grid {
        grid-template-columns: 1fr; /* Картинки одна под другой */
        gap: 20px;
    }

    /* --- ГАЛЕРЕЯ НА ГЛАВНОЙ --- */
    .gallery-row { grid-template-columns: 1fr; }
    .hero { grid-template-columns: 1fr; height: auto; padding-top: 100px; }
    h1 { font-size: 80px; align-self: flex-start; }
}