@use '../abstracts' as *;
@use 'doctors/tail-map';
@use 'doctors/tail-promo';

// Хвост (карта + промо) вынесен из секции — см. src/doctors/index.html; нижний зазор дают .page-doctors__* и --footer
.page-doctors {
  padding-bottom: 0;
  overflow-x: clip;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.page-title {
  font-family: $font-heading;
  font-size: 36px;
  font-weight: 700;
  color: $color-text;
  margin-bottom: 30px;

  @include md {
    font-size: 28px;
  }

  @include sm {
    font-size: 32px;
    margin-bottom: 20px;
  }

  @media (max-width: #{$bp-xs}) {
    font-size: 24px;
  }

  // 768–992: макет списка врачей (Raleway 36 / 700)
  @include between($bp-md, $until-991) {
    color: $color-text;
    font-family: $font-heading;
    font-size: 36px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
  }
}

// Листинг: >768px — 3 колонки; ≤768 — 2; ≤575 — 1; gap сетки 20px
// На странице 9 элементов с сервера; при ≤768 скрываем 7–9-ю карточку (видно 6) — см. docs/BITRIX_INTEGRATION.md
.doctors-grid {
  .doctor-card__clinic {
    line-height: 1.1;
  }

  .doctor-card__helps-list li {
    line-height: 1.29;

    @media (max-width: #{$bp-xs}) {
      line-height: 1.32;
    }
  }

  @include between($bp-lg, $until-1919) {
    .doctor-card__name a {
      line-height: 1;
    }

    .doctor-card__actions .btn {
      line-height: 1.1;
    }
  }

  @include between($bp-md2, $until-1439) {
    .doctor-card__name a {
      line-height: 1;
    }
  }

  @include between($bp-md, $until-991) {
    grid-template-columns: repeat(2, minmax(0, 1fr));

    // TODO: убрать при натягивании на Битрикс — сервер будет отдавать нужное кол-во
    .doctor-card:nth-child(n + 7) {
      display: none;
    }
  }

  @include md {
    grid-template-columns: repeat(2, minmax(0, 1fr));

    .doctor-card:nth-child(n + 7) {
      display: none;
    }
  }

  @include down-to($until-576 - 1px) {
    grid-template-columns: minmax(0, 1fr);
  }
}

.doctors-more {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: $gap;

  @include sm {
    margin-top: $gap-mobile;

    .btn--more {
      width: 250px;
      max-width: 100%;
    }
  }

  @media (max-width: #{$bp-xs}) {
    .btn--more {
      width: 126px;
    }
  }
}

// Кнопка «Показать ещё»: фиксированная ширина на десктопе, на узком экране — во всю колонку
.btn--more {
  $btn-more-bg: rgba(145, 145, 145, 0.5);

  width: 250px;
  height: 40px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 600;
  font-family: $font-main;
  border: none;
  border-radius: $radius-sm;
  background: $btn-more-bg;
  color: $color-white;
  cursor: pointer;
  transition: background-color 0.2s, opacity 0.2s;

  &:hover {
    background: rgba(145, 145, 145, 0.65);
    opacity: 1;
    color: $color-white;
  }

  @include sm {
    width: 100%;
    max-width: none;
  }
}

// .doctors-filter — разметка и брейкпоинты: components/_filters.scss
// Хвост листинга (карта / промо): pages/doctors/_tail-map.scss, _tail-promo.scss