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

Страница одного врача (single-dd_doctor.php)

Наш дизайн, не копия референса (решение Эда).

Верхняя полоса на тиловом фоне: слева ФИО + линия + специализации +
CTA, справа фото-вырезка врача, стоящее на нижнем крае полосы. Ниже -
контент записи (the_content) на ролях типографики в узкой ленте
min(90vw, 1200px).

Мобильный: колонка, фото сверху, текст под ним (flex column-reverse -
в DOM имя идёт первым для доступности, визуально фото поднято наверх).

Клиренс под фиксированным навбаром даёт общий механизм
#content / .dd-breadcrumbs (assets/css/components.css).

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


/* ================================================================
   Верхняя полоса
   ================================================================ */

.dd-doctor__hero {
    /* Низ без паддинга: фото-вырезка стоит на нижнем крае полосы. */
    padding: clamp(28px, 5vw, 64px) 0 0;

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

    /* Reveal-половины уезжают на 56px в стороны - полоса их подрезает. */
    overflow: hidden;

    /* Курсив на цветном фоне - светлый тон. */
    --dd-em-color: var(--dd-primary-light);

    /* Кегль переиспользуемой CTA-кнопки (.dd-front-cta-hero__button). */
    --dd-hero-text-size: var(--dd-subtitle-size);
}

.dd-doctor__hero-inner {
    width: 100%;
    padding: 0 20px;
    margin: 0 auto;

    display: flex;
    flex-direction: column-reverse;
    gap: clamp(20px, 3vw, 32px);
    align-items: center;
}

@media (min-width: 769px) {

    .dd-doctor__hero-inner {
        width: min(90vw, 1200px);
        padding: 0;

        /* Фото слева, текст справа - по правке Эда. */
        flex-direction: row-reverse;
        align-items: flex-end;
        gap: clamp(24px, 3vw, 48px);
    }

}


/* ----------------------------------------------------------------
   Левая колонка: имя, специализации, CTA
   ---------------------------------------------------------------- */

.dd-doctor__intro {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;

    padding-bottom: clamp(24px, 4vw, 56px);
}

@media (min-width: 769px) {

    .dd-doctor__intro {
        flex: 1 1 60%;
    }

}

.dd-doctor__name {
    margin: 0;
    color: var(--dd-white);
}

/* Тонкая линия - как разделитель в карточке врача. */
.dd-doctor__divider {
    width: 100%;
    max-width: 460px;
    margin: clamp(16px, 2vw, 24px) 0 clamp(14px, 1.6vw, 20px);

    border: 0;
    border-top: 1px solid rgba(245, 250, 253, .55);
}

.dd-doctor__roles {
    margin: 0 0 clamp(24px, 3vw, 36px);
    padding-left: 20px;

    color: var(--dd-white);
    font-size: var(--dd-card-text);
    line-height: var(--dd-card-text-lh);
}

.dd-doctor__role {
    margin-bottom: 6px;
}

.dd-doctor__role:last-child {
    margin-bottom: 0;
}

/* flex:0 0 auto - кнопка не сплющивается в овал в flex-колонке. */
.dd-doctor__cta {
    flex: 0 0 auto;
    align-self: flex-start;
}


/* ----------------------------------------------------------------
   Правая колонка: фото-вырезка врача
   ---------------------------------------------------------------- */

.dd-doctor__photo {
    width: 100%;
    max-width: 340px;
    margin: 0 auto;
}

@media (min-width: 769px) {

    .dd-doctor__photo {
        flex: 0 0 40%;
        max-width: 40%;
        margin: 0;
        align-self: flex-end;
    }

}

.dd-doctor__photo-img {
    display: block;
    width: 100%;
    height: auto;
}


/* ================================================================
   Контент записи (the_content на ролях типографики)
   ================================================================ */

.dd-doctor__content {
    padding: clamp(32px, 5vw, 64px) 0 clamp(48px, 7vw, 96px);
    background: var(--dd-background);
}

.dd-doctor__content-inner {
    width: 100%;
    padding: 0 20px;
    margin: 0 auto;
}

@media (min-width: 769px) {

    .dd-doctor__content-inner {
        width: min(90vw, 1200px);
        padding: 0;
    }

}

.dd-doctor__content-body {
    max-width: 840px;
    margin: 0 auto;
    color: var(--dd-text);
}

/* Размер и начертание h2 даёт глобальная шкала (typography.css) -
   здесь только цвет и ритм, как в service.css. */
.dd-doctor__content-body h2 {
    margin: clamp(28px, 3vw, 40px) 0 clamp(12px, 1.4vw, 18px);
    color: var(--dd-primary);
}

.dd-doctor__content-body h3 {
    margin: clamp(22px, 2.4vw, 32px) 0 clamp(10px, 1.2vw, 14px);

    color: var(--dd-primary);
    font-size: var(--dd-card-title);
}

.dd-doctor__content-body p,
.dd-doctor__content-body li {
    font-size: var(--dd-card-text);
    line-height: var(--dd-card-text-lh);
}

.dd-doctor__content-body p {
    margin: 0 0 clamp(16px, 2vw, 24px);
}

.dd-doctor__content-body ul,
.dd-doctor__content-body ol {
    margin: 0 0 clamp(16px, 2vw, 24px);
    padding-left: 24px;
}

.dd-doctor__content-body > *:first-child {
    margin-top: 0;
}

.dd-doctor__content-body > *:last-child {
    margin-bottom: 0;
}


/*
 * ФИО переносится по словам: display-sm глобально включает
 * hyphens:auto, и «Гаджиомарова Ха-дижат» рвалась внутри слова.
 * Каждое слово ФИО короче колонки - дефисация не нужна.
 */
.dd-doctor__name {
    hyphens: manual;
    overflow-wrap: normal;
}