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

Страница «Команда»

Сетка карточек врачей. Сама карточка (.dd-doctors__card и вложенные) -
общий компонент, стили в assets/css/blocks/doctors.css. Здесь - только
каркас страницы: заголовок и сетка-обёртка.

Лента широкая - min(90vw, 1494px), как у секций главной
(.dd-front-section__inner), потому что страница состоит из карточек,
а не из узкой колонки текста.

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

Сетка: колонки minmax(0, 1fr). Ноль в minmax обязателен - карточка
внутри li имеет aspect-ratio, а он переносит высоту контента в
min-content ширину и распирает колонку, если минимум не обнулён.

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


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

@media (min-width: 769px) {

    .dd-page-team__inner {
        width: min(90vw, 1494px);
        padding: 0;
    }

}


/* ================================================================
   Hero: заголовок страницы
   ================================================================ */

.dd-page-team__hero {
    padding: clamp(32px, 5vw, 56px) 0 clamp(20px, 3vw, 32px);
    background: var(--dd-background);
}

.dd-page-team__title {
    margin: 0;
    color: var(--dd-primary);
    text-align: center;
}


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

.dd-page-team__content {
    padding: clamp(20px, 3vw, 32px) 0 clamp(48px, 7vw, 96px);
    background: var(--dd-background);
}

.dd-page-team__grid {
    /*
     * Флекс вместо грида: неполный последний ряд (2 или 1 карточка)
     * центрируется, а не прижимается влево - у грида такой
     * возможности нет. Ширина карточки повторяет колонки грида.
     */
    --dd-team-gap: clamp(18px, 2.4vw, 32px);

    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--dd-team-gap);
    margin: 0;
    padding: 0;
    list-style: none;
}

.dd-page-team__card {
    flex: 0 0 100%;
    display: flex;
}

/*
 * Карточка тянется на всю ширину ячейки сетки. В слайдере ширину
 * задавал .dd-slider__item; в сетке её задаёт колонка.
 */
.dd-page-team__card .dd-doctors__card {
    width: 100%;
}

@media (min-width: 600px) {

    .dd-page-team__card {
        flex-basis: calc((100% - var(--dd-team-gap)) / 2);
    }

}

@media (min-width: 992px) {

    .dd-page-team__card {
        flex-basis: calc((100% - 2 * var(--dd-team-gap)) / 3);
    }

}