/**
 * Каталог врачей: компактные карточки.
 *
 * Селекторы двойные (.fl-dgrid .fl-dcard__…) не случайно: Elementor выводит
 * глобальные стили как .elementor-kit-N h2 и .elementor-kit-N a, и одиночный
 * класс им проигрывает по весу — имя врача взяло бы размер вашего H2,
 * а кнопки покрасились бы в цвет ссылок.
 *
 * Семейство шрифта у имени не задано намеренно: оно наследуется от
 * заголовков сайта, поэтому карточка сразу выглядит «своей».
 * Размеры, цвета и отступы меняются в настройках виджета.
 */

.fl-dgrid {
    --fl-dgrid-cols: 2;
    --fl-dgrid-gap: 20px;
    --fl-dcard-pad: 14px;
    --fl-dcard-photo-w: 136px;
    --fl-dcard-photo-h: 260px;

    display: grid;
    grid-template-columns: repeat(var(--fl-dgrid-cols), minmax(0, 1fr));
    gap: var(--fl-dgrid-gap);
}

/* ---------- Карточка-визитка: фото слева ---------- */

/* Фото прижато к краям карточки, как в карточках статей: у самой
   карточки внутреннего поля нет, отступы несут текстовые области. */
.fl-dgrid .fl-dcard {
    display: grid;
    grid-template-columns: var(--fl-dcard-photo-w) minmax(0, 1fr);
    grid-template-rows: 1fr auto;
    grid-template-areas:
        "photo head"
        "photo foot";
    column-gap: 18px;
    row-gap: 12px;
    box-sizing: border-box;
    min-width: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #FFFFFF;
    border: 1px solid #ECE6DA;
    border-radius: 14px;
}

.fl-dgrid .fl-dcard__photo {
    grid-area: photo;
    min-width: 0;
    max-width: 100%;
    position: relative;
    display: block;
    overflow: hidden;
    /* Портретная плитка 5:6. Если текста справа больше — фото тянется
       на всю высоту карточки, пустоты под ним не остаётся. */
    min-height: calc(var(--fl-dcard-photo-w) * 1.2);
    border-radius: 0;
    background-color: #EFE9DD;
}

.fl-dgrid .fl-dcard__photo img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center 18%;
    border-radius: 0;
}

.fl-dgrid .fl-dcard__head {
    grid-area: head;
    min-width: 0;
    padding: var(--fl-dcard-pad) var(--fl-dcard-pad) 0 0;
}

.fl-dgrid .fl-dcard__name {
    /* Длинное отчество в узкой карточке переносится, а не вылезает. */
    overflow-wrap: anywhere;
    margin: 0 0 8px;
    padding: 0;
    font-size: 26px;
    line-height: 1.15;
    color: #24545C;
}

.fl-dgrid .fl-dcard__name a {
    color: inherit;
    text-decoration: none;
    transition: color .15s ease;
}

.fl-dgrid .fl-dcard__name a:hover {
    color: #AE9666;
}

.fl-dgrid .fl-dcard__name a:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
    border-radius: 2px;
}

/* Должность режем по строкам: у одного врача она в одну строку, у другого
   в четыре, и без обрезки карточки в ряду получаются разной высоты. */
.fl-dgrid .fl-dcard__pos {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    overflow-wrap: anywhere;
    margin: 0;
    font-size: 14px;
    line-height: 1.45;
    color: #4A5A5C;
}

.fl-dgrid .fl-dcard__notice {
    margin: 8px 0 0;
    font-size: 13px;
    line-height: 1.35;
    color: #8A5A1F;
}

/* Подвал: стаж и цена слева, кнопки справа. В узкой колонке кнопки
   сами переносятся на следующую строку и растягиваются. */
.fl-dgrid .fl-dcard__foot {
    grid-area: foot;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 16px;
    min-width: 0;
    padding: 0 var(--fl-dcard-pad) var(--fl-dcard-pad) 0;
}

.fl-dgrid .fl-dcard__meta {
    min-width: 0;
    max-width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 14px;
    font-size: 14px;
    line-height: 1.3;
}

.fl-dgrid .fl-dcard__exp {
    font-weight: 600;
    color: #24545C;
    white-space: nowrap;
}

.fl-dgrid .fl-dcard__price {
    font-weight: 600;
    color: #9A8356;
    white-space: nowrap;
}

/* Кнопкам разрешён перенос: в узкой карточке (ноутбук, три-четыре колонки)
   две кнопки в строку не помещаются, и без переноса вторая вылезала
   за край карточки. Теперь она уходит на следующую строку. */
.fl-dgrid .fl-dcard__actions {
    display: flex;
    flex: 0 1 auto;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
    max-width: 100%;
}

.fl-dgrid .fl-dcard__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 9px 18px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    border: 1px solid transparent;
    border-radius: 999px;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.fl-dgrid .fl-dcard__btn--ghost {
    color: #24545C;
    border-color: #24545C;
    background-color: transparent;
}

.fl-dgrid .fl-dcard__btn--ghost:hover {
    color: #FFFFFF;
    border-color: #24545C;
    background-color: #24545C;
}

.fl-dgrid .fl-dcard__btn--solid {
    color: #FFFFFF;
    border-color: #AE9666;
    background-color: #AE9666;
}

.fl-dgrid .fl-dcard__btn--solid:hover {
    color: #FFFFFF;
    border-color: #97804F;
    background-color: #97804F;
}

.fl-dgrid .fl-dcard__btn:focus-visible {
    outline: 2px solid #24545C;
    outline-offset: 2px;
}

/* ---------- Вид «фото сверху» ---------- */

.fl-dgrid--column .fl-dcard {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
        "photo"
        "head"
        "foot";
    row-gap: 12px;
}

/* Высота фото привязана к ширине, а заданное число — только нижняя граница.
   Раньше высота была жёсткой: в узкой колонке это работало, а при двух
   колонках блок 760×230 вырезал из портрета полоску с глазами.

   Пропорция сделана отступом у ::before, а не свойством aspect-ratio.
   С aspect-ratio минимальная высота «переносится» на ширину: браузер
   считает, что раз блок не ниже 260 px, то он и не уже 260 × 8/5 = 416 px,
   и фото вылезало из карточки вправо, под соседнюю. У отступа в процентах
   такого побочного эффекта нет — он просто считается от ширины. */
.fl-dgrid--column .fl-dcard__photo {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    height: auto;
    min-height: var(--fl-dcard-photo-h);
    box-sizing: border-box;
}

.fl-dgrid--column .fl-dcard__photo::before {
    content: "";
    display: block;
    padding-top: 62.5%;
}

.fl-dgrid--column .fl-dcard__head {
    padding: 4px var(--fl-dcard-pad) 0;
}

.fl-dgrid--column .fl-dcard__name {
    font-size: 24px;
}

.fl-dgrid--column .fl-dcard__foot {
    padding: 0 var(--fl-dcard-pad) var(--fl-dcard-pad);
}

/* В узкой вертикальной карточке кнопки делят строку поровну. */
.fl-dgrid--column .fl-dcard__actions {
    flex: 1 1 100%;
}

.fl-dgrid--column .fl-dcard__btn {
    flex: 1 1 0;
    padding-left: 10px;
    padding-right: 10px;
}

/* ---------- Узкая визитка ----------
   Рядом с фото остаются только имя и должность. Стаж, цена и кнопки
   уходят под фото на всю ширину карточки. Этот вид можно выбрать в
   настройках («Визитка узкая»), и в него же на телефоне превращается
   широкая визитка: две кнопки рядом с фотографией на экране 360 px
   не помещаются. */

.fl-dgrid--stack {
    --fl-dcard-photo-w: 104px;
}

.fl-dgrid--stack .fl-dcard {
    grid-template-rows: auto auto;
    grid-template-areas:
        "photo head"
        "foot  foot";
    column-gap: 14px;
    align-items: start;
    /* Карточки в ряду одной высоты: подвал прижат к низу. */
    align-content: space-between;
}

.fl-dgrid--stack .fl-dcard__photo {
    align-self: start;
    height: calc(var(--fl-dcard-photo-w) * 1.2);
}

.fl-dgrid--stack .fl-dcard__head {
    padding-top: var(--fl-dcard-pad);
}

.fl-dgrid--stack .fl-dcard__foot {
    padding-left: var(--fl-dcard-pad);
}

.fl-dgrid--stack .fl-dcard__name {
    font-size: 22px;
}

.fl-dgrid--stack .fl-dcard__actions {
    flex: 1 1 100%;
}

.fl-dgrid--stack .fl-dcard__btn {
    flex: 1 1 0;
    padding-left: 10px;
    padding-right: 10px;
}

@media (max-width: 767px) {
    .fl-dgrid .fl-dcard {
        column-gap: 14px;
    }

    .fl-dgrid--row .fl-dcard {
        grid-template-rows: auto auto;
        grid-template-areas:
            "photo head"
            "foot  foot";
        align-items: start;
    }

    .fl-dgrid--row .fl-dcard__photo {
        align-self: start;
        height: calc(var(--fl-dcard-photo-w) * 1.2);
    }

    .fl-dgrid--row .fl-dcard__foot {
        padding-left: var(--fl-dcard-pad);
    }

    .fl-dgrid .fl-dcard__name {
        font-size: 22px;
    }

    .fl-dgrid--row .fl-dcard__actions,
    .fl-dgrid--stack .fl-dcard__actions {
        flex: 1 1 100%;
    }

    .fl-dgrid--row .fl-dcard__btn,
    .fl-dgrid--stack .fl-dcard__btn {
        flex: 1 1 0;
        padding-top: 11px;
        padding-bottom: 11px;
    }
}

/* ---------- Карусель ----------
   Лента, стрелки и точки — из cards.css. Здесь только стыковка: корень
   перестаёт быть сеткой, а «колонок» и «промежуток» из настроек виджета
   превращаются в «карточек на экране» и промежуток ленты. */

.fl-dgrid.fl-dgrid--carousel {
    display: block;
    --fl-per-view: var(--fl-dgrid-cols);
    --fl-gap: var(--fl-dgrid-gap);
}

/* Карточки в ленте одной высоты — по самой высокой. */
.fl-dgrid--carousel .fl-cards__slide {
    display: flex;
}

.fl-dgrid--carousel .fl-cards__slide > .fl-dcard {
    flex: 1 1 auto;
    width: 100%;
}

.fl-dgrid--carousel .fl-cards__nav {
    margin-top: 24px;
}

/* У «Слайдера карточек» стрелки и точки белые — он стоит на тёмном фото.
   Здесь фон светлый, белое на нём не видно. */
.fl-dgrid--carousel .fl-cards__arrow,
.fl-dgrid--carousel .fl-cards__arrow:hover,
.fl-dgrid--carousel .fl-cards__arrow:focus {
    width: 44px;
    height: 44px;
    padding: 11px;
    color: #AE9666;
    border-color: #AE9666;
}

.fl-dgrid--carousel .fl-cards__dot,
.fl-dgrid--carousel .fl-cards__dot:hover,
.fl-dgrid--carousel .fl-cards__dot:focus {
    background-color: #D8D0C0;
}

.fl-dgrid--carousel .fl-cards__dot.is-active,
.fl-dgrid--carousel .fl-cards__dot.is-active:hover,
.fl-dgrid--carousel .fl-cards__dot.is-active:focus {
    background-color: #AE9666;
}

/* Подсказка в редакторе, когда врачей нет. На сайте не выводится. */
.fl-dgrid--empty {
    display: block;
    color: #7A6947;
    font-style: italic;
}