@font-face {
    font-family: 'che';
    src: url(/css/anotherdangerslantedrusbyl.otf);
}

@font-face {
    font-family: 'far';
    src: url(/css/Jura.ttf);
}

body {
    margin: 0;
    font-family: 'far', 'Roboto', sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #fff;
    overflow-x: hidden;
    scroll-behavior: smooth;
}


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

.container {
    width: 90%;
    max-width: 1200px;
    /* Максимальная ширина контента */
    margin: 0 auto;
    /* Центрирование контейнера */
    padding: 0 15px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    /* Применяем ко всем заголовкам */
    text-align: center;
    color: #ff69b4;
    margin-bottom: 20px;
    /* !!! ИЗМЕНЕНО: Устанавливаем Montserrat для заголовков !!! */
    font-family: 'far', 'Montserrat', sans-serif;
    font-weight: 700;
    /* Используем жирное начертание */
}

h1 {
    font-size: 2.5em;
}

h2 {
    font-size: 2em;
}

h3 {
    font-size: 1.5em;
}

p {
    margin-bottom: 15px;
    /* Отступ после параграфа */
}

/* Убираем верхний отступ у первого параграфа в био-блоке */
.bio-item p:first-of-type {
    margin-top: 0;
}


/* ==============================================
   Стили шапки и меню
   ============================================== */
.site-header {
    background-color: #ffc0f7;
    /* Светло-розовый фон шапки */
    padding: 10px 0;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    position: sticky;
    /* Закрепляем шапку при прокрутке */
    top: -1px;
    z-index: 1000;
    /* Убедимся, что шапка поверх остального контента */
    width: 100%;
}

.site-header .container {
    display: flex;
    /* Используем flexbox для выравнивания */
    justify-content: center;
    /* Распределяем элементы по ширине */
    align-items: center;
    /* Выравниваем по центру вертикали */
    flex-wrap: wrap;
    /* Перенос на новую строку на маленьких экранах */
}

.site-header h1 {
    margin: 0;
    font-size: 1.8em;
    color: #e75480;
    /* Чуть темнее розовый для названия */
    margin-right: 20px;
    /* Отступ от меню на широких экранах */
}

/* Стили меню */
.main-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    /* Горизонтальное меню */
    flex-wrap: wrap;
    /* Перенос пунктов меню */
    justify-content: center;
    /* Центрируем меню на маленьких экранах */
}

.main-nav li {
    margin: 0 10px;
    /* Отступы между пунктами меню */
}

.main-nav a {
    text-decoration: none;
    color: #c62f67;
    /* Темно-розовый для ссылок меню */
    font-weight: bold;
    padding: 5px 0;
    transition: color 0.3s ease;
    display: block;
    /* Чтобы padding работал как ожидается */
}

.main-nav a:hover {
    color: #ff007f;
    /* Ярче розовый при наведении */
}

.bio-item .bio-text-content p {
    /* Уточнили селектор */
    text-align: justify;
    /* Выравнивание текста по ширине */
    color: #555;
    /* Чуть темнее серый для текста */
    font-size: 1.05em;
    /* Немного увеличим размер текста */
    line-height: 1.7;
    /* Увеличим межстрочный интервал */
    margin-bottom: 15px;
    /* Отступ после параграфа (можно оставить здесь) */
    /* УБРАЛИ flex-grow, flex-shrink, flex-basis отсюда */
}

/* Убираем верхний отступ у первого параграфа в текстовом блоке */
.bio-item .bio-text-content p:first-of-type {
    margin-top: 0;
}

/* Стили для ОБЩЕГО ТЕКСТОВОГО БЛОКА (как flex-item) */
.bio-text-content {
    overflow-wrap: break-word;
    flex-grow: 1;
    /* Позволяем тексту занимать все оставшееся пространство */
    flex-shrink: 1;
    /* Разрешаем тексту сжиматься при необходимости */
    flex-basis: 0;
    /* Базовая ширина, чтобы flex-grow работал эффективно */
    /* Можно добавить другие стили для самого блока, если нужно */
}

/* ==============================================
   Стили секций
   ============================================== */
section {
    padding: 60px 0;
    /* Отступы сверху и снизу для секций */
    /* Стили для анимации при прокрутке - пока закомментированы, т.к. нет JS */
    /* opacity: 0; */
    /* transform: translateY(20px); */
    /* transition: opacity 0.6s ease-out, transform 0.6s ease-out; */
}

/* Класс, который будет добавляться секции при прокрутке (если будет JS) */
section.is-visible {
    opacity: 1;
    transform: translateY(0);
}


/* Секция Слайдера */
.section-slider {
    background-color: #ffe4e1;
    /* Бледно-розовый фон */
    text-align: center;
    min-height: 400px;
    /* Минимальная высота для placeholder */
    display: flex;
    align-items: center;
    justify-content: center;
    /* padding: 60px 0;  <-- Уже задано для всех section */
}

.slider-placeholder {
    /* Стили для placeholder слайдера, пока нет JS */
    border: 2px dashed #ff69b4;
    padding: 50px;
    color: #ff69b4;
    font-size: 1.2em;
    background-color: rgba(255, 105, 180, 0.05);
    /* Очень светлый розовый */
    border-radius: 10px;
}

/* Секция Биографии */
.section-biography {
    background-color: #fff0f5;
    /* Очень бледно-розовый */
}

.bio-content {
    /* Контейнер для всех блоков биографии */
}

/* Стили для каждого отдельного блока "картинки + текст" */
.bio-item {
    display: flex;
    /* Делаем Flex-контейнером */
    align-items: flex-start;
    /* Выравниваем элементы по верху */
    gap: 40px;
    /* Расстояние между блоком картинок и текстом */
    margin-bottom: 40px;
    /* Отступ между блоками биографии */
    padding-bottom: 20px;
    /* Внутренний нижний отступ */
    border-bottom: 1px dashed #ffb6c1;
    /* Небольшой разделитель между блоками */
    width: 100%;
}

.bio-item:last-child {
    border-bottom: none;
    /* Убираем разделитель у последнего блока */
    margin-bottom: 0;
    padding-bottom: 0;
}

/* Чередуем порядок блоков: картинки слева/текст справа, затем текст слева/картинки справа */
.bio-item:nth-child(even) {
    flex-direction: row-reverse;
    /* Меняем порядок для четных блоков */
}


/* Контейнер для блока картинок (может содержать одно фото или Swiper) */
.bio-images-container {
    /* Flexbox свойства для самого блока картинок внутри bio-item */
    flex-basis: 400px;
    /* Задаем предпочтительную ширину блока картинок */
    flex-shrink: 0;
    /* Запрещаем блоку картинок сжиматься меньше flex-basis */
    flex-grow: 0;
    /* Запрещаем блоку картинок расширяться */
    max-width: 400px;
    /* Стили контейнера - общая подложка для одиночного фото или слайдера */
    padding: 10px;
    /* Внутренний отступ */
    background-color: rgba(255, 182, 193, 0.3);
    /* Полупрозрачный светло-розовый фон */
    border-radius: 15px;
    /* Слегка скругляем углы */
    box-shadow: inset 0 0 10px rgba(255, 105, 180, 0.2);
    /* Внутренняя розовая тень */
    text-align: center;
    /* Центрируем содержимое (одиночное фото) */
    position: relative;
    /* Для позиционирования стрелок Swiper, если они будут вне контейнера */
}

/* Стили для одиночной картинки (когда нет слайдера внутри) */
.bio-images-container>img {
    max-width: 100%;
    /* Теперь 100% от ОГРАНИЧЕННОЙ ширины родителя */
    height: auto;
    border-radius: 10px;
    border: 3px solid #ffb6c1;
    box-shadow: 2px 2px 7px rgba(0, 0, 0, 0.3);
    display: inline-block;
    /* или block, если inline-block вызывает проблемы */
    vertical-align: top;
    /* Убираем лишний нижний отступ */
    transition: transform 0.3s ease, border-color 0.3s ease;
}

.bio-images-container>img:hover {
    transform: scale(1.05) rotate(3deg);
    /* Эффект при наведении */
    border-color: #ff69b4;
}


/* Стили для Swiper контейнера внутри bio-images-container */
.bio-images-container .swiper-container {
    width: 100%;
    /* Теперь 100% от ОГРАНИЧЕННОЙ ширины родителя */
    height: 300px;
    overflow: hidden;
    /* Убедимся, что этот стиль активен */
    position: static;
    /* Убедимся, что контейнер не влияет на абсолютное позиционирование стрелок */


    /* Переопределяем стандартные стили Swiper для навигации и пагинации */
    --swiper-navigation-color: #ff69b4;
    /* Розовый цвет стрелок */
    --swiper-pagination-color: #ff69b4;
    /* Розовый цвет активной точки пагинации */
    --swiper-pagination-bullet-inactive-color: #f08080;
    /* Светлее розовый для неактивных точек */
    --swiper-pagination-bullet-inactive-opacity: 0.7;
}

/* Стили для swiper-wrapper (контейнер для всех слайдов) - Swiper сам делает его flex */
.bio-images-container .swiper-wrapper {
    /* gap: 10px;  <-- Swiper использует margin для spacing, gap здесь не нужен */
}


/* Стили для каждого слайда Swiper (делаем его "рамкой стикера") */
.bio-images-container .swiper-slide {
    display: flex;
    /* Центрируем изображение внутри слайда */
    align-items: center;
    justify-content: center;
    /* overflow: hidden; <-- Убедимся, что слайд не показывает контент вне себя */

    /* Стили "рамки стикера" для самого слайда */
    border-radius: 10px;
    /* Скругленные углы */
    border: 3px solid #ffb6c1;
    /* Светло-розовая рамка */
    box-shadow: 2px 2px 7px rgba(0, 0, 0, 0.3);
    /* Тень для объема */

    /* Swiper по умолчанию ставит width: 100% и flex-shrink: 0 для slidesPerView: 1 */
    /* Убедимся, что наши стили не мешают */
    flex-shrink: 0;
    width: 100%;
    /* Убедимся, что каждый слайд занимает всю ширину контейнера */

    /* Применяем статический поворот к слайду */
    /* transform: rotate(var(--slide-rotate, 0deg)); */
    /* Можно использовать CSS переменные с JS */
    /* Давайте применим простые классы для чередования поворота, как раньше */
    /* transform: rotate(-1deg);  <-- Пример */

    transition: transform 0.3s ease, border-color 0.3s ease;
    /* Плавное изменение */
    background-color: #fff;
    /* Белый фон на случай, если картинка прозрачная */
}

/* Чередование поворота для слайдов */
.bio-images-container .swiper-slide:nth-child(odd) {
    transform: rotate(-1deg);
}

.bio-images-container .swiper-slide:nth-child(even) {
    transform: rotate(2deg);
}

.bio-images-container .swiper-slide:nth-child(3n) {
    /* Каждый третий */
    transform: rotate(0deg);
    /* Сбрасываем поворот для разнообразия */
}


/* Стили для изображения внутри слайда */
.bio-images-container .swiper-slide img {
    display: block;
    width: 100%;
    /* Изображение заполняет ширину слайда */
    height: 100%;
    /* Изображение заполняет высоту слайда */
    object-fit: cover;
    /* Обрезает изображение, чтобы оно полностью заполняло слайд, сохраняя пропорции */
    border-radius: 8px;
    /* Чуть меньше, чем у слайда, чтобы рамка была видна */
    border: none;
    /* Убираем рамку с самого img, она на слайде */
    box-shadow: none;
    /* Убираем тень с img, она на слайде */
    margin: 0;
    /* Убираем возможные отступы */
    padding: 0;
    /* transition: none; */
    /* Убираем transition с img, если hover на слайде */
}

/* Ховер эффект на слайд */
.bio-images-container .swiper-slide:hover {
    transform: scale(1.03) rotate(3deg);
    /* Небольшое увеличение и поворот при наведении */
    border-color: #ff69b4;
    z-index: 1;
    /* Поднимаем над другими слайдами при наведении */
}

/* Стили для навигационных стрелок Swiper */
.bio-images-container .swiper-button-next,
.bio-images-container .swiper-button-prev {
    color: var(--swiper-navigation-color);
    /* Берем цвет из переменной */
    filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 0.3));
    /* Добавляем тень к стрелкам */
    opacity: 0.8;
    transition: opacity 0.3s ease;
    /* Позиционируем стрелки относительно .bio-images-container */
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    /* Убедимся, что стрелки поверх слайдера */
}

.bio-images-container .swiper-button-prev {
    left: 10px;
    /* Отступ слева */
}

.bio-images-container .swiper-button-next {
    right: 10px;
    /* Отступ справа */
}


.bio-images-container .swiper-button-next:hover,
.bio-images-container .swiper-button-prev:hover {
    opacity: 1;
}

/* Стили для пагинации Swiper (точки) */
.bio-images-container .swiper-pagination {
    position: absolute;
    bottom: 10px;
    /* Отступ снизу */
    left: 0;
    width: 100%;
    text-align: center;
    z-index: 10;
}

.bio-images-container .swiper-pagination-bullet {
    background: var(--swiper-pagination-bullet-inactive-color);
    opacity: var(--swiper-pagination-bullet-inactive-opacity);
    /* Переопределяем стандартные размеры Swiper, если нужно */
    /* width: 8px; */
    /* height: 8px; */
}

.bio-images-container .swiper-pagination-bullet-active {
    background: var(--swiper-pagination-color);
    opacity: 1;
}

/* Скрытие навигации/пагинации для Swiper с одним слайдом */
.bio-images-container .swiper-single-slide .swiper-button-prev,
.bio-images-container .swiper-single-slide .swiper-button-next,
.bio-images-container .swiper-single-slide .swiper-pagination {
    display: none !important;
    /* !important нужен, чтобы перебить стандартные стили Swiper */
}


/* Стили для параграфов биографии (текстового блока) */
.bio-item p {
    text-align: justify;
    /* Выравнивание текста по ширине */
    color: #555;
    /* Чуть темнее серый для текста */
    font-size: 1.05em;
    /* Немного увеличим размер текста */
    line-height: 1.7;
    /* Увеличим межстрочный интервал */

}


/* Секция Музыки */
.section-music {
    background-color: #ffe1fb;
    /* Бледно-розовый */
    text-align: center;
}

.section-music h3 {
    color: #e75480;
    margin-top: -10px;
}

.music-links {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.music-link-main {
    margin-bottom: 30px;
}

.music-link-main p {
    margin-bottom: 10px;
    font-size: 1.1em;
    color: #555;
}

.music-link-main img.listen-button {
    max-width: 250px;
    /* Ограничиваем размер кнопки */
    height: auto;
    display: block;
    /* Чтобы убрать лишнее место под картинкой */
    margin: 0 auto;
    /* Центрируем кнопку */
    border: 2px solid #ff69b4;
    /* Небольшая розовая рамка */
    border-radius: 10px;
    /* Слегка скругляем углы */
    transition: transform 0.3s ease;
}

.music-link-main img.listen-button:hover {
    transform: scale(1.05);
    /* Увеличиваем при наведении */
}

.music-links-list {
    width: 100%;
    max-width: 600px;
    /* Ограничиваем ширину списка ссылок */
    margin: 0 auto;
    text-align: left;
    /* Выравниваем текст списка по левому краю */
}


.music-links-list ul {
    list-style: disc;
    /* Маркеры списка */
    padding-left: 20px;
    /* Отступ для маркеров */
    margin-top: 15px;
}

.music-links-list li {
    margin-bottom: 10px;
}

.music-links-list a {
    color: #c62f67;
    text-decoration: none;
    font-size: 1.1em;
    transition: color 0.3s ease;
}

.music-links-list a:hover {
    color: #ff007f;
    text-decoration: underline;
}


/* ==============================================
   Стили подвала
   ============================================== */
.site-footer {
    background-color: #ffc0cb;
    /* Светло-розовый фон */
    color: #c62f67;
    /* Темно-розовый текст */
    text-align: center;
    padding: 20px 0;
    /* margin-top: 40px; */
}


/* ==============================================
   Медиа-запросы для адаптивности
   ============================================== */
@media (max-width: 992px) {

    /* Видео галерея на 992px */
    .videos-grid {
        gap: 10px;
        /* На планшетах уменьшаем gap видео */
    }

    .video-item img {
        height: 180px;
        /* Уменьшаем высоту элементов видеосетки */
    }

    .videos-title-block .decoration {
        width: 30px;
        /* Уменьшаем размер декораций видео */
    }

    .videos-title-block .decoration-1 {
        left: calc(50% - 120px);
    }

    .videos-title-block .decoration-2 {
        right: calc(50% - 120px);
    }

    .video-item .play-button {
        font-size: 2.8em;
        /* Немного уменьшим размер иконки на планшетах */
    }

    /* Уменьшаем отступы на планшетах */
    section {
        padding: 50px 0;
    }

    /* Уменьшаем базовую ширину блока картинок */
    .bio-images-container {
        flex-basis: 300px;
        /* Уменьшаем предпочтительную ширину блока фото */
        padding: 8px;
        /* Уменьшаем padding */
    }

    /* Уменьшаем высоту слайдера */
    .bio-images-container .swiper-container {
        height: 250px;
        /* Уменьшаем высоту слайдера на планшетах */
    }

    /* Стили для одиночной картинки */
    .bio-images-container>img {
        max-width: 100%;
    }

    /* Уменьшаем gap между блоками */
    .bio-item {
        gap: 30px;
    }
}

.site-header {
    background-color: #ffc0f7;
    /* Светло-розовый фон шапки */
    padding: 10px 0;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    position: sticky;
    /* Закрепляем шапку */
    top: 0;
    z-index: 1000;
    width: 100%;
}

/* Используем новый класс для контейнера в шапке */
.header-container {
    display: flex;
    justify-content: space-between;
    /* Распределяем лого/название и правую часть */
    align-items: center;
    flex-wrap: wrap;
    /* На всякий случай, если название очень длинное */
}

.site-title {
    margin: 0;
    /* Убираем отступы по умолчанию */
}

.site-title {
    font-family: 'che', sans-serif;
    text-decoration: none;
    font-size: 2.8em;
    /* Размер как у H1 был */
    font-weight: bold;
    color: #e75480;
    /* Чуть темнее розовый для названия */
    transition: color 0.3s ease;
}

.site-title {
    color: #c62f67;
}


/* Кнопка мобильного меню (гамбургер) */
.menu-toggle {
    display: none;
    /* Скрыта на десктопе */
    background: none;
    border: none;
    font-size: 1.8em;
    /* Размер иконки */
    color: #c62f67;
    /* Цвет иконки */
    cursor: pointer;
    padding: 5px 10px;
    margin-left: auto;
    /* Прижимаем к правому краю на мобильных */
    z-index: 1100;
    /* Выше чем wrapper, но ниже открытого меню */
}

.menu-toggle:hover {
    color: #ff007f;
}


/* Обертка для навигации и соцсетей */
.header-nav-wrapper {
    display: flex;
    /* На десктопе располагаем в строку */
    align-items: center;
    /* Выравниваем по центру вертикали */
    gap: 30px;
    /* Расстояние между меню и соцсетями */
}

/* Стили меню */
.main-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    /* Горизонтальное меню на десктопе */
    flex-wrap: wrap;
    /* Перенос пунктов меню, если не помещаются */
}

.main-nav li {
    margin: 0 10px;
    /* Отступы между пунктами меню */
}

.main-nav a {
    text-decoration: none;
    color: #c62f67;
    font-weight: bold;
    padding: 8px 5px;
    /* Немного увеличим кликабельную область */
    transition: color 0.3s ease, background-color 0.3s ease;
    display: block;
    border-radius: 5px;
    /* Небольшое скругление для ховера */
}

.main-nav a:hover {
    color: #ff007f;
    background-color: rgba(255, 255, 255, 0.5);
    /* Легкий фон при наведении */
}

/* Стили для иконок соцсетей в шапке */
.social-links-header {
    display: flex;
    align-items: center;
    gap: 15px;
    /* Расстояние между иконками */
}

.social-links-header a {
    color: #c62f67;
    /* Цвет иконок */
    font-size: 1.4em;
    /* Размер иконок */
    text-decoration: none;
    transition: color 0.3s ease, transform 0.3s ease;
    display: inline-block;
    /* Чтобы transform работал */
}

.social-links-header a:hover {
    color: #ff007f;
    transform: scale(1.1);
    /* Легкое увеличение при наведении */
}

@media (max-width: 768px) {

    .bio-text-content {
        /* Применяем стили к обертке */
        width: 100%;
        /* Текст занимает всю ширину под блоком фото */
        /* Убираем flex свойства, т.к. родитель в колонке */
        flex-grow: 0;
        min-width: 0;
        flex-shrink: 0;
        flex-basis: auto;
    }

    .bio-item .bio-text-content p {
        /* Стили для параграфов внутри обертки на мобильных */
        text-align: left;
        /* Возвращаем выравнивание по левому краю */
        font-size: 1em;
        /* Возвращаем стандартный размер текста */
    }

    .site-header .container {
        flex-direction: row;
        /* Элементы шапки в колонку */
        text-align: center;
    }

    .site-header h1 {
        margin-bottom: 10px;
        margin-right: 0;
        /* Убираем отступ справа */
    }

    .main-nav ul {
        flex-direction: column;
        /* Меню в колонку */
        align-items: center;
    }

    .main-nav li {
        margin: 5px 0;
        /* Отступы между пунктами меню в колонке */
    }

    section {
        padding: 40px 0;
        /* Уменьшаем отступы секций на мобильных */
    }

    /* На мобильных экранах: блоки картинок и текста идут колонкой */
    .bio-item {
        flex-direction: column;
        /* Блоки в колонку: картинки сверху, текст снизу */
        align-items: center;
        /* Центрируем содержимое bio-item по горизонтали */
        gap: 20px;
        /* Отступ между картинками и текстом в колонке */
        margin-bottom: 30px;
        /* Уменьшаем отступ между блоками */
    }

    /* На мобильных экранах убираем обратный порядок */
    .bio-item:nth-child(even) {
        flex-direction: column;
    }

    /* Блок с картинками на мобильных */
    .bio-images-container {
        flex-basis: auto;
        /* Убираем фиксированную ширину, позволяем авто */
        width: 95%;
        /* Блок с фото занимает почти всю ширину контейнера */
        max-width: 400px;
        /* Ограничиваем макс. ширину блока с фото, даже на мобильных */
        margin: 0 auto;
        /* Центрируем блок картинок */
        padding: 8px;
        /* Уменьшаем padding блока с фото */

        /* Убедимся, что для одиночного фото сохраняются стили */
        display: block;
        /* Возвращаем блочное отображение на мобильных */
        text-align: center;
        /* Центрируем одиночное фото */
    }

    /* Уменьшаем высоту слайдера на мобильных */
    .bio-images-container .swiper-container {
        height: 220px;
        /* Уменьшаем высоту слайдера */
    }

    /* Стили для одиночной картинки */
    .bio-images-container>img {
        max-width: 95%;
        /* Чуть меньше, чтобы оставить место для padding родителя */
        border-width: 2px;
        /* Чуть тоньше рамка */
        box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
        /* Уменьшаем тень */
        /* Сбрасываем статические повороты на мобильных */
        transform: none !important;
        /* Важно использовать !important */

        /* Убедимся, что display: block работает */
        display: block;
        margin: 0 auto;
        /* Центрируем */
    }

    .bio-images-container>img:hover {
        transform: scale(1.05) !important;
        rotate: 0deg !important;
        box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.3) !important;
    }

    /* Стили для слайдов на мобильных */
    .bio-images-container .swiper-slide {
        border-width: 2px;
        /* Чуть тоньше рамка */
        box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
        /* Уменьшаем тень */
        /* Сбрасываем статические повороты на мобильных */
        transform: none !important;
        /* Важно использовать !important */
    }

    /* Ховер эффект на слайд на мобильных - только увеличение */
    .bio-images-container .swiper-slide:hover {
        transform: scale(1.05) !important;
        rotate: 0deg !important;
        box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.3) !important;
    }


    /* Текстовый блок на мобильных */
    .bio-item p {
        width: 100%;
        /* Текст занимает всю ширину под блоком фото */
        text-align: left;
        /* Возвращаем выравнивание по левому краю на мелких экранах */
        font-size: 1em;
        /* Возвращаем стандартный размер текста */
        /* Убираем flex свойства, т.к. родитель в колонке */
        flex-grow: 0;
        flex-shrink: 0;
        flex-basis: auto;
    }

    .music-links-list {
        padding-left: 10px;
        /* Уменьшаем padding для списка ссылок */
    }
}


.section-promo-intro {
    background-color: #ffe1fb;
    /* Бледно-розовый фон (как был у section-slider) */
    padding: 60px 0;
    /* Стандартные отступы секции */
    min-height: 70vh;
    /* Минимальная высота, чтобы занимала часть экрана */
    display: flex;
    /* Используем flex для вертикального центрирования */
    align-items: center;
    /* Выравниваем контент по центру */
    overflow: hidden;
    /* Скрываем все, что может вылезти за пределы */
}

/* Убираем h2 из потока, но оставляем для доступности */
.section-promo-intro h2 {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}



/* Контейнер промо-контента ( Flex-контейнер ) */
.promo-content {
    display: flex;
    /* Мобильная версия по умолчанию: элементы выстраиваются в колонку */
    flex-direction: column;
    align-items: center;
    /* Центрируем элементы по горизонтали в колонке */
    gap: 10px;
    /* Расстояние между элементами в колонке */
}

/* Левая колонка (для десктопа) / Обертка Title + Text (на мобильном) */
.promo-left-column {
    display: flex;
    flex-direction: column;
    /* Элементы внутри (Title и Text) всегда в колонке */
    align-items: center;
    /* Центрируем Title и Text внутри этой колонки на мобильном */
    gap: 15px;
    /* Расстояние между Title и Text */
    width: 100%;
    /* На мобильном занимает всю доступную ширину */
    text-align: center;
    /* Центрируем текст внутри на мобильном */
}

.promo-image {
    order: 2;
}

.site-title {
    order: 1;
}

.promo-text {
    order: 3;
}

.text-center {
    text-align: center;
}

@media (min-width: 768px) {
    .d-none-xl {
        display: none;
    }

    /* Можно выбрать другое значение, например 992px */
    .promo-content {
        display: grid;
        /* Переключаемся на Grid */
        grid-template-areas:
            "title image"
            "text  image";
        grid-template-columns: 1fr 1fr;
        /* Две колонки равной ширины */
        gap: 5px;
        /* Расстояние между элементами сетки */
        align-items: center;
        /* Выравниваем элементы сетки по центру вертикали */
    }

    .promo-left-column {
        flex: 1;
        /* Позволяет этой колонке занимать доступное пространство */
        max-width: 50%;
        /* Ограничиваем максимальную ширину до 50% */
        align-items: flex-start;
        /* Выравниваем Title и Text влево внутри этой колонки */
        text-align: left;
        /* Выравниваем текст влево */
        gap: 20px;
        /* Настраиваем расстояние между Title и Text на десктопе */
    }

    .promo-image {
        grid-area: image;
        /* align-self: center; -- Это значение будет унаследовано от align-items: center родителя,
                                 но можно явно указать, если align-items на родителе будет изменен */
        display: flex;
        /* Используем flexbox для центрирования img внутри ячейки grid */
        align-items: center;
        /* Центрируем img по вертикали внутри promo-image */
        justify-content: center;
        /* Центрируем img по горизонтали внутри promo-image */
        order: unset;
        width: auto;
        max-width: none;
        margin: 0;
    }

    .promo-image img {
        margin: 0;
        max-height: 558px;
        max-width: 100%;
        height: auto;
    }

    .site-title {

        grid-area: title;
        /* Заголовок в области 'title' */
        text-align: center;
        /* Выравниваем текст влево */
        font-size: 3.5em;
        /* Настраиваем размер шрифта для десктопа */
        margin-bottom: 0;
        /* Убираем нижний отступ, если был */
        order: unset;
        /* Сбрасываем порядок, заданный для мобильных */
        width: auto;
        /* Сбрасываем ширину, заданную для мобильных */
        max-width: none;
        /* Сбрасываем ограничение ширины */
    }

    .promo-text {
        grid-area: text;
        /* Добавляем: выравнивание по верху внутри своей ячейки */
        align-self: start;
        text-align: left;
        order: unset;
        width: auto;
        max-width: none;
        margin-top: 0;
        /* Отступ между текстом и заголовком регулируется вертикальным gap */
    }
}


.promo-image {
    flex: 0 0 45%;
    /* Задаем базовую ширину для блока фото (45%) */
    /* Ограничиваем максимальную ширину */
    text-align: center;
    /* Центрируем фото, если оно меньше блока */
}

.promo-image img {
    max-width: 100%;
    /* Изображение не шире своего контейнера */
    height: auto;
    /* Сохраняем пропорции */
    border-radius: 15px;
    /* Скругляем углы */
    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.15),
        -5px -5px 15px rgba(255, 255, 255, 0.7);
    /* Мягкая тень */
    border: 5px solid #fff;
    /* Белая рамка */
    transition: transform 0.4s ease;
}

.promo-image img:hover {
    transform: scale(1.03) rotate(-1deg);
    /* Небольшой эффект при наведении */
}


.promo-text {
    flex: 1;
    /* Текстовый блок занимает оставшееся пространство */
    color: #66424d;
    /* Более темный, читаемый розово-коричневый */
}

.promo-text .intro-paragraph {
    font-size: 1.4em;
    /* Крупный шрифт для приветствия */
    line-height: 1.7;
    margin-bottom: 30px;
    /* Отступ перед кнопкой */
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.5);
    /* Легкая светлая тень для читаемости */
}

.promo-text strong {
    color: #e75480;
    /* Выделяем имя цветом */
    font-weight: bold;
    /* Убедимся, что жирное */
}

/* Стили для кнопки */
.btn {
    /* Базовые стили кнопки */
    display: inline-block;
    padding: 12px 25px;
    border: none;
    border-radius: 25px;
    /* Скругленная кнопка */
    font-weight: bold;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
    font-size: 1.1em;
    text-align: center;
}

.btn-promo {
    /* Специфичные стили для промо-кнопки */
    background-color: #ff69b4;
    /* Ярко-розовый */
    color: #fff;
    /* Белый текст */
    box-shadow: 0 4px 10px rgba(255, 105, 180, 0.4);
}

.btn-promo:hover {
    background-color: #c62f67;
    /* Темнее розовый при наведении */
    transform: translateY(-2px);
    /* Легкий подъем */
    box-shadow: 0 6px 12px rgba(198, 47, 103, 0.5);
}

.btn-promo i {
    /* Иконка внутри кнопки */
    margin-left: 8px;
}



@media (max-width: 991.98px) {

    /* Используем .98 для точности */
    .section-promo-intro {
        min-height: auto;
        /* Убираем минимальную высоту */
        padding: 15px 0;
        /* Уменьшаем отступы */
        text-align: center;
        /* Центрируем все на мобильных */
    }


    .promo-image {
        flex-basis: auto;
        /* Авто ширина */
        margin: 0 auto;
        /* Центрируем блок фото */
        width: 100vw;
        max-width: 100vw;
        position: relative;
        left: 50%;
        gap: 20px 60px;
        transform: translateX(-50%);
    }

    .promo-image img {
        max-width: 100%;
        /* Изображение не шире своего контейнера */
        height: auto;
        /* Сохраняем пропорции */
        border-radius: 0px;
        /* Скругляем углы */
        box-shadow: unset;
        /* Мягкая тень */
        border: 0;

    }

    .promo-text {
        flex: 1;
        /* Занимает всю доступную ширину */
    }

    .promo-text .intro-paragraph {
        font-size: 1.2em;
        /* Уменьшаем шрифт текста */
        text-align: justify;
        /* Выравниваем текст по ширине для лучшей читаемости */
    }

    strong,
    b {
        font-weight: 700;
        /* Используем жирное начертание Roboto */
    }

    .promo-text .intro-paragraph strong {

        /* Делаем имя отдельным блоком для акцента */
        margin-bottom: 10px;
        font-size: 1.3em;
        text-align: center;
    }

    .btn-promo {
        font-size: 1em;
        /* Уменьшаем кнопку */
        padding: 10px 20px;
    }

    .menu-toggle {
        z-index: 1110;
        display: block;
        /* Показываем гамбургер */
    }

    .header-nav-wrapper {
        /* Скрываем меню и соцсети по умолчанию */
        position: fixed;
        /* Фиксированное позиционирование для выезда */
        top: 0;
        right: -100%;
        /* Изначально за правым краем экрана */
        width: 300px;
        /* Ширина выезжающего меню */
        max-width: 80%;
        /* Не шире 80% экрана */
        height: 100vh;
        /* На всю высоту экрана */
        padding: 80px 30px 30px 30px;
        /* Отступы внутри меню (сверху больше из-за шапки) */
        background-color: #ffdde1;
        /* Фон для мобильного меню (чуть светлее?) */
        box-shadow: -2px 0 5px rgba(0, 0, 0, 0.15);
        /* Тень слева */
        z-index: 1050;
        /* Выше чем .site-header */
        z-index: 1100;
        flex-direction: column;
        /* Элементы внутри в колонку */
        align-items: flex-start;
        /* Выравнивание по левому краю */
        gap: 40px;
        /* Увеличим расстояние между меню и соцсетями */
        transition: right 0.4s ease-in-out;
        /* Плавный выезд */
        overflow-y: auto;
        /* Добавляем скролл, если контента много */
    }

    /* Когда меню открыто (добавляем класс .is-open через JS) */
    .header-nav-wrapper.is-open {
        right: 0;
        /* Выезжает на экран */
    }

    /* Стили меню внутри выехавшей панели */
    .main-nav {
        width: 100%;
        /* Меню занимает всю ширину панели */
    }

    .main-nav ul {
        flex-direction: column;
        /* Пункты меню в колонку */
        gap: 15px;
        /* Расстояние между пунктами */
        align-items: flex-start;
        /* Выравнивание по левому краю */
    }

    .main-nav li {
        margin: 0;
        /* Убираем горизонтальные отступы */
        width: 100%;
        /* Пункт занимает всю ширину */
    }

    .main-nav a {
        padding: 12px 10px;
        /* Увеличиваем отступы для удобства нажатия */
        font-size: 1.1em;
        /* Чуть крупнее шрифт */
        border-bottom: 1px solid rgba(231, 84, 128, 0.2);
        /* Разделитель */
    }

    .main-nav li:last-child a {
        border-bottom: none;
        /* Убираем разделитель у последнего */
    }

    /* Стили соцсетей внутри выехавшей панели */
    .social-links-header {
        justify-content: flex-start;
        /* Выравниваем иконки по левому краю */
        flex-wrap: wrap;
        /* Разрешаем перенос иконок */
        gap: 12px;
        /* Увеличим расстояние */
        padding-top: 20px;
        /* Отступ сверху */
        border-top: 1px solid rgba(231, 84, 128, 0.2);
        /* Разделитель */
        width: 100%;
        /* На всю ширину */
    }

    .social-links-header a {
        font-size: 1.6em;
        /* Можно сделать иконки крупнее */
    }

    /* Затемнение остальной части страницы при открытом меню (опционально) */
    body.menu-open::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.4);
        /* Полупрозрачный черный фон */
        z-index: 1000;
        opacity: 1;
        transition: opacity 0.4s ease-in-out;
    }

    /* Когда меню закрыто, скрываем оверлей */
    body:not(.menu-open)::before {
        opacity: 0;
        pointer-events: none;
        /* Чтобы нельзя было кликнуть на невидимый оверлей */
    }

    /* Опционально: запретить прокрутку body, когда меню открыто */
    body.menu-open {
        overflow: hidden;
    }
}

.section-music {
    background-color: #ffe1fb;
    /* Очень бледно-розовый (как биография) */
    padding: 60px 0;
    text-align: center;
    /* Центрируем главный заголовок */
}

.section-music h2 {
    margin-bottom: 40px;
    /* Больше отступ после главного заголовка */
    color: #ff69b4;
    /* Ярко-розовый */
}

.music-social-wrapper {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    font-size: 12px;
    gap: 20px;
    flex-wrap: wrap;

}

/* Карточка главного релиза */
.main-release-card {
    max-width: 140px;
}

.release-cover {
    flex: 0 0 180px;
    /* Фиксированная ширина для обложки */
    height: 180px;
    /* Фиксированная высота */
    overflow: hidden;
    margin-bottom: 5px;
    /* Обрезаем изображение, если не квадратное */
    border-radius: 10px;
    /* Скругляем углы обложки */
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
}

.release-containter {
    display: flex;
    gap: 6px;
    flex-direction: column;
}

.release-cover img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Масштабирует изображение с сохранением пропорций */
}

.release-info {
    flex: 1;
    /* Занимает оставшееся место */
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1;
    margin-top: 15px;
    /* Элементы инфо по левому краю */
}

.release-type {
    font-size: 0.9em;
    color: #aaa;
    margin-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.release-title {
    font-family: 'far', 'Montserrat', sans-serif;
    font-size: 1.8em;
    color: #e75480;
    /* Темно-розовый */
    margin: 0 0 5px 0;
    font-weight: bold;
    text-align: center;
    /* Переопределяем text-align: center у h3 */
}

.release-artist {
    font-size: 1.1em;
    color: #ff69b4;
    /* Ярко-розовый */
    margin: 0 0 20px 0;
}

.btn-listen {
    /* Стили для кнопки "Слушать" */
    /* Используем базовые стили .btn */
    background-color: #ff69b4;
    color: #fff;
    box-shadow: 0 4px 10px rgba(255, 105, 180, 0.4);
    padding: 10px 20px;
    /* Чуть меньше */
    font-size: 1em;
    /* Чуть меньше */
}

.btn-listen:hover {
    background-color: #c62f67;
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(198, 47, 103, 0.5);
}

.btn-listen i {
    margin-right: 8px;
    /* Иконка слева от текста */
}

.site-footer {
    background-color: #ffc0cb;
    /* Светло-розовый фон */
    color: #c62f67;
    /* Темно-розовый текст */
    text-align: center;
    padding: 30px 0;
    /* Увеличим отступ */
    /* Отступ сверху */
}

/* Блок с иконками соцсетей в подвале */
.social-links-footer {
    margin-bottom: 20px;
    /* Отступ перед копирайтом */
}

.social-links-footer p {
    margin-bottom: 15px;
    /* Отступ перед иконками */
    font-weight: bold;
    /* Сделаем текст жирнее */
    font-size: 1.1em;
}

.social-links-headerup {
    margin-bottom: 0px;
    /* Отступ перед копирайтом */
}

.social-links-headerup p {
    margin-bottom: 15px;
    /* Отступ перед иконками */
    font-weight: bold;
    /* Сделаем текст жирнее */
    font-size: 1.1em;
}

.footer-icons {
    display: flex;
    justify-content: center;
    /* Центрируем иконки */
    align-items: center;
    flex-wrap: wrap;
    /* Перенос иконок */
    gap: 20px;
    /* Расстояние между иконками */
}

.footer-icons a {
    color: #c62f67;
    /* Основной цвет иконок */
    font-size: 1.6em;
    /* Размер иконок */
    text-decoration: none;
    transition: color 0.3s ease, transform 0.3s ease;
    display: inline-block;
}

.footer-icons a:hover {
    color: #ff007f;
    /* Ярче розовый при наведении */
    transform: scale(1.1);
    /* Легкое увеличение */
}

/* Текст копирайта */
.copyright-text {
    font-size: 0.9em;
    color: #ae5d75;
    /* Чуть приглушенный цвет для копирайта */
    margin: 0;
    /* Убираем лишние отступы у параграфа */
}

/* Блок с другими ссылками */
.other-links-container {
    display: flex;
    justify-content: space-around;
    font-family: 'far', 'Montserrat', sans-serif;
    /* Распределяем блоки платформ и соцсетей */
    gap: 40px;
    /* Расстояние между блоками */
    text-align: left;
    /* Текст внутри блоков по левому краю */
    flex-wrap: wrap;
    /* Перенос на мобильных */
}

.music-platforms,
.social-profiles {
    flex: 1;
    /* Позволяем блокам растягиваться */
    min-width: 250px;
    /* Минимальная ширина, чтобы не сжимались слишком сильно */
}

.other-links-container h4 {
    font-size: 1.3em;
    color: #e75480;
    /* Темно-розовый */
    margin-bottom: 15px;
    padding-bottom: 5px;
    border-bottom: 1px solid #ffc0cb;
    /* Разделитель */
    text-align: center;
    /* Заголовки по центру */
}

/* Ссылки на платформы */
.platform-links {
    display: flex;
    flex-direction: column;
    /* Ссылки друг под другом */
    gap: 10px;
    align-items: flex-start;
    /* Выравниваем по левому краю */
}

.platform-links a {
    color: #c62f67;
    /* Темно-розовый */
    text-decoration: none;
    font-size: 1.1em;
    transition: color 0.3s ease;
    display: inline-flex;
    /* Чтобы иконка и текст были в строку */
    align-items: center;
    gap: 8px;
    /* Расстояние между иконкой и текстом */
}

.platform-links a:hover {
    color: #ff007f;
    /* Ярче розовый */
    text-decoration: underline;
}

.platform-links a i {
    font-size: 1.3em;
    /* Размер иконки платформы */
    width: 20px;
    /* Фикс. ширина для выравнивания */
    text-align: center;
}


/* Ссылки на соцсети */
.social-links-music-section {
    display: flex;
    justify-content: center;
    /* Центрируем иконки в блоке */
    align-items: center;
    flex-wrap: wrap;
    /* Перенос иконок */
    gap: 20px;
    /* Расстояние между иконками */
}

.social-links-music-section a {
    color: #c62f67;
    font-size: 1.8em;
    /* Крупные иконки */
    text-decoration: none;
    transition: color 0.3s ease, transform 0.3s ease;
    display: inline-block;
}

.social-links-music-section a:hover {
    color: #ff007f;
    transform: scale(1.15);
    /* Увеличиваем сильнее */
}


@media (max-width: 767.98px) {

    .videos-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 8px;
    }

    .video-item img {
        height: 150px;
    }

    .video-item .play-button {
        font-size: 2.5em;
        /* Уменьшаем размер иконки воспроизведения */
    }


    .main-release-card {
        display: flex;
        max-width: 180px;
        flex-direction: column;
    }

    .release-cover {
        flex-basis: auto;
        /* Автоматическая высота/ширина */
        width: 150px;
        max-width: 150px;
        /* Уменьшаем размер обложки */
        height: 150px;
        margin: 0 0 0 0;
        /* Центрируем и добавляем отступ снизу */
    }

    .release-info {
        max-width: 150px;
        align-items: center;
        /* Центрируем все элементы */
    }

    .release-title {

        font-size: 1.6em;
        text-align: center;
        /* Центрируем заголовок */
    }

    .btn-listen {
        /* Можно сделать кнопку чуть больше для удобства нажатия */
        padding: 12px 25px;
    }

    .other-links-container {
        flex-direction: column;
        /* Блоки платформ и соцсетей друг под другом */
        align-items: center;
        /* Центрируем блоки */
        gap: 40px;
    }

    .music-platforms,
    .social-profiles {
        width: 100%;
        /* Занимают всю ширину */
        max-width: 400px;
        /* Но не слишком широко */
        min-width: unset;
        /* Сбрасываем мин. ширину */
    }

    .platform-links {
        align-items: center;
        /* Центрируем ссылки на платформы */
    }

    .social-links-music-section {
        gap: 15px;
        /* Уменьшаем расстояние между соц. иконками */
    }

    .social-links-music-section a {
        font-size: 1.6em;
        /* Слегка уменьшаем соц. иконки */
    }
}

.site-title-stories {
    position: relative;

}

.site-title-stories .decoration {
    position: absolute;
    /* Абсолютное позиционирование относительно .site-title */
    content: '';
    pointer-events: none;
    /* Чтобы не мешали кликам */

    /* Задайте общие размеры, если они одинаковые, или задайте их индивидуально */
    width: 50px;
    /* Подберите */
    height: 50px;
    /* Подберите */

    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}


.site-title-stories .decoration-1 {
    background-image: url('/images/deco-1.png');

    top: -32px;
    left: -12px;


    /* transform: rotate(-10deg); /* Опционально */
}

/* Стили для второй картинки */
.site-title-stories .decoration-2 {
    background-image: url('/images/deco-2.png');

    /* Позиционирование для второй картинки */
    bottom: 38px;
    right: -5px;

    /* transform: rotate(15deg); /* Опционально */
}

/* Стили для третьей картинки */
.site-title-stories .decoration-3 {
    background-image: url('/images/deco-3.png');
    font-weight: bold;
    /* Позиционирование для третьей картинки */
    top: -49px;
    right: 193px;

    /* transform: rotate(5deg); /* Опционально */

    /* Индивидуальный размер, если нужен */
    /* width: 40px; */
    /* height: 40px; */
}

@media (max-width: 575.98px) {




    .promo-text .intro-paragraph {
        font-size: 0.9em;
        /* Еще немного уменьшаем текст */
    }
}

@media (max-width: 480px) {

    .videos-grid {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
        /* Можно сделать 1fr */
        gap: 5px;
    }

    .video-item img {
        height: 120px;
    }


    .video-item .play-button {
        font-size: 2em;
        /* Ещё уменьшаем размер иконки */
    }

    .site-title {
        position: relative;
        padding: 40px;

    }

    .site-title .decoration {
        position: absolute;
        /* Абсолютное позиционирование относительно .site-title */
        content: '';
        pointer-events: none;
        /* Чтобы не мешали кликам */

        /* Задайте общие размеры, если они одинаковые, или задайте их индивидуально */
        width: 50px;
        /* Подберите */
        height: 50px;
        /* Подберите */

        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
    }


    .site-title .decoration-1 {
        background-image: url('/images/deco-3.png');

        /* Позиционирование для первой картинки */
        top: 10px;
        /* Пример: сверху слева */
        left: -35px;

        /* transform: rotate(-10deg); /* Опционально */
    }

    /* Стили для второй картинки */
    .site-title .decoration-2 {
        background-image: url('/images/deco-1.png');

        /* Позиционирование для второй картинки */
        bottom: 5px;
        /* Пример: снизу справа */
        right: -35px;

        /* transform: rotate(15deg); /* Опционально */
    }

    /* Стили для третьей картинки */
    .site-title .decoration-3 {
        background-image: url('/images/deco-2.png');

        /* Позиционирование для третьей картинки */
        top: -15px;
        /* Пример: сверху справа, ближе к тексту */
        right: -20px;

        /* transform: rotate(5deg); /* Опционально */

        /* Индивидуальный размер, если нужен */
        /* width: 40px; */
        /* height: 40px; */
    }

    .site-title a {
        font-size: 1.5em;
        /* Уменьшаем название сайта */
    }

    .menu-toggle {
        font-size: 1.6em;
        /* Уменьшаем гамбургер */
    }

    .header-nav-wrapper {
        width: 260px;
        /* Уменьшаем ширину меню на маленьких экранах */
        padding: 70px 20px 20px 20px;
        /* Уменьшаем отступы */
    }

    h1 {
        font-size: 2em;
    }

    h2 {
        font-size: 1.6em;
    }

    h3 {
        font-size: 1.3em;
    }

    .site-header h1 {
        font-size: 1.5em;
    }

    .main-nav li {
        margin: 3px 5px;
        /* Ещё меньше отступов в меню на совсем маленьких экранах */
    }

    .bio-images-container {
        max-width: 95%;
        /* Убедимся, что не выходит за края */
        padding: 5px;
        /* Ещё меньше padding */
    }

    /* Уменьшаем высоту слайдера на маленьких мобильных */
    .bio-images-container .swiper-container {
        height: 180px;
        /* Уменьшаем высоту слайдера */
    }

    /* Стили для одиночной картинки */
    .bio-images-container>img {
        max-width: 95%;
        border-width: 2px;
    }

    /* Стили для слайдов */
    .bio-images-container .swiper-slide {
        border-width: 2px;
    }


    .music-link-main img.listen-button {
        max-width: 180px;
        /* Уменьшаем размер кнопки послушать */
    }

    .music-links-list ul {
        padding-left: 15px;
        /* Уменьшаем padding для маркеров */
    }

    /* Уменьшаем размер стрелок Swiper на очень маленьких экранах, если нужно */
    .bio-images-container .swiper-button-next,
    .bio-images-container .swiper-button-prev {
        font-size: 20px;
        /* Размер иконки */
        width: 25px;
        /* Размер кнопки */
        height: 25px;
        margin-top: -12.5px;
        /* Корректировка центрирования */
    }
}


.section-videos {
    padding: 60px 0;
    background-color: #ffe1fb;
    /* Чисто белый фон для галереи */
}

.section-gallery {
    padding: 60px 0;
    background-color: #fff0f5;
    /* Чисто белый фон для галереи */
}

.section-gallery h2 {
    color: #ff69b4;
    /* Стандартный цвет заголовка */
    margin-bottom: 10px;
}

.gallery-subtitle {
    text-align: center;
    color: #777;
    font-size: 1.1em;
    margin-bottom: 40px;
}

.gallery-grid {
    display: grid;
    /* Создаем 4 колонки равной ширины на десктопе */
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    /* Промежуток между элементами сетки */
}

.gallery-grid a {
    display: block;
    /* Ссылка занимает всю ячейку сетки */
    overflow: hidden;
    /* Скрываем части изображения, выходящие за рамки */
    border-radius: 8px;
    /* Скругляем углы */
    position: relative;
    /* Для возможного добавления оверлея/иконки */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    /* aspect-ratio: 1 / 1; */
    /* Делаем ячейки квадратными */
}

.gallery-grid a:hover {
    transform: scale(1.05);
    /* Увеличиваем при наведении */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
    z-index: 10;
    /* Поднимаем над другими элементами при наведении */
}

.gallery-grid img {
    display: block;
    /* Убираем лишние отступы */
    width: 100%;
    /* Изображение заполняет ссылку по ширине */
    height: 100%;
    /* Изображение заполняет ссылку по высоте */
    object-fit: cover;
    /* Масштабирует и обрезает для заполнения */
    transition: opacity 0.3s ease;
}

.gallery-grid a:hover img {
    opacity: 0.9;
    /* Легкая прозрачность при наведении */
}

/* Добавляем иконку лупы при наведении (опционально) */
.gallery-grid a::after {
    content: '';
    /* Код иконки лупы из Font Awesome */
    font-family: 'far';
    /* Убедитесь, что шрифт подключен */
    font-weight: 900;
    /* Для solid иконки */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.8);
    /* Центрируем и немного уменьшаем */
    font-size: 2.5em;
    color: rgba(255, 255, 255, 0.8);
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
    /* Иконка не должна мешать клику */
}

.gallery-grid a:hover::after {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    /* Увеличиваем до нормального размера */
}


/* ==============================================
   Адаптивность Галереи
   ============================================== */

@media (max-width: 991.98px) {
    .gallery-grid {
        /* 3 колонки на планшетах */
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 767.98px) {
    .gallery-grid {
        /* 2 колонки на мобильных */
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        /* Уменьшаем промежуток */
    }

 

    .gallery-grid a::after {
        font-size: 2em;
        /* Уменьшаем иконку лупы */
    }
}



@media (max-width: 412.98px) {

    /* Можно оставить 2 колонки или сделать 1 */
    /* grid-template-columns: repeat(1, 1fr); */
    .main-release-card {
        display: flex;
        max-width: 140px;
        flex-direction: column;
    }
}


/* ==============================================
   Стили Секции Контактов
   ============================================== */
.section-contact {
    padding: 60px 0;
    background-color: #fff0f5;
    /* Бледно-розовый фон, как у промо */
}

.section-contact h2 {
    color: #ff69b4;
    margin-bottom: 10px;
}

.contact-subtitle {
    text-align: center;
    color: #777;
    font-size: 1.1em;
    margin-bottom: 40px;
    max-width: 600px;
    /* Ограничим ширину подзаголовка */
    margin-left: auto;
    margin-right: auto;
}

.contact-form-wrapper {
    max-width: 700px;
    /* Ограничим ширину формы */
    margin: 0 auto;
    /* Центрируем форму */
    background-color: #fff;
    /* Белый фон для формы */
    padding: 30px 40px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

/* Стили для группы "метка + поле" */
.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    /* Метка над полем */
    margin-bottom: 8px;
    font-weight: bold;
    color: #e75480;
    /* Темно-розовый */
    font-size: 0.95em;
}

/* Стили для полей ввода и текстовой области */
.form-group input[type="text"],
.form-group input[type="tel"],
.form-group input[type="email"],
.form-group textarea {
    width: 100%;
    /* Поле на всю ширину обертки */
    padding: 12px 15px;
    border: 1px solid #ffc0cb;
    /* Светло-розовая рамка */
    border-radius: 5px;
    font-size: 1em;
    font-family: 'far', 'Roboto', sans-serif;
    /* Используем основной шрифт */
    color: #555;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.form-group input[type="text"]:focus,
.form-group input[type="email"]:focus,
.form-group textarea:focus {
    border-color: #ff69b4;
    /* Рамка при фокусе */
    box-shadow: 0 0 5px rgba(255, 105, 180, 0.3);
    /* Легкая тень при фокусе */
    outline: none;
    /* Убираем стандартный синий outline */
}

/* Стили для placeholder */
.form-group input::placeholder,
.form-group textarea::placeholder {
    color: #bbb;
    opacity: 1;
    /* Firefox */
}

/* Стили для текстовой области */
.form-group textarea {
    resize: vertical;
    /* Разрешаем изменять размер только по вертикали */
    min-height: 120px;
    /* Минимальная высота */
}

/* Контейнер для кнопки отправки */
.form-group.form-submit {
    text-align: center;
    /* Центрируем кнопку */
    margin-top: 30px;
    margin-bottom: 0;
    /* Убираем нижний отступ у последнего элемента */
}

/* Стили для кнопки отправки */
.btn-contact-submit {
    /* Используем базовые стили .btn */
    background-color: #ff69b4;
    color: #fff;
    box-shadow: 0 4px 10px rgba(255, 105, 180, 0.4);
    padding: 12px 30px;
    font-size: 1.1em;
}

.btn-contact-submit:hover {
    background-color: #c62f67;
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(198, 47, 103, 0.5);
}

.btn-contact-submit i {
    margin-left: 8px;
}

/* Стили для сообщений об ошибке/успехе (пока скрыты) */
.form-message {
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 5px;
    text-align: center;
    font-weight: bold;
    display: none;
    /* Скрыты по умолчанию */
}

.form-message.success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.form-message.error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}


/* ==============================================
   Адаптивность Секции Контактов
   ============================================== */
@media (max-width: 575.98px) {
    .contact-form-wrapper {
        padding: 20px;
        /* Уменьшаем отступы на мобильных */
    }

    .form-group input[type="text"],
    .form-group input[type="email"],
    .form-group textarea {
        padding: 10px 12px;
        /* Уменьшаем padding полей */
    }

    .btn-contact-submit {
        width: 100%;
        /* Кнопка на всю ширину */
        padding: 12px 15px;
    }
}


.videos-subtitle {
    /* Уникальный класс для подзаголовка видео */
    text-align: center;
    font-size: 1.1em;
    color: #555;
    margin-bottom: 40px;
}

/* Сетка галереи видео */
.videos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 15px;
    /* Отступы между элементами сетки */
}

/* Стиль для каждого элемента сетки ВИДЕО */
.video-item {
    /* Используем уже существующий класс video-item */
    display: block;
    /* Элемент ссылки становится блочным */
    position: relative;
    /* Для позиционирования кнопки воспроизведения */
    overflow: hidden;
    /* Скрываем то, что выходит за пределы изображения */
    border-radius: 10px;
    /* Скругленные углы */
    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.2);
    /* Тень */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    /* line-height: 0;  <-- Убираем, чтобы дать место тексту */
    line-height: normal;
    /* Возвращаем стандартную высоту строки */
    cursor: pointer;
    /* Меняем курсор */
    text-decoration: none;
    /* Убираем подчеркивание у ссылки */
    color: inherit;
    /* Наследуем цвет текста (например, от body) */

    /* Добавляем внутренний отступ снизу для названия видео */
    padding-bottom: 10px;
    /* Подберите значение так, чтобы хватило для названия */
    background-color: #fff;
    /* Белый фон для области с названием */
}

.video-item:hover {
    transform: translateY(-5px);
    /* Небольшой подъем при наведении */
    box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.3);
    /* Более сильная тень */
}

/* Стиль для изображения внутри элемента сетки ВИДЕО (миниатюра) */
.video-item img {
    display: block;
    /* Убираем лишнее пространство под изображением */
    width: 100%;
    /* Изображение заполняет всю ширину элемента */
    height: 200px;
    /* Фиксированная высота, как для фото */
    object-fit: cover;
    /* Обрезает изображение */
    transition: transform 0.3s ease;
    margin-bottom: 0;
    /* Убираем стандартный нижний отступ у img */
    border-radius: 10px 10px 0 0;
    /* Скругляем только верхние углы */
}

.video-item:hover img {
    transform: scale(1.05);
    /* Небольшое увеличение миниатюры */
}

/* Стили для кнопки воспроизведения */
.video-item .play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 3em;
    /* Размер иконки */
    color: rgba(255, 255, 255, 0.9);
    /* Белый цвет, слегка прозрачный */
    transition: opacity 0.3s ease, transform 0.3s ease;
    z-index: 5;
    /* Поверх изображения */
    text-shadow: 0 0 15px rgba(0, 0, 0, 0.6);
    /* Тень для лучшей видимости */
}

.video-item:hover .play-button {
    opacity: 1;
    /* Становится полностью непрозрачным при наведении */
    transform: translate(-50%, -50%) scale(1.1);
    /* Небольшое увеличение иконки */
}

/* Стили для названия видео */
.video-item .video-title {
    display: block;
    /* Делаем блочным элементом */
    font-size: 0.9em;
    /* Размер шрифта */
    color: #555;
    /* Цвет текста */
    padding: 10px 10px 0 10px;
    /* Отступы вокруг текста (верхний, правый, нижний, левый) */
    text-align: left;
    /* Выравнивание текста по левому краю */
    line-height: 1.3;
    /* Межстрочный интервал */

    /* Добавляем ограничение по количеству строк и многоточие */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    /* Максимум 2 строки */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    /* Добавляем многоточие (...) если текст обрезан */
}


.form-message {
    padding: 10px;
    margin-bottom: 20px;
    border-radius: 5px;
    text-align: center;
    font-weight: bold;
    display: none;
    /* Скрыто по умолчанию */
}

.form-message.success {
    background-color: #d4edda;
    /* Светло-зеленый */
    color: #155724;
    /* Темно-зеленый */
    border: 1px solid #c3e6cb;
}

.form-message.error {
    background-color: #f8d7da;
    /* Светло-красный */
    color: #721c24;
    /* Темно-красный */
    border: 1px solid #f5c6cb;
}

/* Скрытие honeypot поля визуально, но не через display: none (некоторые боты игнорируют) */
.honeypot-group {
    position: absolute !important;
    top: -9999px !important;
    left: -9999px !important;
    visibility: hidden !important;
}

.release-cover {
    position: relative;
    cursor: pointer;
}

.audio-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s;
}

.release-cover:hover .audio-overlay {
    opacity: 1;
}

.audio-icon {
    font-size: 40px;
    color: white;
    transition: transform 0.2s ease;
}

.audio-icon:hover {
    transform: scale(1.2);
}