/* ==========================================================================
   Головна
   ========================================================================== */

/* ------------------------------------------------------------------ hero */
.hero {
  position: relative;
  isolation: isolate;
  min-height: 707rem;
  padding-top: 179rem;
}

.hero__bg {
  position: absolute;
  top: 0;
  right: 0;
  z-index: -1;
  width: 718rem;
  height: 707rem;
}

.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: bottom;
}

.hero__content {
  display: flex;
  flex-direction: column;
  gap: 40rem;
  width: 604rem;
}

.hero__list {
  gap: 16rem;
}

.hero__buttons {
  display: flex;
  align-items: center;
  gap: 24rem;
}

/* -------------------------------------------------------------- послуги */
.services {
  padding: 96rem 0;
}

.services__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40rem;
}

.services__grid {
  display: flex;
  justify-content: center;
  gap: 20rem;
  width: 100%;
}

/* ---------------------------------------------------------------- лікар */
.doctor {
  padding: 96rem 0;
}

.doctor__grid {
  display: flex;
  gap: 125rem;
}

.doctor__main {
  width: 715rem;
  padding-top: 3rem;
}

.doctor__title {
  font-weight: 500;
  font-size: 40rem;
  line-height: 1.2;
  color: var(--c-red);
}

.doctor__divider {
  display: block;
  width: 715rem;
  height: 1rem;
  margin-top: 40rem;
  background: var(--c-line);
}

.doctor__subtitle {
  margin-top: 30rem;
  font-weight: 500;
  font-size: 20rem;
  line-height: 1.4;
}

.doctor__quote {
  margin-top: 70rem;
  font-weight: 500;
  font-size: 20rem;
  line-height: 1.4;
}

.doctor__quote p + p {
  margin-top: 28rem;
}

.doctor__side {
  display: flex;
  flex-direction: column;
  gap: 23rem;
  width: 400rem;
  flex-shrink: 0;
}

.doctor__photo {
  display: block;
  height: 526rem;
  overflow: hidden;
  border-radius: 20rem;
}

.doctor__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.certs {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24rem;
  padding: 16rem;
  border-radius: 20rem;
  background: var(--c-bg-grey);
}

.certs__title {
  font-weight: 600;
  font-size: 20rem;
  line-height: 1.2;
  text-align: center;
  color: var(--c-red);
}

.certs__list {
  display: flex;
  gap: 40rem;
}

/* flex-shrink обов'язковий: без нього ряд, який не вміщається, тисне картки
   (на мобілці виходило 47 замість 83) і ламає пропорцію сканів. */
.certs__list img {
  width: 82rem;
  height: 142rem;
  flex-shrink: 0;
  object-fit: cover;
}

/* ---------------------------------------------------------- для лікарів */
.for-doctors {
  padding: 96rem 0;
  background: var(--c-bg-grey);
}

.for-doctors__grid {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

/* Прозорості тут бути не повинно: вона множилась на напівпрозорий колір
   іконок спеціальностей (rgba(177,41,41,.5)) і робила їх ще блідішими,
   а на наведенні гасила червоний. */
.for-doctors__col {
  opacity: 1;
}

.for-doctors__title {
  font-weight: 500;
  font-size: 40rem;
  line-height: 1.2;
  color: var(--c-red);
}

.specs {
  display: grid;
  grid-template-columns: repeat(3, 190rem);
  /* Рядки тягнуться за найвищою карткою, а не за фіксованим числом: в
     українській усі назви однорядкові, в англійській — на два рядки, і без
     цього нижній рядок різався. */
  grid-auto-rows: 1fr;
  gap: 20rem;
  margin-top: 31rem;
}

.spec {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8rem;
  /* 110 — висота з макета під однослівні українські назви. Тепер це нижня
     межа, а не стеля: англійські назви на два рядки просять 124. */
  min-height: 110rem;
  /* Поля з боків 12, а не 32: текст центрований, тому на коротких назвах
     вони не видно, а от довгим вони лишали всього 124.6 при потрібних 150.9
     («Rheumatologists») і гнали зайвий перенос. */
  /* Поля зверху/знизу 10, а не 14. На вигляд це нічого не зсуває: вміст
     центрований, і при висоті 110 поля до нього не дотикаються. Але 14
     розпирали коробку (54 іконка + 8 + 22.4 рядок + 28 = 112.4 при 108.3
     доступних), і картка виростала до 114.1 замість 110 з макета.
     З боків 6 замість макетних 32: текст центрований і картка фіксованої
     ширини, тому бічні поля тут не мають візуальної ролі взагалі — вони
     лише обмежують, де ламається рядок. При 32 «Oncohematologists» (173.5)
     не вміщався в 124.6 і переносився по складах, тягнучи всі картки до
     150.9; при 6 він стає в рядок, і картки сходяться на 128.6. */
  padding: 10rem 6rem;
  overflow: hidden;
  border: 1rem solid var(--c-red);
  border-radius: 13.82rem;
  background: var(--c-bg);
  transition: background-color 0.25s ease, box-shadow 0.25s ease;
}

.spec:hover .spec__icon {
  background-color: var(--c-icon-hover);
}

.spec:hover {
  background: var(--c-white);
  box-shadow: 0 4rem 4rem 0 rgba(189, 32, 37, 0.2);
}

.spec__icon {
  display: block;
  width: 54rem;
  height: 54rem;
  flex-shrink: 0;
  background-color: var(--c-icon);
  -webkit-mask-image: var(--icon);
  mask-image: var(--icon);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  transition: background-color 0.25s ease;
}

.spec__name {
  /* Без width блок назви роздувається до ширини найдовшого слова: ані
     overflow-wrap, ані hyphens не зменшують власну (min-content) ширину, вони
     лише переносять всередині вже заданої. Тому «Oncohematologists» (173.1)
     вилазив за поле картки (168.6). Текст центрований, тож на коротких
     назвах width: 100% нічого не змінює. */
  width: 100%;
  font-weight: 500;
  font-size: 16rem;
  line-height: 1.4;
  letter-spacing: 0.8rem;
  text-align: center;
  /* «Oncohematologists» — 173.5 при внутрішній ширині 162.6, воно не влізе
     ні за яких полів. Переносимо його по складах; решта назв до цього не
     доходить. break-word — страховка, якщо в мові не буде правил переносу. */
  overflow-wrap: break-word;
  hyphens: auto;
}

.for-doctors__video {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 40rem;
  width: 553rem;
  flex-shrink: 0;
}

.for-doctors__video .video-item {
  width: 100%;
}

/* Ролик вертикальний і вдвічі ширший за макетний слот — на прохання
   замовника, щоб на десктопі був помітнішим. Через це секція вища за
   макет: 56 кнопка + 40 відступ + 688 ролик замість 440. */
.for-doctors__video .video-item--vertical {
  width: 387rem;
}

/* ========================================================== мобільна версія */
@media (max-width: 479px) {
  .for-doctors {
    padding: 60rem 0;
  }

  .for-doctors .container {
    padding-inline: 16rem;
  }

  .for-doctors__grid {
    flex-direction: column;
    gap: 40rem;
  }

  .specs {
    grid-template-columns: repeat(2, 1fr);
    width: 100%;
  }

  .spec {
    padding: 10rem 6rem;
  }

  .for-doctors__video {
    align-items: center;
    gap: 40rem;
    width: 100%;
  }

  .for-doctors__video .btn {
    order: 2;
  }

  .for-doctors__video .video-item--vertical {
    width: 220rem;
  }

  .doctor {
    padding: 60rem 0;
  }

  .doctor .container {
    padding-inline: 16rem;
  }

  .doctor__grid {
    flex-direction: column;
    gap: 40rem;
  }

  .doctor__side {
    order: -1;
    gap: 40rem;
    width: 100%;
  }

  .doctor__photo {
    height: 381rem;
  }

  .doctor__photo img {
    object-position: top;
  }

  /* Зняте з макета: плашка 343, картки 83 з просвітом 41, від краю 6.
     6 + 83·3 + 41·2 + 6 = 343 — ряд стає впритул, тому боковий відступ
     тут малий, а не 59, як було. */
  .certs {
    gap: 27rem;
    padding: 16rem 6rem;
  }

  .certs__list {
    gap: 41rem;
  }

  .certs__list img {
    width: 83rem;
  }

  .doctor__main {
    width: 100%;
    padding-top: 0;
  }

  .doctor__title {
    font-size: 32rem;
  }

  .doctor__divider {
    width: 100%;
    margin-top: 30rem;
  }

  .doctor__subtitle,
  .doctor__quote {
    font-size: 16rem;
  }

  .doctor__subtitle {
    margin-top: 20rem;
  }

  .doctor__quote {
    margin-top: 40rem;
  }

  .doctor__quote p + p {
    margin-top: 22rem;
  }

  .services {
    padding: 60rem 0;
  }

  .services .container {
    padding-inline: 16rem;
  }

  .services__grid {
    flex-direction: column;
    align-items: center;
    gap: 40rem;
  }

  .hero {
    min-height: 602rem;
    padding: 60rem 0;
  }

  .hero__bg {
    top: 0;
    right: auto;
    left: 0;
    width: 100%;
    height: 100%;
  }

  .hero__bg img {
    object-position: center;
  }

  .hero .container {
    padding-inline: 16rem;
  }

  .hero__content {
    align-items: center;
    gap: 40rem;
    width: 100%;
  }

  .hero__title {
    width: 100%;
    max-width: 360rem;
    font-size: 32rem;
    line-height: 1.2;
    letter-spacing: -1.28rem;
    text-align: center;
  }

  .hero__list {
    gap: 36rem;
    width: 100%;
    max-width: 343rem;
  }

  .hero .check-list__item {
    gap: 16rem;
  }

  .hero__buttons {
    flex-direction: column;
    gap: 20rem;
    width: 100%;
  }
}