/* Заміна компонентів Webflow. Вигляд лишається той самий — міняється лише
   те, що змушує їх працювати: замість webflow.js із чужого домену тут
   нативний CSS і кількадесят рядків свого JS.

   Правила навмисно з тими самими класами `w-*`, що вже стоять у розмітці:
   так сторінки не треба переписувати, вони просто починають працювати. */

/* ── слайдер ──────────────────────────────────────────────────────────
   Webflow ставив слайди в рядок через inline-block і рухав маску скриптом.
   Без нього слайди падали стовпчиком — саме так секція наставників на
   /speak-more/mane розтягнулась на 12 697px. Тут рядок тримає flex, а
   гортання дає нативний scroll-snap: працює пальцем, колесом і клавішами,
   без жодного JS. */
.w-slider { position: relative; }
.w-slider-mask {
  display: flex; gap: 0;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.w-slider-mask::-webkit-scrollbar { display: none; }
.w-slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  white-space: normal;
}
/* Маска з часткою ширини — це Webflow-івський спосіб сказати «показуй
   кілька слайдів одразу». Перекладаємо частку в ширину слайда. */
.card_mask.w-slider-mask { width: 100%; }
.card_mask.w-slider-mask > .w-slide { flex-basis: 33.333%; }
@media (max-width: 991px) { .card_mask.w-slider-mask > .w-slide { flex-basis: 50%; } }
@media (max-width: 640px)  { .card_mask.w-slider-mask > .w-slide { flex-basis: 100%; } }

/* Стрілки і точки лишаються на своїх місцях — їм міняється лише обробник */
.w-slider-arrow-left, .w-slider-arrow-right { cursor: pointer; user-select: none; }
.w-slider-nav { display: flex; justify-content: center; gap: 8px; }

/* ── меню ─────────────────────────────────────────────────────────────
   Бургер відкривав меню через Webflow-івський IX2. Тепер це клас .відкрито,
   який вішає наш скрипт. */
@media (max-width: 991px) {
  .w-nav-menu { display: none; }
  .w-nav.відкрито .w-nav-menu {
    display: block; position: absolute; left: 0; right: 0; top: 100%;
    background: #fff; padding: 12px 18px 18px; z-index: 60;
    box-shadow: 0 12px 30px rgba(18, 5, 52, .14);
  }
  .w-nav-button { display: block; cursor: pointer; }
}

/* ── форма ────────────────────────────────────────────────────────────
   Webflow ховав форму й показував «дякуємо» своїм скриптом. Стани ті самі,
   перемикає їх наш обробник. */
.w-form-done, .w-form-fail { display: none; }
.w-form.відправлено > form { display: none; }
.w-form.відправлено .w-form-done { display: block; }
.w-form.помилка .w-form-fail { display: block; }

/* ── розкривний блок програми ──────────────────────────────────────────
   Кнопку «Переглянути програму тижня» в оригіналі відкривала анімаційна
   система Webflow; ми відкриваємо блок самі, знімаючи інлайновий
   display:none. Але тоді блок бере базове правило `display:flex` без
   напрямку — а сім карток по 13.3em у рядок не влазять і одна одну
   стискають. Тому дозволяємо перенос: на широкому екрані виходить кілька
   рядів, на телефоні лишається рідний стовпчик (@media до 479px). */
@media (min-width: 480px) {
  .program-days-wrapper {
    flex-flow: row wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 2.4em 1.2em;
  }
}

/* ── картка тарифу ─────────────────────────────────────────────────────
   Колонка тарифу стискалась до 294px при секції 1280 — картка з рюкзаком
   і списком виглядала як випадковий стовпчик, а не як тариф. Даємо їй
   осмислену ширину і тримаємо по центру. */
@media (min-width: 768px) {
  .sm-price-all_wrapper { justify-content: center; align-items: stretch; }
  .sm-price_column_wrapper { flex: 0 1 clamp(320px, 42vw, 460px); }
  .sm-price_column-content_wrapper { width: 100%; }
}

/* ── тариф у стилі мінікурсу TEVISA ───────────────────────────────────
   Було: картинка з рюкзаком, під нею список із сірими крапками, ціна десь
   унизу — на тариф це не схоже, бо немає межі картки, галочок і акценту
   на ціні. Формула, яка працює в TEVISA: обведена картка, список із
   галочками в кружечках, стара ціна закреслена поруч із новою великою,
   кнопка на всю ширину. Тут те саме у кольорах Study Less. */
@media (min-width: 768px) {
  .sm-price-all_wrapper { justify-content: center; align-items: stretch; gap: 24px; }
  .sm-price_column_wrapper { flex: 0 1 clamp(320px, 42vw, 460px); }
}
.sm-price_column-content_wrapper {
  width: 100%;
  background: #fff;
  border: 1px solid #e5e8f4;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 14px 40px rgba(18, 5, 52, .08);
}
/* Картинка-шапка картки: обрізаємо надмірну висоту — рюкзак на 400px
   з'їдав увесь екран і відсував список із ціною за межі видимого. */
.sm-price_wrapper { max-height: 240px; overflow: hidden; border-radius: 22px 22px 0 0; }
.sm-price_wrapper .price-img1 { object-fit: contain; }

/* Список: галочки замість типових крапок */
.price-list { list-style: none !important; padding-left: 0 !important; padding: 4px 22px 0 !important; }
.price-list-item { display: flex; gap: 11px; align-items: flex-start; list-style: none; }
.price-list-item::before {
  content: ''; flex: none; width: 21px; height: 21px; margin-top: 3px; border-radius: 50%;
  background: rgba(249, 149, 0, .16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23f99500' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/13px no-repeat;
}
.price-list-item .sm-txt-18 { font-size: 15px !important; line-height: 1.45; }

/* Ціна і кнопка — низ картки, як у TEVISA */
.sm-price_column_wrapper .sm-button,
.sm-price_column_wrapper a[class*="button"] {
  display: flex; align-items: center; justify-content: center;
  width: calc(100% - 44px); margin: 18px 22px 22px; text-align: center;
}

/* ── свій блок тарифу (замінює секцію Webflow цілком) ──────────────── */
.слт{padding:clamp(46px,6vw,86px) 0;background:#eef2f8;
  font-family:Montserrat,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color:#120534}
.слт *,.слт *::before{box-sizing:border-box}
.слт__обгортка{max-width:640px;margin:0 auto;padding:0 20px}
.слт__заголовок{font-size:clamp(28px,4.4vw,42px);font-weight:900;line-height:1.06;
  margin:0 0 8px;text-align:center}
.слт__підпис{margin:0 0 28px;text-align:center;color:#6b7280;font-size:15.5px}
.слт__картка{background:#fff;border:1px solid #e5e8f4;border-radius:24px;overflow:hidden;
  box-shadow:0 18px 46px rgba(18,5,52,.10)}
.слт__шапка{background:#120534;color:#fff;padding:24px 26px}
.слт__мітка{display:block;font-size:20px;font-weight:800}
.слт__строк{display:block;margin-top:4px;font-size:13.5px;color:#c9c4dd}
.слт__список{list-style:none;margin:0;padding:22px 26px;display:grid;gap:13px}
.слт__список li{display:flex;gap:12px;align-items:flex-start;font-size:15.5px;line-height:1.45}
.слт__список li::before{content:'';flex:none;width:21px;height:21px;margin-top:1px;border-radius:50%;
  background:rgba(249,149,0,.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23f99500' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/13px no-repeat}
.слт__низ{padding:4px 26px 26px;border-top:1px solid #f0f2f8;margin-top:4px}
.слт__ціна{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:18px 0 16px}
.слт__стара{font-size:19px;color:#9aa0ad;text-decoration:line-through}
.слт__нова{font-size:clamp(34px,5vw,46px);font-weight:900;line-height:1}
.слт__знижка{background:#f99500;border-radius:999px;padding:5px 13px;font-size:14px;font-weight:800}
.слт__кнопка{display:flex;align-items:center;justify-content:center;width:100%;min-height:58px;
  border-radius:999px;background:#f99500;color:#120534;font-size:17px;font-weight:800;
  text-decoration:none;transition:transform .14s ease,box-shadow .14s ease}
.слт__кнопка:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(249,149,0,.34)}
.слт__дрібне{margin:12px 0 0;text-align:center;font-size:13px;color:#6b7280}

/* ── свої блоки випускників і відгуків ─────────────────────────────────
   Обидві секції в оригіналі були слайдерами Webflow, стрілки яких лежать у
   сусідніх секціях і керують тим, чого поруч немає. Тому там і стирчала
   одна картка з половиною другої, а гортання спрацьовувало з другого кліку.
   Тут — нативна стрічка: пальцем, колесом, клавішами, без скриптів. */
.слв,.слвід{padding:clamp(44px,6vw,78px) 0;
  font-family:Montserrat,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}
.слв{background:#120534;color:#fff}
.слвід{background:#f6f7f9;color:#120534}
.слв *,.слвід *{box-sizing:border-box}
.слв__обгортка,.слвід__обгортка{max-width:1180px;margin:0 auto;padding:0 20px}
.слв__заголовок,.слвід__заголовок{font-size:clamp(26px,4vw,42px);font-weight:900;margin:0 0 6px}
.слв__підзаголовок{margin:0 0 4px;color:#c9c4dd;font-size:15.5px}
.слвід__підзаголовок{margin:0 0 4px;color:#6b7280;font-size:15.5px}

/* Стрічка: смуга прокрутки прихована, але прокрутка лишається — інакше на
   десктопі без тачпада картки недосяжні. */
.слв__стрічка,.слвід__стрічка{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:26px 4px 12px;margin:0 -4px;scroll-behavior:smooth;
  scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.слв__стрічка>*,.слвід__стрічка>*{flex:0 0 auto;scroll-snap-align:start}

.слв__картка{width:clamp(210px,72vw,248px);background:#fff;color:#120534;
  border-radius:20px;padding:0 18px 20px;text-align:center;position:relative;margin-top:44px}
.слв__фото{width:104px;height:104px;border-radius:50%;object-fit:cover;
  margin:-44px auto 12px;display:block;border:4px solid #fff}
.слв__підпис b{display:block;font-size:19px;font-weight:800}
.слв__підпис span{display:block;font-size:13.5px;color:#6b7280}
.слв__хто{margin-top:6px;font-weight:600}

.слвід__знімок{width:clamp(230px,74vw,286px);height:auto;border-radius:18px;
  background:#fff;box-shadow:0 10px 30px rgba(18,5,52,.10)}

/* Логотип у шапці курсу був 60px — новий знак дрібніший за старий (у того
   був підпис «language school»), тому на місці попереднього він загубився. */
.см-шапка__лого, .image-179 { width: 116px !important; height: auto; }
@media (max-width: 900px) { .image-179 { width: 96px !important; } }