/* ==========================================================================
   FONTS & RESET
   ========================================================================== */
@font-face {
  font-family: 'Haas Grot Text Trial';
  src: local('Haas Grot Text Trial 75 Bold'), local('HaasGrotTextTrial-75Bold');
  font-weight: bold;
}

*, *::before, *::after {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  font-family: 'Haas Grot Text Trial', sans-serif;
  font-weight: bold;
  background-color: #ffffff;
  color: #111111;
  overflow: hidden;
}

/* ==========================================================================
   SCROLL SNAPPING & LAYOUT
   ========================================================================== */
.scroll-container {
  width: 100%;
  height: 100vh;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
}

.section {
  position: relative;
  width: 100vw;
  height: 100vh;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 160px 40px 40px;
}

/* Точное центрирование для 1 и 2 блока (где нет верхних заголовков) */
#start, #quote {
  padding-top: 40px;
}

.content-wrapper {
  width: 100%;
  max-width: 90vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.align-left {
  align-items: flex-start;
  max-width: 100%;
  padding-left: 0;
}

/* ==========================================================================
   NAVIGATION
   ========================================================================== */
.nav-buttons {
  position: absolute;
  bottom: 40px;
  right: 40px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  z-index: 10;
}

.nav-btn {
  text-decoration: none;
  color: #111;
  font-size: 35px;
  border: none;
  background: transparent;
  transition: color 0.15s ease;
  text-transform: uppercase;
  text-align: right;
  cursor: pointer;
  font-family: inherit;
  font-weight: bold;
  padding: 0;
}

/* ==========================================================================
   BLOCK HEADERS
   ========================================================================== */
.section-header {
  position: absolute;
  top: 40px;
  left: 40px;
  font-size: 100px;
  margin: 0;
  line-height: 1;
}

/* ==========================================================================
   BLOCK 1: START
   ========================================================================== */
.main-title {
  font-size: 150px;
  margin: 0;
  line-height: 1;
  text-transform: uppercase;
}

/* ==========================================================================
   BLOCK 2: QUOTE
   ========================================================================== */
.quote-text {
  font-size: 66px;
  text-align: center;
  line-height: 1.1;
  max-width: 70%; /* БЫЛО 90% - Сжали цитату по бокам */
  margin: 0;
}

/* ==========================================================================
   BLOCK 3: SKILLS
   ========================================================================== */
.skills-text {
  font-size: 44px;
  line-height: 1.2;
  margin-bottom: 60px;
  text-align: left;
  max-width: 60%; /* БЫЛО 100% - Сжали текстовый абзац */
}

.skills-bubbles {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 15px;
  max-width: 75%; /* ДОБАВИЛИ ОГРАНИЧЕНИЕ: теперь баблы будут переноситься раньше и кучковаться плотнее */
}

.bubble {
  font-size: 35px;
  background-color: #111111;
  color: #ffffff;
  padding: 15px 30px;
  border-radius: 50px;
  cursor: default;
  transition: transform 0.2s;
}

.bubble:hover {
  transform: translateY(-5px);
}

/* ==========================================================================
   BLOCK 4: CASES (ПК ВЕРСИЯ)
   ========================================================================== */
#cases {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  height: 100vh; /* Фиксируем высоту секции на ПК */
}

.cases-container {
  margin-top: 0;
  width: 100%;
  flex-grow: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  margin-bottom: 60px;
}

#cases-scroll-wrapper {
  width: 100%;
  flex-grow: 1;
  min-height: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

#cases-scroll-wrapper::-webkit-scrollbar { display: none; }

#cases-list {
  display: flex;
  flex-direction: row;
  height: 100%;
}

.cases-page {
  flex: 0 0 100%;
  width: 100%;
  max-width: 100%;
  height: 100%;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  padding-right: 200px;
  overflow: hidden; /* Защита: контент ПК версии никогда не вылезет наружу */
}

.case-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  padding: 1px 20px 1px 0;
  gap: 40px;
  cursor: pointer;
  opacity: 0.3;
  transition: opacity 0.3s ease;
}

.case-row:hover { opacity: 1; background-color: transparent; }

.case-company {
  flex: 0 0 250px;
  width: 250px;
  min-width: 250px;
  max-width: 250px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.case-date {
  flex: 0 0 120px;
  width: 120px;
  min-width: 120px;
  max-width: 120px;
  text-align: left;
  white-space: nowrap;
}

.case-short {
  flex: 1 1 auto;
  min-width: 0;
  margin-top: 0;
  color: inherit;
  white-space: normal;
}

.case-company, .case-short, .case-date {
  font-size: 44px;
  line-height: 1.1;
}

.scroll-controls-left {
  position: absolute;
  bottom: 40px;
  left: 40px;
  display: flex;
  flex-direction: row;
  gap: 30px;
  z-index: 10;
}

.scroll-btn-nav { font-size: 44px; }

#case-detail {
  display: none;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  margin-top: 20px;
  padding-right: 200px;
}

#detail-text { font-size: 44px; line-height: 1.2; margin-bottom: 60px; }

.back-btn {
  font-size: 44px; cursor: pointer; border: none; background: none; padding: 0; color: #111;
  transition: opacity 0.2s; line-height: 1; font-family: inherit; font-weight: bold;
  position: absolute; bottom: 40px; left: 40px; z-index: 10;
}
.back-btn:hover { opacity: 0.5; }

/* ==========================================================================
   FLOATING LOGO (Плавающий логотип по центру при наведении)
   ========================================================================== */
#floating_logo {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 350px;
  height: auto;
  pointer-events: none;
  opacity: 0;
  z-index: 100;
  transform: translate(-50%, -50%) scale(0.8);
  transition: opacity 0.3s cubic-bezier(0.25, 1, 0.5, 1), transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

#floating_logo.active_logo {
  opacity: 0.8; /* 80% прозрачности */
  transform: translate(-50%, -50%) scale(1);
}
/* ==========================================================================
   BLOCK 5: CONTACTS (Идеальное выравнивание по границам и макушке кнопок)
   ========================================================================== */
#contacts {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch; /* Растягиваем контент на всю ширину экрана (минус паддинги 40px) */
  padding: 160px 40px 40px 40px;
  height: 100vh;
  box-sizing: border-box;
}

/* ИСПРАВЛЕНО: Правильный селектор для враппера */
#contacts .content-wrapper.align-left {
  width: 100% !important;
  max-width: 100% !important;
  flex-grow: 1; /* Забирает всё пространство строго до начала кнопок */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  margin: 0;
  padding: 0;
}

/* ИСПРАВЛЕНО: Правильный вложенный селектор для сетки */
/* ИСПРАВЛЕНО: Правильный вложенный селектор для сетки */
#contacts .contacts-grid {
  display: grid;
  /* МАГИЯ ЗДЕСЬ: Левая колонка всегда 450px (по размеру фото), а текст начинается сразу после gap */
  grid-template-columns: 450px 1fr;
  gap: 60px;
  width: 100%;
  margin: 0;
  align-items: stretch; /* Фото и текст строго одинаковой высоты */
}

.contact-photo-box {
  width: 100%;
  max-width: 450px;
  display: flex;
}

.contact-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(100%);
}

.contact-info-box {
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* Распределяет текст ровно по высоте фотографии */
  padding: 0;
}

.contact-heading {
  font-size: 44px;
  text-transform: uppercase;
  line-height: 1.1;
  margin: 0;
}

.contact-details {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
}

.contact-text-link {
  font-size: 44px;
  text-decoration: none;
  color: #111;
  text-transform: uppercase;
  line-height: 1.1;
  transition: opacity 0.2s;
  display: block;
}

.contact-text-link:hover {
  opacity: 0.5;
}

.contact-personal {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
}

.contact-name, .contact-meta {
  font-size: 44px;
  text-transform: uppercase;
  line-height: 1.1;
  margin: 0;
}

/* Кнопки навигации в общем потоке под контентом */
#contacts .nav-buttons {
  position: static;
  align-self: flex-end; /* Сдвигаем строго в правый угол */
  margin-top: auto; /* Прижимает блок к нижней границе паддинга секции (40px) */
}

#contacts .nav-btn {
  line-height: 0.85; /* Идеальная стыковка по макушке шрифта кнопки START */
}


/* ==========================================================================
   АДАПТИВНОСТЬ (RESPONSIVE DESIGN)
   ========================================================================== */

/* --- ПЛАНШЕТЫ И НЕБОЛЬШИЕ НОУТБУКИ (до 1024px) --- */
@media (max-width: 1024px) {
  /* Общие шрифты */
  .main-title { font-size: 100px; }
  .section-header { font-size: 70px; }
  .quote-text { font-size: 45px; }

  .case-company, .case-short, .case-date, .contact-heading,
  .contact-text-link, .contact-name, .contact-meta, .skills-text, #detail-text {
    font-size: 30px;
  }
  .nav-btn, .scroll-btn-nav, .bubble { font-size: 24px; }

  /* Блок 4 и 5 */
  .contacts-grid { gap: 40px; }
  #floating_logo { width: 250px; }
  .cases-page { padding-right: 120px; }
}

/* --- СМАРТФОНЫ (до 768px) --- */
@media (max-width: 768px) {

  /* --- ОБЩИЕ НАСТРОЙКИ СЕКЦИЙ И КНОПОК --- */
  .section {
    padding: 160px 20px 20px;
    justify-content: flex-start; /* Прибиваем контент к верху (для 3, 4 и 5 блоков) */
  }

  .section-header {
    top: 100px;
    left: 20px;
    font-size: 40px;
    line-height: 1;
  }

  .nav-buttons { bottom: 20px; right: 20px; gap: 15px; }
  .scroll-controls-left { display: none !important; }
  .back-btn { bottom: 20px; left: 20px; }

  .nav-btn, .scroll-btn-nav, .bubble, .back-btn { font-size: 18px; }

  /* Общее уменьшение текстовых элементов */
  .case-company, .case-short, .case-date, .contact-heading,
  .contact-text-link, .contact-name, .contact-meta, .skills-text, #detail-text {
    font-size: 20px;
    line-height: 1.3;
  }

  /* --- БЛОК 1: START --- */
  #start {
    padding-top: 20px;
    justify-content: center; /* ИСПРАВЛЕНО: Возвращаем идеальное центрирование по вертикали */
  }
  .main-title { font-size: 60px; }

  /* --- БЛОК 2: QUOTE --- */
  #quote {
    padding-top: 20px;
    justify-content: center; /* ИСПРАВЛЕНО: Возвращаем идеальное центрирование по вертикали */
  }
  .quote-text {
    font-size: 28px;
    max-width: 100%;
  }

  /* --- БЛОК 3: SKILLS --- */
  .skills-text {
    max-width: 100%; /* Возвращаем полную ширину тексту */
  }
  .skills-bubbles {
    gap: 10px;
    max-width: 100%; /* Возвращаем полную ширину баблам */
  }
  .bubble {
    padding: 10px 20px;
  }

  /* --- БЛОК 4: CASES (МОБИЛЬНАЯ ВЕРСИЯ) --- */
  #cases {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }

  #cases .content-wrapper.cases-container {
    flex-grow: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-bottom: 0;
  }

  #cases-scroll-wrapper {
    height: 100%;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  #cases-scroll-wrapper::-webkit-scrollbar { display: none; }

  #cases-list {
    display: flex;
    flex-direction: row;
    height: 100%;
  }

  .cases-page {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%; /* ИСПРАВЛЕНО: Страница никогда не станет шире экрана */
    height: 100%;
    scroll-snap-align: start;
    padding-right: 0;
    padding-bottom: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden; /* ИСПРАВЛЕНО: Никакой текст не вылезет на соседний слайд */
  }

  .case-row {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 15px;
    padding: 1px 0;
    opacity: 1;
    width: 100%;
    max-width: 100%;
  }

  .case-row:hover { background-color: transparent; }

  .case-company {
    flex: 0 0 120px;
    width: 120px;
    min-width: 120px;
    max-width: 120px;
    white-space: normal;
    word-wrap: break-word;
  }

  .case-date {
    flex: 0 0 50px;
    width: 50px;
    min-width: 50px;
    max-width: 50px;
    text-align: left;
    white-space: normal;
  }

  .case-short {
    flex: 1 1 auto;
    min-width: 0; /* ИСПРАВЛЕНО: Позволяет тексту сжиматься и переноситься, а не распирать блок */
    width: 100%;
    margin-top: 0;
    color: inherit;
    white-space: normal;
    word-break: break-word; /* ИСПРАВЛЕНО: Разбивает длинные слова на микро-экранах */
  }

  #floating_logo { display: none !important; }
  .scroll-controls-left { display: none !important; }

  #case-detail {
    height: 100%;
    overflow-y: auto;
    padding-right: 0;
  }

  #detail-text { margin-bottom: 30px; }

  .back-btn {
    position: relative;
    bottom: auto;
    left: auto;
    align-self: flex-start;
    margin-bottom: 40px;
  }

  #cases .nav-buttons {
    position: relative;
    bottom: auto;
    right: auto;
    margin-top: 20px;
    align-self: flex-end;
  }

  #cases .content-wrapper.cases-container {
    flex-grow: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-bottom: 0; /* На телефоне убираем отступ для ПК-кнопок */
  }

  /* ВОЗВРАЩАЕМ ГОРИЗОНТАЛЬНЫЙ СВАЙП ДЛЯ СМАРТФОНОВ */
  #cases-scroll-wrapper {
    height: 100%;
    width: 100%;
    overflow-x: auto; /* Включаем скролл по горизонтали */
    overflow-y: hidden; /* Запрещаем скролл по вертикали */
    scroll-snap-type: x mandatory; /* Мягкая доводка страниц при свайпе */
    scrollbar-width: none; /* Скрываем страшную полосу прокрутки */
  }
  #cases-scroll-wrapper::-webkit-scrollbar { display: none; }

  #cases-list {
    display: flex;
    flex-direction: row; /* Страницы выстраиваются в длинный ряд */
    height: 100%;
  }

  .cases-page {
    flex: 0 0 100%; /* Каждая страница забирает ровно 100% ширины экрана */
    width: 100%;
    height: 100%; /* ИСПРАВЛЕНО: Жизненно важно для умного JS-скрипта (чтобы он видел границу) */
    scroll-snap-align: start; /* Точка остановки свайпа */
    padding-right: 0;
    padding-bottom: 0;
    display: flex;
    flex-direction: column; /* Внутри страницы проекты идут сверху вниз */
  }

  .case-row {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 15px;
    padding: 1px 0; /* Твой плотный отступ */
    opacity: 1;
  }

  .case-row:hover { background-color: transparent; }
  .case-company { flex: 0 0 auto; white-space: nowrap; }
  .case-date { flex: 0 0 auto; text-align: center; white-space: nowrap; }
  .case-short { flex: 1 1 auto; margin-top: 0; color: inherit; white-space: normal; }

  #floating_logo { display: none !important; }
  .scroll-controls-left { display: none !important; } /* Прячем кнопки < > на телефоне */

  /* Детальный вид открытого кейса */
  #case-detail {
    height: 100%;
    overflow-y: auto; /* Текст описания скроллится вертикально */
    padding-right: 0;
  }

  /* Отсечка: Жестко 20px от кнопок навигации до списка проектов */
  #cases .nav-buttons {
    position: relative;
    bottom: auto;
    right: auto;
    margin-top: 20px;
    align-self: flex-end;
  }
  /* --- БЛОК 5: CONTACTS --- */
  #contacts {
    display: flex; /* Возвращаем стандартный Flex, как в других блоках */
    flex-direction: column;
    justify-content: flex-start;
    padding: 160px 20px 20px;
    overflow-y: auto;
  }

  /* ИСПРАВЛЕНО: Сбрасываем привязку к низу, чтобы текст не лез на заголовок! */
  #contacts .content-wrapper.align-left {
    height: auto !important; /* Жестко убиваем style="height: 100%;" из HTML */
    flex-grow: 1;
    justify-content: flex-start; /* Теперь текст начинает строиться строго от отступа 160px и растет вниз */
    padding-right: 0;
  }

  /* Делаем из сетки вертикальную колонку */
  #contacts .contacts-grid {
    display: flex;
    flex-direction: column;
    gap: 50px;
  }

  /* ТЕКСТОВЫЙ БЛОК */
  .contact-info-box {
    order: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 40px;
    padding: 0;
  }

  /* ВАРИАНТ ОТ КРАЯ ДО КРАЯ ЭКРАНА ДЛЯ МОБИЛЬНОЙ ВЕРСИИ */
  .contact-photo-box {
    order: 2; /* Убеждаемся, что фото идет после текста */
    width: calc(100% + 40px); /* Увеличиваем ширину, компенсируя поля по 20px с каждой стороны */
    max-width: none; /* Снимаем любые ограничения, чтобы фото заняло все пространство */
    margin-left: -20px; /* Сдвигаем блок влево, чтобы он коснулся физического края экрана */
    display: block;
  }

  .contact-photo {
    width: 100%;
    height: auto; /* Высота подстраивается автоматически, сохраняя пропорции */
    display: block;
  }

  /* КНОПКИ ВНИЗУ */
  /* КНОПКИ ВНИЗУ (НАЛЕЗАЮТ НА ФОТО) */
  #contacts .nav-buttons {
    position: relative;
    margin-top: -80px; /* МАГИЯ ЗДЕСЬ: Отрицательный отступ затягивает кнопки наверх, прямо на фото */
    margin-bottom: 30px; /* Даем немного пустого пространства в самом низу для приятного скролла */
    align-self: flex-end; /* Выравниваем кнопки по правому краю */
    z-index: 10; /* Гарантируем, что кнопки лежат ПОВЕРХ фотографии, а не под ней */
  }
}