/**
 * Мобільна гілка — головна: «Портфоліо (тизер)» + «Калькулятор».
 * Макет: Figma 138:3740 (iPhone 17, полотно 402, колонка 342 при x=30).
 *
 *   Портфоліо  бокс секції 2419.05..2927.50 (h 508.4)
 *              заголовок → стрілки ЛІВОРУЧ → 1 картка 342×261
 *   Калькулятор бокс секції 2927.50..3844.25 (h 916.75)
 *              один стовпчик, 8 полів 342×46.8 крок 68.415, кнопка 342×46
 *
 * Усі числа зняті піксельно з рендера figma-ref/mobile/138-3740.png
 * (1 px рендера = 1 px макета): краї рамок і кнопок — по покриттю пікселя,
 * текст — звіркою рядків чорнила зі знімком сайту (tools/shot + власний матч-фільтр).
 * Там, де число розходиться з розбором section.py, вірний рендер: крок полів у
 * макеті 68.415 (section.py казав 68.6), інтерліньяж 3-рядкового H2 — рівно 40.2.
 *
 * Дві поправки на браузер, без них текст «пливе» на півпікселя-півтора:
 *  - Chrome округлює базову лінію в line-box до цілого пікселя (35/44.8 → 31, а не
 *    31.85), тому відступи рахуються від ЦІЄЇ базової лінії, а не від теоретичної;
 *  - CSS центрує LINE-BOX, а дизайнерка центрує КАПІТЕЛЬ; різниця 1.2px при 15/19.2
 *    гаситься верхнім падінгом (padding-top = 2 × різниця) у полях і в кнопці.
 * Відоме обмеження: Chrome округлює border-width до цілого CSS-пікселя, тому
 * рамки 0.6 (поле) і 1.2 (картка) малюються як 1px. Позицій це не зсуває.
 *
 * Кожен селектор має префікс [data-layout="mobile"], тож десктоп (полотно 1728)
 * лишається недоторканим — звірено з mobile-audit/baseline-desktop/home.png.
 */

/* ================================================================ 1. Портфоліо */

/* Міжсекційний проміжок макета — 135 від низу попередньої секції до ВЕРХУ ЧОРНИЛА
   заголовка (2419.05 + 135 = 2554.05). Базова лінія в боксі 35/44.8 у Chrome = 31,
   овал «О» піднімається над нею на 35×0.712 = 24.92 → padding = 135 + 24.92 − 31.
   +1.125 (26.09): дизайнерка вкоротила картки послуг з 211.2 до 211, низ сітки
   піднявся з 2418.6 на 2417.4, а сама секція портфоліо в новому рендері
   (figma-ref/v2/138-3740.png) лишилась на місці — на сайті сітка стала коротшою
   на 6 × 0.1875 = 1.125 (211.2 браузер тримав як 211.1875), їх і повертаємо сюди,
   щоб усе нижче не зрушило ні на піксель. */
[data-layout="mobile"] .home .portfolio-teaser { padding-top: 130.045px; }

/* Заголовок «ПОРТФОЛІО»: 35/44.8 вага 100 (десктоп 75/96) */
[data-layout="mobile"] .portfolio-teaser .sec-head { row-gap: 0; }

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

/* Стрілки переїжджають ПРАВОРУЧ → ЛІВОРУЧ (x=30), бокс 37.8 замість 63, гап 29.4.
   Макет: верх кнопок 2603.65 (=секція+184.60), верх картки 2666.45 (=секція+247.38).
   Чорнило стрілки займає 11.58..26.22 від верху кнопки — звірено по обох рендерах. */
[data-layout="mobile"] .portfolio-teaser .sec-head__arrows {
  justify-self: start;
  margin-top: 10.88px;
  margin-bottom: 24.98px;
}

[data-layout="mobile"] .portfolio-teaser .arrows { gap: 29.4px; }

[data-layout="mobile"] .portfolio-teaser .arrows__btn {
  width: 37.8px;
  height: 37.8px;
}

/* У макеті ліва стрілка намальована суцільним #4F4D4D (яскравість 79). Тема ж
   на першому слайді ставить aria-disabled і гасить її до 0.35 — виходить 46.
   Повертаємо повну непрозорість: «недоступність» у макеті передана самим кольором
   (ліва сіра / права біла). Правої це не стосується — вона гасне в кінці стрічки. */
[data-layout="mobile"] .portfolio-teaser .arrows__btn--prev[aria-disabled="true"] { opacity: 1; }

/* Стрічка: у кадрі рівно 1 картка 342 (= вся колонка), сусідньої не видно.
   Гап 52.2 (87 × 0.6) виносить наступну картку за праву межу полотна 402,
   як у макеті; крок каруселі JS бере з offsetLeft, тож гортання не ламається. */
[data-layout="mobile"] .portfolio-teaser__track {
  gap: 52.2px;
  margin-top: 0;
}

[data-layout="mobile"] .portfolio-teaser .case-card { flex: 0 0 342px; }

[data-layout="mobile"] .portfolio-teaser .case-card__link {
  height: 261px;
  border-radius: 3.6px;
}

[data-layout="mobile"] .portfolio-teaser .case-card__link::after {
  border-width: 1.2px;
  border-radius: 3.6px;
}

/* Мідна рамка активної картки — 1.2px замість 2px */
[data-layout="mobile"] .portfolio-teaser .case-card.is-active .case-card__link {
  box-shadow: inset 0 0 0 1.2px var(--accent);
}

/* Плашки ↗ у макеті на картці НЕМАЄ */
[data-layout="mobile"] .portfolio-teaser .case-card__go { display: none; }

/* Текст на картці: x=57.4 (27.4 від краю картки). Базові лінії в макеті:
   надзаголовок 2691.0 (=картка+24.55), перший рядок назви 2711.5 (=картка+45.05).
   У Chrome base-line 9.47/12.1 → 8, 13.05/16.7 → 11, звідси top і gap. */
[data-layout="mobile"] .portfolio-teaser .case-card__body {
  left: 27.4px;
  top: 16.6px;
  gap: 5.36px;
}

[data-layout="mobile"] .portfolio-teaser .case-card__eyebrow {
  font-size: 9.47px;
  line-height: 12.1px;
}

[data-layout="mobile"] .portfolio-teaser .case-card__title {
  font-size: 13.05px;
  line-height: 16.7px;
}

/* =============================================================== 2. Калькулятор */

/* Низ картки портфоліо 2927.50 + 135 = 3062.50 — верх чорнила «СКІЛЬКИ».
   Базова лінія в боксі 35/40.2 у Chrome = 29 → padding = 135 + 24.92 − 29. */
[data-layout="mobile"] .home .calc { padding-top: 130.92px; }

/* У мобільному макеті фонового фото і всіх трьох вуалей секції НЕМАЄ */
[data-layout="mobile"] .calc__media { display: none; }
[data-layout="mobile"] .veils--calc { display: none; }

/* Дві колонки (731 + 494) → один стовпчик на всю ширину 342 */
[data-layout="mobile"] .calc__inner { display: block; }

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

[data-layout="mobile"] .calc__text {
  margin-top: 7.49px;
  max-width: none;
  font-size: 15px;
  line-height: 16px;
}

/* Верх першого поля — секція+325.55 (3253.05). Підзаголовок закінчується на
   секція+275.01, звідси 50.54. Крок полів 68.415 = 46.8 + gap 21.615.
   +0.89: нижні рамки всіх восьми полів у рендері стоять на 3299.0 / 3367.49 /
   3436.0 / 3504.39 / 3572.8 / 3641.0 / 3709.41 / 3778.0, а на сайті виходили
   рівно на ~0.89 вище (3298 / 3367 / 3435 / 3503 / 3572 / 3640 / 3709 / 3777).
   Крок при цьому збігався (середній 68.43 в обох) — зсунута була вся сітка.
   Кнопка стояла правильно (3803.5 проти 3803.61), тому її обгортці нижче
   відібрано ті самі 0.89, і низ секції не поїхав. */
[data-layout="mobile"] .calc__panel { margin-top: 51.43px; }

/* Примітки під кнопкою в макеті НЕМАЄ */
[data-layout="mobile"] .calc__note { display: none; }

/* ---------------------------------------------- Fluent Forms #3 (жива форма) */
/* Десктопні перекриття у forms.css мають префікс body та !important — тому тут
   селектор «[data-layout="mobile"] body …» (на одиницю вища специфічність) і теж !important. */

[data-layout="mobile"] body .calc__panel .fluentform form fieldset { gap: 21.615px !important; }

[data-layout="mobile"] body .calc__panel .ff-el-form-control {
  height: 46.8px !important;
  /* padding-top 2.4 замість 0: CSS центрує LINE-BOX, а в макеті по центру поля
     стоїть КАПІТЕЛЬ — різниця 1.2px при 15/19.2, гасимо половиною верхнього падінга */
  padding: 2.4px 28.8px 0 13.55px !important;
  /* Рамка 0.6px. Chrome округляє border-width до цілого CSS-пікселя — перевірено
     знімками на dpr 1/2/3: 0.6px усюди виходить рівно 1px повного кольору
     (131 на фоні 29 = вся альфа 0.45 змінної --line-soft), тоді як у макеті
     верхня рамка розмазана на два рядки з сумарним чорнилом 64/226 = 0.28
     (138:3740, y=3252 значення 42 + y=3253 значення 80). Ширину лишаємо 1px,
     а частку пікселя віддаємо альфою — через саму змінну, щоб не чіпати
     border-color станів (:hover, :focus, .vk-open, .ff-el-is-error), які
     forms.css виставляє окремо. */
  --line-soft: rgba(255, 255, 255, 0.283);
  border-width: 1px !important;
  border-radius: 3.6px !important;
  font-size: 15px;
  line-height: 19.2px;
}

/* «Плаваючий» лейбл 6.48/8.3 на верхній рамці. Базова лінія підпису в макеті —
   на 2.46 нижче верху поля, у Chrome base-line у боксі 8.3 округлюється до 6 → top −3.54.
   Кегль/інтерліньяж ОБОВ'ЯЗКОВО і на обгортці: усередині неї <label> — inline-block,
   і без цього він сідає на «струт» від body (18/26.5) і провалюється в поле на 12px. */
[data-layout="mobile"] body .calc__panel .ff-el-input--label {
  top: -3.54px;
  left: 21px;
  padding: 0 17px;
  font-size: 6.48px;
  line-height: 8.3px;
}

[data-layout="mobile"] body .calc__panel .ff-el-input--label label {
  font-size: 6.48px;
  line-height: 8.3px;
}

/* Шеврон: чорнило 7.72×4.6 у макеті стоїть при x=350.1..357.9, центр на 24.93 від
   верху поля — тобто на 1.5px НИЖЧЕ центру поля, так намальовано. Форма інша, ніж у
   десктопній «галочці» (V ширший за висотою: 7.0×3.88 при штриху 0.72), тому свій SVG.
   background-origin — padding-box, тому числа на 0.6 (рамку) менші за виміряні. */
[data-layout="mobile"] body .calc__panel select.ff-el-form-control {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7.72' height='4.6' viewBox='0 0 7.72 4.6' fill='none'%3E%3Cpath d='M.36.36 3.86 4.24 7.36.36' stroke='%23fff' stroke-width='.72' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: right 13.1px top 21.7px;
}

[data-layout="mobile"] body .calc__panel select.ff-el-form-control.vk-open {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7.72' height='4.6' viewBox='0 0 7.72 4.6' fill='none'%3E%3Cpath d='M.36 4.24 3.86.36 7.36 4.24' stroke='%23B87333' stroke-width='.72' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Кнопка 342×46 на секція+870.75 (3798.25) — низ кнопки = низ секції.
   Проміжок від 8-го поля до кнопки в макеті 19.5, а не 21.615 як між полями,
   тому обгортці кнопки мінус 2.03 до сітки fieldset. */
[data-layout="mobile"] body .calc__panel .ff-btn-submit {
  height: 46px !important;
  padding: 2.88px 0 0 !important;   /* те саме: капітель по центру кнопки */
  border-radius: 3.6px;
  font-size: 15px;
  line-height: 19.2px;
}

/* −2.03 (проміжок до кнопки в макеті 19.5, а не 21.615) − 0.89 (зсув сітки полів,
   див. .calc__panel вище) = −2.92: кнопка лишається на 3757.6…3803.6, як у макеті. */
[data-layout="mobile"] body .calc__panel .ff_submit_btn_wrapper { margin-top: -2.92px; }

/* Повідомлення про помилку / успіх у макеті не намальовані — масштабуємо ×0.6 */
[data-layout="mobile"] body .calc__panel .error.text-danger,
[data-layout="mobile"] body .calc__panel .ff-el-is-error .error {
  margin-top: 4.8px;
  font-size: 9px;
  line-height: 12px;
}

[data-layout="mobile"] body .calc__panel .ff-message-success {
  padding: 10.8px 13.2px;
  border-radius: 3.6px;
  font-size: 10.8px;
}

/* ------------------------------- Вбудована форма теми (фолбек без Fluent Forms) */

[data-layout="mobile"] .calc__form { gap: 21.615px; }

[data-layout="mobile"] .calc__panel .field__control {
  height: 46.8px;
  padding: 2.4px 28.8px 0 13.55px;
  --line-soft: rgba(255, 255, 255, 0.283);   /* див. коментар вище */
  border-width: 1px;
  border-radius: 3.6px;
  font-size: 15px;
  line-height: 19.2px;
}

[data-layout="mobile"] .calc__panel .field__label {
  top: -3.54px;
  left: 21px;
  padding: 0 17px;
  font-size: 6.48px;
  line-height: 8.3px;
}

[data-layout="mobile"] .calc__panel .field--select .icon--chevron {
  right: 14.1px;
  width: 7.2px;
  height: 7.2px;
}

[data-layout="mobile"] .calc__panel .btn--primary {
  height: 46px;
  padding: 0 21px;
  border-radius: 3.6px;
  font-size: 15px;
  line-height: 19.2px;
}

/* ------------------------------------------- Своя випадайка (у макеті її немає) */
/* Дизайнерка список не малювала — беремо десктопний компонент рівно ×0.6,
   щоб кегль і рамка збігалися з полем, під яким він розкривається. */

[data-layout="mobile"] .vk-select {
  max-height: 198px;
  padding: 3.6px 0;
  border-width: 0.6px;
  border-radius: 3.6px;
}

[data-layout="mobile"] .vk-select__option {
  min-height: 33.6px;
  padding: 7.2px 14.4px;
  font-size: 15px;
  line-height: 19.2px;
}