/* ==========================================================================
   Відеогалерея
   ========================================================================== */

.page-hero {
  padding: 164rem 0 96rem;
}

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

/* Заголовок цієї сторінки в макеті крупніший за решту: перший рядок там
   1122 завширшки, другий 307. При 48 виходить 1024 і 282 — і «для» ще
   вміщається в перший рядок. При 52 воно вміщається впритул (1223 з 1240),
   тому перенос усе одно не той; 53 дає 1247 і слово переїжджає, як у макеті. */
.page-title {
  font-size: 53rem;
  /* блок заголовка в макеті 116 на два рядки, тобто крок 58 */
  line-height: 58rem;
}

/* Сітка й ширини плиток — як у макеті: чотири колонки по 295, ролики на
   двох, тексти на двох-трьох. Змінилася тільки висота ряду: під вертикальні
   ролики вона 524 замість 379 — це висота кадру 9:16 при ширині колонки. */
.video-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 524rem;
  gap: 40rem 20rem;
}

/* Нижня стрічка: та сама четвірка в ряд, що й у макеті, але ряд тепер 524 —
   висота вертикального кадру при ширині колонки. При колишніх 187 кадр
   лишався нульової висоти, бо тягнувся у 100% від ряду «за вмістом». */
.video-grid--strip {
  grid-auto-rows: 524rem;
  gap: 24rem 20rem;
}

.video-grid--strip .video-item--horizontal {
  grid-column: span 1;
}

/* Плитка сама каже, скільки колонок займає. Це головніше за орієнтацію:
   у макеті в одному ряду стоїть вертикальний ролик на одну колонку і текст
   на три, а в наступному — текст на дві і горизонтальний ролик на дві. */
.video-grid .video-item--span,
.video-note {
  grid-column: span var(--span, 2);
}

/* Текстовий блок між роликами: питання червоним, під ним відповідь.
   У макеті текст стоїть посередині висоти свого ряду, а не притиснутий
   до верхнього краю. */
.video-note {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20rem;
}

/* Ряд «ролик + питання» бере три колонки з чотирьох, тож друга плитка
   кріпиться до правого краю, а просвіт лишається між ними — як у макеті.
   Сторони чергуються самі: їх задає порядок плиток у полі. */
.video-grid > .is-row-end {
  grid-column-end: -1;
}

/* Кегль знято з макета двома незалежними мірками: рядок «Як виконується
   плазмаферез?» там 513 завширшки, а чорнило 29 заввишки. Обидві сходяться
   на 31 — при 30 рядок коротший на 21, при 32 довший на 12. */
.video-note__title {
  font-weight: 600;
  font-size: 31rem;
  line-height: 1.2;
  color: var(--c-red);
}

.video-note__text {
  display: flex;
  flex-direction: column;
  gap: 20rem;
  font-weight: 400;
  font-size: 16rem;
  line-height: 22rem;
  color: var(--c-black);
}

.video-note__text p {
  margin: 0;
}

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

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

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

  /* Десктопні 53 тут не діють: на 375 «Апаратний» не вміщається в 343 і
     розпирає сторінку вбік. Кегль той самий, що й на решті сторінок. */
  .page-title {
    font-size: 28rem;
    line-height: 1.2;
  }

  /* У мобільному макеті це один стовпчик плиток по 300 з просвітом 40.
     Висота ряду тут мусить бути вільною: текстовий блок довший за ролик
     (у найдовшого 540 проти 379) і в жорсткому ряду просто обрізався. */
  /* На мобілці висоту диктує пропорція, а не число: колонка тут 343, і
     вертикальний кадр виходить 610. */
  .video-grid,
  .video-grid--strip {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    gap: 40rem;
  }

  .video-grid .video-item--vertical .video-item__frame {
    height: auto;
    aspect-ratio: 9 / 16;
  }

  /* Ширину плитки задає .video-grid .video-item--span, і це правило важче за
     просте «>*». Через нього на мобілці лишалося span 2, сітка добудовувала
     другу колонку, і в неї йшов просвіт 40 — текст ставав 303 замість 343.
     Тому тут селектор такої самої ваги. */
  .video-grid > .video-item,
  .video-grid > .video-note {
    grid-column: 1 / -1;
  }

  /* У мобільному макеті в кожному ряду першим іде ролик, а вже під ним текст.
     На десктопі текст подекуди стоїть зліва (ряд «ТЕКСТ + ролик»), і в один
     стовпчик така пара перевертається. Порядок рахуємо від номера ряду, тому
     правило не залежить від того, скільки плиток і де вони стоять. */
  .video-grid > .video-item {
    order: calc(var(--row, 1) * 10);
  }

  .video-grid > .video-note {
    order: calc(var(--row, 1) * 10 + 1);
  }



  .video-item__play {
    width: 44rem;
    height: 31rem;
  }

}