/*
Theme Name: KAI Start
Theme URI: https://start.kai.edu.ua
Author: KAI
Description: Лендінг підготовчих курсів КАІ з керуванням з бекенду.
Version: 1.0.1
Text Domain: kai-start
*/
:root{
  --primary:#267CEB;
  --secondary:#252F4A;
  --accent:#EA4798;
}
html,body{margin:0;padding:0}

/* Права картинка у герої: мʼякі краї + тінь, щоб не виглядало «врізаною» */
.hero-figure{
  width: clamp(420px, 42vw, 640px);
  filter: drop-shadow(0 20px 40px rgba(0,0,0,.25));
  /* плавний край: маска */
  -webkit-mask-image: radial-gradient(120% 120% at 70% 40%, rgba(0,0,0,1) 60%, rgba(0,0,0,0) 100%);
          mask-image: radial-gradient(120% 120% at 70% 40%, rgba(0,0,0,1) 60%, rgba(0,0,0,0) 100%);
}
/* На дуже вузьких екранах ховаємо ілюстрацію — лише текст */
@media (max-width: 768px){
  .hero-figure{ display:none; }
}

.aspect-\[16\/9]{position:relative;width:100%}
.aspect-\[16\/9]::before{content:"";display:block;padding-top:56.25%}
.aspect-\[16\/9]>*{position:absolute;inset:0;width:100%;height:100%}

/* --- Responsive fixes for "mid" widths --- */

/* Лого/меню/CTA не злипаються і не ламають рядок */
.kai-nav { display:flex; align-items:center; gap:20px; }
.kai-nav .logo { flex-shrink:0; }
.kai-nav .logo img { height:44px; width:auto; object-fit:contain; }

@media (max-width: 1280px) and (min-width: 980px) {
  .kai-nav .menu { gap:18px; }
  .kai-nav .menu a { font-size:15.5px; }
  .kai-nav .cta { padding:10px 16px; font-size:16px; flex-shrink:0; white-space:nowrap; }
}

/* На <=1024px трохи стишуємо шрифти та кнопки в hero,
   а картинку обмежуємо по ширині, щоб не налазила на текст */
@media (max-width: 1024px) {
  .hero-title { font-size: clamp(28px, 6.2vw, 48px); line-height:1.05; }
  .hero-sub { font-size: clamp(16px, 2.4vw, 20px); }
  .hero-cta { gap:12px; }
  .hero-cta .btn { padding:14px 18px; font-size:16px; }
  .hero-illustration { max-width: 420px; margin-inline:auto; }
}

/* Усі картинки не розтягуємо, не ріжемо */
.resp-img, .hero-illustration img { max-width:100%; height:auto; object-fit:contain; }

/* Щоб нічого не перекривало текст з ілюстрацією */
.hero-text { position:relative; z-index:2; }
.hero-illustration { position:relative; z-index:1; pointer-events:none; user-select:none; }

/* Коли ширина між 1100–1300, не даємо меню переноситись уривками */
@media (max-width: 1300px) and (min-width: 1100px) {
  .kai-nav .menu { flex-wrap:wrap; row-gap:6px; }
}

/* Футер: логотип завжди акуратний */
.footer-logo img { height:56px; width:auto; object-fit:contain; }
@media (max-width: 1024px){
  .footer-logo img { height:48px; }
}

/* легка страховка саме для "середніх" ширин */
@media (max-width:1280px) and (min-width:980px){
  .kai-nav .menu { gap:18px; }
  .kai-nav .menu a { font-size:15.5px; }
  .kai-nav .cta { padding:10px 16px; font-size:16px; white-space:nowrap; }
}