/* ВЕСЕЛИУМ — точечные визуальные исправления 06.11.2026.
   Подключать ПОСЛЕ базовых и мобильных CSS, только через header.php. */

/* Смысловая подпись задаётся разметкой конкретного слайда.
   Так она не перепутается при клонировании/перестановке Swiper. */
.hero-slide-eyebrow,
.hero-mobile-contact { display: none; }

/* Возвращаем спокойное появление изображения и плавную смену
   слайдов. Скорость самого fade задаётся в footer.php. */
@keyframes veseliumHeroPhotoAppear {
    from { opacity: .12; transform: translateY(15px) scale(.985); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.hero-section .heroSwiper .swiper-slide-active .slide-image img {
    animation: veseliumHeroPhotoAppear .95s cubic-bezier(.2,.7,.2,1) both;
}

/* На небольших экранах движущиеся пчёлки перекрывали слова.
   Скрипты сохраняются, но мобильный посетитель видит чистый текст;
   логотипы и статические пчёлки в оформлении остаются. */
@media screen and (max-width: 1100px) {
    .flying-bee,
    .ny-flying-bee,
    .features-bee { display: none !important; }
}

@media screen and (max-width: 850px) {
    /* Старые подписи через ::before и :nth-child были привязаны
       к индексу слайда. Swiper в режиме loop меняет этот индекс. */
    .hero-section .heroSwiper .slide-content::before,
    .hero-section .heroSwiper .swiper-slide:nth-child(2) .slide-content::before,
    .hero-section .heroSwiper .swiper-slide:nth-child(3) .slide-content::before {
        content: none !important;
        display: none !important;
    }
    .hero-section .heroSwiper .slide-content .hero-slide-eyebrow {
        display: inline-block !important;
        box-sizing: border-box;
        max-width: 100%;
        margin: 0 auto 11px;
        padding: 7px 13px;
        border: 1px solid rgba(255,255,255,.78);
        border-radius: 999px;
        background: rgba(255,255,255,.56);
        box-shadow: 0 4px 12px rgba(74,51,32,.05);
        color: #76543a;
        font-size: clamp(9px,2.65vw,11px);
        font-weight: 900;
        line-height: 1.35;
        letter-spacing: .055em;
        text-align: center;
        text-transform: uppercase;
    }

    /* На телефоне внутренние кнопки остаются в DOM для десктопа,
       но единственная видимая кнопка теперь вынесена ниже слайдера. */
    .hero-section .heroSwiper .slide-content .btn-main {
        display: none !important;
    }
    .hero-mobile-contact {
        position: relative;
        z-index: 2;
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 100%;
        margin: 0;
        padding: 18px 18px 24px;
        background: #fff7e8;
        border-top: 2px solid rgba(232,189,105,.6);
        text-align: center;
    }
    .hero-mobile-contact .btn-main {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: min(100%, 340px);
        min-height: 54px;
        padding: 13px 24px;
        margin: 0 auto !important;
        border-radius: 999px;
        font-size: 16px;
        line-height: 1.25;
        text-transform: none;
        letter-spacing: 0;
        box-shadow: 0 7px 18px rgba(214,165,38,.25), inset 0 2px 4px rgba(255,255,255,.6);
    }

    /* Высота картинки закреплена по типу слайда, а не по номеру
       в DOM: копии Swiper получают тот же класс. */
    .hero-section .heroSwiper .hero-slide--animators .slide-image {
        height: clamp(260px,79vw,335px) !important;
    }
    .hero-section .heroSwiper .hero-slide--nitrogen .slide-image,
    .hero-section .heroSwiper .hero-slide--newyear .slide-image {
        height: clamp(285px,88vw,375px) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-section .heroSwiper .swiper-slide-active .slide-image img {
        animation: none !important;
    }
}

/* ВЕСЕЛИУМ: мобильные текстовые исправления, 06.11.2026, v2.
   Подключено последним через veselium_visual_fixes.css.
   Только внешний вид; формы, PHP и JS не меняются. */

@media screen and (max-width: 850px) {
    /* Кнопка находится под слайдером, но фон должен продолжать
       основной пастельный градиент страницы, без светлой полосы. */
    .hero-mobile-contact {
        background: transparent !important;
        background-image: none !important;
        border-top: 0 !important;
        box-shadow: none !important;
        padding-top: 15px;
        padding-bottom: 24px;
    }

    /* Все заголовки персонажей должны помещаться даже на узком
       телефоне (Единорожка, Тиктокер Девочка, Космонавт Амонг Ас). */
    .character-hero .character-hero-container,
    .character-hero .character-hero-text {
        box-sizing: border-box;
        min-width: 0 !important;
        max-width: 100% !important;
    }
    .character-hero .character-hero-text {
        width: 100% !important;
        padding-inline: 8px !important;
        text-align: center;
    }
    .character-hero .character-hero-text h1 {
        box-sizing: border-box;
        display: block;
        width: 100% !important;
        max-width: 100% !important;
        margin-inline: auto !important;
        padding-inline: 2px;
        font-size: clamp(36px, 11.8vw, 48px) !important;
        line-height: 1.13 !important;
        letter-spacing: -.02em !important;
        white-space: normal !important;
        overflow-wrap: break-word !important;
        word-break: normal !important;
        hyphens: auto;
        text-wrap: balance;
        text-align: center;
    }
    .character-hero .character-action {
        box-sizing: border-box;
        max-width: 100%;
    }
}

/* На самых узких телефонах оставляем место по бокам букв. */
@media screen and (max-width: 360px) {
    .character-hero .character-hero-text h1 {
        font-size: clamp(36px, 11.6vw, 41px) !important;
    }
}