/* ==========================================================================
   Zoryana / portfolio (Figma 678:14854 / [M] 782:3115)

   Герой: текст ліворуч, знімок 678×806 праворуч упритул до краю контейнера.
   Колаж: 4 колонки по 328px з кроком 12, всередині колонки крок 20.
   Висоти карток різні й задані інлайн через `--h` — це значення з макета.
   Порожні комірки з монограмою AK у макеті теж мають свою висоту.
   ========================================================================== */

.zh {
  position: relative;
  overflow: hidden;
  background-color: var(--color-beige);
  color: var(--color-dark);
}

.zh__container {
  position: relative;
  min-height: 50rem; /* 800px */
  padding-inline: 5.9375rem var(--gutter); /* 95px — відступ тексту в макеті */
}

.zh__media {
  display: block;
  max-width: none;
}

.zh__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Коробка нижча за кадр — тримаємо верх, щоб не зрізати обличчя. */
  object-position: top;
}

.zh__content {
  position: relative;
  z-index: 2;
}

.zh__eyebrow {
  color: var(--color-wine);
}

.zh__title {
  color: var(--color-dark);
}

.zh__lead {
  color: var(--color-dark);
}

/* --------------------------------------------------------------------------
   Колаж
   -------------------------------------------------------------------------- */
.pf {
  background-color: var(--color-dark);
  color: var(--color-ivory);
}

.pf__title {
  text-align: center;
  color: var(--color-ivory);
}

.pf-grid {
  display: grid;
  gap: 0.75rem; /* 12px між колонками */
}

.pf-col {
  display: flex;
  flex-direction: column;
  gap: 1.25rem; /* 20px */
  list-style: none;
}

/* Висота комірки — з макета, у частках ширини колонки, тому колаж
   масштабується разом зі сторінкою і не має жодного фіксованого px. */
.pf-cell {
  aspect-ratio: 328 / var(--h);
  overflow: hidden;
}

/* Обгортка-посилання під лайтбокс: комірка задає пропорцію, тож посилання
   мусить заповнити її цілком, інакше знімок ляже за висотою вмісту. */
.pf-cell__link {
  display: block;
  width: 100%;
  height: 100%;
  cursor: zoom-in;
}

.pf-cell img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease-out);
}

.pf-cell__link:hover img {
  transform: scale(1.04);
}

/* Порожня комірка з монограмою — у макеті стоїть по центру пропуску. */
.pf-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 328 / var(--h);
}

.pf-mark img {
  width: 2.6875rem; /* 43px */
  height: auto;
}

/* --------------------------------------------------------------------------
   Десктоп
   -------------------------------------------------------------------------- */
@media (min-width: 48em) {

  /* Ширини у відсотках, а не в rem: на 1440 вони дають точні значення
     макета (95 / 678 / 597 / 544), а на всіх вужчих ширинах колонки
     звужуються пропорційно, тому знімок не наїжджає на текст і нічого
     не доводиться ні складати, ні підкладати під текст. */
  .zh__container {
    padding-inline: 6.5972% var(--gutter); /* 95 / 1440 */
  }

  /* Знімок 678×806 виступає на 6px над секцією і впирається в правий край. */
  .zh__media {
    position: absolute;
    top: -0.375rem;
    right: 0;
    width: 47.0833%; /* 678 / 1440 */
    height: 50.375rem; /* 806px */
  }

  /* Вертикаль героя з макета: скрипт 263, «ZORYANA» 307, абзац 403.
     Бокс скрипта — 30px (line-height 0.6). */
  .zh__content {
    max-width: 45.958%; /* 597 з 1299 — ширини контенту контейнера */
    padding-top: 17.3125rem; /* 277px */
  }

  .zh__lead {
    max-width: 91.122%; /* 544 з 597 — відсоток від .zh__content, не від контейнера */
    margin-top: 1.5rem; /* gap 24: заголовок кінчається на 379, текст на 403 */
  }

  .zh__cta {
    min-width: 15rem; /* 240px */
    margin-top: 2.5rem; /* 16 (padding текстового блоку) + 24 (gap) */
  }

}

/* Колаж перемикається раніше за героя — на 768px він уже вміщає 4 колонки. */
@media (min-width: 48em) {
  .pf__container {
    padding-block: 7.4375rem 7.5rem; /* заголовок на 119, низ 120 */
  }

  .pf__title {
    margin-bottom: 2.625rem; /* 42px до колажу */
  }

  .pf-grid--wide {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .pf-grid--narrow {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   Мобайл 393
   -------------------------------------------------------------------------- */
@media (max-width: 47.99em) {
  .zh {
    overflow: hidden;
  }

  .zh__container {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding-inline: 1.0625rem; /* 17px — контейнер героя в мобільному макеті */
  }

  /* Знімок завжди на всю ширину екрана, висота 477px з макета.
     Спосіб розміщення різний і задається нижче: до 393 — як у макеті
     (абсолютно, кнопка поверх нього), вище — у потоці під текстом. */
  .zh__media {
    order: 2;
    width: calc(100% + 2.125rem);
    height: 29.8125rem; /* 477px */
    margin-inline: -1.0625rem;
  }

  /* Контейнер героя в макеті починається на 69 — відразу під логотипом. */
  .zh__content {
    display: flex;
    flex: 1;
    flex-direction: column;
    order: 1;
    padding-top: 4.3125rem; /* 69px */
  }

  .zh__eyebrow {
    align-self: center;
    /* Бокс Italianno у макеті вищий за наш line-height 0.6 — компенсуємо,
       щоб «ZORYANA» стало на 146, як у макеті. */
    margin-bottom: 0.875rem;
    text-align: center;
  }

  .zh__title {
    align-self: center;
  }

  .zh__lead {
    margin-top: 1.5rem; /* 24px — крок Frame 105 у макеті */
  }

  .zh__cta {
    color: var(--color-dark-soft);
    background-color: var(--color-ivory);
  }

  .zh__cta:hover {
    color: var(--color-ivory);
    background-color: var(--color-dark-soft);
  }

  .pf__container {
    padding-block: 4.375rem; /* 70px */
  }

  .pf__title {
    margin-bottom: 2.625rem;
  }

  .pf-grid--wide {
    display: none;
  }

  /* Дві рівні колонки з кроком 15px: на 393 це дає точно 173px, як у
     макеті, а на 394–767 колонки тягнуться, а не розходяться до країв
     (фіксовані 173px зі space-between лишали посередині пусту смугу). */
  .pf-grid--narrow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9375rem;
  }

  .pf-grid--narrow .pf-col {
    gap: 1rem; /* 16px */
  }

  /* Комірки лишаються на базовому 328 / var(--h): --h генерується з самого
     знімка в одиницях, де колонка дорівнює 328 (див. single-artist.php), і це
     чиста пропорція — ширина колонки на неї не впливає. Поділ на 173 робив
     комірку в 328/173 ≈ 1.9 раза вищою за знімок, через що колаж виглядав
     розтягнутим.

     Монограми — інша річ: їхні --h (119) зняті з мобільного макета, де
     колонка саме 173, тож для них перевизначення лишається. */
  .pf-grid--narrow .pf-mark {
    aspect-ratio: 173 / var(--h);
  }

  /* На вузькому екрані комірки однакової висоти — рядки вирівнюються, і
     колаж читається як сітка, а не як драбина. 2:3 — найближче до медіани
     завантажених знімків (1.43) і збігається з двома найчастішими
     форматами (1.33 і 1.50), тож обрізає менше за будь-яке інше кругле
     число. Решту добирає object-fit: cover. */
  .pf-grid--narrow .pf-cell {
    aspect-ratio: 2 / 3;
  }
}

/* --------------------------------------------------------------------------
   До 480px — точно за макетом [M] Zoryana/ portfolio (782:3115).
   На цьому діапазоні сайт масштабується пропорційно від 393, тому
   композиція тримається на будь-якій ширині телефона.
   Герой 873, знімок 396×477 на (−3, 397), контейнер на (17, 69) з
   фіксованим кроком 335 до кнопки — вона лежить поверх знімка.
   -------------------------------------------------------------------------- */
@media (max-width: 30rem) {
  .zh__container {
    min-height: 54.5625rem; /* 873px */
  }

  .zh__media {
    position: absolute;
    right: 0;
    bottom: 0;
    left: -0.1875rem; /* −3px */
    width: auto;
    margin-inline: 0;
  }

  /* Знімок притиснутий до низу секції, тож резервуємо під нього стільки ж
     місця в потоці тексту. Без цього смуга знімка завжди починалася на
     873 − 477 = 396, і в артистів із довшим текстом (Aisa, Maria, Zoryana)
     останні рядки лягали моделі на обличчя. Тепер довший текст просто
     розсуває секцію, і знімок їде вниз разом із нею. */
  .zh__content {
    padding-bottom: 29.8125rem; /* 477px — висота знімка */
  }

  /* Кнопка лежить поверх знімка, тому виходить із потоку тексту: у ньому
     вона опинилася б над зарезервованою смугою, а не на кадрі.
     Зазор до низу секції — 20px на будь-якій довжині тексту. */
  .zh__cta {
    position: absolute;
    right: 0;  /* нуль від padding-box: бічні 17px уже дає сам контейнер */
    bottom: 1.25rem; /* 20px */
    left: 0;
    z-index: 3;
    min-width: 0;
  }
}

/* --------------------------------------------------------------------------
   481–767: макета для цих ширин немає. Абсолютні величини макета тут не
   тримаються — крок 335 лишав пусту смугу під текстом, а знімок на всю
   ширину при висоті 477 обрізав моделі голову. Тому знімок іде в потоці
   під кнопкою, а кадр тримається за верх.
   -------------------------------------------------------------------------- */
@media (min-width: 481px) and (max-width: 47.99em) {
  .zh__container {
    min-height: 0;
  }

  .zh__cta {
    align-self: flex-start;
    min-width: 15rem;
    margin-top: 2.625rem;
  }

  /* Знімок не обрізаємо: вписуємо по висоті й тримаємо праворуч,
     решту смуги закриває бежевий фон героя. */
  .zh__media img {
    object-fit: contain;
    object-position: right;
  }
}

/* --------------------------------------------------------------------------
   Шапка на світлому герої
   Тут єдиний екран з бежевим фоном під шапкою, тому доки не з'явилася
   темна підкладка (.is-stuck), навігація і кнопка темні — як у макеті.
   Панель мобільного меню лишається темною, тому колір лінків міняємо
   лише там, де вони стоять просто в шапці (від 1200px).
   -------------------------------------------------------------------------- */
.page-portfolio .header:not(.is-stuck) .header__cta {
  color: var(--color-dark);
  border-color: rgba(33, 31, 18, 0.85);
}

.page-portfolio .header:not(.is-stuck) .header__cta:hover {
  color: var(--color-ivory);
  background-color: var(--color-dark);
  border-color: var(--color-dark);
}

.page-portfolio .header:not(.is-stuck) .burger__label {
  color: var(--color-dark);
}

.page-portfolio .header:not(.is-stuck) .burger__line {
  background-color: var(--color-dark);
}

@media (min-width: 75em) {
  .page-portfolio .header:not(.is-stuck) .nav__link {
    color: var(--color-dark);
  }
}

/* Вище 2560px масштабування сайту зафіксоване й .container центрується з
   полями. Знімок героя має лишатися притиснутим до краю екрана, тому
   зсуваємо його на половину поля. */
@media (min-width: 160rem) {
  .zh__media {
    right: calc((100vw - 2560px) / -2);
  }
}