/*
====================================================================

Front Page

====================================================================
*/


/* ================================================================
   CTA Hero
   ================================================================ */

.dd-front-cta-hero {
    padding: calc(var(--dd-navbar-height, 80px) + 46px) 20px 46px;

    color: var(--dd-white);
    background: var(--dd-sec-background);

    /*
     * Слоган и кнопки набираются одним кеглем — это требование блока,
     * а не совпадение. Держим их на общем токене, иначе значения
     * разъезжаются при первой же правке одного из них.
     */
    --dd-hero-text-size: var(--dd-subtitle-size);

    /*
     * Единый вертикальный ритм CTA: одно расстояние между всеми
     * элементами (слоган, сцена, точки, кнопки). Раньше отступы жили
     * в собственных padding/margin каждого элемента (18/28, 6, 30) и
     * шли вразнобой — теперь одно значение на всех.
     */
    --dd-hero-rhythm: clamp(20px, 2.6vw, 32px);
}

.dd-front-cta-hero__inner {
    max-width: 1440px;
    margin: 0 auto;
}

/* Одинаковый вертикальный зазор между всеми элементами CTA. */
.dd-front-cta-hero__inner > * + * {
    margin-top: var(--dd-hero-rhythm);
}

.dd-front-cta-hero__title {
    margin: 0;
    padding: 0;

    color: var(--dd-white);
    font-family: var(--dd-font-heading);
    font-size: var(--dd-hero-text-size);
    font-weight: var(--dd-font-weight-medium);
    line-height: 1.35;
    letter-spacing: 0;
    text-align: center;
}


.dd-front-cta-hero__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;

    padding: 0;
}

.dd-front-cta-hero__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 52px;

    /*
     * Отступы заданы в em, поэтому следуют за кеглем кнопки: меняется
     * --dd-hero-text-size — пропорции остаются прежними, и подгонять
     * padding вручную при каждом изменении размера не нужно.
     */
    padding: .75em 1.5em;

    border: 0;
    border-radius: 12px;
    font-family: var(--dd-font-ui);
    font-size: var(--dd-hero-text-size);
    font-weight: var(--dd-font-weight-semibold);
    line-height: var(--dd-line-height-ui);

    box-shadow: 0 7px 18px rgba(0, 16, 19, .08);
    transition: box-shadow .2s ease, transform .2s ease;
}

.dd-front-cta-hero__button--primary {
    color: var(--dd-white);
    background: var(--dd-accent);
}

.dd-front-cta-hero__button--secondary {
    color: var(--dd-accent);
    background: var(--dd-white);
}

.dd-front-cta-hero__button--primary:hover,
.dd-front-cta-hero__button--primary:focus-visible {
    color: var(--dd-white);
    background: var(--dd-accent);
}

.dd-front-cta-hero__button--secondary:hover,
.dd-front-cta-hero__button--secondary:focus-visible {
    color: var(--dd-accent);
    background: var(--dd-foreground);
}

.dd-front-cta-hero__button:hover,
.dd-front-cta-hero__button:focus-visible {
    box-shadow: 0 11px 24px rgba(0, 16, 19, .18);
    transform: translateY(-2px);
}

.dd-front-cta-hero__button:focus-visible {
    outline: 2px solid var(--dd-white);
    outline-offset: 3px;
}

.dd-front-cta-hero__button:active {
    box-shadow: 0 5px 12px rgba(0, 16, 19, .12);
    transform: translateY(0);
}

/*
 * Слайдер на общем движке (assets/js/slider.js, DD.initSlider):
 * .dd-front-cta-hero__stage - корень с data-dd-slider, viewport/track/
 * item - разметка движка, здесь только визуал. Полоса "выходит" за
 * контентную ленту (.dd-front-cta-hero__inner, max-width 1440px) -
 * ширина и центрирование заданы на viewport, а не на корне, поэтому
 * точки под ним остаются в пределах обычной ленты, как в референсе.
 */
.dd-front-cta-hero__stage {
    position: relative;
}

.dd-front-cta-hero__stage .dd-slider__viewport {
    position: relative;

    height: clamp(360px, 33vw, 620px);
    width: min(calc(100vw - 40px), 1900px);
    margin-left: 50%;

    transform: translateX(-50%);
}

.dd-front-cta-hero__stage .dd-slider__track {
    align-items: center;
    height: 100%;
}

.dd-front-cta-hero__stage .dd-slider__item {
    padding: 0 5px;
}

/*
 * Заплатка на случай, если в cta-slide остаётся всего одна запись:
 * движок не создаёт клонов для петли (нечем), карточка - единственный
 * ребёнок track. Тогда она не растягивается на всю ширину сцены,
 * а стоит квадратом по центру, как раньше делал is-static.
 */
.dd-front-cta-hero__stage .dd-slider__item:only-child {
    flex-basis: min(100%, 590px);
    margin-inline: auto;
}

.dd-front-cta-hero__stage .dd-slider__dots {
    gap: 6px;
    margin-top: var(--dd-hero-rhythm);
    min-height: 18px;
}

.dd-front-cta-hero__stage .dd-slider__dot {
    width: 16px;
    height: 5px;

    background: var(--dd-white);
    border-radius: 999px;
    opacity: .95;
}

.dd-front-cta-hero__stage .dd-slider__dot.is-active {
    background: var(--dd-accent);
    transform: none;
}

/*
 * Скрыта по умолчанию (десктоп/планшет): здесь работает слайдер
 * (.dd-front-cta-hero__stage). Специфичность через .dd-front-cta-hero
 * взята сознательно - у .dd-cta-slide (display: block) тот же класс
 * веса 0-1-0, и без запаса порядок правил в файле решал бы, кто
 * выигрывает display, а это хрупко.
 */
.dd-front-cta-hero .dd-front-cta-hero__mobile-promo {
    display: none;
}

.dd-cta-slide {
    position: relative;
    z-index: 1;

    display: block;
    min-width: 0;

    color: var(--dd-white);
}

/*
 * Активная карточка: на десктопе класс is-active ставит движок
 * слайдера на карточку-обёртку .dd-slider__item (data-dd-active-center
 * в slider.js), на мобильной статичной заплатке он задан прямо
 * в разметке на самой ссылке. Поэтому у каждого правила ниже две
 * формы селектора - через обёртку и напрямую.
 */
.dd-front-cta-hero__stage .dd-slider__item.is-active .dd-cta-slide,
.dd-cta-slide.is-active {
    z-index: 3;
}

.dd-cta-slide:hover,
.dd-cta-slide:focus-visible {
    z-index: 4;
}

.dd-cta-slide__media {
    position: relative;

    display: block;
    aspect-ratio: 1;

    overflow: hidden;
    padding: 6px;

    background: var(--dd-white);
    clip-path: polygon(15% 0%, 100% 0%, 85% 100%, 0% 100%);
    transform: scale(.9);
    transition: background-color .3s ease, transform .3s ease;
}

.dd-front-cta-hero__stage .dd-slider__item.is-active .dd-cta-slide__media,
.dd-cta-slide.is-active .dd-cta-slide__media,
.dd-cta-slide:hover .dd-cta-slide__media,
.dd-cta-slide:focus-visible .dd-cta-slide__media {
    transform: scale(1);
}

.dd-front-cta-hero__stage .dd-slider__item.is-active .dd-cta-slide__media,
.dd-cta-slide.is-active .dd-cta-slide__media {
    background: var(--dd-accent);
}

.dd-cta-slide__image-area {
    position: relative;

    display: block;
    width: 100%;
    height: 100%;

    overflow: hidden;
    clip-path: polygon(15% 0%, 100% 0%, 85% 100%, 0% 100%);

    /*
     * Blur-up: инлайновое микро-превью (dd_get_image_lqip) лежит
     * фоном и видно мгновенно, пока грузится полная картинка.
     * Браузерное сглаживание при растяжении даёт эффект размытия.
     */
    background-size: cover;
    background-position: center;
}

.dd-cta-slide__image-area.dd-hover-shine::after {
    clip-path: inherit;
}

.dd-cta-slide__image {
    display: block;
    width: 100%;
    height: 100%;

    object-fit: cover;
}

/*
 * Полная картинка мягко проявляется поверх превью. Скрытие - только
 * при работающем JS (класс dd-reveal-js ставит reveal.js): без JS
 * картинка видна сразу.
 */
.dd-reveal-js .dd-cta-slide__image {
    opacity: 0;
    transition: opacity .45s ease;
}

.dd-reveal-js .dd-cta-slide__image.is-loaded {
    opacity: 1;
}

.dd-cta-slide__title {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;

    /*
     * Утверждённый дизайн подписи (вариант 2, 2do.md): крупный жирный
     * заголовок с красной акцентной чертой сверху и плотным градиентом.
     */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    min-height: 42%;
    padding: 56px 18% 26px 5%;

    color: var(--dd-white);
    background: linear-gradient(to bottom, rgba(0, 16, 19, 0) 10%, rgba(0, 16, 19, .85));
    font-family: var(--dd-font-heading);
    font-size: clamp(1.375rem, 1.5vw, 1.75rem);
    font-weight: var(--dd-font-weight-extrabold, 800);
    line-height: 1.15;
    text-align: center;
    text-shadow: 0 1px 4px rgba(0, 16, 19, .8);
}

/* Красная акцентная черта над названием слайда. */
.dd-cta-slide__title::before {
    content: "";

    width: 1.7em;
    height: 3px;
    margin-bottom: 12px;

    background: var(--dd-accent);
    border-radius: 2px;
}

.dd-front-page__section--page-content {
    background: var(--dd-background);
}

@media (max-width: 900px) {
    .dd-front-cta-hero__stage .dd-slider__viewport {
        height: clamp(300px, 62vw, 430px);
    }

    .dd-front-cta-hero__stage .dd-slider__item {
        flex-basis: min(62vw, 330px);
    }

    /*
     * Вторая часть слогана переносится целиком, а не разрывается
     * по словам между строками.
     */
    .dd-front-cta-hero__title em {
        display: block;
    }
}

@media (max-width: 520px) {
    .dd-front-cta-hero {
        padding-inline: 0;
        padding-bottom: 48px;
    }

    /*
     * На мобильном блок должен уместиться в один экран целиком, вместе
     * с кнопкой записи: она главное целевое действие и уводить её за
     * сгиб нельзя. Поэтому кегль здесь мельче — и слоган, и кнопки
     * следуют за общим токеном.
     */
    .dd-front-cta-hero {
        --dd-hero-text-size: 1.25rem;
    }

    /*
     * На этой ширине Hero - не слайдер. Движок и не запускается
     * (data-dd-min-width на корне), и сцена скрыта здесь же,
     * на уровне CSS - вместо неё показана статичная заплатка
     * с одной самой актуальной записью (см. cta-hero.php).
     */
    .dd-front-cta-hero__stage {
        display: none;
    }

    /*
     * Заплатка занимает ту же ширину, что и кнопки под ней: отступ
     * 16px с каждой стороны. Карточка квадратная (.dd-cta-slide__media
     * держит aspect-ratio: 1), поэтому вместе с шириной растёт и
     * высота — блок заполняет экран, а не жмётся в середине.
     */
    .dd-front-cta-hero .dd-front-cta-hero__mobile-promo {
        display: block;

        width: calc(100vw - 32px);
        margin-inline: auto;
    }

    .dd-front-cta-hero__actions {
        align-items: stretch;
        flex-direction: column;
        padding-inline: 16px;
    }

    .dd-front-cta-hero__title {
        padding-inline: 16px;
    }

    .dd-front-cta-hero__mobile-promo .dd-cta-slide__title {
        padding-bottom: 16px;
        font-size: 1.125rem;
    }
}

/*
 * Секции главной ниже CTA Hero (about, banner, services, doctors,
 * faq, documents) вынесены в отдельные файлы под assets/css/blocks/.
 * Общий каркас секций (широкая лента, блок-на-экран на десктопе) -
 * в assets/css/section.css.
 */