/* ═══════════════════════════════════════════════
   АДАПТИВНІСТЬ — мобільні та планшетні виправлення

   Підключається ПІСЛЯ css/style.css і після інлайнових
   <style> сторінки, тому перекриває і глобальні, і
   сторінкові правила без зміни їхньої специфічності.

   Теми окремих сторінок керуються змінними:
     --nav-fg           — колір гамбургера
     --nav-panel-border — нижня межа висувної панелі
   Решта кольорів успадковується від .nav__links / .nav__cta.
═══════════════════════════════════════════════ */

/* ───────────────────────────────────────────────
   ГАМБУРГЕР
─────────────────────────────────────────────── */
.nav__burger {
  display: none;
  -webkit-appearance: none;
  appearance: none;
  align-self: center;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  margin: 0;
  border: none;
  background: none;
  color: var(--nav-fg, var(--color-white));
  cursor: pointer;
  border-radius: 10px;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.nav__burger:focus-visible {
  outline: 2px solid var(--color-yellow);
  outline-offset: 2px;
}

.nav__burger-box {
  position: relative;
  display: block;
  width: 24px;
  height: 16px;
  margin: 0 auto;
}

.nav__burger-bar {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.25s ease, opacity 0.2s ease, top 0.25s ease;
}

.nav__burger-bar:nth-child(1) { top: 0; }
.nav__burger-bar:nth-child(2) { top: 7px; }
.nav__burger-bar:nth-child(3) { top: 14px; }

.nav__burger[aria-expanded="true"] .nav__burger-bar:nth-child(1) {
  top: 7px;
  transform: rotate(45deg);
}
.nav__burger[aria-expanded="true"] .nav__burger-bar:nth-child(2) {
  opacity: 0;
}
.nav__burger[aria-expanded="true"] .nav__burger-bar:nth-child(3) {
  top: 7px;
  transform: rotate(-45deg);
}

/* ───────────────────────────────────────────────
   ВИСУВНА ПАНЕЛЬ МЕНЮ
─────────────────────────────────────────────── */
.mobile-nav {
  position: fixed;
  top: var(--header-height);
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99;
  /* background-color, а не скорочення background — щоб сторінки
     могли додати власну текстуру через background-image */
  background-color: var(--color-hero-bg);
  border-bottom: 0;
  box-shadow: none;
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease;
}

.mobile-nav[hidden] {
  display: none;
}

.mobile-nav--open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.mobile-nav__inner {
  display: flex;
  flex-direction: column;
  gap: 4px;
  height: 100%;
  padding-top: 8px;
  padding-bottom: 24px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Клас .nav__links збережено, щоб пункти успадкували тему сторінки,
   тому глобальне `display: none` треба перебити. */
.mobile-nav .mobile-nav__links {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  align-self: stretch;
}

.mobile-nav .mobile-nav__links a {
  display: flex;
  align-items: center;
  min-height: 56px;
  height: auto;
  padding: 12px 0;
  font-size: 17px;
  font-weight: 500;
  border-bottom: 1px solid rgba(127, 127, 127, 0.22);
}

.mobile-nav .mobile-nav__links a::after {
  display: none;
}

.mobile-nav__cta {
  width: 100%;
  margin-top: auto;
  min-height: 52px;
  font-size: 16px;
  background: var(--color-yellow);
  color: var(--color-black);
  border-color: var(--color-yellow);
}

/* Поки меню відкрите: хедер фіксуємо у viewport. Інакше sticky
   ламається від overflow:hidden на body і верхня панель зникає
   поверх прокрученої сторінки — закрити меню стає неможливо. */
html.nav-open .header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  transform: none;
  pointer-events: auto;
}

html.nav-open .header.header--hidden {
  transform: none;
  pointer-events: auto;
}

/* Прозорий хедер сторінок курсів стає щільним разом із меню */
html.nav-open .header.header--over-hero {
  background-color: var(--color-hero-bg);
}

html.nav-open,
html.nav-open body {
  overflow: hidden;
}

/* Фіксований хедер випадає з потоку — компенсуємо, щоб контент
   не стрибав угору під меню. */
html.nav-open body {
  padding-top: var(--header-height);
}

@media (prefers-reduced-motion: reduce) {
  .mobile-nav,
  .nav__burger-bar,
  #services .tabs-wrap,
  .edu-programs .tabs-wrap,
  .corp-programs .tabs-wrap {
    transition: none;
  }
}

/* ───────────────────────────────────────────────
   ХЕДЕР — гамбургер замість повної навігації
   до 1023px (при 1024px повне меню ще вміщається)
─────────────────────────────────────────────── */
@media (max-width: 1023px) {
  .nav__burger {
    display: inline-flex;
  }

  .header__inner .nav__links,
  .header__inner .nav__cta {
    display: none;
  }

  .header__inner {
    grid-template-columns: 1fr auto;
  }

  .header__inner--logo-only {
    grid-template-columns: 1fr;
  }

  .logo {
    justify-content: flex-start;
  }

  :root {
    --logo-width: 188px;
  }

  .nav__right {
    gap: 0;
    align-items: center;
  }
}

@media (min-width: 1024px) {
  .mobile-nav {
    display: none;
  }
}

/* ───────────────────────────────────────────────
   ПЛАНШЕТ (≤1024px)
─────────────────────────────────────────────── */
@media (max-width: 1024px) {
  /* Підзаголовок hero більше не звужується під ширину рядка заголовка */
  .hero__rail-sizer { display: none; }
  .hero__rail { width: auto; max-width: 100%; }
  .hero__subtitle { width: auto; min-width: 0; font-size: 16px; }

  .hero__photo-card { max-width: 360px; }

  .about__inner { gap: 48px; padding: 44px; }
  .about__name { font-size: 40px; }
  .about__text { max-width: none; }

  .contact { padding: 72px 0; }
  .contact__title { font-size: 46px; }

  /* Таби на планшетах: придатні до натискання й без переносу рядків,
     який ламав індикатор активної вкладки. */
  .tab-btn,
  .edu-programs .tab-btn,
  .corp-programs .tab-btn {
    padding: 10px 18px;
    min-height: 42px;
  }

  .edu-programs .tabs,
  .corp-programs .tabs {
    flex-wrap: nowrap;
  }

  .instructor-card__badge { font-size: 12px; padding: 4px 12px; }
  .instructor-card__badge i { font-size: 10px; }
}

/* ───────────────────────────────────────────────
   МОБІЛЬНІ (≤768px)
─────────────────────────────────────────────── */
@media (max-width: 768px) {
  .container { padding: 0 20px; }

  /* PNG логотипа має прозоре поле зліва. Додатковий оптичний відступ
     вирівнює пункти розкритого меню по видимому краю напису.
     Повний padding потрібен тут, бо .container { padding: 0 20px }
     обнуляє верх і низ. */
  .mobile-nav__inner {
    padding: 8px 33px 24px;
  }

  .section-subtitle { font-size: 16px; margin-bottom: 32px; }

  /* ── Секційні відступи ── */
  .services { padding: 56px 0; }
  .articles { padding: 56px 0; }
  .contact  { padding: 56px 0; }
  .about    { padding: 16px 0; }

  /* ── Hero ── */
  .hero__photo-card {
    max-width: none;
    width: 100%;
  }
  .hero__photo-wrap { padding: 0 4px; }
  .hero__actions { gap: 12px; margin-top: 20px; }
  .hero__actions .btn { width: 100%; min-height: 54px; }

  .clients {
    --client-logo-radius: 16px;
    --client-logo-padding: 10% 12%;
  }

  .clients .splide__track {
    overflow: hidden;
  }

  #clients-carousel.is-mobile-marquee .splide__list {
    display: flex !important;
    flex-wrap: nowrap;
    gap: 8px;
    width: max-content !important;
    animation: clients-marquee var(--clients-marquee-duration, 34s) linear infinite;
    will-change: transform;
  }

  #clients-carousel.is-mobile-marquee .splide__slide {
    flex: 0 0 120px;
    width: 120px !important;
  }

  @keyframes clients-marquee {
    to { transform: translateX(calc(-50% - 4px)); }
  }
}

/* Планшет у портреті: hero ще має місце на дві колонки — у стосі
   фото зависало по центру над текстом і праворуч лишалась пустка. */
@media (min-width: 601px) and (max-width: 768px) {
  .hero__panel {
    grid-template-columns: 1.15fr 0.85fr;
    gap: 16px;
    padding: 18px;
  }
  .hero__content { padding: 0 8px; }
  /* Плавний розмір, щоб заголовок не ламався на три рядки біля 601px */
  .hero__title-main,
  .hero__title-keep { font-size: clamp(26px, 4.6vw, 34px); }
  .hero__title-accent { font-size: clamp(19px, 3.1vw, 22px); }
  .hero__photo-wrap {
    order: 0;
    justify-content: flex-end;
    align-items: center;
  }
  .hero__photo-card {
    max-width: 100%;
    margin-left: auto;
    justify-content: flex-end;
  }
}

@media (max-width: 768px) {

  /* ── Таби головної: повноширинні та липкі до секції «Про мене» ──
     --header-offset задає js/main.js: висота хедера, поки той видимий,
     і 0, коли він поїхав угору. Тривалість збігається з анімацією хедера,
     щоб таби рухались із ним, а не вискакували з-під нього. */
  #services .tabs-wrap {
    position: sticky;
    top: var(--header-offset, var(--header-height));
    transition: top 0.45s ease-in-out;
    z-index: 90;
    margin: 0 -20px 24px;
    padding: 8px 20px;
    background: var(--color-white);
  }

  #services .tabs {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 3px;
  }

  #services .tab-btn {
    flex: 1 1 100%;
    width: 100%;
    white-space: normal;
  }

  /* На сторінках програм мобільний hero завжди починається з картинки. */
  .edu-hero__media,
  .corp-hero__media {
    order: -1;
  }

  /* Чотири рівні зони фільтра 2×2 та така сама липка поведінка,
     як у перемикача послуг на головній. */
  .edu-programs .tabs-wrap,
  .corp-programs .tabs-wrap {
    position: sticky;
    top: var(--header-offset, var(--header-height));
    z-index: 90;
    margin: 0 -20px 32px;
    padding: 8px 20px;
    background: var(--color-white);
    transition: top 0.45s ease-in-out;
  }

  .edu-programs .tabs,
  .corp-programs .tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    gap: 3px;
  }

  body .edu-programs .tab-btn,
  body .corp-programs .tab-btn {
    width: 100%;
    min-width: 0;
    min-height: 54px;
    padding: 9px 8px;
    white-space: normal;
    line-height: 1.25;
  }

  .tab-btn,
  .edu-programs .tab-btn,
  .corp-programs .tab-btn {
    flex: 0 1 auto;
    padding: 11px 14px;
    font-size: 13px;
    min-height: 42px;
  }

  /* ── Картки послуг ── */
  .coaching-card { padding: 28px 22px; }
  .coaching-card__title { font-size: 19px; }
  .coaching-card .btn { min-height: 50px; }

  /* ── Каруселі ── */
  .articles__nav-btn { width: 44px; height: 44px; font-size: 14px; }
  .courses-nav { gap: 16px; }

  /* ── Форми ── */
  /* 16px — щоб iOS не зумив сторінку при фокусі на полі */
  .form-group input,
  .form-group textarea { font-size: 16px; }
  .form-group textarea { min-height: 104px; }
  .contact__desc { font-size: 15px; margin-bottom: 28px; }
  .contact__social { gap: 14px; margin-bottom: 24px; }

  /* ── Модальні вікна ── */
  .signup-modal-overlay {
    align-items: flex-start;
    padding: 16px;
  }
  .signup-modal {
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
    border-radius: 20px;
  }

  /* ── Футер ── */
  .footer { padding: 28px 0; }
  .footer__logo { height: 44px; }

  /* ── Сторінки курсів ── */
  .instructor-card__badge { font-size: 12px; padding: 4px 12px; }
  .instructor-card__badge i { font-size: 10px; }
  .course-features { padding-bottom: 64px; }
  .course-cta { padding-bottom: 64px; }
  .course-instructors { padding: 56px 0; }
}

/* ───────────────────────────────────────────────
   ВУЗЬКІ ЕКРАНИ (≤600px)
─────────────────────────────────────────────── */
@media (max-width: 600px) {
  /* Акордеон програми: номер над заголовком, а не в окремій колонці —
     інакше заголовку залишається ~140px і він розсипається на 6 рядків. */
  .program-module__header {
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 16px;
    row-gap: 6px;
    padding: 22px 0;
    align-items: start;
  }

  .program-module__number {
    grid-column: 1;
    grid-row: 1;
    font-size: 22px;
  }

  .program-module__meta {
    grid-column: 1;
    grid-row: 2;
  }

  .program-module__toggle {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    width: 40px;
    height: 40px;
  }

  .program-module__body {
    padding: 0 0 26px;
  }

  .program-module__title { font-size: 18px; }
}

/* ───────────────────────────────────────────────
   МАЛІ ТЕЛЕФОНИ (≤480px)
─────────────────────────────────────────────── */
@media (max-width: 480px) {
  .section-title { font-size: 28px; }

  .services { padding: 48px 0; }
  .articles { padding: 48px 0; }
  .contact  { padding: 48px 0; }

  .hero__title-main,
  .hero__title-keep { font-size: 30px; }
  .hero__title-accent { font-size: 20px; }
  .hero__subtitle { font-size: 15px; }
  .hero__photo-card { max-width: none; }
  .hero__actions .btn { width: 100%; }

  .contact__title { font-size: 32px; }

  .about__inner { padding: 28px 20px; gap: 28px; }
  .about__name { font-size: 30px; }
  .about__text { font-size: 14px; margin-bottom: 24px; }

  .articles__aside { padding: 20px; gap: 20px; }
  .articles__main { padding: 12px; }
  .articles__title { font-size: 28px; }

  .coaching-card { padding: 24px 18px; }
  .coaching-card__icon { width: 46px; height: 46px; font-size: 20px; }

  /* Кнопки з довгими підписами не мають вилазити за екран */
  .btn { padding: 14px 20px; }
  .hero__actions .btn { padding: 16px 20px; }

  .signup-modal { padding: 28px 20px 24px; }
  .signup-modal__title { font-size: 20px; }

  /* Сторінки курсів */
  .course-hero__title { font-size: 26px; }
  .course-hero__title-accent { font-size: 21px; }
  .course-overview__title { font-size: 23px; }
  .course-program__bubble { padding: 26px 18px; }
  .course-program__title { font-size: 23px; }
  .course-cta__bubble { padding: 26px 18px; }
  .course-cta__title { font-size: 23px; }
  .course-cta__desc { font-size: 15px; }
  .course-cta__actions { flex-direction: column; }
  .course-cta__actions .btn { width: 100%; }
  .course-features__video-title { font-size: 23px; }

  /* Освітні продукти */
  .edu-hero__title { font-size: 28px; }
  .edu-corp-promo__title { font-size: 20px; }

  /* Корпоративні програми */
  .corp-hero__title { font-size: 28px; }
  .corp-hero__actions .btn { width: 100%; }
  .corp-principles__title { font-size: 20px; }

  /* Коучинг і консультування */
  .coach-hero__title { font-size: 28px; }

  /* Партнерська сторінка */
  .partner-hero__title { font-size: 26px; }
}

/* ───────────────────────────────────────────────
   ДУЖЕ ВУЗЬКІ ЕКРАНИ (≤380px)
─────────────────────────────────────────────── */
@media (max-width: 380px) {
  :root { --logo-width: 172px; }

  .container { padding: 0 16px; }

  .tab-btn,
  .edu-programs .tab-btn,
  .corp-programs .tab-btn {
    padding: 11px 12px;
    font-size: 12px;
  }

  /* nowrap тут уже небезпечний — рядок ширший за екран */
  .hero__title-keep { white-space: normal; }
  .hero__title-main,
  .hero__title-keep { font-size: 27px; }

  .section-title { font-size: 25px; }
  .contact__title { font-size: 28px; }

  .btn { font-size: 15px; padding: 13px 16px; }
  .course-hero__title { font-size: 24px; }
}

@media (prefers-reduced-motion: reduce) and (max-width: 768px) {
  #clients-carousel.is-mobile-marquee .splide__list {
    animation-play-state: paused;
  }
}