/**
 * Мобільна гілка — сторінка «Контакти».
 * Макет: Figma «Контакти (iPhone 17 - 9)», фрейм 175:1301, полотно 402×1370.
 * Бічне поле 30 → .container = 342. Усі числа зняті з рендера 1:1
 * (figma-ref/mobile/175-1301.png) і звірені по рядках чорнила.
 *
 * Порядок блоків у макеті = порядку в DOM:
 *   H1 → вступний абзац → список контактів → месенджери → форма → нижнє фото.
 */

/* ------------------------------------------------------ Герой: H1 у 3 рядки */
/* Макет: текстовий бокс x=30 y=144 w=321 h=117 (3 × 39).
   Ширина рівно 321 (а не 342) — саме вона переносить «& РЕМОНТ» у третій рядок. */

[data-layout="mobile"] .page--kontakty .contacts-hero {
  padding: 144px 0 0;
  min-height: 0;
}

[data-layout="mobile"] .contacts-hero__title {
  max-width: 321px;
  /* Вага знята з рендера: штрих вертикальної стійки 1.5px, покриття чорнилом
     блоку H1 = 1530 (на десктопному weight:300 виходило 2354, ×1.54 товще).
     Це той самий випадок, що й H1 інших сторінок: у Figma «MuseoSansCyrl-300»,
     у нас — файл ваги 100. */
  font-weight: 100;
  font-size: 35px;      /* десктоп 95 */
  line-height: 39px;    /* десктоп 104.5 */
}

/* --------------------------------------------- Дві колонки 595+597 → одна 342 */

[data-layout="mobile"] .page--kontakty .contacts { padding-top: 51px; }

[data-layout="mobile"] .contacts__inner {
  display: block;
}

/* ------------------------------------------------------------ Вступний абзац */
/* Макет: 3 рядки, ем-бокс з 312, крок 19.2 */

[data-layout="mobile"] .contacts__text {
  font-size: 15px;      /* десктоп 25 */
  line-height: 19.2px;  /* десктоп 31.2 */
}

/* ------------------------------------------------- Список контактів з іконками */
/* Макет: рядки чорнила 426 / 481 / 536 (+555), іконки від x=30, текст від x≈63.
   Крок між рядками в макеті нерівний (35.6 і 31.8), тому не gap, а margin. */

[data-layout="mobile"] .contacts__list {
  gap: 0;
  margin-top: 54.8px;   /* десктоп 92 */
}

[data-layout="mobile"] .contacts__list li {
  column-gap: 11.52px;  /* десктоп 19.2 */
}

[data-layout="mobile"] .contacts__list li + li { margin-top: 35.6px; }
[data-layout="mobile"] .contacts__list li + li + li { margin-top: 31.8px; }

/* Іконки — рівно ×0.6 від десктопних боксів 35.97 / 29.97 / 37.17.
   Клас .icon--bleed має тільки слухавка, третю ловимо по width="37.17". */
[data-layout="mobile"] .contacts__list li > svg {
  position: relative;
  top: -1.4px;          /* у макеті іконка стоїть по капітельному центру рядка,
                           а не по центру ем-боксу — звірено по всіх трьох рядах */
  width: 21.58px;
  height: 21.58px;
}
[data-layout="mobile"] .contacts__list li > svg.icon--bleed {
  width: 17.98px;
  height: 17.98px;
}
[data-layout="mobile"] .contacts__list li > svg[width="37.17"] {
  width: 22.3px;
  height: 22.3px;
}

/* Вага штриха. Габарити й центроїди іконок збігаються з макетом, але слухавка
   і шпилька виходили на 12% легшими: у SVG стоїть stroke-width 0.8 / 0.774, що
   при мобільному масштабі (17.98/20 і 22.3/24) дає ≈0.72px проти ≈0.81px у
   рендері. Правимо ЧЕРЕЗ CSS, а не атрибут у page-kontakty.php: ті самі іконки
   малюються на десктопі втричі більшими, і зміна атрибута потовщила б їх там.
   Числа підібрані за чорнильною масою: слухавка 43.1 проти 43.2 у макеті,
   шпилька 51.8 проти 51.7. Конверт лишається 0.8 — він і так збігається (+1.5%).
   Вертикаль на цьому масштабі квантується цілими пікселями (top −1.2 не змінює
   нічого, −1.1 зсуває шпильку на повний піксель), тому залишковий зсув центроїда
   0.2–0.5px нічим не виправити — це нижче за крок сітки рендера. */
[data-layout="mobile"] .contacts__list li > svg.icon--bleed path {
  stroke-width: 0.912px;
}
[data-layout="mobile"] .contacts__list li > svg[width="37.17"] path,
[data-layout="mobile"] .contacts__list li > svg[width="37.17"] circle {
  stroke-width: 0.892px;
}

[data-layout="mobile"] .contacts__list a,
[data-layout="mobile"] .contacts__list span {
  font-size: 15px;      /* десктоп 25 */
  line-height: 19.2px;  /* десктоп 32 */
}

/* --------------------------------------------------------------- Месенджери */
/* Макет: суцільна лінія 30..308 на y=650 (товщина 1.38px за альфами рендера),
   під WhatsApp — повна мідь. Текст 15/500, кап-лінія на 630. Плашки без гапів. */

/* Плашка месенджера в макеті 31.8 заввишки (десктоп 53 × 0.6), але вертикальний
   центр тексту в рендері стоїть на 636.33, а не на 635.9, як дала б плашка,
   притиснута до 620. Тому висоту беремо макетну (31.8), а margin-top підбираємо
   так, щоб текст лишився рівно там, де в рендері: бокс 620.94..652.73 при
   фігмівському фреймі 620..652 — обидва краї в межах 1px. Перевірено: знімок
   до і після цієї зміни збігається піксель у піксель (0 відмінних пікселів). */
[data-layout="mobile"] .messengers { margin-top: 49.954px; }   /* десктоп 73.4 */

[data-layout="mobile"] .messenger {
  position: relative;
  height: 31.8px;                 /* десктоп 53 */
  /* Макет каже «0 18», але з 18 ряд виходить 30..309.55 і після округлення
     Chrome малює праву межу на 310, а перехід приглушена→мідь на 203.0.
     У рендері межа рівно на 309, а перехід на 202.48. Різниця — у ширині
     набору: гліфові адванси Chrome на частки пікселя ширші за фігмівські.
     17.88 компенсує рівно це: межа 308.83→309 (1:1), перехід 202.49 (макет 202.48). */
  padding: 0 17.88px;             /* десктоп 0 30 */
  border-bottom-width: 1.44px;    /* десктоп 2.4 — тримає висоту боксу */
  font-size: 15px;                /* десктоп 24 */
  line-height: 19.2px;            /* десктоп 30.7 */
}

/* Саму лінію малює ::after, а не border. Причина: при zoom=1 і dpr=1 Chrome
   округлює border-bottom-width до цілого, тож 1.44px виходить рівно 1.00px —
   на 30% тонше за макет. У рендері лінія займає рядок 650 на повну і рядок 651
   з альфою 0.38 (сумарно 1.38px). Прямокутник фону теж прилипає до цілих
   пікселів, а от ГРАДІЄНТ Skia рахує по центрах пікселів — тому профіль
   «повний до 1px, нуль на 1.806px» дає на рядку 651 рівно 0.38 альфи.
   top:29.072 відлічується від верху padding-box (620.94), щоб лінія починалась
   рівно на 650.0, як у макеті. */
[data-layout="mobile"] .messenger,
[data-layout="mobile"] .messenger:hover,
[data-layout="mobile"] .messengers li:last-child .messenger { border-bottom-color: transparent; }

[data-layout="mobile"] .messenger::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 29.072px;
  height: 3px;
  pointer-events: none;
  background: linear-gradient(to bottom,
      rgba(184, 115, 51, 0.155) 0 1px,
      rgba(184, 115, 51, 0) 1.806px);
}
[data-layout="mobile"] .messengers li:last-child .messenger::after {
  background: linear-gradient(to bottom,
      rgba(184, 115, 51, 1) 0 1px,
      rgba(184, 115, 51, 0) 1.806px);
}
/* Дизайнерка мобільних станів не малювала. :hover лишаємо тільки там, де є
   справжній курсор: на тачі :hover «залипає» після тапу і в користувача
   світилося б два яскравих месенджери одночасно. */
@media (hover: hover) and (pointer: fine) {
  [data-layout="mobile"] .messenger:hover::after {
    background: linear-gradient(to bottom,
        rgba(184, 115, 51, 1) 0 1px,
        rgba(184, 115, 51, 0) 1.806px);
  }
}

/* -------------------------------------------------- Форма Fluent Forms (#5) */
/* Права колонка 597 → повна ширина 342, під месенджерами.
   forms.css пише все через «body .contacts__col--form …» з !important,
   тому кожне перекриття тут — з тим самим !important і вищою специфічністю. */

/* 66.064 = попередні 67.37 мінус 1.306: рівно на стільки виріс ряд месенджерів,
   коли його плашки отримали макетну висоту 31.8. Верх першого поля лишився 732.58. */
[data-layout="mobile"] .contacts__col--form { margin-top: 66.064px; }

[data-layout="mobile"] body .contacts__col--form .fluentform form fieldset {
  gap: 25.05px !important;        /* десктоп 47 */
}

/* Кегль і інтерліньяж треба ставити САМОМУ контейнеру підпису: <label> усередині —
   інлайн, і його базову лінію тримає струт блока (у теми це 18/26.5). */
[data-layout="mobile"] body .contacts__col--form .ff-el-input--label,
[data-layout="mobile"] body .contacts__col--form .ff-el-input--label label {
  font-size: 11px;                /* у макеті рівно 11, а не 18×0.6=10.8 */
  line-height: 13.8px;            /* десктоп 23 */
}
[data-layout="mobile"] body .contacts__col--form .ff-el-input--label label { padding-top: 0; }
[data-layout="mobile"] body .contacts__col--form .ff-el-input--label {
  height: 13.8px;                 /* десктоп 23 */
  padding-top: 0.9px;             /* у макеті підпис на 0.9 нижче верху свого боксу */
}

/* Крок групи полів у нас рівно 90 (13.8 підпис + 51.15 поле + 25.05 гап), а в
   макеті 89.65, тож підписи потроху сповзають: ІМ'Я 0, ТЕЛЕФОН 0.33, КОМЕНТАР
   0.67 нижче за макет. Лінії полів при цьому стоять точно (зміряно по профілю
   градієнта: 783.26 / 872.97 / 1008.06 проти 783.25 / 872.95 / 1008.05),
   тому рухати саму групу не можна — тільки підпис третьої.
   Базову лінію Chrome садить на цілий піксель: підпис КОМЕНТАР або на 0.67
   нижче за макет (top:0), або на 0.33 вище (top від −0.2 до −1.2). Беремо
   середину плато, −0.67px: удвічі ближче до макета. position:relative на
   розкладку не впливає — поле лишається на своєму місці. */
[data-layout="mobile"] body .contacts__col--form .ff-el-group:has(textarea) .ff-el-input--label {
  position: relative;
  top: -0.67px;
}

/* Вертикаль тексту в полі. <input> центрує свій line-box у content-box, тому
   один padding-top не керує позицією рядка: зсув = (padding-top − padding-bottom)/2.
   У макеті чорнило значення стоїть на 19.42px від верху поля (752 при полі 732.58),
   а нижня лінія — на своєму місці. Тому height лишається 51.15, а різниця
   падінгів дає рівно 1.9 → зсув 0.95 і рядок сідає на 19.42.
   (Було padding-bottom:0 → рядок падав на 26.42, на 7px нижче макета.) */
[data-layout="mobile"] body .contacts__col--form .ff-el-form-control {
  height: 51.15px !important;     /* десктоп 81 */
  padding: 15.9px 14px 14px !important;  /* десктоп 28 24 0; ліве 14 — з макета */
  border-bottom-width: 1.08px !important; /* десктоп 1.8 */
  font-size: 15px;                /* десктоп 25 */
  line-height: 19.2px;            /* десктоп 32 */
}
/* <textarea> рядок НЕ центрує — він починається від padding-top. Щоб перший рядок
   коментаря стояв на тих самих 19.42px, що й значення в <input>, падінг тут інший. */
[data-layout="mobile"] body .contacts__col--form textarea.ff-el-form-control {
  height: 96.15px !important;     /* десктоп 159 */
  padding: 16.9px 14px 0 !important;
  resize: none;                   /* у макеті кутика-грабера немає */
}

/* Лінії підкреслення полів — тим самим прийомом, що й лінія месенджерів.
   border-bottom при zoom=1 і dpr=1 Chrome округлює до цілого пікселя, тому
   1.08px виходить рівно один рядок чистого #FFF. У рендері ж лінія розмазана
   на два рядки з дробовими альфами і ніде не доходить до чистого білого
   (пік 199/255) — на око вона м'якша й трохи товща за нашу.
   Малюємо її градієнтом на обгортці поля: <input> — замінюваний елемент, у нього
   псевдоелементів немає, а .ff-el-input--content збігається з полем рамка в рамку.
   Бокс фону Skia прилипає до цілих рядків, а сам градієнт рахує по ЦЕНТРАХ
   пікселів — тому bottom підібраний так, щоб верх боксу став рівно на цілий
   рядок (782 / 872 / 1007), а стопи на 0.5/1.5/2.5px віддають точні альфи
   макета. Альфа = покриттю: 29 + a×226 дає рівно фігмівські 85/199, 170/142,
   170/199. Три поля мають РІЗНІ профілі — так у рендері, це не помилка.
   Перевірено: усі шість рядків збігаються з макетом до 0.001 покриття. */
[data-layout="mobile"] body .contacts__col--form .ff-el-form-control {
  border-bottom-color: transparent !important;  /* ширину лишаємо — тримає бокс */
}
[data-layout="mobile"] body .contacts__col--form .ff-el-input--content {
  position: relative;
}
[data-layout="mobile"] body .contacts__col--form .ff-el-input--content::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 3px;
  pointer-events: none;
}
[data-layout="mobile"] body .contacts__col--form .ff-el-group:has(input[type="text"]) .ff-el-input--content::after {
  bottom: -1.266px;
  background: linear-gradient(to bottom,
      rgba(255, 255, 255, 0.248) 0.5px,
      rgba(255, 255, 255, 0.752) 1.5px,
      rgba(255, 255, 255, 0) 2.5px);
}
[data-layout="mobile"] body .contacts__col--form .ff-el-group:has(input[type="tel"]) .ff-el-input--content::after {
  bottom: -1.281px;
  background: linear-gradient(to bottom,
      rgba(255, 255, 255, 0.624) 0.5px,
      rgba(255, 255, 255, 0.500) 1.5px,
      rgba(255, 255, 255, 0) 2.5px);
}
[data-layout="mobile"] body .contacts__col--form .ff-el-group:has(textarea) .ff-el-input--content::after {
  bottom: -1.297px;
  background: linear-gradient(to bottom,
      rgba(255, 255, 255, 0.624) 0.5px,
      rgba(255, 255, 255, 0.752) 1.5px,
      rgba(255, 255, 255, 0) 2.5px);
}
/* Станів фокуса й помилки в мобільному макеті немає, але вони є в forms.css
   (акцентна і червона рамка). Щоб прозора рамка їх не з'їла — повертаємо колір
   і прибираємо намальовану лінію, інакше під червоною рамкою світився б білий. */
[data-layout="mobile"] body .contacts__col--form .ff-el-form-control:focus {
  border-bottom-color: var(--accent) !important;
}
[data-layout="mobile"] body .contacts__col--form .ff-el-is-error .ff-el-form-control {
  border-bottom-color: #C8433C !important;
}
[data-layout="mobile"] body .contacts__col--form .ff-el-input--content:has(.ff-el-form-control:focus)::after,
[data-layout="mobile"] body .contacts__col--form .ff-el-is-error .ff-el-input--content::after {
  opacity: 0;
}

/* Перед кнопкою в макеті проміжок більший за крок полів: 27.4 проти 25.05 */
[data-layout="mobile"] body .contacts__col--form .ff_submit_btn_wrapper { margin-top: 2.33px; }
[data-layout="mobile"] body .contacts__col--form .ff-btn-submit {
  height: 39px !important;        /* десктоп 66 */
  padding: 2.6px 12px 0;          /* текст у макеті стоїть по капітельному центру */
  border-radius: 3.6px;           /* десктоп 6 */
  font-size: 15px;
  line-height: 19.2px;
}

/* Станів форми (помилка поля, повідомлення про успіх) дизайнерка не малювала.
   Беремо десктопні правила forms.css і зменшуємо їх у тій самій пропорції ×0.6,
   інакше текст помилки (15/20) на мобільному виходить такий самий, як значення
   поля. Селектори звужені до .contacts__col--form, щоб не чіпати інші форми. */
[data-layout="mobile"] body .contacts__col--form .error.text-danger,
[data-layout="mobile"] body .contacts__col--form .ff-el-is-error .error {
  margin-top: 4.8px;              /* десктоп 8 */
  font-size: 9px;                 /* десктоп 15 */
  line-height: 12px;              /* десктоп 20 */
}
[data-layout="mobile"] body .contacts__col--form .ff-message-success {
  padding: 10.8px 13.2px;         /* десктоп 18 22 */
  border-radius: 3.6px;           /* десктоп 6 */
  font-size: 10.8px;              /* десктоп 18 */
  line-height: 13.8px;
}

/* Той самий розмір для вбудованої форми теми (fallback, коли шорткоду немає) */
[data-layout="mobile"] .contacts__form { gap: 25.05px; }
[data-layout="mobile"] .field--underline { gap: 0; }
[data-layout="mobile"] .field__caption { font-size: 11px; line-height: 13.8px; }
[data-layout="mobile"] .field--underline .field__control {
  height: 51.15px;
  padding: 15.9px 14px 14px;
  border-bottom-width: 1.08px;
  font-size: 15px;
  line-height: 19.2px;
}
[data-layout="mobile"] .field--area .field__control {
  height: 96.15px;
  padding: 16.9px 14px 0;
  resize: none;
}
[data-layout="mobile"] .contacts__form .btn {
  height: 39px;
  padding: 2.6px 12px 0;
  border-radius: 3.6px;
  font-size: 15px;
  line-height: 19.2px;
}

/* Примітки «Ми зв'яжемося з вами…» у мобільному фреймі немає жодного вузла
   (перевірено підняттям яскравості ×4: між кнопкою 1075 і фото 1119 чистий фон). */
[data-layout="mobile"] .page--kontakty .contacts__note { display: none; }

/* ----------------------------------------------------------- Нижнє фото */
/* Макет: RECTANGLE 175:1423 — 447×251 при x=-21, y=1119 (низ рівно 1370). */

/* Фото ширше за полотно (447 проти 402) і виступає вліво на 21 — у макеті
   воно просто обрізане краєм фрейму. Зсув робимо всередині обгортки, а саму
   обгортку лишаємо 402 з overflow:hidden, інакше сторінка отримує 24px
   горизонтального скролу (body{overflow-x:clip} тут не рятує: overflow з body
   спливає на в'юпорт). */
[data-layout="mobile"] .page--kontakty .page-bottom-photo {
  left: 0;
  width: auto;
  margin-top: 43.87px;
  overflow: hidden;
}
[data-layout="mobile"] .page--kontakty .page-bottom-photo img {
  position: relative;
  left: -21px;
  width: 447px;
  max-width: none;
  height: 251px;
  object-fit: cover;
}

/* ------------------------------------------------------- Вуаль (одна, нижня) */
/* Макет: RECTANGLE 175:1424 — 451×227 при x=-25, y=1036, намальований ПОВЕРХ
   фото. Верхньої вуалі (десктопна .veil--1 0..789) у мобільному фреймі немає. */

[data-layout="mobile"] .veils--kontakty .veil--1 { display: none; }

/* Прив'язка НЕ до верху сторінки, а до низу. У макеті вуаль лежить поверх фото
   і гасить його верхній край — це зв'язок «вуаль↔фото», а не «вуаль↔початок
   сторінки». Спільний kontakty.css задає їй абсолютний top, тому при будь-якому
   рефлоу вище (помилки полів Fluent Forms +33.6px, довший вступний текст чи
   адреса з адмінки) фото їде вниз, а вуаль лишається — і на верхньому краї фото
   з'являється видимий горизонтальний шов.
   .page--kontakty закінчується рівно низом фото (1369.94), .kontakty-bg — inset:0,
   тож bottom:106.94 дає в дефолтному стані ті самі 1369.94−227−106.94 = 1036.0,
   але тепер вуаль їде разом з фото. Перевірено: після помилок валідації фото
   1152.53, вуаль 1069.59 — зсув однаковий, шва немає. */
[data-layout="mobile"] .veils--kontakty .veil--2 {
  left: -25px;
  top: auto;
  bottom: 106.94px;
  width: 451px;
  height: 227px;
  /* Профіль прозорості знятий з рендера: суцільний #1D1D1D до y=1158.8,
     далі рівний спад до нуля на y=1253.1 (похибка підгонки ≤ 0.015 альфи). */
  background: linear-gradient(180deg, #1D1D1D 122.8px, rgba(29, 29, 29, 0) 217.1px);
}