/* Секції головної: 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"`: до першого наведення не качається жодного байта,
   на тачскрінах не качається взагалі. */
/* Обкладинка-відео: грає постійно, поки картка в кадрі (app.js), картинка під
   ним — постер і запасний варіант. На наведенні темніє, як статична. */
.case__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.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: 1023px) {
  .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,
.s-services__card.is-active { background: var(--c-card-hover); }

/* Заголовок і опис — один абзац: картка розкладена стовпчиком, і без спільної
   обгортки кожен шматок тексту ставав окремим рядком */
.s-services__text { display: block; }

.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; }

/* Сегменти вгорі ролика, як у сторіз: скільки роликів і котрий зараз.
   Поточний заповнюється, поки ролик грає; пройдені — повні (app.js). */
.s-services__segs {
  position: absolute;
  top: 24px;
  left: 24px;
  right: 24px;
  z-index: 1;
  display: flex;
  gap: 4px;
}
.s-services__segs > i {
  flex: 1;
  height: 2px;
  border-radius: 2px;
  background: var(--c-seg-track);
  overflow: hidden;
}
.s-services__segs > i > b {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--c-on-accent);
  transform-origin: left;
  transform: scaleX(0);
}


@media (max-width: 1023px) {
  .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: 1023px) {
  .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: 12px; /* разом з кроком сітки 24 — 36 від портретів */
  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 (min-width: 1024px) and (max-width: 1279px) {
  .bio:first-child .bio__card { left: 0; }
  .bio:last-child  .bio__card { left: auto; right: 0; }
  .bio__card { bottom: calc(100% + 12px); width: 300px; }
}

@media (max-width: 1023px) {
  .s-us__portraits, .s-us__cta { grid-column: 1 / -1; }
  .s-us__cta { margin-top: 16px; } /* разом з кроком сітки 16 — 32 від портретів */
  .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,
  .bio__card { display: none; }
}

/* ================= планшет вертикально (700–1023) =================
   Розкладка мобільна, але в одну колонку на великому екрані все ставало
   завеликим: обкладинка кейсу на всю ширину — майже екран заввишки.
   Тому там, де місця на два, ставимо по два. */
@media (min-width: 700px) and (max-width: 1023px) {
  .s-cases__grid { grid-template-columns: repeat(2, 1fr); }
  .s-clients__grid { grid-template-columns: repeat(2, 1fr); }
  /* сервіси: картки ліворуч, ролик праворуч — як на десктопі */
  /* картки тягнуться на висоту ролика й ділять її порівну, як на десктопі;
     нижче за свій текст картка не стискається */
  .s-services { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
  .s-services__card { flex: 1 1 0; }
  .s-services__list { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; gap: var(--gutter); }
  .s-services__media { grid-column: 2; grid-row: 1; order: 0; aspect-ratio: 3 / 4; }
}

/* Горизонтальний планшет і малі ноутбуки: картки сервісів ростуть під текст,
   інакше рівна висота трьох карток обрізала довгий опис */
@media (min-width: 1024px) and (max-width: 1279px) {
  .s-services__card { flex: 1 0 auto; }
}

/* Сервіси на телефоні: ролик, а одразу під ним на білому — опис активного
   пункту. Картки й підпис на ролику сховані; пункти гортаються самі (по
   довжині ролика) і тапом по лівій / правій половині ролика, як у сторіз.
   На планшеті й десктопі опису під роликом немає — там є картки. */
.s-services__caption { display: none; }
@media (max-width: 699px) {
  .s-services__list { display: none; }
  .s-services__caption {
    display: block;
    margin: 0;
    line-height: var(--lh-tight);
  }
}