/* =========================================================
   DETAIL TRAINING
   Страница обучающего мероприятия
   ========================================================= */

.training-detail {
    --training-green: #81bdbb;
    --training-green-dark: #4f8f8c;
    --training-green-deep: #315f60;
    --training-ink: #253432;
    --training-text: #425553;
    --training-muted: #6d7c79;
    --training-bg: #f5faf9;
    --training-bg-soft: #eef8f7;
    --training-line: #dce9e7;

    padding: 1.5rem 0 5rem;
    color: var(--training-text);
}
.training-detail__hero {
	padding:0;
}

/* ---------------------------------------------------------
   НАЗАД
   --------------------------------------------------------- */

.training-detail__back {
    display: inline-flex;
    align-items: center;
    gap: .45rem;

    margin-bottom: 1.25rem;

    color: var(--training-green-dark);
    font-family: 'OpenSans-Semibold', sans-serif;
    font-size: .95rem;
    line-height: 1.3;
    text-decoration: none;

    transition:
            color .2s ease,
            transform .2s ease;
}

.training-detail__back:hover {
    color: var(--training-green-deep);
    transform: translateX(-3px);
}


/* =========================================================
   HERO
   ========================================================= */

.training-detail__hero {
    position: relative;

    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr);
    gap: clamp(1.5rem, 3vw, 3rem);
    align-items: stretch;

    margin-bottom: clamp(3rem, 6vw, 5rem);
    overflow: hidden;

    background:
            radial-gradient(
                    circle at 85% 15%,
                    rgba(129, 189, 187, .22),
                    transparent 32%
            ),
            linear-gradient(
                    135deg,
                    #eef8f7 0%,
                    #ffffff 72%
            );

    border: 1px solid var(--training-line);
    border-radius: 1.35rem;
}


/* Левая часть hero */

.training-detail__content {
    position: relative;
    z-index: 2;

    display: flex;
    flex-direction: column;
    justify-content: center;

    min-width: 0;
    padding: clamp(2rem, 5vw, 4.5rem);
}


/* Маленькая подпись */

.training-eyebrow {
    display: inline-flex;
    align-self: flex-start;

    margin-bottom: 1.1rem;
    padding: .42rem .8rem;

    color: var(--training-green-deep);
    font-family: 'OpenSans-Semibold', sans-serif;
    font-size: .78rem;
    line-height: 1.2;
    letter-spacing: .07em;
    text-transform: uppercase;

    background: rgba(129, 189, 187, .17);
    border: 1px solid rgba(129, 189, 187, .25);
    border-radius: 999px;
}


/* Главный заголовок */

.training-detail__hero h1 {
    max-width: 750px;

    margin: 0 0 1.5rem;

    color: var(--training-ink);
    font-family: 'OpenSans-Bold', sans-serif;
    font-size: clamp(2.25rem, 4vw, 4.2rem);
    line-height: 1.06;
    letter-spacing: -.035em;
}


/* ---------------------------------------------------------
   ФАКТЫ: дата, место и т.п.
   --------------------------------------------------------- */

.training-detail__facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .8rem;

    margin: .5rem 0 1.5rem;
}

.training-detail__facts > div {
    padding: .9rem 1rem;

    background: rgba(255,255,255,.74);
    border: 1px solid var(--training-line);
    border-radius: .8rem;
}

.training-detail__facts dt {
    margin-bottom: .25rem;

    color: var(--training-muted);
    font-size: .78rem;
    line-height: 1.3;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.training-detail__facts dd {
    margin: 0;

    color: var(--training-ink);
    font-family: 'OpenSans-Semibold', sans-serif;
    font-size: .98rem;
    line-height: 1.4;
}


/* ---------------------------------------------------------
   СВЯЗАННЫЕ УСЛУГИ
   --------------------------------------------------------- */

.training-detail__services {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;

    margin-top: .4rem;
}

.training-detail__services a {
    display: inline-flex;
    align-items: center;

    min-height: 2.7rem;
    padding: .65rem 1rem;

    color: var(--training-green-deep);
    font-family: 'OpenSans-Semibold', sans-serif;
    font-size: .9rem;
    line-height: 1.25;
    text-decoration: none;

    background: #fff;
    border: 1px solid #cfe5e2;
    border-radius: .75rem;

    transition:
            background-color .2s ease,
            color .2s ease,
            border-color .2s ease,
            transform .2s ease;
}

.training-detail__services a:hover {
    color: #fff;
    background: var(--training-green-dark);
    border-color: var(--training-green-dark);
    transform: translateY(-2px);
}


/* ---------------------------------------------------------
   ПРАВАЯ КАРТИНКА / ЗАГЛУШКА
   --------------------------------------------------------- */

.training-detail__visual {
    position: relative;

    min-height: 430px;
    overflow: hidden;

    background:
            linear-gradient(
                    145deg,
                    rgba(49, 95, 96, .95),
                    rgba(129, 189, 187, .72)
            );
}

.training-detail__visual img {
    display: block;

    width: 100%;
    height: 100%;
    min-height: 430px;

    object-fit: cover;
}


/* Заглушка, если картинки нет */

.training-detail__placeholder {
    position: absolute;
    inset: 0;

    display: block;

    background:
            radial-gradient(
                    circle at 65% 30%,
                    rgba(255,255,255,.18),
                    transparent 25%
            ),
            linear-gradient(
                    145deg,
                    #4f8f8c,
                    #81bdbb
            );
}

.training-detail__placeholder::before,
.training-detail__placeholder::after {
    position: absolute;
    content: "";
    background: rgba(255,255,255,.28);
    border-radius: 999px;
}

.training-detail__placeholder::before {
    top: 50%;
    left: 50%;

    width: 7rem;
    height: 1.4rem;

    transform: translate(-50%, -50%);
}

.training-detail__placeholder::after {
    top: 50%;
    left: 50%;

    width: 1.4rem;
    height: 7rem;

    transform: translate(-50%, -50%);
}


/* =========================================================
   ОБЩИЕ СЕКЦИИ
   ========================================================= */

.training-detail__section {
    margin-bottom: clamp(3.5rem, 7vw, 6rem);
}


/* Заголовок секции */

.training-section-heading {
    max-width: 850px;
    margin-bottom: 1.75rem;
}

.training-section-heading > span {
    display: block;

    margin-bottom: .45rem;

    color: var(--training-green-dark);
    font-family: 'OpenSans-Semibold', sans-serif;
    font-size: .8rem;
    line-height: 1.3;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.training-section-heading h2 {
    margin: 0;

    color: var(--training-ink);
    font-family: 'OpenSans-Bold', sans-serif;
    font-size: clamp(1.8rem, 3vw, 2.75rem);
    line-height: 1.15;
    letter-spacing: -.025em;
}


/* =========================================================
   ВРАЧИ / СПИКЕРЫ
   ========================================================= */

.training-doctors {
    display: grid;
    grid-template-columns: repeat(
        auto-fit,
        minmax(min(280px, 100%), 1fr)
    );
    gap: 1.25rem;
}


/* Одна карточка */

.training-doctor {
    position: relative;

    display: grid;
    grid-template-columns: 145px minmax(0, 1fr);
    align-items: center;
    gap: 1.25rem;

    padding: 1rem;

    color: var(--training-ink);
    text-decoration: none;

    background: #fff;
    border: 1px solid var(--training-line);
    border-radius: 1rem;

    box-shadow:
            0 .65rem 1.8rem rgba(43, 68, 65, .06);

    transition:
            transform .25s ease,
            box-shadow .25s ease,
            border-color .25s ease;
}

.training-doctor:hover {
    color: var(--training-green-deep);

    border-color: #bddbd8;

    box-shadow:
            0 1rem 2.6rem rgba(43, 68, 65, .11);

    transform: translateY(-4px);
}


/* Фото врача */

.training-doctor img {
    display: block;

    width: 145px;
    height: 155px;

    object-fit: cover;
    object-position: top center;

    background: var(--training-bg-soft);
    border-radius: .85rem;
}


/* Имя */

.training-doctor > span {
    display: block;

    color: inherit;
    font-family: 'OpenSans-Bold', sans-serif;
    font-size: clamp(1.15rem, 2vw, 1.45rem);
    line-height: 1.3;
}


/* Стрелочка */

.training-doctor::after {
    position: absolute;
    right: 1.15rem;
    bottom: 1rem;

    content: '→';

    color: var(--training-green);
    font-size: 1.3rem;

    transition: transform .2s ease;
}

.training-doctor:hover::after {
    transform: translateX(4px);
}


/* =========================================================
   ОТЧЕТ / ДЕТАЛЬНЫЙ ТЕКСТ
   ========================================================= */

.training-detail__report {
    max-width: 1100px;
}


/*
    ВАЖНО:
    детальный текст из инфоблока уже находится внутри
    .service-detail__description-text.training-detail__text
*/

.training-detail__text {
    color: var(--training-text);
    font-size: 1.05rem;
    line-height: 1.8;
}


/* Сброс старых ограничений service-detail */

.training-detail__text.service-detail__description-text {
    width: 100%;
    max-width: none;
}


/* Абзацы */

.training-detail__text p {
    max-width: 950px;

    margin: 0 0 1.25rem;

    color: var(--training-text);
    font-size: inherit;
    line-height: inherit;
}


/* Первый текст чуть крупнее */

.training-detail__text > p:first-of-type {
    color: #334845;
    font-size: clamp(1.1rem, 1.5vw, 1.2rem);
    line-height: 1.75;
}


/* =========================================================
   H2 В ДЕТАЛЬНОМ ТЕКСТЕ
   ========================================================= */

.training-detail__text h2 {
    position: relative;

    max-width: 950px;

    margin: 3.5rem 0 1.25rem;
    padding: 0 0 0 1.15rem;

    color: var(--training-ink);
    font-family: 'OpenSans-Bold', sans-serif;
    font-size: clamp(1.55rem, 2.6vw, 2.2rem);
    line-height: 1.22;
    letter-spacing: -.02em;

    border-left: 4px solid var(--training-green);
}


/* Первый h2 не должен иметь огромный отступ сверху */

.training-detail__text > h2:first-child {
    margin-top: 0;
}


/* =========================================================
   H3
   ========================================================= */

.training-detail__text h3 {
    max-width: 950px;

    margin: 2.4rem 0 .9rem;

    color: var(--training-ink);
    font-family: 'OpenSans-Bold', sans-serif;
    font-size: clamp(1.25rem, 2vw, 1.6rem);
    line-height: 1.3;
}


/* =========================================================
   STRONG
   ========================================================= */

.training-detail__text strong {
    color: #29433f;
    font-family: 'OpenSans-Semibold', sans-serif;
    font-weight: 600;
}


/* =========================================================
   СПИСКИ
   ========================================================= */

.training-detail__text ul,
.training-detail__text ol {
    display: grid;

    max-width: 1000px;

    gap: .7rem;
    margin: 1.25rem 0 1.7rem;
    padding: 0;

    list-style: none;
}


/*
   На десктопе обычные пункты идут в 2 колонки.
   Это хорошо работает для:
   - тем семинара
   - участников
   - практических навыков
*/

.training-detail__text ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}


/* Пункт */

.training-detail__text li {
    position: relative;

    margin: 0;
    padding: .9rem 1rem .9rem 2.75rem;

    color: #334845;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.6;

    background: var(--training-bg);
    border: 1px solid var(--training-line);
    border-radius: .75rem;
}


/* Маркер */

.training-detail__text ul li::before {
    position: absolute;
    top: 1.05rem;
    left: 1rem;

    width: 1rem;
    height: 1rem;

    content: '';

    background:
            radial-gradient(
                    circle,
                    #fff 0 .16rem,
                    transparent .18rem
            ),
            linear-gradient(
                    135deg,
                    var(--training-green),
                    var(--training-green-dark)
            );

    border-radius: 50%;
}


/* Нумерованные */

.training-detail__text ol {
    counter-reset: training-counter;
}

.training-detail__text ol li {
    counter-increment: training-counter;
}

.training-detail__text ol li::before {
    position: absolute;
    top: .9rem;
    left: .9rem;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 1.35rem;
    height: 1.35rem;

    content: counter(training-counter);

    color: #fff;
    font-family: 'OpenSans-Bold', sans-serif;
    font-size: .75rem;

    background: var(--training-green-dark);
    border-radius: 50%;
}


/* Убираем системные marker */

.training-detail__text li::marker {
    content: '';
}


/* =========================================================
   БЛОК С КЛЮЧЕВОЙ МЫСЛЬЮ
   Можно использовать <blockquote>
   ========================================================= */

.training-detail__text blockquote {
    position: relative;

    max-width: 950px;

    margin: 2rem 0;
    padding: 1.4rem 1.5rem 1.4rem 1.75rem;

    color: var(--training-green-deep);
    font-size: 1.08rem;
    line-height: 1.7;

    background:
            linear-gradient(
                    135deg,
                    #edf8f6,
                    #ffffff
            );

    border: 1px solid var(--training-line);
    border-left: 5px solid var(--training-green);
    border-radius: 0 .9rem .9rem 0;
}


/* =========================================================
   ССЫЛКИ
   ========================================================= */

.training-detail__text a {
    color: var(--training-green-dark);
    text-decoration: underline;
    text-decoration-color: rgba(79, 143, 140, .35);
    text-underline-offset: .18rem;

    transition: color .2s ease;
}

.training-detail__text a:hover {
    color: var(--training-green-deep);
}


/* =========================================================
   ИЗОБРАЖЕНИЯ В ТЕКСТЕ
   ========================================================= */

.training-detail__text img {
    display: block;

    max-width: 100%;
    height: auto;

    margin: 2rem 0;

    border-radius: 1rem;
}


/* =========================================================
   ФОТОГАЛЕРЕЯ — если появится внутри детального текста
   ========================================================= */

.training-detail__text .training-gallery {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;

    margin: 2rem 0;
}

.training-detail__text .training-gallery img {
    width: 100%;
    height: 250px;

    margin: 0;

    object-fit: cover;

    border-radius: .85rem;
}


/* =========================================================
   МОБИЛЬНАЯ ВЕРСИЯ
   ========================================================= */

@media (max-width: 991px) {

    .training-detail__hero {
        grid-template-columns: 1fr;
    }

    .training-detail__visual {
        min-height: 320px;
        order: -1;
    }

    .training-detail__visual img {
        min-height: 320px;
    }

    .training-detail__content {
        padding: 2rem;
    }

}


/* --------------------------------------------------------- */

@media (max-width: 767px) {

    .training-detail {
        padding: 1rem 0 3rem;
    }


    /* HERO */

    .training-detail__hero {
        margin-bottom: 3rem;
        border-radius: 1rem;
    }

    .training-detail__content {
        padding: 1.4rem 1.1rem 1.6rem;
    }

    .training-detail__visual,
    .training-detail__visual img {
        min-height: 230px;
        height: 230px;
    }

    .training-detail__hero h1 {
        margin-bottom: 1.1rem;

        font-size: clamp(1.9rem, 9vw, 2.6rem);
        line-height: 1.08;
    }

    .training-eyebrow {
        margin-bottom: .8rem;
        font-size: .7rem;
    }


    /* Факты */

    .training-detail__facts {
        grid-template-columns: 1fr;
    }


    /* Секции */

    .training-detail__section {
        margin-bottom: 3.25rem;
    }

    .training-section-heading {
        margin-bottom: 1.25rem;
    }


    /* Врач */

    .training-doctor {
        grid-template-columns: 105px minmax(0, 1fr);
        gap: .9rem;

        min-height: 135px;
        padding: .75rem;
    }

    .training-doctor img {
        width: 105px;
        height: 120px;
    }

    .training-doctor > span {
        padding-right: 1rem;
        font-size: 1.05rem;
    }


    /* Детальный текст */

    .training-detail__text {
        font-size: 1rem;
        line-height: 1.7;
    }

    .training-detail__text h2 {
        margin: 2.5rem 0 1rem;
        padding-left: .85rem;

        font-size: clamp(1.4rem, 6.5vw, 1.75rem);

        border-left-width: 3px;
    }

    .training-detail__text h3 {
        margin-top: 2rem;
        font-size: 1.25rem;
    }


    /* Списки */

    .training-detail__text ul {
        grid-template-columns: 1fr;
    }

    .training-detail__text li {
        padding:
                .8rem
                .85rem
                .8rem
                2.45rem;
    }

    .training-detail__text ul li::before {
        top: .92rem;
        left: .85rem;
    }


    /* Галерея */

    .training-detail__text .training-gallery {
        grid-template-columns: 1fr 1fr;
    }

    .training-detail__text .training-gallery img {
        height: 180px;
    }

}


/* --------------------------------------------------------- */

@media (max-width: 480px) {

    .training-detail__visual,
    .training-detail__visual img {
        min-height: 200px;
        height: 200px;
    }

    .training-detail__services {
        flex-direction: column;
    }

    .training-detail__services a {
        width: 100%;
        justify-content: center;
    }

    .training-doctor {
        grid-template-columns: 85px minmax(0, 1fr);
    }

    .training-doctor img {
        width: 85px;
        height: 105px;
    }

    .training-detail__text .training-gallery {
        grid-template-columns: 1fr;
    }

}