/* ===== СТИЛИ ДЛЯ SLIDE__TITLE В ГОРОДАХ ===== */

/* CSS переменные */
:root {
  --font-family: 'Manrope', sans-serif;
  --content-width: 1920px;
  --container-offset: 15px;
  --container-width: calc(var(--content-width) + (var(--container-offset) * 2));
  --light-color: #1E1E1E;
  --primary: #972635;
  --primary-light: #f8e9ec;
  --secondary: #264773;
  --secondary-light: #e9eef7;
  --black: #1A1C1F;
  --dark-grey: #455062;
  --grey: #596780;
  --light-grey: #F5F7FA;
  --white: #FFFFFF;
  --border: #E7EBEF;
  --gold: #FFAC30;
}

/* Основные стили для заголовков слайдов в городах */
.city-header-fix .slide__title {
  max-width: 50vw !important; /* Расширяем до 50vw на больших экранах */
  padding-right: 20px !important;
  word-wrap: normal !important; /* Убираем перенос через дефис */
  overflow-wrap: normal !important; /* Убираем перенос через дефис */
  hyphens: none !important; /* Полностью отключаем перенос через дефис */
  word-break: keep-all !important; /* Сохраняем целостность слов */
  line-height: 1.2 !important;
  margin-bottom: 30px !important;
  white-space: normal !important;
  font-size: clamp(32px, 6vw, 48px) !important;
  font-weight: 800 !important;
  color: var(--white) !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5) !important;
}

/* Стили для выделения города в заголовке */
.city-header-fix .slide__title .city-highlight {
  color: var(--gold) !important;
  font-weight: 700 !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
  display: inline-block !important;
  margin-top: 8px !important;
  font-size: 1.1em !important;
  background: linear-gradient(135deg, var(--gold) 0%, #ffc107 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* Улучшаем отображение заголовков с переносами строк */
.city-header-fix .slide__title br {
  display: block !important;
  content: "" !important;
  margin-bottom: 8px !important;
}

/* Дополнительные стили для планшетов */
@media (max-width: 1024px) {
  .city-header-fix .slide__title {
    max-width: 50vw !important; /* Расширяем до 50vw на планшетах */
    padding-right: 15px !important;
    font-size: clamp(28px, 5vw, 40px) !important;
    hyphens: none !important; /* Отключаем перенос через дефис */
    word-break: keep-all !important; /* Сохраняем целостность слов */
  }
  
  .city-header-fix .slide__title br {
    margin-bottom: 6px !important;
  }
}

/* Дополнительные исправления для мобильных устройств */
@media (max-width: 768px) {
  .city-header-fix .slide__title {
    max-width: 80vw !important; /* Расширяем до 80vw на мобильных */
    padding-right: 0 !important;
    padding-left: 20px !important;
    font-size: clamp(28px, 8vw, 42px) !important;
    hyphens: none !important; /* Отключаем перенос через дефис */
    word-break: keep-all !important; /* Сохраняем целостность слов */
  }
  
  .city-header-fix .slide__title br {
    margin-bottom: 4px !important;
  }
  
  .city-header-fix .slide__title .city-highlight {
    font-size: 1em !important;
    margin-top: 4px !important;
  }
}

/* Дополнительные исправления для очень маленьких экранов */
@media (max-width: 480px) {
  .city-header-fix .slide__title {
    max-width: 80vw !important; /* Расширяем до 80vw на маленьких экранах */
    font-size: clamp(24px, 9vw, 32px) !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    hyphens: none !important; /* Отключаем перенос через дефис */
    word-break: keep-all !important; /* Сохраняем целостность слов */
  }
  
  .city-header-fix .slide__title br {
    margin-bottom: 3px !important;
  }
  
  .city-header-fix .slide__title .city-highlight {
    font-size: 0.9em !important;
    margin-top: 3px !important;
  }
}

/* Специальные стили для разных размеров экранов */
@media (min-width: 1200px) {
  .city-header-fix .slide__title {
    font-size: 48px !important;
    line-height: 1.1 !important;
  }
  
  .city-header-fix .slide__title br {
    margin-bottom: 10px !important;
  }
}

@media (min-width: 768px) and (max-width: 1199px) {
  .city-header-fix .slide__title {
    font-size: clamp(36px, 4vw, 44px) !important;
    line-height: 1.15 !important;
  }
  
  .city-header-fix .slide__title br {
    margin-bottom: 7px !important;
  }
}

/* Анимация появления заголовков */
.city-header-fix .slide__title {
  animation: slideTitleFadeIn 0.8s ease-out !important;
}

@keyframes slideTitleFadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Стили для активного слайда */
.city-header-fix .slideshow__slide.is-current .slide__title {
  animation: slideTitleActive 0.6s ease-out !important;
}

@keyframes slideTitleActive {
  from {
    opacity: 0;
    transform: translateY(15px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}