/**
 * Мобільна гілка — головна: герой + послуги (інтро та сітка карток).
 * Макет: Figma 138:3740 (полотно 402, колонка 342, поля 30).
 *   Герой           top 0     h 590
 *   Послуги — інтро top 687   h 261
 *   Послуги — сітка top 1000  h 1418.6
 * Кожне число зняте з рендера figma-ref/mobile/138-3740.png (1 px = 1 px макета).
 * Усі селектори під [data-layout="mobile"] — десктоп не зачіпається.
 */

/* ============================================================== 1. Герой */

/* Макет: секція 0..590. Нижній край = нижній край кнопки-привида,
   тож padding-bottom 0. Верх H1 (ем-бокс) 157. */
[data-layout="mobile"] .home .hero {
  min-height: 590px;
  padding-top: 157px;
}

/* Фото — не inset:0, а окремий прямокутник 692×504 при x=-145, y=86.
   Це рівно 0.372 від десктопного 1859×1355, тому кадр (object-fit: cover)
   збігається з десктопним піксель у піксель. */
[data-layout="mobile"] .home .hero__media img {
  left: -145px;
  top: 86px;
  width: 692px;
  height: 504px;
}

/* Вуалі. Це ті самі дві розмиті плити #1D1D1D, що й на десктопі, але в
   мобільному фреймі вони стоять НЕ за коефіцієнтом фото: геометрію знято
   з рендера — по рядковій яскравості порахована частка затемнення A(y)
   і підігнані край + розмиття (гаусів профіль CSS-блюру).
   veil1: альфа 0.83, нижній край 193, blur 34  (0.5 альфи саме на 193)
   veil2: суцільна, верхній край 430, blur 56
   По горизонталі обидві ширші за полотно — краї не потрапляють у кадр. */
[data-layout="mobile"] .veils--hero .veil--1 {
  left: -203.8px;
  top: -300px;
  width: 790.9px;
  height: 493px;
  filter: blur(34px);
}

[data-layout="mobile"] .veils--hero .veil--2 {
  left: -228.7px;
  top: 430px;
  width: 790.9px;
  height: 400px;
  filter: blur(56px);
}

/* H1 45/48.2 у 4 рядки. Текстова нода в макеті 347 при колонці 342 —
   рядок «ПІД ВАШ СТИЛЬ» свідомо виходить на ~5px за праву межу. */
[data-layout="mobile"] .hero__title {
  width: 347px;
  font-size: 45px;
  line-height: 48.2px;
}

/* Кнопки з ряду в стовпчик: 342×46.8, проміжок 19.4 */
[data-layout="mobile"] .hero__actions {
  display: grid;
  gap: 19.4px;
  margin-top: 127.2px;
}

/* padding-top 3 (замість симетричного 0) — у макеті підпис кнопки стоїть
   на 1.5px нижче, ніж дає браузерне центрування рядка 19.2 у боксі 46.8;
   та сама розбіжність метрик шрифту, що й у плашці картки послуги. */
[data-layout="mobile"] .hero__actions .btn {
  height: 46.8px;
  padding: 3px 21px 0;
  gap: 7.2px;
  border-radius: 3.6px;
  font-size: 15px;
  line-height: 19.2px;
}

/* Обведення 0.72px і BACKGROUND_BLUR 15.8 — рівно 0.6 від десктопу (1.2 / 26.4).
   Chrome округляє border-width до цілого CSS-пікселя (перевірено на dpr 1/2/3),
   тому 0.72px малювались як 1px суцільного #B87333 = (184,115,51). У макеті
   обведення розмазане: лівий піксель (145,94,45) — покриття 0.745, верхній
   (107,72,40)+(50,42,33) — 0.497+0.135, нижній (69,50,33)+(107,72,40) —
   0.258+0.497, тобто в середньому рівно 0.72 ширини. Лишаємо 1px і віддаємо
   частку пікселя альфі: 29 + 0.72 × (184−29, 115−29, 51−29) = (141, 91, 45). */
[data-layout="mobile"] .hero__actions .btn--ghost {
  border-width: 1px;
  border-color: rgba(184, 115, 51, 0.72);
  backdrop-filter: blur(15.8px);
  -webkit-backdrop-filter: blur(15.8px);
}

/* ========================================================= 2. Послуги */

/* Секція починається одразу під героєм (590); перший блок інтро — на 687 */
[data-layout="mobile"] .home .services {
  padding-top: 94px;
}

/* Макет розкладає інтро в один стовпчик і МІНЯЄ ПОРЯДОК проти десктопу:
   примітка → H2 → мідний акцент → переваги.
   Два десктопні ряди розчиняються (display: contents), їхні діти стають
   комірками сітки .services__head, порядок задає order. */
[data-layout="mobile"] .services__head {
  display: grid;
  gap: 0;
}

[data-layout="mobile"] .services__row { display: contents; }

/* Примітка: бокс при x=236 (відступ 206 від колонки), текст вирівняний
   ЛІВОРУЧ — у рендері обидва рядки починаються рівно з 237 (розбір section.py
   каже «праворуч», але тоді рядки закінчувались би на одному x; вони ні).
   Ширина в макеті 133; тут 136 (до правого краю колонки), бо реальний текст
   з адмінки має крапку в кінці, якої в макеті-заглушці немає, і в 133 не
   влазить — див. deviations. */
[data-layout="mobile"] .services__note {
  order: 1;
  width: 136px;
  margin-left: 206px;
  font-size: 15px;
  line-height: 18.1px;
}

/* H2 «Не просто ремонт» 35/36.4, 2 рядки */
[data-layout="mobile"] .services__title {
  order: 2;
  margin-top: 14.9px;
  font-size: 35px;
  line-height: 36.4px;
}

/* Мідний акцент 35/35, вирівняний праворуч на всю колонку */
[data-layout="mobile"] .services__accent {
  order: 3;
  margin-top: 14.2px;
  font-size: 35px;
  line-height: 35px;
}

/* Переваги 15/16, 3 рядки */
[data-layout="mobile"] .services__benefits {
  order: 4;
  margin-top: 12px;
  font-size: 15px;
  line-height: 16px;
}

/* ------------------------------------------- Сітка карток послуг 1×6 */

/* Макет (виправлений дизайнеркою 26.09, figma-ref/v2/138-3740.png): 6 карток
   342×211, крок 241.28 (картка 211 + проміжок 30.28). Верх сітки 1000, низ
   останньої картки 2417.4. Заміряно по покриттю крайніх пікселів кожної картки:
     верх  1000.00 / 1241.50 / 1482.75 / 1724.01 / 1965.01 / 2206.38
     низ   1211.01 / 1452.63 / 1693.76 / 1935.01 / 2176.00 / 2417.36
   модель 1000 + n × 241.28, висота 211 — усі краї в межах 0.25px.
   До правки було 211.2 і крок 241.48 (1000 + 5 × 241.48 + 211.2 = 2418.6);
   наступна секція в макеті НЕ зрушила, тож різницю забрав її верхній відступ
   (11-home-portfolio-calc.css, .portfolio-teaser). */
[data-layout="mobile"] .services__grid {
  grid-template-columns: 1fr;
  gap: 30.28px;
  margin-top: 47.9px;
}

/* Порядок карток. Мобільний кадр 138:3740 (і до, і після правок 26.09):
   Дизайн / Будинки / Інвестори / Квартири / Бізнес / Індивідуальні — це
   десктопна сітка 2 колонки, прочитана по стовпцях (ліва колонка, потім права).
   Порядок з адмінки (menu_order) на сайті — Дизайн / Квартири / Будинки /
   Бізнес / Інвестори / Індивідуальні, тобто в макеті йдуть спершу непарні
   позиції (1, 3, 5), потім парні (2, 4, 6). Правило загальне: при 5 чи 7
   послугах так само — ліва колонка десктопу, потім права; порядок і далі
   задає адмінка, на десктопі нічого не змінюється. */
[data-layout="mobile"] .services__grid > li:nth-child(even) { order: 1; }

[data-layout="mobile"] .service-card__link {
  aspect-ratio: 342 / 211;
  border-radius: 3.6px;
}

/* Кадр фото в картці. У мобільному фреймі він НЕ дорівнює object-fit:cover
   з десктопним object-position (home.css, nth-child): кожне фото збільшене
   на 5–18 % проти «вписування» і зсунуте по-своєму, а три з шести ще й
   розтягнуті по вертикалі (їх дизайнерка отримала з десктопної картки 640×352
   непропорційним стисненням до 342×211: 0.534 по ширині і 0.6 по висоті).
   Заміряно підгонкою оригіналу фото під рендер (масштаб X/Y + зсув,
   ресемплінг Lanczos, середня похибка яскравості по видимій частині фото,
   без плашки): 1.4…3.2 рівня з 255 — тобто кадр збігається піксельно.
   Для порівняння, поточний cover давав 30…37 рівнів.
     фото                         коробка фото W × H     зсув (x, y)      X/Y
     Дизайн інтерʼєру      5967   402.89 × 536.85        0.00, −202.85   1
     Ремонт квартир        5968   360.14 × 449.46       −0.33, −177.11   1
     Ремонт будинків       5969   367.81 × 398.30       −8.00,  −41.38   0.904
     Ремонт бізнес-просторів 5970 367.64 × 360.89       −7.49, −134.17   1
     Пакети для інвесторів 5971   361.05 × 402.91       −0.19, −105.20   0.896
     Індивідуальні рішення 5972   360.06 × 602.50      −13.40, −206.97   0.896
   Числа нижче — ті самі, у відсотках від картки 342×211.
   Кадр прив'язаний до САМОГО ФАЙЛУ фото (src, а до ледачого завантаження —
   data-vk-src), а не до позиції картки: порядок карток задає адмінка, і правило
   за позицією розтягнуло б чуже фото. Якщо в адмінці поставлять інше фото,
   правило просто не спрацює і лишиться звичайний cover з десктопним кадром. */
[data-layout="mobile"] .service-card__img:is([src*="home-image-5967__9dbe2d8e"], [data-vk-src*="home-image-5967__9dbe2d8e"]),
[data-layout="mobile"] .service-card__img:is([src*="home-image-5968__713ea79c"], [data-vk-src*="home-image-5968__713ea79c"]),
[data-layout="mobile"] .service-card__img:is([src*="home-image-5969__9a52d483"], [data-vk-src*="home-image-5969__9a52d483"]),
[data-layout="mobile"] .service-card__img:is([src*="home-image-5970__839d8127"], [data-vk-src*="home-image-5970__839d8127"]),
[data-layout="mobile"] .service-card__img:is([src*="home-image-5971__28a52907"], [data-vk-src*="home-image-5971__28a52907"]),
[data-layout="mobile"] .service-card__img:is([src*="home-image-5972__5eb359cb"], [data-vk-src*="home-image-5972__5eb359cb"]) {
  position: absolute;
  max-width: none;
  object-fit: fill;
}
[data-layout="mobile"] .service-card__img:is([src*="home-image-5967__9dbe2d8e"], [data-vk-src*="home-image-5967__9dbe2d8e"]) {
  left: 0;        top: -96.137%; width: 117.804%; height: 254.431%;
}
[data-layout="mobile"] .service-card__img:is([src*="home-image-5968__713ea79c"], [data-vk-src*="home-image-5968__713ea79c"]) {
  left: -0.096%;  top: -83.938%; width: 105.304%; height: 213.014%;
}
[data-layout="mobile"] .service-card__img:is([src*="home-image-5969__9a52d483"], [data-vk-src*="home-image-5969__9a52d483"]) {
  left: -2.339%;  top: -19.611%; width: 107.547%; height: 188.768%;
}
[data-layout="mobile"] .service-card__img:is([src*="home-image-5970__839d8127"], [data-vk-src*="home-image-5970__839d8127"]) {
  left: -2.190%;  top: -63.588%; width: 107.497%; height: 171.038%;
}
[data-layout="mobile"] .service-card__img:is([src*="home-image-5971__28a52907"], [data-vk-src*="home-image-5971__28a52907"]) {
  left: -0.056%;  top: -49.858%; width: 105.570%; height: 190.953%;
}
[data-layout="mobile"] .service-card__img:is([src*="home-image-5972__5eb359cb"], [data-vk-src*="home-image-5972__5eb359cb"]) {
  left: -3.918%;  top: -98.090%; width: 105.281%; height: 285.545%;
}

/* Плашка підпису: 46.8 заввишки (78×0.6), поля 21 (35×0.6),
   гап до стрілки 16.2 (27×0.6), радіус 3.6. Фон — той самий veil-76:
   у рендері крізь плашку видно фото, контраст стиснутий приблизно вчетверо. */
[data-layout="mobile"] .service-card__label {
  height: 46.8px;
  padding: 0 21px;
  gap: 16.2px;
  border-radius: 3.6px;
}

/* Прозорість плашки в новому рендері (26.09) НЕ однакова: заміряно підгонкою
   L = a·29 + (1 − a)·P, де P — те саме фото під плашкою, відтворене з
   оригіналу за кадром вище (розмиття під плашкою немає — найкраще σ = 0,
   залишкова похибка 1.5…1.8 рівня):
     Дизайн інтерʼєру 0.754   Ремонт квартир 0.757          ← var(--veil-76)
     Ремонт будинків 0.653    Ремонт бізнес-просторів 0.644
     Пакети для інвесторів 0.655   Індивідуальні рішення 0.648  ← ≈ 0.65
   Сайт до правки: 0.758…0.765 в усіх шести. У старому рендері (до правок
   дизайнерки) плашки теж різнились (0.755 / 0.85 / 0.90), тож це властивість
   конкретної картки макета, а не правило. Прив'язка — до послуги
   (data-service-id: 20, 21, 23, 24), а не до позиції: порядок задає адмінка.
   Наведення (--veil-89 з home.css) не зачіпаємо — його в макеті немає. */
[data-layout="mobile"] .service-card__link:is([data-service-id="20"], [data-service-id="21"], [data-service-id="23"], [data-service-id="24"]):not(:hover) .service-card__label {
  background: rgba(29, 29, 29, 0.65);
}

/* У макеті базова лінія підпису лежить нижче, ніж дає браузерне
   центрування ем-боксу в рядку 21.7 (Figma інакше ділить напівінтерліньяж).
   Стрілка при цьому стоїть на місці, тому зсуваємо лише текст.
   Було 1.3 (під старий рендер). Переміряно по новому (26.09): субпіксельний
   зсув маски чорнила підпису (яскравість > 110, білінійний перебір кроком
   1/16 px) відносно верху картки, по всіх шести картках. При 1.3 сайт
   стояв вище на +0.27…+1.27 (середнє 0.75); перебір 1.3 / 1.8 / 2.05 / 2.3 —
   при 1.8 розкид −0.28…+0.35 по всіх шести (Chrome ставить рядок на цілий
   піксель, тому залишок залежить від дробової частини верху картки). */
[data-layout="mobile"] .service-card__title {
  position: relative;
  top: 1.8px;
  font-size: 15px;
  line-height: 21.7px;
}

/* Стрілка ↗ 9.6 (16×0.6); обведення 2 у viewBox 16 стискається до 1.2 */
[data-layout="mobile"] .service-card__label .icon--arrow-ur {
  flex: 0 0 9.6px;
  width: 9.6px;
  height: 9.6px;
}