/* Секції головної: cases, services, us.
   Всі позиції звірені з макетом (файл jnQi5OiCBnfR3kcJUuIjUt, вузол 5474:3). */

/* Ведуча фраза темна, решта приглушена — наскрізний патерн у текстах макета */
.lead { color: var(--c-text); }

/* ================= cases ================= */
/* Десктоп: 3 колонки по 408 (4 колонки сітки), ґатер 24, між рядами 48.
   Мобільний: одна колонка 343, крок 48. */
.s-cases__grid {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: var(--gutter);
  row-gap: 48px;
}

.case a { display: block; }

.case__cover {
  display: block; /* span за замовчуванням рядковий, aspect-ratio на ньому не працює */
  position: relative;
  overflow: hidden;
  aspect-ratio: 408 / 544;
  margin-bottom: 12px;
}

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

/* У слот ховера лягає картинка або відео — те, що є для конкретного кейсу.
   Лежить поверх обкладинки і проявляється на наведенні. Відео ставиться
   з `preload="none"`: до першого наведення не качається жодного байта,
   на тачскрінах не качається взагалі. */
.case__hover {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}

/* Обкладинки без ховера на наведенні злегка темніють */
.case__cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(0 0 0 / 10%);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
  pointer-events: none;
}

/* Там, де відео є, затемнення не потрібне — його замінює сам ролик */
.case__cover:has(.case__hover)::after { content: none; }

@media (hover: hover) {
  .case:hover .case__hover { opacity: 1; }
  .case:hover .case__cover::after { opacity: 1; }
}

.s-cases__more {
  grid-column: 1 / -1;
  margin-top: 48px;
  text-align: center;
}

@media (max-width: 767px) {
  .s-cases__grid { grid-template-columns: 1fr; }
  .case__cover { aspect-ratio: 343 / 457; }
}

/* ================= services ================= */
/* Десктоп: три текстові картки зліва (колонки 3–6), медіа справа (7–10).
   Ліва колонка тягнеться рівно по висоті правого візуалу — картки ділять її
   порівну, відступ 24 між ними лишається сталим.
   Мобільний: спершу медіа, під ним картки — порядок із мобільного макета. */
.s-services__list {
  grid-column: 3 / span 4;
  display: flex;
  flex-direction: column;
  gap: var(--gutter);
}

.s-services__card {
  /* font має стояти ДО line-height: скорочений запис скидає інтерліньяж,
     і поставлений після він затирає наше значення */
  font: inherit;
  letter-spacing: inherit;
  line-height: var(--lh-tight);

  /* Рівні картки незалежно від кількості тексту: basis 0 ділить висоту на три,
     min-height знімає заборону стискатись нижче вмісту. При інтерліньяжі 24
     найдовший текст займає 5 рядків = 164 з падінгами, тобто влазить у 165. */
  flex: 1 1 0;
  min-height: 0;

  /* Кнопка центрує вміст по вертикалі власним внутрішнім механізмом, і display:block
     його не знімає. Робимо картку явним контейнером із притисканням угору —
     текст тяжіє до верхнього лівого кута, зайве місце лишається знизу. */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;

  padding: 22px;
  border-radius: var(--radius);
  background: var(--c-surface);
  text-align: left;
  transition: background-color var(--dur) var(--ease);
}

/* Підсвічування тільки від справжнього наведення або фокуса з клавіатури.
   Позначку активності сюди не додаємо: вона лишається на картці й після того,
   як курсор пішов з блоку, і підсвітка залипала б на першому пункті. */
.s-services__card:hover,
.s-services__card:focus-visible { background: var(--c-surface-2); }

.s-services__media {
  grid-column: 7 / span 4;
  position: relative;
  overflow: hidden;
  aspect-ratio: 408 / 544;
}

/* Три ролики лежать стопкою, видно лише активний */
.s-services__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.s-services__video.is-active { opacity: 1; }

.s-services__label {
  position: absolute;
  top: 29px;
  left: 38px;
  z-index: 1;
  color: var(--c-on-accent);
}

@media (max-width: 767px) {
  .s-services { display: flex; flex-direction: column; gap: var(--gutter); }
  .s-services__media { order: -1; aspect-ratio: 343 / 457; } /* медіа першим */
  .s-services__card { flex: none; }  /* на мобільному висоту задає текст */
}

/* ================= clients ================= */
/* Десктоп: 3 колонки по 408, ґатер 24, між рядами 48. Медіа 16:9, підпис через 12.
   Мобільний: одна колонка 343. */
.s-clients__grid {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: var(--gutter);
  row-gap: 48px;
}

.client__media {
  display: block;
  position: relative;
  overflow: hidden;
  aspect-ratio: 408 / 228.7;
  margin-bottom: 12px;
}

.client__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 767px) {
  .s-clients__grid { grid-template-columns: 1fr; }
  .client__media { aspect-ratio: 343 / 192.3; }
}

/* ================= us ================= */
/* Портрети — одна скруглена плашка 408×206 з радіусом 20, усередині два фото
   впритул. Скруглення вішаємо на самі фото, а не на контейнер: контейнер із
   overflow:hidden обрізав би поп-апи, які виїжджають за його межі. */
.s-us__portraits {
  grid-column: 5 / span 4;
  display: flex;
}

.bio:first-child .bio__photo { border-radius: 20px 0 0 20px; }
.bio:last-child  .bio__photo { border-radius: 0 20px 20px 0; }

.s-us__cta {
  grid-column: 5 / span 4;
  margin-top: 48px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--gutter);
  align-items: center;
}

/* У макеті цей текст має інтерліньяж 120%, а не 130% як звичайні абзаци */
.s-us__cta p { line-height: var(--lh-tight); }

.bio {
  position: relative;
  flex: 1 1 0;
  aspect-ratio: 204 / 206;
}

.bio__photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Підпис і «i» стоять по краях уздовж низу фото, поля 22 */
.bio__row {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 48.6px;
  padding-inline: 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--c-on-accent);
}

/* Кружечок «i»: сам значок білий на 70%, під ним розмиття фону —
   так він читається і на світлому, і на темному кадрі */
.bio__toggle {
  position: relative;
  width: 26px;
  height: 26px;
  min-width: 26px;
  padding: 0;
  border-radius: 50%;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.bio__toggle svg { display: block; width: 100%; height: 100%; }

/* Зона натискання 44px — у сам кружечок 26px пальцем не влучити */
.bio__toggle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}

.bio__card {
  width: 408px;
  padding: 22px;
  line-height: var(--lh-tight);
}

/* Відкритий поп-ап має перекривати сусідній портрет, а не ховатись під ним */
.bio[data-open="true"] { z-index: var(--z-popup); }

/* Лівий поп-ап іде вліво, правий вправо — позиції з макета */
.bio:first-child .bio__card { left: -324px; }
.bio:last-child  .bio__card { left: 120px; }
.bio__card { bottom: calc(100% - 50px); }

@media (max-width: 767px) {
  .s-us__portraits, .s-us__cta { grid-column: 1 / -1; }
  .bio:first-child .bio__photo { border-radius: 18px 0 0 18px; }
  .bio:last-child  .bio__photo { border-radius: 0 18px 18px 0; }
  .bio { aspect-ratio: 171.5 / 173; }
  .bio__row { height: 41px; padding-inline: 17px; }
  .bio__toggle { width: 22px; height: 22px; min-width: 22px; }

  /* На телефоні біо відкривається нижньою шторкою, а не хмаркою над портретом:
     хмарку зрізало верхом екрана, бо портрети стоять низько. Шторка привʼязана
     до низу вікна, тому не обрізається й не потребує прокрутки. */
  .bio__card {
    position: fixed;
    inset: auto 0 0 0;
    left: 0 !important;
    width: auto;
    max-width: none;
    padding: 24px var(--margin) calc(24px + env(safe-area-inset-bottom));
    border-radius: 18px 18px 0 0;
    background: var(--c-bg);
    box-shadow: 0 -8px 40px rgb(0 0 0 / 12%);
    transform: translateY(100%);
    transition: transform var(--dur) var(--ease), visibility var(--dur);
    z-index: var(--z-popup);
  }

  .bio[data-open="true"] .bio__card { transform: translateY(0); }

  /* Затемнення позаду шторки, щоб текст не змішувався зі сторінкою */
  .bio__card::before {
    content: "";
    position: fixed;
    inset: 0;
    bottom: 100%;
    background: rgb(0 0 0 / 20%);
    opacity: 0;
    transition: opacity var(--dur) var(--ease);
    pointer-events: none;
  }
  .bio[data-open="true"] .bio__card::before { opacity: 1; }

  /* Наведення на телефоні не існує — шторку відкриває лише тап */
  .bio:hover .bio__card { opacity: 0; visibility: hidden; }
  .bio[data-open="true"] .bio__card { opacity: 1; visibility: visible; }
}