/* Наші правки поверх стилів Webflow на камп-сторінках.
   Окремий файл, щоб не чіпати мініфікований creo-ua.webflow.shared.*.css:
   той приходить із репозиторію camp-spring і перезаписується при оновленні. */

/* ── Кнопки з відбитком пальця ─────────────────────────────────────
   Було: іконка позиціонована абсолютно справа, а текст центрувався по
   ВСІЙ ширині кнопки і підтягувався хаками margin-left (від -35px до
   +114px у різних кнопок) — через це напис стояв криво.
   Стало: текст займає всю смугу від лівого краю до іконки й
   центрується в ній. Працює однаково для flex- і grid-кнопок,
   не залежить від рамки та transform на іконці. */
a.link-block-45 {
  position: relative;
}

/* ── Кущ, що прикриває стик між секціями ───────────────────────────
   Вихідна картинка вертикальна (402×522). Розтягнута на 100% ширини
   вона давала високу вузьку пляму: по краях стик лишався відкритим.
   Робимо її ширшою за секцію (з виносом за краї) і нижчою —
   виходить продовгуватий кущ, який перекриває смугу з'єднання.
   object-fit: fill тут навмисно: картинку саме розтягуємо. */
/* Нижній кущ мав z-index: auto і малювався в порядку DOM — секція тарифів
   лягала поверх нього, тому стик лишався відкритим попри всі розтягування.
   У верхнього куща z-index: 1, тому там усе працювало. */
img.image-1131 {
  z-index: 2 !important;
}

img.image-1098,
img.image-1131 {
  width: 150% !important;
  left: -25% !important;
  right: auto !important;
  max-width: none !important;
  /* 1.36 замість вихідних 0.77 — ширше й нижче */
  aspect-ratio: 1.36 !important;
  height: auto !important;
  object-fit: fill !important;
}

/* ── Кущ перед секцією тарифів: позиція на решті ширин ─────────────
   Ширину й пропорції куща правило вище міняє на ВСІХ ширинах, а
   компенсація позиції була лише для ≤479px. Через це на інших ширинах
   кущ їхав: на 1280px зелень звисала на 166px усередину секції тарифів,
   а на 480–767px, навпаки, не діставала до стику (−21 і −76px).
   Орієнтир — мобільна версія, де зелень заходить за стик на ~38px.
   Значення підібрані вимірюванням: зсув bottom на N px рухає зелень на
   ті самі N px. Стоять ДО блоку @media 479, щоб не перебити його. */
img.image-1131 {
  bottom: -152px !important;
}

@media screen and (max-width: 991px) {
  img.image-1131 {
    bottom: -230px !important;
  }
}

@media screen and (max-width: 767px) {
  img.image-1131 {
    bottom: -222px !important;
  }
}

/* ── Висота кущів і відступ секції тарифів ─────────────────────────
   Кущі підняті трохи вище, а заголовок «Тарифи» опущений: раніше він
   потрапляв усередину нижнього куща (той звисав на 230px під секцію,
   а відступ заголовка був лише 72px).
   Правило живе в тому ж медіа-запиті, що й вихідні значення Webflow,
   інакше зачепило б десктоп, де діють інші відступи. */
@media screen and (max-width: 479px) {
  /* було -65.4vw */
  img.image-1098 {
    bottom: -52vw !important;
  }
  /* У картинки знизу 38.7% прозорого запасу (зелень — рядки 201..319
     із 522), тож видима зелень закінчується приблизно на 183px вище
     за нижній край блока. Позицію рахуємо від зелені, а не від блока:
     -53vw дає ~45px зелені нижче стику — він перекритий. */
  img.image-1131 {
    bottom: -53vw !important;
  }
  /* було 8vh (72px). Заголовок «Тарифи» опускаємо так, щоб він стояв
     під зеленню з невеликим просвітом, а не всередині куща. */
  .div-block-967 {
    padding-top: 19vw !important;
  }
}

a.link-block-45 > .div-block-902 {
  position: absolute !important;
  /* Центруємо зсувом, а не симетричним відступом. Відступ у 68px з обох
     боків лишав тексту лише ~304px при потрібних ~300px — впритул, і на
     проміжних ширинах напис ламався на два рядки. Тут текст займає
     стільки, скільки треба, і лишається по центру кнопки. */
  left: 50% !important;
  right: auto !important;
  top: 50% !important;
  bottom: auto !important;
  transform: translate(-50%, -50%) !important;
  width: max-content !important;
  /* Запас подвійний (2 × 68), бо текст центрований: інакше правий край
     наїжджає на іконку. На широких кнопках напис усе одно вміщується
     в один рядок; на вузьких переноситься — це неминуче. */
  max-width: calc(100% - 136px) !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  text-align: center !important;
}

/* Поки кнопка вузька, подвійний запас з'їдає забагато місця і напис
   ламається на 2–3 рядки. Тут центруємо у смузі до іконки: текст стоїть
   трохи лівіше центру кнопки, зате в один рядок. По центру самої кнопки
   вирівнюємо лише на широких екранах, де місця вистачає. */
@media screen and (max-width: 991px) {
  a.link-block-45 > .div-block-902 {
    left: calc((100% - 68px) / 2) !important;
    max-width: calc(100% - 68px) !important;
  }
}

/* ── Підписи «старт …» і «формат: …» на першому екрані ──────────────
   Було: кеглі різні (на телефоні 12px і 13px), а «формат: 9 тижнів
   онлайн» довший за свій контейнер і ламався на два рядки — на 1280,
   991 і 767px. Стало: однаковий кегль для обох і з запасом, щоб напис
   ставав в один рядок.
   Виміряні контейнери «формату»: 205px @1280, 175px @991, 169px @767,
   151px @375 — граничні кеглі 17.5 / 14.9 / 14.4 / 12.8 відповідно. */
.text-block-3329,
.text-block-3165 {
  font-size: 17px !important;
  white-space: nowrap;
}

@media screen and (max-width: 991px) {
  .text-block-3329,
  .text-block-3165 {
    font-size: 14px !important;
  }
}

@media screen and (max-width: 767px) {
  .text-block-3329,
  .text-block-3165 {
    font-size: 12px !important;
  }
}

@media screen and (max-width: 479px) {
  .text-block-3329,
  .text-block-3165 {
    font-size: 11px !important;
  }
}

/* ── Один кегль у списках тарифів ───────────────────────────────────
   Частина пунктів має власні класи Webflow з жорстким 20px, решта —
   без класу і успадковує 15.7px від секції. Через це в одному списку
   розмір стрибав. Зводимо «великі» до успадкованого: inherit сам
   підхоплює потрібне значення на кожній ширині, тож окремі правила
   для брейкпойнтів не потрібні. */
.section-57 .text-block-3264,
.section-57 .text-block-3265,
.section-57 .text-block-3266,
.section-57 .text-block-3267 {
  font-size: inherit !important;
}