@use '../../abstracts' as *;


// Страница врача: корневая обёртка (шрифт как у body — Roboto; заголовки — Raleway у h2 и блоков ниже)
.doctor-detail {
  padding-bottom: 80px;
  overflow-x: clip; // секции на всю ширину вьюпорта (.doctor-detail__breakout)
}

// Крошки на детальной вынесены из .doctor-detail в <main> (как на сайте); модификатор — Bitrix-совместимая обёртка
.breadcrumbs-wrapper--doctor .breadcrumbs {
  font-size: 14px;
  font-weight: 300;
  margin-top: 30px;
  margin-bottom: 24px;

  @include sm {
    margin-top: 12px;
    margin-bottom: 12px;
  }

  // 576–767: узкая полоса до планшета (страница 576 Figma 27:2657) — те же отступы, что ≤576
  @include viewport-mobile {
    margin-top: 12px;
    margin-bottom: 12px;
  }

  // Страница 768 (Figma 27:2498): как на узкой колонке — плотнее к герою, чем на 992+
  @include viewport-tablet {
    margin-top: 12px;
    margin-bottom: 12px;
  }
}

// Первый экран: фото, ФИО, должность, CTA
.doctor-hero {
  margin-bottom: 30px;

  &__card {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    flex-wrap: nowrap;
    width: 100%;
    max-width: 100%;
    background: $color-doctor-hero-bg;
    border-radius: $radius-md;
    overflow: hidden;

    @include sm {
      flex-direction: column;
      flex-wrap: wrap;
    }
  }

  &__media {
    position: relative;
    flex: 0 0 385px;
    max-width: 385px;
    min-height: 280px;
    background: $color-detail-soft-bg;

    // 577–767: горизонтальный ряд с узкой колонкой фото (между моб. колонкой ≤576 и планшетной колонкой 768–991).
    @include between(($bp-576 + 1px), $until-767) {
      flex: 0 0 323px;
      width: 323px;
      max-width: 323px;
      min-width: 0;
    }

    @include sm {
      flex: none;
      width: 100%;
      min-height: 0;
      // Figma 576: фото выше; Figma 360 (27:2735): блок короче — до ширины артборда 360px включительно
      height: 446px;
    }

    @media (max-width: $bp-xs) {
      height: 320px;
    }
  }

  &__photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
  }

  &__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 30px;
    padding: 30px;

    @include sm {
      gap: 20px;
      padding: 20px;
    }
  }

  &__head {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  &__name {
    font-family: $font-heading;
    font-size: 30px;
    font-weight: 700;
    color: $color-text;
    line-height: 1.2;
    margin: 0;

    // Мобильная колонка ≤576 (Figma 360 27:2735 / 576 27:2629); не max-width 359 — иначе на 360px остаётся 30px
    @include sm {
      font-size: 28px;
    }

    // Артборд 1440 (Figma 15:2009): H1 как на листинге/десктопе — 36px; карточка героя 15:1983 уже с полями 36
    @include up($bp-1440) {
      font-size: 36px;
    }
  }

  &__spec {
    margin: 0;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.3;
    color: $color-text-secondary;
  }

  &__helps {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  &__helps-label {
    margin: 0;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.3;
    color: $color-text;
  }

  &__helps-list {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.3;
    color: $color-text;

    li {
      position: relative;
      padding-left: 0.9em;

      &::before {
        content: '•';
        position: absolute;
        left: 0;
        color: $color-text;
      }
    }
  }

  &__chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
    row-gap: 10px;
  }

  &__chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 8px;
    border-radius: $radius-sm;
    background: $color-white;
    font-size: 16px;
    line-height: 1.2;
    white-space: nowrap;

    &--accent {
      font-weight: 600;
      color: $color-blue;
    }

    &--metro {
      gap: 8px;
      font-weight: 400;
      color: $color-text;
    }
  }

  &__metro-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: $color-blue;
    flex-shrink: 0;
  }

  &__reviews-link {
    font-size: 18px;
    font-weight: 500;
    line-height: 1.3;
    color: $color-doctor-cta;
    text-decoration: none;
    white-space: nowrap;

    @include sm {
      white-space: normal;
    }

    &:hover {
      text-decoration: underline;
    }

    &:focus-visible {
      outline: 2px solid $color-blue;
      outline-offset: 2px;
    }
  }

  &__price {
    margin: 0;
    font-size: 30px;
    font-weight: 500;
    line-height: 1.2;
    color: $color-text;
  }

  &__actions {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 30px;
    align-items: stretch;

    @include sm {
      flex-direction: column;
      gap: 10px;
    }

    .btn {
      flex: 1 1 0;
      min-width: 0;

      @include sm {
        flex: none;
        width: 100%;
      }
    }
  }
}

// 360–576 — карточка героя (Figma 360 27:2735; артборд 576 — 27:2657): колонка, кадрирование фото и поля текста как на макетах.
// Высота фото: до 360px включительно — 320px; 361–576 — 446px (базовые правила &__media).
@include viewport-mobile-sm {
  .doctor-hero__card {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
  }

  .doctor-hero__media {
    flex: none;
    width: 100%;
    max-width: none;
    min-width: 0;
  }

  .doctor-hero__photo {
    object-position: center;
  }

  .doctor-hero__body {
    flex: none;
    width: 100%;
    min-width: 0;
    gap: 30px;
    padding: 30px;
  }
}

// 768–991 — блок doctor-hero__card (Figma 27:2605; страница 768 — 27:2498): колонка — фото на всю ширину, контент снизу.
@include viewport-tablet {
  .doctor-hero__card {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
  }

  .doctor-hero__media {
    flex: none;
    width: 100%;
    max-width: none;
    min-width: 0;
    height: 446px;
    min-height: 0;
  }

  .doctor-hero__photo {
    object-position: center;
  }

  .doctor-hero__body {
    flex: none;
    width: 100%;
    min-width: 0;
    gap: 30px;
    padding: 30px;
  }
}

// 992+ — блок doctor-hero__card (Figma 26:2340): чуть плотнее контент относительно 1440+.
@include viewport-laptop {
  .doctor-hero__media {
    flex: 0 0 385px;
    max-width: 385px;
    min-height: 290px;
  }

  .doctor-hero__body {
    gap: 32px;
    padding: 32px;
  }
}

// 1440+ — блок doctor-hero__card (Figma 15:1983): промежуточный шаг до 1920.
@include viewport-desktop {
  .doctor-hero__media {
    flex: 0 0 400px;
    max-width: 400px;
    min-height: 300px;
  }

  .doctor-hero__body {
    gap: 36px;
    padding: 36px;
  }
}

// 1920+ — блок doctor-hero__card (Figma 95:1411): колонка фото + внутренние поля .doctor-hero__body.
@include viewport-desktop-xl {
  .doctor-hero__media {
    flex: 0 0 420px;
    max-width: 420px;
    min-height: 320px;
  }

  .doctor-hero__body {
    gap: 40px;
    padding: 40px;
  }
}