/* Start:/bitrix/templates/mastersluh_new/css/page-programma.css?178896271412405*/
/*
 * Страница «Программа ОМС» (programma). Источники:
 * docs/PROGRAMMA_PAGE_FIGMA_ANALYSIS.md; docs/PROGRAMMA_PAGE_IMPLEMENTATION_PLAN.md.
 * Header/Footer/Main-Banner — вне скоупа, стандартное исключение проекта.
 * Sidebar (Banner-slider + Text Card) — контент вне скоупа (уже готов),
 * только резерв ширины 324px на Desktop/Laptop; на Tablet скрыт в макете
 * (hidden=true), на Mobile отсутствует как узел — резерв там не нужен.
 *
 * Общие стили дизайн-системы сюда не дублируются — подключены отдельно,
 * глобально для всех страниц (шрифты, reset, .container, токены и классы
 * типографики .text-*, см. ../../main_styles.css). Стандартный .container
 * подошёл без изменений на всех 3 брейкпоинтах — узкая page-специфичная
 * обёртка не понадобилась (редкий случай для проекта).
 *
 * Селекторы начинаются с .new-design-layout как предка (через пробел) —
 * это родительский класс всего сайта на новом дизайне, задаётся на реальной
 * странице ВЫШЕ этой разметки (не добавляется в index.html этой страницы).
 * См. память feedback_new-design-layout-selector.
 *
 * Брейкпоинты — min-width: 767px / 1024px (не 768px!), как во всех
 * остальных страницах проекта.
 */

/* -----------------------------------------
   1. Токены страницы
   Источник: mastersluh-figma-design-system-audit.md (§1 Цвета).
   ----------------------------------------- */

.new-design-layout .page-programma {
    --color-primary-dark: #1c294a;
    --color-secondary-dark: #515e7e;
    --color-light-blue-4: #2f79c1;
    --color-accent: #035cb2;
    --color-pale: #e8eef3;
    --color-substrate: #f1f4f9;
    --color-neutral: #d9e1e9;
}

/* -----------------------------------------
   2. Секция: верх/низ компенсируют исключённый Main-Banner /
   отступ до Footer (анализ, §7).
   ----------------------------------------- */

.new-design-layout .page-programma .programma {
    display: flex;
    flex-direction: column;
    padding: 40px 0 20px;
}
@media (max-width: 1439px) {
    .new-design-layout .page-programma .common_sidebar_banner {
        display: flex;
    }
}

@media (min-width: 767px) {
    .new-design-layout .page-programma .programma {
        padding: 40px 0 60px;
    }
}

@media (min-width: 1024px) {
    .new-design-layout .page-programma .programma {
        padding: 60px 0 80px;
    }
}

/* -----------------------------------------
   3. Body: 1 колонка Mobile/Tablet, 2 колонки Desktop/Laptop
   (текст + резерв Sidebar). Figma: Content px-40 + gap-40 (анализ, §3).
   ----------------------------------------- */

.new-design-layout .page-programma .programma__body {
    display: flex;
    flex-direction: column;
}

@media (min-width: 1024px) {
    .new-design-layout .page-programma .programma__body {
        flex-direction: row;
        gap: 40px;
        padding: 0 40px;
    }
}

.new-design-layout .page-programma .programma__content {
    display: flex;
    flex-direction: column;
}

@media (min-width: 767px) {
    .new-design-layout .page-programma .programma__content {
        gap: 40px;
    }
}

@media (min-width: 1024px) {
    .new-design-layout .page-programma .programma__content {
        flex: 1 1 0;
        min-width: 0;
        gap: 60px;
    }
}

/* Резерв места под Sidebar (готов, вставит пользователь) */
.new-design-layout .page-programma .programma__sidebar-placeholder {
    display: none;
}

@media (min-width: 1024px) {
    .new-design-layout .page-programma .programma__sidebar-placeholder {
        display: block;
        flex-shrink: 0;
        width: 324px;
    }
}

/* -----------------------------------------
   4. Text: 4 параграфа. Figma: текст сужен локально до 744px
   ВНУТРИ более широкой (916px) flex-колонки Container только на
   Desktop/Laptop — не через узкую обёртку всей секции (анализ, §3).
   ----------------------------------------- */

.new-design-layout .page-programma .programma__text {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

@media (min-width: 767px) {
    .new-design-layout .page-programma .programma__text {
        gap: 40px;
    }
}

@media (min-width: 1024px) {
    .new-design-layout .page-programma .programma__text {
        gap: 60px;
        max-width: 744px;
    }
}

.new-design-layout .page-programma .programma__paragraph {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

@media (min-width: 1024px) {
    .new-design-layout .page-programma .programma__paragraph {
        gap: 24px;
    }
}

.new-design-layout .page-programma .programma__title {
    color: var(--color-primary-dark);
}

.new-design-layout .page-programma .programma__paragraph-text {
    color: var(--color-primary-dark);
    text-align: justify;
}

/* Визуальная замена пустой строки-разделителя из Figma между двумя
   абзацами — вертикальный отступ в один line-height. */
.new-design-layout .page-programma .programma__line-break {
    margin-top: 24px;
}
.new-design-layout .page-programma ul {
    padding-left: 30px;
    margin-top: 10px;
}
.new-design-layout .page-programma ul li {
    list-style-type: disc;
}

@media (min-width: 1024px) {
    .new-design-layout .page-programma .programma__line-break {
        margin-top: 26px;
    }
}

.new-design-layout .page-programma .programma__phone-link {
    color: var(--color-accent);
}

/* -----------------------------------------
   5. Изображения-иллюстрации
   Picture-обёртка в Figma всегда несёт pb-16 — воспроизведено как
   собственный нижний отступ картинки, в дополнение к gap параграфа
   (анализ, §8).
   ----------------------------------------- */

.new-design-layout .page-programma .programma__image {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    margin-bottom: 16px;
}

.new-design-layout .page-programma .programma__image--framed {
    aspect-ratio: 864 / 550;
    border: 1px solid var(--color-pale);
    border-radius: 12px;
}

.new-design-layout .page-programma .programma__image--bordered {
    aspect-ratio: 744 / 419;
    border: 1px solid var(--color-pale);
}

/* -----------------------------------------
   6. Список «Требования к направлению» — dash-маркер (тот же паттерн,
   что на podgotovka, но своя геометрия чисел — здесь Tablet = Mobile,
   отличается только Desktop; анализ §10).
   ----------------------------------------- */

.new-design-layout .page-programma .programma__list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-bottom: 12px;
}

.new-design-layout .page-programma .programma__list-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.new-design-layout .page-programma .programma__list-marker {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
}

@media (min-width: 1024px) {
    .new-design-layout .page-programma .programma__list-marker {
        width: 28px;
        height: 28px;
    }
}

.new-design-layout .page-programma .programma__list-marker-line {
    display: block;
    width: 17.14px;
    height: 1.71px;
    background: var(--color-light-blue-4);
}

@media (min-width: 1024px) {
    .new-design-layout .page-programma .programma__list-marker-line {
        width: 20px;
        height: 2px;
    }
}

.new-design-layout .page-programma .programma__list-text {
    flex: 1 1 0;
    min-width: 0;
    color: var(--color-primary-dark);
    text-align: justify;
}

/* -----------------------------------------
   7. Видео-сетка: 8 реальных видео-эмбедов (YouTube/Rutube), вставлены
   пользователем поверх макета вместо фото-плейсхолдеров с Play-кнопкой.
   Реализовано через CSS Grid (не через ручные flex-row "пары", как в
   черновике с плейсхолдерами) — 1 колонка (Mobile) → 2 колонки
   (Tablet/Desktop). Gap между рядами — единственное брейкпоинт-
   исключение: 20px именно на Tablet, 24px на Mobile И Desktop
   (подтверждено дважды, анализ §7); между колонками — 20px (Tablet/
   Desktop). Аспект карточки — 16:9 (реальный аспект видео-эмбедов), а не
   864/550 макета (это была пропорция фото-плейсхолдера, не видео).
   ----------------------------------------- */

.new-design-layout .page-programma .programma__videos {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 24px;
}

@media (min-width: 767px) and (max-width: 1023px) {
    .new-design-layout .page-programma .programma__videos {
        grid-template-columns: repeat(2, 1fr);
        column-gap: 20px;
        row-gap: 20px;
    }
}

@media (min-width: 1024px) {
    .new-design-layout .page-programma .programma__videos {
        grid-template-columns: repeat(2, 1fr);
        column-gap: 20px;
        row-gap: 24px;
    }
}

.new-design-layout .page-programma .programma__video {
    overflow: hidden;
    border-radius: 12px;
    border: 1px solid var(--color-pale);
    aspect-ratio: 16 / 9;
}

.new-design-layout .page-programma .programma__video-embed {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

/* -----------------------------------------
   8. Sharing-list — тот же паттерн, что на pamyatka/podgotovka/rights
   (share-btn/--plain для VK), но здесь блок ПОЛНОСТЬЮ отсутствует на
   Mobile (не переключается в вертикальную раскладку — его нет в самом
   макете; анализ §10).
   ----------------------------------------- */

.new-design-layout .page-programma .programma__sharing {
    display: none;
}

@media (min-width: 767px) {
    .new-design-layout .page-programma .programma__sharing {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .new-design-layout .page-programma .programma__sharing-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .new-design-layout .page-programma .programma__sharing-caption {
        color: var(--color-secondary-dark);
    }

    .new-design-layout .page-programma .programma__sharing-buttons {
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .new-design-layout .page-programma .programma__share-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 48px;
        height: 48px;
        border-radius: 4px;
        background: var(--color-substrate);
    }

    /* У иконки VK фон уже встроен в сам SVG-ассет (48×48) — без модификатора
       получился бы двойной фон. */
    .new-design-layout .page-programma .programma__share-btn--plain {
        background: none;
    }

    .new-design-layout .page-programma .programma__sharing-divider {
        width: 100%;
        height: 1px;
        background: var(--color-neutral);
    }
}
@media (max-width: 1023px) {
    .new-design-layout .page-programma {
        max-width: 687px;
        margin: 0 auto;
    }
}



/* End */


/* Start:/bitrix/templates/mastersluh_new/components/bitrix/news.list/redesign/banners_v2/style.css?17872232161607*/
.common_sidebar_banner--with-actions {
    flex-direction: column;
    gap: 28px;
}

.common_sidebar_banner--with-actions #slider_banner {
    width: 100%;
}

.sidebar-promotions-link {
    position: relative;
    display: flex;
    width: 100%;
    height: 120px;
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-between;
    padding: 24px;
    overflow: hidden;
    border-radius: 20px;
    background: var(--Color-Light-Substrate, #F1F4F9);
    color: var(--Color-Dark-Primary-dark, #1C294A);
}

.sidebar-promotions-link > span:first-child {
    position: relative;
    z-index: 1;
    align-self: flex-start;
}

.sidebar-promotions-link__image {
    position: absolute;
    top: -46px;
    left: 115px;
    display: block;
    width: 223px;
    height: 223px;
    max-width: none;
    object-fit: cover;
    opacity: 0.75;
}

.sidebar-promotions-link__arrow {
    position: relative;
    z-index: 1;
    display: inline-flex;
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--Color-Light-White, #FFF);
    color: var(--Color-Blue-Light-blue-4, #2F79C1);
}

.sidebar-promotions-link:focus-visible {
    outline: 2px solid var(--Color-Blue-Accent, #035CB2);
    outline-offset: 2px;
}

.sidebar-promotions-link--hearing-test {
    height: auto;
    min-height: 120px;
}

.sidebar-promotions-link--hearing-test .sidebar-promotions-link__image {
    top: auto;
    left: auto;
    right: -10px;
    bottom: -12px;
    width: 210px;
    height: 115px;
    opacity: 1;
}

/* End */
/* /bitrix/templates/mastersluh_new/css/page-programma.css?178896271412405 */
/* /bitrix/templates/mastersluh_new/components/bitrix/news.list/redesign/banners_v2/style.css?17872232161607 */