/**
 * Мобільна гілка — головна: FAQ + фінальний CTA з формою і мапою.
 * Макет: фрейм 138:3740 (402×10443), секції
 *   FAQ         — чорнило 8565.9 … 8957 (заголовок 35/44.8, 4 пункти)
 *   CTA + мапа  — чорнило 9092 … 9755 (заголовок 35/44.8, форма, мапа 581×314)
 * Футер починається на 9873.
 *
 * Числа зняті з рендера figma-ref/mobile/138-3740.png по рядках чорнила.
 * Усі селектори з префіксом [data-layout="mobile"] — десктоп не зачіпається.
 */

/* ======================================================== FAQ */
/* Розділювачі (низ пунктів) у макеті: 8723.0 / 8799.5 / 8876.0 / 8957.0 */

[data-layout="mobile"] .home .faq { padding-top: 129.2px; }

[data-layout="mobile"] .faq__title {
  font-size: 35px;      /* 75 × 0.4667 — дисплейний кегль */
  line-height: 44.8px;
}

/* Ритм пунктів знятий з рендера по чотирьох розділювачах (субпіксельні центроїди
   8722.80 / 8799.50 / 8875.33 / 8956.49) і по верху чорнила питань
   (8767.0 / 8843.8 / 8913.0):
     проміжок між пунктами        33.4
     висота рядка питання (бокс)  33.45 — у макеті однорядкове питання стоїть на
                                          7.1 нижче верху пункту, а не на 3.0,
                                          як дає десктопний бокс 25.2
     низ тексту → розділювач       9.95
   Це дає всі сім орієнтирів у межах 0.9px (було: розділювачі 2 і 3 вище на
   3.0 і 6.3, питання 3 і 4 — на 2.8 і 2.0). Сам макет не ідеально регулярний:
   низ 1-го пункту просить 10.3, 4-го — 8.3; 9.95 — компроміс із найменшою
   максимальною похибкою по всіх семи орієнтирах. */
[data-layout="mobile"] .faq__list {
  margin-top: 21.1px;
  gap: 33.4px;
}

[data-layout="mobile"] .faq__item {
  position: relative;
  gap: 7.8px;               /* питання → відповідь */
  padding-bottom: 9.95px;   /* низ тексту → розділювач */
  border-bottom: 0;
}
/* Розділювач у макеті — 0.72px (десктопні 1.2 × 0.6) кольору --line-soft.
   Фон бокса заввишки 0.75px Chrome округляє так само, як border: виходив рівно
   1px повної альфи 0.45 (значення 130 на фоні 29), тоді як у макеті лінії дають
   сумарне чорнило 64 / 77 / 76 на трьох розділювачах (138:3740: y8722=42 і
   y8723=80; y8799=106; y8875=80 і y8876=54), у середньому 72 — це рівно
   0.72 × 0.45 × 226 = 73. Тому бокс робимо цілим пікселем, а вагу віддаємо
   альфі. Висота псевдоелемента на розкладку не впливає — він absolute. */
[data-layout="mobile"] .faq__item::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.324);
}

[data-layout="mobile"] .faq__q {
  gap: 7.2px;           /* колонка тексту 309.6 — як у макеті (найдовший рядок 308) */
  min-height: 33.45px;  /* не 25.2: у макеті однорядкове питання стоїть на 7.1 нижче
                           верху пункту (заміряно по чорнилу пунктів 2 і 3) */
  font-size: 15px;
  line-height: 19.2px;
}

/* Знак +/−: бокс 25.2 (42.01 × 0.6), штрих 9.54 × 1.14 — центр на x=359.4.
   У макеті знак вирівняний по ЧОРНИЛУ питання (по капітелі), а не по рядковому
   боксу, як дає align-items:center — звідси зсув угору. Число уточнене по
   центроїдах штриха в рендері (8772.30 / 8848.36 / 8927.06) після того, як
   бокс питання виріс із 25.2 до 33.45: −1.05 дає −0.1 / +0.5 / 0.0. */
[data-layout="mobile"] .faq__sign {
  flex: 0 0 25.2px;
  height: 25.2px;
  top: -1.05px;
}
[data-layout="mobile"] .faq__sign::before,
[data-layout="mobile"] .faq__sign::after {
  width: 9.54px;
  height: 1.14px;
}

[data-layout="mobile"] .faq__a {
  max-width: none;
  font-size: 10.8px;
  line-height: 13.8px;
}
[data-layout="mobile"] .faq__a p { margin: 0 0 4.8px; }
[data-layout="mobile"] .faq__a p:last-child { margin-bottom: 0; }

/* ======================================================== Фінальний CTA */

[data-layout="mobile"] .home .cta {
  padding-top: 128.37px;
  padding-bottom: 117.87px;  /* низ мапи 9755.1 → логотип футера 9873 */
}

[data-layout="mobile"] .cta__title {
  font-size: 35px;
  line-height: 44.8px;
}

/* Дві колонки (598 + мапа) → один стовпчик: текст, форма, мапа */
[data-layout="mobile"] .cta__inner {
  display: block;
  margin-top: 19.6px;
}

[data-layout="mobile"] .cta__text {
  font-size: 10.8px;
  line-height: 14.7px;
}

[data-layout="mobile"] .cta__form,
[data-layout="mobile"] .cta__col > .fluentform { margin-top: 16.92px; }
[data-layout="mobile"] .cta__form { gap: 21px; }

/* Fluent Forms #4 — ті самі селектори й !important, що у forms.css */
[data-layout="mobile"] body .cta__col .fluentform form fieldset { gap: 21px !important; }

[data-layout="mobile"] body .cta__col .ff-el-form-control {
  height: 36.8px !important;       /* 61 × 0.6 */
  /* 24 × 0.6 = 14.4 по колу; зверху +1 / знизу −1, бо в макеті текст поля
     стоїть на 1px нижче оптичного центру рамки */
  padding: 15.4px 14.4px 13.4px !important;
  border-radius: 3.6px !important; /* --r 6 × 0.6 */
  font-size: 10.8px;
  line-height: 13.8px;
}
[data-layout="mobile"] body .cta__col .ff-btn-submit {
  height: 39.6px !important;       /* 66 × 0.6 */
  padding-top: 9px;                /* підпис у макеті на 1px нижче центру кнопки */
  padding-bottom: 7px;
  border-radius: 3.6px;
  font-size: 15px;
  line-height: 19.2px;
}

/* Станів помилки й успіху дизайнерка не малювала — беремо десктопні правила
   з forms.css у тому ж масштабі ×0.6, щоб кегль не випадав із форми. */
[data-layout="mobile"] body .cta__col .error.text-danger,
[data-layout="mobile"] body .cta__col .ff-el-is-error .error {
  margin-top: 4.8px;
  font-size: 9px;
  line-height: 12px;
}
[data-layout="mobile"] body .cta__col .ff-message-success {
  padding: 10.8px 13.2px;
  border-radius: 3.6px;
  font-size: 10.8px;
  line-height: 13.8px;
}

/* Вбудована форма теми (fallback, коли шорткоду немає) — ті самі розміри */
[data-layout="mobile"] .cta .field--filled .field__control {
  height: 36.8px;
  padding: 15.4px 14.4px 13.4px;
  border-radius: 3.6px;
  font-size: 10.8px;
  line-height: 13.8px;
}
[data-layout="mobile"] .cta .field--filled .field__control::placeholder { line-height: 13.8px; }
[data-layout="mobile"] .cta__form .btn {
  height: 39.6px;
  padding: 0 7.2px;
  border-radius: 3.6px;
  font-size: 15px;
  line-height: 19.2px;
}

/* Мапа: з абсолютного шару праворуч → у потік одразу під кнопку.
   Макет: 581×314 при x = −127 (контейнер починається на 30 → зсув −157). */
[data-layout="mobile"] .cta__map {
  position: relative;
  left: 0;
  top: 0;
  width: 581px;
  margin-left: -157px;
  z-index: auto;
}

/* Геомітка: 37×37 (83 × 0.442), координати від лівого верхнього кута мапи */
[data-layout="mobile"] .cta__pin {
  left: 296.5px;
  top: 88.8px;
  width: 37px;
  height: 37px;
}