/* Шеф и преподаватели на главной.

   Карточка страницы /ru/authors (.teacher-card) — трёхколоночная и рассчитана
   на полную биографию. На главной нужен другой масштаб: четыре человека в ряд,
   фото, имя, строка регалий и путь в каталог. Поэтому отдельный компонент, а не
   модификатор существующего.

   Палитра и радиусы — те же, что в .tool-card и .teacher-card: #E4E7EA рамка,
   #171F26 текст, #52606D подпись. */

.home-teachers-b .title {
  margin-bottom: 40px;
}

/* Типографика заголовка и лида — из общего набора в style.css. */
.home-teachers-b .title h2 {
  margin: 0;
}

.home-teachers {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.home-teacher {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  margin: 0;
  padding: 20px;
  border: 1px solid #E4E7EA;
  border-radius: 16px;
  background: #FFFFFF;
}

.home-teacher__photo {
  border-radius: 12px;
  overflow: hidden;
  background: #F0EEE9;
  margin-bottom: 18px;
}

.home-teacher__photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

/* Тело растягивается, чтобы список курсов у всех карточек начинался на одной
   линии независимо от длины регалий. */
.home-teacher__body {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 auto;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
}

.home-teacher__name {
  font-family: "Lora", Georgia, "Times New Roman", serif;
  font-weight: 600;
  font-size: 22px;
  line-height: 28px;
  letter-spacing: -0.01em;
  color: #171F26;
  margin: 0;
}

.home-teacher__about {
  font-size: 15px;
  line-height: 23px;
  color: #52606D;
  margin: 8px 0 0;
}

.home-teacher__courses {
  list-style: none;
  margin: auto 0 0;
  padding: 16px 0 0;
}

.home-teacher__courses li {
  margin: 0;
  border-top: 1px solid #F0F1F3;
}

.home-teacher__courses a {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  min-height: 44px;
  padding: 10px 0;
  font-weight: 600;
  font-size: 15px;
  line-height: 21px;
  color: #171F26;
  text-decoration: none;
}

.home-teacher__courses a:hover,
.home-teacher__courses a:focus-visible {
  text-decoration: underline;
}

.home-teacher__more {
  display: inline-block;
  margin-top: 10px;
  font-size: 14px;
  line-height: 20px;
  color: #52606D;
  text-decoration: underline;
}

.home-teacher__more:hover,
.home-teacher__more:focus-visible {
  color: #171F26;
}

/* Ссылка по центру и вторичным стилем — тот же приём, что под калькуляторами. */
.home-teachers__foot {
  margin-top: 32px;
  text-align: center;
}

.home-teachers__more {
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  color: #171F26;
  text-decoration: none;
  border-bottom: 1px solid #C8CDD3;
  padding-bottom: 2px;
}

.home-teachers__more:hover,
.home-teachers__more:focus-visible {
  border-bottom-color: #171F26;
}

/* Планшет: два в ряд. Четыре колонки на 991px дают карточку в 170px —
   в ней не помещается ни имя, ни название курса. */
@media only screen and (max-width: 1199px) {
  .home-teachers {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media only screen and (max-width: 991px) {
  .home-teachers-b .title {
    margin-bottom: 32px;
  }

  .home-teachers-b .title span {
    font-size: 16px;
    line-height: 25px;
  }
}

@media only screen and (max-width: 575px) {
  .home-teachers {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  /* На телефоне фото рядом с именем: карточка в столбик из четырёх портретов
     3/4 превращала блок в бесконечную ленту. */
  .home-teacher {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 16px;
    -webkit-box-align: start;
    -webkit-align-items: start;
    -ms-flex-align: start;
    align-items: start;
    padding: 16px;
  }

  .home-teacher__photo {
    margin-bottom: 0;
  }

  .home-teacher__name {
    font-size: 19px;
    line-height: 25px;
  }

  .home-teacher__courses {
    margin-top: 12px;
    padding-top: 12px;
  }

  .home-teachers__foot {
    margin-top: 24px;
  }
}