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

Front page: Наши врачи

Каркас и ширина ленты - в assets/css/section.css (классы
.dd-front-section / .dd-front-section__inner). Здесь - только
собственный визуал блока.

Композиция карточки - как в референсе: карточка целиком является
фото-областью. Под фото врача лежит фоновая графика
(assets/images/doctors/doctor-card-bg.webp), а имя, разделительная
линия и список специальностей лежат ПОВЕРХ фото на тёмном градиенте
у нижнего края - не отдельной панелью под фото.

Сознательное отличие от референса (по задаче Эда): карточка 3:4,
фото врача - доминанта.

Выравнивание разделительной линии между карточками: линия стоит на
одной высоте во всех карточках независимо от длины имени и числа
пунктов. Механика: блок meta прижат к низу карточки; зона имени
имеет фиксированную высоту в две строки и прижимает текст вниз
(длинное имя растёт вверх, к фото); список специальностей имеет
фиксированную минимальную высоту под три пункта (короткий список
не поднимает линию). Хак с фиктивным пустым пунктом не нужен.

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


.dd-doctors {
    /* +50px сверху: место под свисающий клин среза. */
    padding-top: calc(clamp(40px, 7vw, 96px) + 50px);

    color: var(--dd-white);
    background: var(--dd-sec-background);
    --dd-em-color: var(--dd-primary-light);
}

.dd-doctors__title {
    margin: 0 0 clamp(36px, 4vw, 64px);
    font-family: var(--dd-font-display);
    font-weight: var(--dd-display-weight);
    font-size: var(--dd-display-size);
    text-align: center;
}

.dd-doctors__slider {
    position: relative;
}

/*
 * Тень карточки (34px размытия) выходит за габарит карточки, а
 * viewport слайдера режет всё по своему боксу - без запаса тень
 * обрубается по прямой линии у нижнего края и углов. Вертикальный
 * padding даёт тени место, отрицательный margin возвращает блоку
 * прежний габарит.
 */
.dd-doctors .dd-slider__viewport {
    padding: 60px 0;
    margin: -60px 0;
}

/*
 * Стрелки как на баннере и там же - у краёв вьюпорта, не ленты.
 * Лента центрирована, поэтому край экрана = 50% минус 50vw.
 * На тёмном тиловом фоне тёмный шеврон не виден - цвет светлый.
 */
.dd-doctors .dd-slider__arrow {
    --dd-slider-arrow-color: rgba(245, 250, 253, .75);
    --dd-slider-arrow-hover-color: var(--dd-white);
}

.dd-doctors .dd-slider__arrow--prev {
    left: calc(50% - 50vw + 14px);
}

.dd-doctors .dd-slider__arrow--next {
    right: calc(50% - 50vw + 14px);
}

.dd-doctors .dd-slider__item {
    padding: 0 11px;
}

.dd-doctors__card {
    position: relative;

    aspect-ratio: 3 / 4;
    overflow: hidden;

    background-color: var(--dd-primary-grey);
    background-image: url("../../images/doctors/doctor-card-bg.webp");
    background-position: center top;
    background-size: cover;
    background-repeat: no-repeat;

    border-radius: 20px;

    /*
     * Тень уведена вниз с отрицательным spread: в стороны она гаснет
     * за ~10px и умещается в 11px отступа слайда - вьюпорт её больше
     * не режет по внешним краям крайних карточек.
     */
    box-shadow: 0 20px 28px -18px rgba(0, 16, 19, .35);
}

/*
 * Вся карточка - ссылка на страницу врача. Слой прижат к габариту
 * карточки (inset:0), поэтому фото и мета внутри позиционируются от
 * него так же, как раньше от самой карточки - визуал не меняется, а
 * кликабельна вся площадь. Цвет и hover заданы явно: глобальный
 * a:hover красит ссылки в красный, здесь текст остаётся белым.
 */
.dd-doctors__card-link {
    position: absolute;
    inset: 0;
    display: block;

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

.dd-doctors__card-link:hover,
.dd-doctors__card-link:focus-visible {
    color: var(--dd-white);
}

.dd-doctors__card-link:focus-visible {
    outline: 2px solid var(--dd-white);
    outline-offset: -4px;
}

.dd-doctors__photo-wrap {
    position: absolute;
    inset: 0;
    display: block;
}

/*
 * Селектор из двух классов: родительская тема задаёт
 * img.wp-post-image { height: auto } (специфичность 0,1,1) и
 * перебивала height:100% - фото вставало квадратом 476px и не
 * доставало до низа карточки.
 */
.dd-doctors__photo-wrap .dd-doctors__photo {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}

/*
 * Имя, линия и специальности лежат поверх фото на градиенте,
 * прижаты к нижнему краю карточки.
 */
.dd-doctors__meta {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;

    display: flex;
    flex-direction: column;
    padding: 48px 26px 24px;

    background: linear-gradient(
        180deg,
        rgba(0, 16, 19, 0) 0%,
        rgba(0, 16, 19, .55) 45%,
        rgba(0, 16, 19, .92) 100%
    );
}

/*
 * Зона имени: фиксированная высота в две строки, текст прижат к
 * нижнему краю. Однострочное имя стоит у самого низа зоны, вплотную
 * к линии; двухстрочное заполняет зону целиком и растёт вверх - линия
 * при этом не двигается ни на пиксель.
 */
.dd-doctors__name-zone {
    display: flex;
    align-items: flex-end;
    height: 2.4em;
    font-size: 1rem;
    line-height: 1.2;
}

/*
 * Размер имени подобран по колонкам сетки, а не по плавному vw:
 * на стыке 600px/992px карточка на миг становится уже, чем шагом
 * раньше, и при плавном clamp() самое длинное имя в этой узкой
 * точке переносится на три строки - зона имени фиксной высоты
 * в две строки его обрезает. Ступени проверены на самой узкой
 * карточке каждой ступени.
 */
@media (min-width: 600px) {
    .dd-doctors__name-zone {
        font-size: 1.125rem;
    }
}

@media (min-width: 1300px) {
    .dd-doctors__name-zone {
        font-size: var(--dd-card-title);
    }
}

.dd-doctors__name {
    margin: 0;
    color: var(--dd-white);
    font-size: inherit;
    line-height: inherit;
}

.dd-doctors__divider {
    margin: 12px 0;
    border: 0;
    border-top: 1px solid rgba(245, 250, 253, .55);
}

/*
 * Минимальная высота под три пункта: короткий список (два пункта)
 * не поднимает линию - она стоит на той же высоте, что у соседей.
 */
.dd-doctors__roles {
    min-height: calc(3 * 1.4em + 12px);
    margin: 0;
    padding-left: 20px;
    color: var(--dd-white);
}

.dd-doctors__roles li {
    margin-bottom: 6px;
    line-height: 1.4;
}

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