/* ==========================================================================
   Шаблон статті
   ========================================================================== */

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

.article-layout {
  display: flex;
  align-items: flex-start;
  gap: 104rem;
}

.article-body {
  display: flex;
  flex-direction: column;
  gap: 64rem;
  width: 736rem;
  flex-shrink: 0;
}

/* між крихтами і H1 у макеті 64 — тому окремих відступів не додаємо */

/* --------------------------------------------------------- типографіка */
/* Відступи в макеті тримаються на трьох числах, і в розмітці їх немає —
   вона лишається чистою:

       20   проміжок між блоками            gap контейнера
     + 22   додатково під заголовком        margin-bottom у .article__h2
     + 44   додатково навколо ілюстрації    margin у .article__figure

   Отже під заголовком виходить 42, а навколо картинки — 64. */
.article__content {
  display: flex;
  flex-direction: column;
  gap: 20rem;
}

/* Під заголовком додатково 22 — разом із проміжком це 42.
   Пробував ставити 18/2 (щоб порожній рядок збігався з кеглем заголовка) —
   за заміром вийшло гірше: Онкогематологу з −2.25 % на −3.26 %, бо частина
   заголовків у макеті порожнього рядка під собою не має. */
.article__content > .article__h2 {
  margin-bottom: 22rem;
}

.article__content > .article__figure {
  margin-top: 44rem;
  margin-bottom: 44rem;
}

/* Стара розмітка з блоків — лишається для сумісності. */
.article__section {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.article__spacer {
  flex-shrink: 0;
}

/* рядки одного абзацу — без відступів між собою */
.article__lines {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.article__section p,
.article__content p,
.article__list-group p {
  font-weight: 500;
  font-size: 16rem;
  /* у макеті висота рядка рівно 22, а не 22.4 (=16×1.4): перевірено на вузлах
     110/5, 198/9 і 264/12 — усі діляться на 22 без остачі */
  line-height: 22rem;
  letter-spacing: 0.8rem;
}


/* крок рядка заголовка в макеті рівно 38 (перевірено по y-координатах
   рядків у SVG-експорті), а не 38.4 = 32 × 1.2 */
/* У макеті заголовки статті ЧОРНІ — у SVG-експорті fill="black".
   Червоним лишається тільки H1 сторінки. */
.article__h2 {
  font-weight: 500;
  font-size: 32rem;
  line-height: 38rem;
  color: var(--c-black);
}

/* Порожній рядок під заголовком тепер відтворюється розпіркою в розмітці,
   тому власного відступу заголовку не треба. */

.article__section ul,
.article__content ul,
.article__section ol,
.article__content ol,
.article__list-group ul,
.article__list-group ol {
  display: flex;
  flex-direction: column;
  /* У макеті два різні види списків, і на око вони однакові:
       — пронумеровані вручну («1. », «2. ») — це окремі абзаци, відступ 20;
       — зроблені засобами Figma — рядки одного абзацу, відступу немає.
     За замовчуванням перший вид, другий вмикається класом --tight. */
  gap: 20rem;
  margin: 0;
  padding-left: 22rem;
  font-weight: 500;
  font-size: 16rem;
  line-height: 22rem;
  letter-spacing: 0.8rem;
}

/* Частина заголовків у макеті намальована розміром звичайного тексту —
   більший у них лише міжрядковий інтервал. Визначається за фактичним
   переносом рядка в макеті, а не за атрибутом експорту. */
.article__h2--sm {
  font-size: 16rem;
  letter-spacing: 0.8rem;
}

.article__section ul,
.article__content ul,
.article__list-group ul {
  list-style: disc;
}

/* список як рядки одного абзацу — між пунктами нічого */
.article__list--tight {
  gap: 0 !important;
}

.article__section ol,
.article__content ol,
.article__list-group ol {
  list-style: decimal;
}

.article__list-group {
  display: flex;
  flex-direction: column;
  gap: 12rem;
}

.article__list-title {
  font-weight: 600;
}

/* У макеті текстові блоки статей для лікарів вужчі за колонку: 715 проти 735
   у послугах. Через ці 21 px текст лягає в іншу кількість рядків, і без
   цього сторінка з макетом не зійдеться. Колонка й сайдбар при цьому
   однакові в обох розділах — вужчий саме текст. */
.article--likaryam .article__section,
.article--likaryam .article__content {
  max-width: 715rem;
}

/* Таблиця в статті. Стилі таблиць живуть у likaryam.css, який на сторінках
   статей не підключається, тому потрібне повторено тут. У макеті це проста
   сітка тексту: ні рамки, ні полів, крок рядків 40 і 51. */
.article-body .data-table {
  display: flex;
  flex-direction: column;
  gap: 24rem;
  padding: 0;
  border: 0;
  background: none;
}

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

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

/* Рядки в клітинці стоять окремими абзацами через 20 — той самий крок, що
   й у тексті статті. Перенесені рядки одного абзацу лишаються щільними. */
.article-body .data-table__cell {
  display: flex;
  flex-direction: column;
  gap: 20rem;
  font-weight: 500;
  font-size: 16rem;
  line-height: 22rem;
  letter-spacing: 0.8rem;
}

.article-body .data-table__cell p {
  margin: 0;
}

/* Захист від картинки без класу: у перекладених статтях розмітка приходить
   із <img width="1220"> і без .article__image, тому сторінка їхала вбік. */
.article__content img,
.article__section img {
  max-width: 100%;
  height: auto;
}

.article__image {
  display: block;
  width: 610rem;
  max-width: 100%;
  overflow: hidden;
  border-radius: 14rem;
}

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

/* --------------------------------------------------------- сайдбар */
/* У макеті сайдбар починається на рівні H1, а не крихт: плашка стоїть на
   y=250 при вмісті з y=164, тобто нижче на 86 — це висота крихт (22)
   плюс проміжок колонки (64). Виміряно по експорту фрейму. */
.article-sidebar {
  margin-top: 86rem;
  position: sticky;
  top: 24rem;
  width: 400rem;
  flex-shrink: 0;
}

.article-sidebar__list {
  display: flex;
  flex-direction: column;
}

/* Згорнутий рядок сайдбара потрібен лише на мобілці. */
.article-sidebar__current {
  display: none;
}

.article-sidebar__box > summary::-webkit-details-marker,
.article-sidebar__box > summary::marker {
  display: none;
  content: '';
}

.article-sidebar__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40rem;
  min-height: 62rem;
  padding: 20rem;
  border-radius: 20rem;
  font-weight: 500;
  font-size: 16rem;
  line-height: 1.4;
  letter-spacing: 0.8rem;
  transition: background-color 0.25s ease, color 0.25s ease;
}

.article-sidebar__item:hover {
  background: var(--c-bg-grey);
}

.article-sidebar__item.is-current {
  font-weight: 600;
  color: var(--c-red);
}

.article-sidebar__arrow {
  display: flex;
  width: 24rem;
  height: 24rem;
  flex-shrink: 0;
  transition: transform 0.25s ease;
}

.article-sidebar__arrow svg {
  width: 100%;
  height: 100%;
}

.article-sidebar__item:hover .article-sidebar__arrow {
  transform: translate(2rem, -2rem);
}

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

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

  /* align-items: flex-start із десктопного правила в колонковому напрямку
     змушує дітей брати ширину за вмістом. Через це стаття з картинкою
     1220 розтягувалась на 572 і сторінка їхала вбік. */
  .article-layout {
    flex-direction: column;
    align-items: stretch;
    gap: 40rem;
  }

  /* Дозволяємо колонці стискатися вужче за вміст — інакше картинка з
     атрибутом width="1220" розпирає сторінку. Тільки на мобілці: на
     десктопі це звужувало колонку, і заголовки переносилися на два рядки. */
  .article__content,
  .article__section {
    min-width: 0;
  }

  /* У макеті зміст стоїть ПІД заголовком, а в розмітці він сусід статті.
     Робимо статтю прозорою для розкладки: її діти стають у той самий потік,
     що й сайдбар, і порядок вибудовується без зміни шаблону. */
  .article-body {
    display: contents;
  }

  .article-body > * {
    order: 3;
  }

  .article-body .breadcrumbs {
    display: none;
  }

  /* Кеглі зняті з макета: рядок «Гіпохлорит натрію» там 266 проти 308 при 32,
     тобто 28. Для h2 рядок «Способи застосування» 237 проти 288 при 24 — це 20,
     а крок між рядками 28 (у макеті чорнило на 490 і 518). */
  .page-title {
    order: 1;
    font-size: 28rem;
  }

  .article__h2 {
    font-size: 20rem;
    line-height: 28rem;
  }

  /* Правило нижче за однакової специфічності перебиває --sm, тому розмір
     дрібного заголовка треба повторити й тут. */
  .article__h2--sm {
    font-size: 16rem;
  }

  /* Широка таблиця не має розпирати сторінку — прокручується всередині себе. */
  .article-body .data-table {
    overflow-x: auto;
  }

  .article-body .data-table__row {
    min-width: 507rem;
  }
  .article__image {
    width: 100%;
  }

  /* Сайдбар на мобілці — згорнутий: у макеті це один рядок 343×64 з назвою
     поточного матеріалу, список розкривається дотиком. Розгорнутим він
     додавав до 704 px на сторінку — це була найбільша розбіжність мобілки. */
  .article-sidebar {
    margin-top: 0;
    position: static;
    order: 2;
    width: 100%;
  }

  .article-sidebar__current {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40rem;
    min-height: 62rem;
    padding: 20rem 10rem;
    border-radius: 20rem;
    background: var(--c-bg-grey);
    font-weight: 600;
    font-size: 16rem;
    line-height: 22rem;
    letter-spacing: 0.8rem;
    /* У макеті згорнутий рядок змісту чорний — червоним він там не буває
       навіть тоді, коли показує поточний матеріал. */
    color: var(--c-black);
    cursor: pointer;
    list-style: none;
  }

  /* у макеті рядок фіксованої висоти, тому довга назва не переносить його */
  .article-sidebar__current > span:first-child {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .article-sidebar__box[open] > .article-sidebar__current .article-sidebar__arrow {
    transform: rotate(90deg);
  }

  .article-sidebar__item {
    padding: 20rem 10rem;
  }
}