/* ==========================================================================
   Hero-слайдер главной страницы (инфоблочная версия).

   Namespace .jc-hero / .jc-hero-slide специально НЕ пересекается с
   .promo__swiper-* — те классы используются другими каруселями и
   внутренними страницами (page__head-content и т.п.), трогать их нельзя.

   Механика слайдера (Swiper, стрелки, счётчик) остаётся общей: разметка
   сохраняет классы .promo__carousel / .promo__swiper / .swiper-slide /
   .swiper-pagination, на которые завязаны main.js и custom.css.
   ========================================================================== */

/* custom.css (грузится позже style.min.css, см. header.php) переопределяет
   .promo__swiper .swiper-slide на min-height:80vh + flex-центрирование —
   это ломает точный аспект 1920×600 / 390×220 (появляется пустой отступ
   сверху и снизу слайда, пагинация уезжает в пустоту). Отключаем это
   ТОЛЬКО для нового hero через .jc-hero/.jc-hero__swiper: selector выше по
   specificity, чем правило custom.css, и не задевает .promo__swiper на
   других страницах. */
.jc-hero.promo__carousel .promo__swiper.jc-hero__swiper .swiper-slide {
    min-height: 0;
    height: auto;
    display: block;
}

.jc-hero-slide {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding-bottom: 31.25%; /* аспект 600/1920 — держит высоту без layout shift */
    background: #003e33;
}

.jc-hero-slide__bg,
.jc-hero-slide__fg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
}

.jc-hero-slide__bg img,
.jc-hero-slide__fg img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.jc-hero-slide__fg {
    pointer-events: none;
}

.jc-hero-slide__scrim {
    /* Затемняющая подложка снизу — под неё заходит существующий оверлей
       пагинации (счётчик/стрелки из custom.css), чтобы белый счётчик читался
       поверх любого изображения. Саму пагинацию не трогаем — только фон. */
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 22%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.45));
    pointer-events: none;
}

.jc-hero-slide__content {
    position: absolute;
    left: 15.6%;
    top: 50%;
    transform: translateY(-50%);
    max-width: 28%;
    color: #fff;
    font-family: var(--font-primary);
    z-index: 2;
}

.jc-hero-slide__title {
    font-weight: 500;
    /* Без нижнего floor у clamp: шрифт масштабируется строго вместе с высотой
       баннера (она привязана к ширине через padding-bottom), поэтому
       пропорция с макетом 1920×600 сохраняется на любой desktop/tablet
       ширине и текст не может «не влезть» в укоротившийся баннер. */
    font-size: min(1.875vw, 2rem);
    line-height: 1.2;
    margin: 0 0 0.6em;
}

.jc-hero-slide__subtitle {
    font-weight: 500;
    font-size: min(1.15vw, 1.375rem);
    line-height: 1.35;
    margin: 0 0 1em;
}

/* Кнопки опциональны. Если у слайда нет ни одной кнопки, блок .actions не
   выводится вообще — и нижний отступ описания не должен резервировать под
   него пустое место. */
.jc-hero-slide__title:last-child,
.jc-hero-slide__subtitle:last-child {
    margin-bottom: 0;
}

.jc-hero-slide__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.jc-hero-slide__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 8.75rem;
    height: min(2.4vw, 2.875rem);
    padding: 0 1.375rem;
    border-radius: 5px;
    background: var(--color-cream, #f6f6f4);
    color: var(--color-primary-dark, #003e33);
    font-family: var(--font-primary);
    font-size: min(0.85vw, 0.875rem);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: opacity 0.2s ease-in-out;
}

.jc-hero-slide__btn:hover {
    opacity: 0.85;
}

/* Mobile content-блок (title/description/buttons ПОД картинкой, не поверх
   неё) — в DOM всегда, видим только на мобильном брейкпоинте. См. docblock
   вверху render.php: тот же $jcHeroContentHtml, что и десктоп-оверлей. */
.jc-hero-mobile-content {
    display: none;
}

@media (max-width: 480px) {
    /* Мобильный брейкпоинт по образцу уже существующего на главной
       (.video-desctop/.video-mobile): графическая область (background +
       foreground) — ТОЛЬКО отдельные mobile-ассеты, строго 390×220 по
       аспекту, без наложения текста. Desktop-графика не кропается. */
    .jc-hero-slide {
        padding-bottom: 56.41%; /* аспект 220/390 — не меняется этим этапом */
    }

    .jc-hero-slide__content {
        display: none;
    }

    /* Swiper (custom.css) растягивает все .swiper-slide по высоте самого
       высокого слайда (flex + align-items:stretch по умолчанию) — иначе
       переключение между слайдом с 1-строчным и 3-строчным описанием
       дёргало бы высоту .swiper-wrapper. Из-за этого растяжения у более
       короткого слайда ниже кнопок остаётся пустая полоса высотой в
       разницу — заливаем её тем же зелёным, чтобы это выглядело частью
       hero, а не белым фоном страницы. */
    .jc-hero.promo__carousel .promo__swiper.jc-hero__swiper .swiper-slide {
        background: #003e33;
    }

    .jc-hero-mobile-content {
        display: block;
        padding: 1.25rem 1.25rem 1.5rem;
        background: #003e33;
        color: #fff;
        font-family: var(--font-primary);
    }

    .jc-hero-mobile-content .jc-hero-slide__title {
        font-size: 1.125rem;
        margin: 0 0 0.5em;
    }

    .jc-hero-mobile-content .jc-hero-slide__subtitle {
        font-size: 0.875rem;
        margin: 0 0 1em;
    }

    .jc-hero-mobile-content .jc-hero-slide__actions {
        gap: 0.625rem;
    }

    .jc-hero-mobile-content .jc-hero-slide__btn {
        /* Десктопные min-width/height/font-size — vw-масштабированные под
           широкий баннер, на мобильном блоке под картинкой они не нужны:
           здесь обычный поток, ширина не завязана на высоту графики. */
        flex: 1 1 auto;
        min-width: 7rem;
        height: 2.75rem;
        font-size: 0.8125rem;
    }
}

@media (max-width: 340px) {
    /* На самых узких экранах (320px) две кнопки в ряд с длинными подписями
       («До / После» + «Записаться») могут не влезть — переносим в столбец,
       чтобы кнопка не обрезалась и не вылезала за край экрана. */
    .jc-hero-mobile-content .jc-hero-slide__actions {
        flex-direction: column;
        align-items: stretch;
    }

    .jc-hero-mobile-content .jc-hero-slide__btn {
        width: 100%;
    }
}