/* ── uyutinfo-v1: карусель фотографий интерьера клиники ─────────────────────
   Вынесен из homepage-v1.css: секция понадобилась на странице отдельной услуги,
   а homepage-v1.css подключается только на Главной и Консультации. Тот же приём,
   которым раньше вынесли otzyvinfo-v1, uslugiinfo-v1 и consformnew-v1.

   Отступы секции задаёт страница-потребитель через --section-pt / --section-pb;
   значения по умолчанию ниже совпадают с тем, что было на Главной.
   ─────────────────────────────────────────────────────────────────────────── */

.uyutinfo-v1 {
    --section-pt: 0px;
    --section-pb: 20px;
}

@media (max-width: 768px) {
    .uyutinfo-v1 {
        --section-pb: 10vw;
    }
}

.uyutinfo-v1 {
    background: #fff;
    padding: var(--section-pt) 0 var(--section-pb);
}

.uyutinfo-v1__wrap {
    max-width: 1200px;
    margin: 0 auto;
}

.uyutinfo-v1__card {
    background: #F8FAF6;
    border: 1px solid #E5E9F0;
    border-radius: 20px;
    padding: 27px 30px 30px;
}

.uyutinfo-v1__header {
    display: flex;
    align-items: baseline;
    gap: 25px;
    margin-bottom: 16px;
}

.uyutinfo-v1__heading {
    font-family: "LorenzoSans", Arial, sans-serif;
    font-weight: 700;
    font-size: 25px;
    line-height: 32px;   /* 25 × 1.26 = 31.5 — в px, чтобы высота была целой */
    letter-spacing: -0.01em;
    color: var(--text-main-color);
    margin: 0;
    white-space: nowrap;
}

.uyutinfo-v1__subheading {
    font-family: "LorenzoSans", Arial, sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 23px;   /* 18 × 1.26 = 22.68 — в px, чтобы высота была целой */
    letter-spacing: -0.005em;
    color: var(--text-main-color);
    white-space: nowrap;
}

/* ── Слайдер ── */

.uyutinfo-v1__slider {
    position: relative;
}

.uyutinfo-v1__viewport {
    overflow: hidden;
    border-radius: 20px;
}

.uyutinfo-v1__track {
    display: flex;
    transition: transform 0.35s ease;
    will-change: transform;
}

.uyutinfo-v1__slide {
    flex-shrink: 0;
    width: 100%;
    aspect-ratio: 1140 / 534;
}

.uyutinfo-v1__slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Кнопки навигации */

.uyutinfo-v1__btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 60px;
    height: 60px;
    border-radius: 100px;
    background: var(--color-golden);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity var(--transition-speed);
    z-index: 2;
}

.uyutinfo-v1__btn:hover {
    opacity: 0.85;
}

.uyutinfo-v1__btn--prev {
    left: 20px;
}

.uyutinfo-v1__btn--next {
    right: 20px;
}

/* ══ Вариант narrow — колонка статьи 884 (фрейм UyutInfoShortD, node-id 2051-2)
   Фрейм в дампе 904 — это пустая ширина заголовка, а не блока; сам блок 884.

   Отличий от раскладки 1200 три, и все три — про обрамление, а не про
   слайдер: карточки нет (фото во всю колонку), заголовок вынесен над фото и
   набран 35/37 вместо 25, подзаголовка нет вовсе.

   Кнопки не трогаются: правило «20 от края фото, по вертикальному центру»
   даёт и 51/1089 в широкой колонке, и 20/804 в узкой — оно уже такое.

   Кадр другой пропорции: 884×491 против 1140×534. Обе даёт `object-fit:
   cover`, менять нечего — только соотношение коробки.

   Обёрнуто в min-width, потому что пара классов (0,2,0) бьёт мобильные
   правила (0,1,0) при любом порядке в файле. */

/* Гашение типографики .articles-typical__content: в статье у контейнера свои
   правила со специфичностью 0,1,1 — выше одиночного класса. Из-за `h2
   { padding: 10px 0 }` заголовок становился 57 вместо 37 и сдвигал фото на те
   же 20. Селектор парой (0,2,0), значение то же, что выше. */
.uyutinfo-v1 .uyutinfo-v1__heading {
    padding: 0;
}

@media (min-width: 769px) {

.uyutinfo-v1--narrow .uyutinfo-v1__card {
    background: none;
    border: none;
    padding: 0;
}

.uyutinfo-v1--narrow .uyutinfo-v1__header {
    margin-bottom: 20px;
}

.uyutinfo-v1--narrow .uyutinfo-v1__heading {
    font-size: 35px;
    line-height: 37px;   /* 35 × 1.05 = 36.75 → 37 */
    white-space: normal; /* в узкой колонке запрет переноса ломает блок */
}

.uyutinfo-v1--narrow .uyutinfo-v1__subheading {
    display: none;
}

.uyutinfo-v1--narrow .uyutinfo-v1__slide {
    aspect-ratio: 884 / 491;
}

}   /* конец @media (min-width: 769px) — вариант narrow */

/* ── Мобайл ── */

@media (max-width: 768px) {

    /* В колонке статьи секция возвращает себе полную ширину экрана.
       Причина та же, что у [faq_v1] (см. faq-shortcode-v1.css): на своих
       страницах .uyutinfo-v1 стоит вне колонки, и `padding: 0 12.5vw` у wrap
       — единственное сужение. Внутри статьи колонка уже 75vw, оба сужения
       складываются, и карточка садится с 285 до 200.

       Тот же приём, а не сброс padding: он даёт ровно ту ширину, что на
       главной, потому что считается от того же 100vw. */
    .articles-typical__content .uyutinfo-v1 {
        width: 100vw;
        margin-left: 50%;
        transform: translateX(-50%);
    }

    /* Кегли гасятся парой: `.articles-typical__content h2` (0,1,1) выше
       одиночного класса и подменял заголовок на 28px, из-за чего он ломался
       на семь строк. */
    .uyutinfo-v1 .uyutinfo-v1__heading {
        font-size: 20px;
        line-height: 25px;   /* 20 × 1.26 = 25.2 → 25. Статья навязывает 1.5:
                                три строки вместо 76 давали 90 */
    }

    /* ── Узкий вариант на мобильном — фрейм UyutInfoShortM (node-id 2051-3)
       Фрейм появился в выгрузке 2026-08-26 и оказался НЕ таким, как на
       главной: обрамления нет, подзаголовка нет, заголовок крупнее, кадр во
       всю ширину колонки. Пока фрейма не существовало, вариант строился по
       главной — и это было единственным доступным основанием.

         заголовок  300×81   25/27, три строки
         фото       300×167  с y=101, то есть отступ 20 под заголовком
         кнопки     47×47    с y=278, то есть отступ 10 под фото
         блок       300×325

       Кнопки оставлены нашего рисунка: в макете у них свой (те самые Vector,
       что всплыли в figdiff при разгруппировке). Решение владельца — стиль
       не менять, размер и положение и так совпадают. */
    .uyutinfo-v1--narrow .uyutinfo-v1__card {
        background: none;
        border: none;
        padding: 0;
    }

    .uyutinfo-v1--narrow .uyutinfo-v1__subheading {
        display: none;
    }

    /* Тройной класс: гашение типографики статьи выше записано парой (0,2,0),
       и одиночная пара варианта ему не перебьёт кегль. */
    .uyutinfo-v1 .uyutinfo-v1--narrow .uyutinfo-v1__heading,
    .uyutinfo-v1--narrow .uyutinfo-v1__heading {
        font-size: 25px;
        line-height: 27px;   /* 25 × 1.05 = 26.25 → 27 */
        max-width: none;
    }

    .uyutinfo-v1--narrow .uyutinfo-v1__slide {
        aspect-ratio: 300 / 167;
    }

    .uyutinfo-v1__wrap {
        padding: 0 12.5vw;
    }

    .uyutinfo-v1__card {
        padding: 20px 15px 15px;
    }

    .uyutinfo-v1__header {
        flex-direction: column;
        gap: 10px;
        margin-bottom: 20px;
    }

    .uyutinfo-v1__heading {
        font-size: 20px;
        letter-spacing: -0.005em;
        white-space: normal;
        max-width: 222px;
    }

    .uyutinfo-v1__subheading {
        font-size: 16px;
        white-space: normal;
    }

    /* Фото: соотношение сторон из Figma mobile (270×164) */
    .uyutinfo-v1__slide {
        aspect-ratio: 270 / 164;
    }

    /* Слайдер: overflow убирается — кнопки уходят под фото */
    .uyutinfo-v1__slider {
        overflow: visible;
        padding-bottom: 57px; /* 10px gap + 47px кнопка */
    }

    /* Кнопки: 47×47, по центру под фото */
    .uyutinfo-v1__btn {
        width: 47px;
        height: 47px;
        top: auto;
        bottom: 0;
        transform: none;
    }

    .uyutinfo-v1__btn--prev {
        left: calc(50% - 51px); /* центр - половина двух кнопок + gap */
        right: auto;
    }

    .uyutinfo-v1__btn--next {
        left: calc(50% + 4px); /* центр + half gap */
        right: auto;
    }
}