/* ==========================================================================
   Лікарям — каталог спеціальностей + довідкові розділи
   ========================================================================== */

.page-hero {
  /* 140 шапка + 24 відступ */
  padding: 164rem 0 96rem;
}

.page-hero__content {
  display: flex;
  flex-direction: column;
  gap: 40rem;
  margin-top: 24rem;
}

/* --------------------------------------------- сітка спеціальностей */
/* Сітка спеціальностей. Навколо неї в макеті 24, тоді як решта блоків
   сторінки стоїть через 40 — тому тут гасимо різницю власним відступом,
   а не міняємо загальний крок колонки. */
.spec-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  /* Рядки рівняються за найвищою карткою — див. .specs на головній. */
  grid-auto-rows: 1fr;
  gap: 20rem;
  margin-block: -16rem;
}

.spec-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8rem;
  /* 92 — з макета під однорядкові українські назви (заміряно: потреба 91.7).
     Англійські просять 102.8, тому це нижня межа, а не фіксована висота. */
  min-height: 92rem;
  /* Поля зверху/знизу 12, а не 14 — з тієї ж причини, що й на головній:
     вміст центрований, тому вони невидимі, зате 14 розпирали картку до
     94.1 замість 92 з макета. З боків 6 — щоб «Oncohematologists» (173.5)
     став у рядок при внутрішніх 176.6 і не тягнув усю сітку на третій
     рядок; див. той самий розрахунок у .spec на головній. */
  padding: 12rem 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-card__icon {
  display: block;
  width: 34rem;
  height: 34rem;
  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-card__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;
  /* Тут вільної ширини 168.6, і з англійських назв її перебирає лише
     «Oncohematologists» (173.5) — переносимо по складах. */
  overflow-wrap: break-word;
  hyphens: auto;
}

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

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

/* --------------------------------------------------------- типографіка */
/* Заголовок розділу. Під ним у макеті 20, а колонка сторінки дає 40 —
   різницю гасимо тут, щоб не чіпати загальний крок блоків. */
.article__h2 {
  font-weight: 500;
  font-size: 32rem;
  line-height: 1.2;
  color: var(--c-red);
}

.page-hero__content > .article__h2 {
  margin-bottom: -20rem;
}

/* Підзаголовок усередині розділу («СУДИННИЙ ДОСТУП…», «ПЕРЕЛІК
   ЛАБОРАТОРНИХ ДОСЛІДЖЕНЬ…») у макеті чорний, а не червоний. */
.article__subhead {
  font-weight: 500;
  font-size: 32rem;
  line-height: 1.2;
  color: var(--c-black);
}

.article__image {
  display: block;
  overflow: hidden;
  border-radius: 14rem;
}

.article__image img {
  width: 100%;
  height: auto;
}

/* Ілюстрація приходить із розмітки як <img class="article__image"> — клас
   стоїть на самій картинці, а не на обгортці, тому правило вище її не
   зачіпало, і висота бралася з атрибута height (682). Звідси розтягнуті
   схеми в «Опис процедури» і «Розподіл води». */
img.article__image {
  width: 100%;
  height: auto;
}

/* ------------------------------------------------------------ акордеон */
.accordion {
  border: 0;
}

.accordion__head {
  display: flex;
  align-items: center;
  gap: 20rem;
  font-weight: 500;
  font-size: 32rem;
  line-height: 1.2;
  color: var(--c-red);
  cursor: pointer;
  list-style: none;
}

.accordion__head::-webkit-details-marker {
  display: none;
}

/* галочка ⌄ */
.accordion__head::after {
  content: '';
  width: 28rem;
  height: 14rem;
  flex-shrink: 0;
  background: var(--c-red);
  clip-path: polygon(0 0, 50% 100%, 100% 0, 92% 0, 50% 82%, 8% 0);
  transition: transform 0.3s ease;
}

.accordion[open] .accordion__head::after {
  transform: rotate(180deg);
}

.accordion__body {
  display: flex;
  flex-direction: column;
  /* У макеті текст акордеону — один вузол, де частина переносів рядка є
     кінцем абзацу (відступ 20), а частина — переносом усередині абзацу (0).
     Розрізнити їх у даних Figma не можна: обидва приходять як \n.
     9.5 — значення, при якому висота блоку збігається з макетом. */
  gap: 9.5rem;
  margin-top: 24rem;
  font-weight: 500;
  font-size: 16rem;
  line-height: 1.4;
  letter-spacing: 0.8rem;
}

/* Пункти списку в макеті йдуть суцільно, крок між ними — сам міжрядковий
   інтервал. Окремого просвіту між пунктами немає: у нас через 16.5 список
   на 17 пунктів розтягувався майже вдвічі проти макета. */
.accordion__body ul {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  padding-left: 22rem;
  list-style: disc;
}

/* Заголовок усередині розділу відбивається помітно: зверху 40, знизу 20.
   Раніше з обох боків було по 10 і він губився в тексті. */
.accordion__body .article__subhead {
  margin-top: 40rem;
  margin-bottom: 20rem;
}

.accordion__body > .article__subhead:first-child {
  margin-top: 0;
}

/* --------------------------------------------------------- таблиці */
.data-table {
  display: flex;
  flex-direction: column;
  gap: 18rem;
  padding: 30rem 40rem;
  border: 1rem solid var(--c-red);
  border-radius: 14rem;
  background: var(--c-white);
}

/* Сітка рядка — за фактичною кількістю колонок таблиці. Раніше стояли
   жорсткі дві, і чотириколонкова таблиця розсипалась: зайві комірки
   перетікали в наступний рядок. */
.data-table__row {
  display: grid;
  grid-template-columns: 500rem 641rem;
  gap: 20rem;
  align-items: start;
}

/* Таблиці всередині розділів приходять готовою розміткою — там немає класу
   .data-table--cols-N, лише --table-cols у стилі. Через це чотириколонкова
   таблиця «Вид операції / Лікувальний ефект» малювалась на дві колонки,
   і значення переносились на другий рядок. Читаємо кількість зі стилю. */
.data-table[style*="--table-cols:2"] .data-table__row {
  grid-template-columns: 500rem 641rem;
}

.data-table[style*="--table-cols:3"] .data-table__row {
  grid-template-columns: 284rem repeat(2, 1fr);
}

.data-table[style*="--table-cols:4"] .data-table__row {
  grid-template-columns: 284rem repeat(3, 1fr);
}

/* У макеті рядки саме цієї таблиці розділені червоною лінією, а крок між
   ними 38 (лінії на 6810, 6848, 6886). У двоколонкових таблицях ліній
   немає — там лише рамка, тому правило прив'язане до кількості колонок. */
.data-table[style*="--table-cols:4"] .data-table__row:not(:last-child):not(.data-table__row--head) {
  padding-bottom: 8rem;
  border-bottom: 1rem solid rgba(189, 32, 37, 0.5);
}

/* Крок між рядками тут 38: рядок 22, під ним 8, лінія 1, просвіт 7.
   Загальні для таблиць 18 давали 49. */
.data-table[style*="--table-cols:4"] {
  gap: 7rem;
}

/* Двоколонкова таблиця в розділі («Розподіл води») у макеті просторіша за
   решту: від рамки до першого рядка 53, між рядками 30, рамка 8316…8883
   тобто 567 на п'ять рядків. Загальні 30 і 18 давали 470. */
.accordion__body .data-table[style*="--table-cols:2"] {
  gap: 30rem;
  padding: 52rem 40rem;
}

.data-table--cols-3 .data-table__row {
  grid-template-columns: 284rem repeat(2, 1fr);
}

.data-table--cols-4 .data-table__row {
  grid-template-columns: 284rem repeat(3, 1fr);
}

.data-table--cols-5 .data-table__row {
  grid-template-columns: 284rem repeat(4, 1fr);
}

.data-table__row--head {
  padding-bottom: 12rem;
  border-bottom: 1rem solid rgba(189, 32, 37, 0.5);
  text-align: center;
}

.data-table__cell {
  font-weight: 500;
  font-size: 16rem;
  line-height: 1.4;
  letter-spacing: 0.8rem;
}

/* у макеті абзаци в клітинці розділені 20px */
.data-table__cell p + p {
  margin-top: 20rem;
}

/* таблиця ефектів — 4 колонки */
.data-table--effects .data-table__row {
  grid-template-columns: 284rem repeat(3, 1fr);
  text-align: left;
}

.data-table--effects .data-table__row--head,
.data-table--effects .data-table__row--subhead {
  text-align: center;
}

.data-table--effects .data-table__row--head .data-table__cell:first-child,
.data-table--effects .data-table__row--subhead .data-table__cell:first-child {
  text-align: left;
}

.data-table__cell--span3 {
  grid-column: span 3;
}

/* Усі розділові лінії в таблицях червоні — сірих у макеті немає. */
.data-table__row--subhead {
  padding-bottom: 12rem;
  border-bottom: 1rem solid rgba(189, 32, 37, 0.5);
}

.data-table__note {
  font-weight: 500;
  font-size: 16rem;
  line-height: 1.4;
  letter-spacing: 0.8rem;
}

/* ----------------------------------------------------------- формули */
.formula {
  display: inline-flex;
  align-items: center;
  gap: 6rem;
  max-width: 100%;
  vertical-align: middle;
  font-weight: 500;
}

.formula__label {
  flex-shrink: 0;
  font-size: 18.88rem;
  line-height: 1.2;
  white-space: nowrap;
}

/* риска — це нижня межа чисельника, тому вона рівно по його ширині */
.formula__fraction {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  text-align: center;
}

.formula__num {
  padding: 0 6rem 4rem;
  border-bottom: 1rem solid currentColor;
  font-size: 16.52rem;
  line-height: 1.2;
}

.formula__den {
  padding: 4rem 6rem 0;
  font-size: 16.52rem;
  line-height: 1.2;
}

/* кліренс креатиніну — у макеті дрібніший */
.formula--sm .formula__label {
  font-size: 16rem;
}

.formula--sm .formula__num,
.formula--sm .formula__den {
  font-size: 14rem;
}

.formula__note,
.formula + p {
  margin-top: 10rem;
}

/* ========================================================== мобільна версія */
@media (max-width: 479px) {
  /* На мобілці крок рядка тут 22, як і в статтях. На десктопі лишається 1.4:
     сторінка «Лікарям» сходиться з макетом саме при ньому (перевірено
     заміром: 1.4 → +0.19 %, 22 → −0.54 %). */
  .spec-card__name,
  .accordion__body,
  .data-table__cell,
  .data-table__note {
    line-height: 22rem;
  }

  .page-hero {
    padding: 60rem 0;
  }

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

  .page-hero__content {
    margin-top: 0;
  }

  .spec-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* У мобільному макеті таблиця не має рядка-шапки: кожен рядок стає блоком,
     де перша комірка — назва, а решта під нею. Заголовки колонок на такій
     ширині все одно нечитабельні. */
  /* У мобільному макеті шапка стоїть НАД таблицею: «Параметр» і «Формула»
     одне під одним, по центру, кожне відбите червоною лінією. На десктопі
     ці ж комірки стоять зліва і справа — там вони заголовки колонок. */
  .data-table__row--head {
    display: block;
    padding-bottom: 0;
    border-bottom: 0;
    text-align: center;
  }

  .data-table__row--head .data-table__cell {
    padding-bottom: 15rem;
    border-bottom: 1rem solid rgba(189, 32, 37, 0.5);
  }

  .data-table__row--head .data-table__cell + .data-table__cell {
    padding-top: 20rem;
  }

  /* Правила з [style*="--table-cols:N"] важчі за простий клас, тому
     одноколонковий режим треба повторити з тією ж вагою — інакше на мобілці
     лишається десктопна сітка і таблиця вилазить за екран. */
  .data-table__row,
  .data-table[style*="--table-cols:2"] .data-table__row,
  .data-table[style*="--table-cols:3"] .data-table__row,
  .data-table[style*="--table-cols:4"] .data-table__row {
    grid-template-columns: 1fr;
    gap: 4rem;
  }

  .data-table__row .data-table__cell:first-child {
    font-weight: 600;
  }

  /* «Важливі формули» в мобільному макеті 20 і по центру: рядок там 185
     завширшки проти 228 при 24. Голови акордеонів лишаються 24. */
  .article__h2 {
    font-size: 20rem;
    text-align: center;
  }

  /* Десктопне звуження до 20 тут не діє: у мобільному макеті між заголовком
     і таблицею ті самі 40, що й між рештою блоків. */
  .page-hero__content > .article__h2 {
    margin-bottom: 0;
  }

  .article__subhead {
    font-size: 20rem;
  }

  .accordion__head {
    font-size: 24rem;
  }

  .accordion__head::after {
    width: 20rem;
    height: 10rem;
  }

  /* таблиці на вузькому екрані — картками, без горизонтального скролу */
  .data-table {
    gap: 20rem;
    padding: 20rem 16rem;
  }

  .data-table__row,
  .data-table--effects .data-table__row {
    grid-template-columns: 1fr;
    gap: 6rem;
  }

  /* Лінії між рядками в мобільному макеті червоні (той самий #BD2025
     наполовину), а не сірі. Шапка тут НЕ ховається — вона стоїть над
     таблицею, правило вище.

     Сама шапка з-під цього правила виведена: її комірки вже мають власну
     лінію знизу, і разом виходило дві смуги поспіль під останнім заголовком
     («Вид операції», «Формула та пояснення»). */
  .data-table__row:not(:last-child):not(.data-table__row--head) {
    padding-bottom: 20rem;
    border-bottom: 1rem solid rgba(189, 32, 37, 0.5);
  }

  .data-table__cell:first-child {
    font-weight: 600;
  }

  .data-table--effects .data-table__row {
    grid-template-columns: 1fr 1fr;
  }
}


/* Таблиця всередині статті — це не картка, як на сторінці «Лікарям»,
   а проста сітка тексту: у макеті ні рамки, ні полів, крок рядка 40
   (22 висота рядка + 18 проміжок), колонки за координатами з макета. */
.article-body .data-table {
  gap: 18rem;
  padding: 0;
  border: 0;
  background: none;
}

.article-body .data-table__row {
  grid-template-columns: 115rem 178rem 107rem 107rem 1fr;
  gap: 0;
}

.article-body .data-table__row--head {
  padding-bottom: 0;
  border-bottom: 0;
  text-align: left;
}

/* ========================================== таблиці в розділах на мобілці */
@media (max-width: 479px) {
  /* «Розподіл води»: у макеті поля 30 зверху й 16 з країв, а не десктопні
     52/40 — на 375 вони з'їдали третину ширини. */
  .accordion__body .data-table[style*="--table-cols:2"] {
    padding: 30rem 16rem;
  }

  /* «Основна спрямованість» лишається чотириколонковою, як на десктопі:
     розкладати її в стовпчик безглуздо — сенс саме в порівнянні трьох
     ефектів поруч. Тому таблиця звужується до екрана, а нутрощі
     прокручуються вбік. */
  .accordion__body .data-table[style*="--table-cols:4"] {
    overflow-x: auto;
    padding: 30rem 16rem;
    -webkit-overflow-scrolling: touch;
  }

  /* Ширини задані за найдовшим текстом, а не на око: «Фотомодифікація крові»
     потребує 202, а найширший заголовок — англійське «Immunocorrection», 167.
     Ширину беремо під довшу з двох мов, інакше переклад ламає верстку. */
  .accordion__body .data-table[style*="--table-cols:4"] .data-table__row {
    grid-template-columns: 210rem repeat(3, 170rem);
    gap: 12rem;
    min-width: 756rem;
  }

  /* Шапку тут не розкладаємо в стовпчик: у цій таблиці вона така сама, як на
     десктопі, бо колонки лишились колонками. */
  .accordion__body .data-table[style*="--table-cols:4"] .data-table__row--head {
    display: grid;
    padding-bottom: 12rem;
    border-bottom: 1rem solid rgba(189, 32, 37, 0.5);
    text-align: right;
  }

  /* Верхній відступ 20 стояв лише на комірках з другої по четверту — через
     нього «Детоксикація» й сусіди опускались нижче за «Вид операції».
     Знімаємо, щоб усі заголовки стояли на одній висоті. */
  .accordion__body .data-table[style*="--table-cols:4"] .data-table__row--head .data-table__cell {
    padding-top: 0;
    padding-bottom: 0;
    border-bottom: 0;
  }

  .accordion__body .data-table[style*="--table-cols:4"] .data-table__note {
    min-width: 756rem;
  }
}