/**
 * Мобільна гілка — головна: «Як ми ведемо ремонт» (етапи 01–08) і «Відгуки».
 * Макет: фрейм Figma 138:3740, полотно 402, контент 342 (x 30…372).
 *
 * Усі числа зняті піксельно з рендера figma-ref/mobile/138-3740.png
 * (1 px рендера = 1 px макета). Метрики шрифта MuseoSansCyrl, заміряні
 * у браузері: ascent 0.77em, descent 0.23em, cap-height 0.70em — з них
 * рахується зсув «верх лінійного боксу → верх великої літери»:
 *     capOffset = (line-height − font-size) / 2 + 0.07 × font-size
 * Саме тому вертикальні відступи тут не круглі: у макеті заміряне чорнило,
 * а в CSS задається бокс.
 *
 * Секція «Етапи»:  чорнило 6329…7492 (h 1163)
 * Секція «Відгуки»: чорнило 7627…8430.9 (h 803.9)
 */

/* ============================================================== ЕТАПИ 01–08 */

/* Верхній відступ секції.
   Попередня секція («Індивідуальні рішення») закінчується чорнилом на 6182.4,
   верх боксу H2 у макеті — 6324.45 (чорнило 6329 − capOffset 4.55 для 35/39.2).
   6324.45 − 6182.4 = 142.05 */
[data-layout="mobile"] .home .process {
  padding-top: 143.05px;
  padding-bottom: 0;
}

/* --- Фонове фото ---
   У макеті це прямокутник 590.2×647.7 при x=−93, y=6348 — тобто фото накриває
   лише верхню половину секції (до 6995.7), плитки 05–08 стоять на рівному фоні.
   Пропорція така сама, як у десктопного контейнера (1768×1940), тож увесь
   десктопний кроп просто множиться на 590.2/1768 = 0.3338. */
[data-layout="mobile"] .process__media {
  left: -93px;
  top: 165.6px;          /* 6348 − 6182.4 (верх боксу секції) */
  width: 590.2px;
  height: 647.7px;
}
[data-layout="mobile"] .process__media img {
  top: -44.97px;         /* десктопні −134.7 × 0.3338 */
  height: 699.4px;       /* десктопні 2095.2 × 0.3338 */
}

/* --- Вуалі ---
   У мобільному макеті їх дві, а не три. Геометрію знято з рендера так:
   знімок секції з вимкненими вуалями дає «чисте» фото, і для кожного рядка
   рахується непрозорість a = (фото − макет) / (фото − колір вуалі).
   Отримані профілі точно лягають на дві розмиті плити:
     верхня  — ЧОРНА (макет під заголовком темніший за фон #1D1D1D: 1/255
               проти 29/255), прямокутник 6227…6500, гаусів σ 47;
     нижня   — #1D1D1D, верх 6873.6, σ 56.5: фото згасає у фон рівно до 6996,
               де воно й закінчується.
   По горизонталі плити навмисно ширші за полотно: край розмиття має лишитись
   за кадром, інакше по боках з'явиться світліша смуга. */
[data-layout="mobile"] .veils--process .veil--1 {
  left: -160px;
  top: 44.6px;           /* 6227 − 6182.4 */
  width: 880px;
  height: 273px;
  background: #000;
  filter: blur(47px);
}
[data-layout="mobile"] .veils--process .veil--2 {
  left: -160px;
  top: 691.2px;          /* 6873.6 − 6182.4 */
  width: 880px;
  height: 300px;
  background: #1D1D1D;
  filter: blur(56.5px);
}
/* Третя плита в макеті таки є (аудит нарахував дві): широка розмита пляма
   під плитками 05–08, найтемніша на 7330…7390 (непрозорість 0.33 на фоні
   29/255). Правий край плити всередині полотна, тому справа фон на ~2/255
   світліший — це відтворено шириною 630 при лівому краї −160. */
[data-layout="mobile"] .veils--process .veil--3 {
  left: -160px;
  top: 1045.6px;         /* 7228 − 6182.4 */
  width: 564px;         /* правий край 404 — за полотном, але в межах розмиття */
  height: 252px;
  background: rgba(0, 0, 0, 0.34);
  filter: blur(56px);
}

/* --- Заголовок ---
   «ЯК МИ ВЕДЕМО / РЕМОНТ» 35/39.2, чорнило рядків 6329 і 6368.
   «ВІД ЗАЯВКИ ДО / ГОТОВОГО / ПРОСТОРУ» 35/35 RIGHT, чорнило 6443 / 6478 / 6513.
   Проміжок між боксами: 6440.55 − 6402.85 = 37.7 */
[data-layout="mobile"] .process .sec-head { row-gap: 0; }

/* У макеті обидва рядки заголовка стоять при x=32, а не на лівому краї
   контентної колонки (30) — так само, як і сітка плиток. Стрілок тут немає,
   але в «Відгуках» вони лишаються на колонці, тому зсув даємо поелементно. */
[data-layout="mobile"] .process .sec-head__lead,
[data-layout="mobile"] .process .sec-head__accent {
  position: relative;
  left: 2px;
}

[data-layout="mobile"] .process .sec-head__lead {
  max-width: none;
  font-size: 35px;
  line-height: 39.2px;
}

[data-layout="mobile"] .process .sec-head__accent {
  max-width: none;
  margin-top: 37.7px;
  font-size: 35px;
  line-height: 35px;
}

/* --- Сітка плиток ---
   Десктопна «шахматка» 3×4 з дірками → щільна сітка 2×4 у наскрізному порядку
   01→08. Плитка 165×210, колонковий гап 12, ряди 6612 / 6834 / 7056 / 7282
   (крок 222, 222, 226 — останній ряд у макеті на 4px нижче).
   Сітка стоїть при x=32, тобто на 2px правіше контентної колонки
   (так намальовано: 32 + 165 + 12 + 165 = 374 при правому краї колонки 372).
   Верх сітки: 6612 − (6440.55 + 105) = 66.45 */
[data-layout="mobile"] .process__grid {
  grid-template-columns: repeat(2, 165px);
  gap: 12px;
  margin-top: 65.65px;
  margin-left: 2px;
}

/* Знімаємо десктопне ручне розставлення — інакше лишаться дірки з шахматки */
[data-layout="mobile"] .step--1,
[data-layout="mobile"] .step--2,
[data-layout="mobile"] .step--3,
[data-layout="mobile"] .step--4,
[data-layout="mobile"] .step--5,
[data-layout="mobile"] .step--6,
[data-layout="mobile"] .step--7,
[data-layout="mobile"] .step--8 {
  grid-column: auto;
  grid-row: auto;
}

/* Плитка: у макеті бокс 165×210, поля 18 по горизонталі.
   По вертикалі: чорнило номера на +17 від верху плитки, а бокс тексту вище
   на capOffset(28.8/36.9) = 6.07 → padding-top 10.93.
   Прозорість фону в мобільному макеті однакова у всіх восьми (0.3),
   тоді як на десктопі вона поштучна 0.22 / 0.28 / 0.41 — гасимо. */
[data-layout="mobile"] .step,
[data-layout="mobile"] .step--1,
[data-layout="mobile"] .step--7,
[data-layout="mobile"] .step--8 {
  background: rgba(0, 0, 0, 0.3);
}

[data-layout="mobile"] .step {
  height: 210px;
  gap: 15.3px;          /* номер → заголовок: 68 − 17 − 36.9 (заміряно на рендері) */
  padding: 13.7px 18px;
  border-radius: 3.6px;
}

/* Останній ряд у макеті зміщено вниз на 4px (гап 16 замість 12) */
[data-layout="mobile"] .step--7,
[data-layout="mobile"] .step--8 { margin-top: 4px; }

/* BACKGROUND_BLUR з макета: плитка 01 — 4.0, плитки 02–07 — 13.1, 08 — без.
   Figma-блюр переводимо в CSS діленням на 2 (як і на десктопі: 21.9 → 11). */
[data-layout="mobile"] .step--1 {
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
[data-layout="mobile"] .step--2,
[data-layout="mobile"] .step--3,
[data-layout="mobile"] .step--4,
[data-layout="mobile"] .step--5,
[data-layout="mobile"] .step--6,
[data-layout="mobile"] .step--7 {
  backdrop-filter: blur(6.55px);
  -webkit-backdrop-filter: blur(6.55px);
}
[data-layout="mobile"] .step--8 {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

[data-layout="mobile"] .step__num {
  font-size: 28.8px;
  line-height: 36.9px;
}

/* Рядок «ЗДАЧА ПРОСТОРУ» у макеті стоїть в один рядок і займає рівно 130px
   при внутрішній ширині плитки 129 — у браузері він на волосину ширший і
   переносився. Розширюємо тільки бокс заголовка (текст ліворуч, нічого не їде). */
[data-layout="mobile"] .step__title {
  margin-right: -3px;
  font-size: 15px;
  line-height: 18.7px;
}

/* Чорнило першого рядка опису — на +32 від чорнила однорядкового заголовка
   (перевірено на плитках 05 і 07). Інтерліньяж знято з рендера: 13.95,
   а не 22.5×0.6 = 13.5, як дає перерахунок десктопу. */
[data-layout="mobile"] .step__text {
  margin-top: -0.46px;
  font-size: 10.8px;
  line-height: 13.95px;
}

/* ================================================================ ВІДГУКИ */

/* Чорнило H2 на 7627, попередня секція (етапи) закінчується на 7492.
   Верх боксу = 7627 − capOffset(35/43) 6.45 = 7620.55 → 7620.55 − 7492 = 128.55 */
[data-layout="mobile"] .home .reviews {
  padding-top: 129.55px;
  /* Хвіст третьої плити етапів: у макеті вона згасає до 7545, а .veils
     обрізається низом своєї секції (7492). Добираємо різницю градієнтом. */
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.11), rgba(0, 0, 0, 0) 56px);
  background-repeat: no-repeat;
}

/* H2 3 рядки 35/43 (чорнило 7627 / 7670 / 7713),
   мідний акцент 2 рядки 35/43 RIGHT (чорнило 7768 / 7811).
   Проміжок боксів: 7761.55 − 7749.55 = 12 */
[data-layout="mobile"] .reviews .sec-head { row-gap: 0; }

/* Той самий зсув на 2px, що й в етапах; стрілки нижче лишаються на колонці. */
[data-layout="mobile"] .reviews .sec-head__lead,
[data-layout="mobile"] .reviews .sec-head__accent {
  position: relative;
  left: 2px;
}

/* Ширина текстової ноди в макеті менша за колонку: «ДОВІРЯЮТЬ НАМ НЕ» (340.1)
   не влазить і переноситься, а «НЕ ТІЛЬКИ РЕМОНТ,» (333.6) — влазить. */
[data-layout="mobile"] .reviews .sec-head__lead {
  max-width: 337px;
  font-size: 35px;
  line-height: 43px;
}

[data-layout="mobile"] .reviews .sec-head__accent {
  max-width: none;
  margin-top: 12px;
  font-size: 35px;
  line-height: 43px;
}

/* Стрілки 45.4×45.4, центри чорнила (270.5; 7893.5) і (350.5; 7893.5):
   гап 80 − 45.4 = 34.6, правий край блока 373 — на 1px за контентну колонку. */
[data-layout="mobile"] .reviews .sec-head__arrows {
  margin-top: 22.25px;   /* низ боксу акценту → верх кнопок 7870.8 */
  margin-bottom: 0;
  margin-right: -1px;
}
[data-layout="mobile"] .reviews .arrows { gap: 34.6px; }
[data-layout="mobile"] .reviews .arrows__btn {
  width: 45.4px;
  height: 45.4px;
}

/* Те саме, що в портфоліо (11-home-portfolio-calc.css) і в пакетах: у макеті
   ліва стрілка намальована суцільним #4F4D4D (яскравість 79), а десктопне
   main.css:159 гасить її на першому слайді до 0.35 → 46. Повертаємо 1. */
[data-layout="mobile"] .reviews .arrows__btn--prev[aria-disabled="true"] { opacity: 1; }

/* --- Карусель ---
   Сторінка = 2 картки в стовпчик (у reviews.php відгуки тепер ріжуться по 2).
   Картка 340×224.7 при x=32, крок карток 254.9 (гап 30.2),
   крок сторінок 370.2 = 342 (ширина кадру) + 28.2 (гап стрічки).
   Inline-style у reviews.php тримає десктоп 2×2 — тут його треба перебити. */
[data-layout="mobile"] .reviews .carousel { overflow: hidden; }

[data-layout="mobile"] .reviews__track {
  margin-top: 34.7px;    /* низ кнопок 7916.2 → верх картки 7950.9 */
  gap: 28.2px;
}

[data-layout="mobile"] .reviews__page { flex: 0 0 342px !important; }

[data-layout="mobile"] .reviews__grid {
  grid-template-columns: 340px !important;
  gap: 30.2px;
  margin-left: 2px;
}

/* Поля 47.5/25.2 (десктопні 79.2/42 × 0.6). Знизу в макеті 42.3, не 47.5. */
/* align-content: space-between замість успадкованого start (home.css:691).
   У макеті картка фіксована 224.7, і текст-заглушка (5 рядків lorem) сам
   доводить ім'я до нижнього падінга: чорнило імені 8118…8128 при низу картки
   8175.3. Реальні відгуки з адмінки коротші (3 рядки) — при align-content:start
   ім'я підіймалось на 48px угору, а знизу лишалась порожнеча ~90px.
   space-between на двох рядах сітки (.review__head і .review__name) тримає
   шапку зверху, а ім'я — рівно на нижньому падінгу, як у макеті, і при
   довгому тексті поводиться так само, як start. Випадку «короткий відгук»
   дизайнерка не малювала — див. звіт. */
[data-layout="mobile"] .review {
  min-height: 224.7px;
  align-content: space-between;
  gap: 13.03px;
  padding: 47.5px 25.2px 42.31px;
  border-radius: 3.6px;
}

[data-layout="mobile"] .review__head {
  grid-template-columns: 56.17px 1fr;
  gap: 23.03px;
}

[data-layout="mobile"] .review__avatar {
  width: 56.17px;
  height: 56.17px;
}
[data-layout="mobile"] .review__avatar--initial { font-size: 24px; }

/* У макеті верх великої літери першого рядка стоїть рівно на верху аватара,
   тож бокс тексту треба підняти на його capOffset(10.8/17.9) = 4.31 − 0.5. */
[data-layout="mobile"] .review__text {
  margin-top: -2.93px;
  font-size: 10.8px;
  line-height: 17.9px;
}

[data-layout="mobile"] .review__name {
  padding-left: 79.2px;  /* аватар 56.17 + гап 23.03 */
  font-size: 14.4px;
  line-height: 18.4px;
}