/* =====================================================
   POLISH — загальні покращення дизайну + мобільна версія
   Підключається ПІСЛЯ style.css / home.css
   ===================================================== */

/* ---------- 1. Кольори: кращий контраст тексту на кольорових плашках ---------- */
:root{
  --pink:#e0307f;
  --green:#0b8a50;
  --orange:#e2560a;
  --gold:#b87a00;
  --r:22px;
  --shadow:0 10px 30px rgba(0,63,138,.13);
  --shadow-sm:0 4px 14px rgba(0,63,138,.10);
}
::selection{background:var(--yellow);color:var(--blue-d)}

/* ---------- 2. Типографіка ---------- */
body{-webkit-text-size-adjust:100%;text-rendering:optimizeLegibility;font-size:17px}
h1,h2,h3{letter-spacing:-.01em;font-weight:700;text-wrap:balance}
.card p,.card li{max-width:70ch}
.card .tiles,.card .grid,.card .cols2,.card .staff,.card .steps,.card .months{max-width:none}
.card h2{margin-bottom:18px}
p{text-wrap:pretty}

/* ---------- 3. Доступність: фокус ---------- */
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:3px solid var(--blue);outline-offset:3px;border-radius:12px}
.btn:focus-visible{outline-color:var(--blue-d)}
.skip{position:absolute;left:12px;top:-60px;z-index:500;background:var(--yellow);color:var(--blue-d);font-weight:900;padding:10px 18px;border-radius:12px;transition:top .2s}
.skip:focus{top:12px}

/* ---------- 4. Шапка / навігація (десктоп) ---------- */
.brand h1{line-height:1.25;text-shadow:0 2px 10px rgba(0,30,80,.25)}
.brand p{max-width:75ch;line-height:1.5}
nav.main{backdrop-filter:saturate(1.4) blur(8px);background:rgba(255,255,255,.94)}
nav.main a{white-space:nowrap}
nav.main a:hover{transform:translateY(-1px)}

/* ---------- 5. Картки ---------- */
.card{box-shadow:var(--shadow);border:1px solid rgba(0,87,184,.06)}
.card::before{animation:none;opacity:.8}
.profile .photo{animation:none}
.news,.teacher,.step,.month{border:1px solid rgba(0,87,184,.06)}
.news h3{line-height:1.3}
.news .b p{font-size:15px;color:#33425b}
.tag,.role,.teacher .pos{letter-spacing:.01em}
.ribbon{transform:none}

/* бічне меню: активна група не обрізається на низьких екранах */
/* бічне меню завжди «липке» на десктопі; на низьких екранах стає компактнішим, щоб усе вмістилось */
@media(min-width:901px){
  .side{position:sticky;top:84px}
}
@media(min-width:901px) and (max-height:860px){
  .side{gap:14px;top:80px}
  .menu{padding:10px}
  .menu a,.menu .gh{padding:6px 10px}
  .menu a i,.menu .gh i{width:30px;height:30px;font-size:16px}
  .bells{padding:14px}
  .bells h4{margin:2px 0 8px}
  .bells td{padding:5px 6px;font-size:14px}
  .bells .st{margin-top:6px}
}

/* hover-ефекти лише там, де є миша */
@media(hover:none){
  .menu a:hover,.menu a.on{transform:none}
  .news:hover,.teacher:hover,.stat:hover,.doc:hover{transform:none}
  .tilt{transform:none!important}
  .gal figure:hover img{transform:none}
  .btn:hover{transform:none;box-shadow:0 6px 0 #d4a900}
}

/* ---------- 6. Кнопки ---------- */
.btn{min-height:46px;display:inline-flex;align-items:center;justify-content:center;gap:6px;text-align:center}

/* ---------- 7. Форми ---------- */
.fb input:not([type=checkbox]),.fb select,.fb textarea{font-size:16px;min-height:48px}
.fb textarea{min-height:130px}

/* ---------- 8. Футер ---------- */
.ft .fg{padding-bottom:28px}
.ft p{line-height:1.55}

/* ---------- 9. Розкладач мобільного меню (створюється у polish.js) ---------- */
.mm-sec{display:none}
.burger{align-items:center;gap:10px;font:800 16px 'Nunito',system-ui,sans-serif}
.burger .bi{font-size:22px;line-height:1}

/* =====================================================
   ПЛАНШЕТ ТА МОБІЛЬНІ
   ===================================================== */
@media(max-width:900px){
  body{background-attachment:scroll}
  .wrap{padding:0 16px}
  .layout{padding:20px 16px 36px;gap:18px}

  /* --- шапка --- */
  .brand{gap:14px;padding:14px 16px}
  .brand p{display:none}
  .brand h1{font-size:15px;line-height:1.3}
  .logo{width:52px;height:52px;font-size:28px;box-shadow:0 0 0 4px rgba(255,255,255,.35)}
  .logo::after{inset:-7px}
  .top::before{width:180px;height:180px;right:-70px;top:-90px}

  /* --- навігація --- */
  nav.main{border-bottom-width:4px;padding-top:env(safe-area-inset-top,0)}
  nav.main .wrap{padding:8px 16px;display:block}
  .burger{display:flex;width:100%;justify-content:space-between;min-height:48px;padding:8px 18px;border-radius:14px}
  .burger .bl{display:flex;align-items:center;gap:10px}
  .burger .cur{font-weight:700;opacity:.85;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:45%}
  nav.main ul{display:none;padding:10px 0 6px;gap:4px;max-height:calc(100vh - 110px);max-height:calc(100dvh - 110px);overflow-y:auto;overscroll-behavior:contain}
  nav.main ul.open{display:flex;flex-direction:column;flex-wrap:nowrap}
  nav.main ul a{padding:14px 18px;border-radius:14px;font-size:17px;min-height:48px;display:flex;align-items:center;background:var(--sky)}
  nav.main ul a.on{background:var(--blue)}
  nav.main ul a:hover{transform:none}
  .mm-sec{display:block;list-style:none}
  .mm-h{display:block;font:700 12px 'Unbounded',sans-serif;color:var(--pink);text-transform:uppercase;letter-spacing:.06em;padding:14px 6px 6px}
  .mm-sec a{background:#fff!important;border:2px solid var(--sky);font-size:16px!important;gap:12px;font-weight:700!important;color:var(--ink)!important}
  .mm-sec a i{font-style:normal;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--c,var(--sky));flex:none;font-size:17px}
  .mm-sec a.on{border-color:var(--blue);background:var(--sky)!important}

  /* меню розділів тепер у випадаючому меню → прибираємо знизу сторінки */
  .side .menu{display:none}
  .side{order:2;gap:0}

  /* --- hero --- */
  .hero{min-height:440px;border-radius:24px;margin-bottom:18px}
  .hero .t{padding:24px 20px 62px}
  .hero h2{font-size:clamp(24px,7.4vw,34px)}
  .hero p{font-size:16.5px;margin-top:8px}
  .hero img{animation:none}
  .mtn{height:110px}
  .btn{padding:12px 24px}

  /* --- статистика --- */
  .stats{grid-template-columns:1fr 1fr;gap:12px;margin-bottom:18px}
  .stat{padding:16px 12px;font-size:14.5px;line-height:1.35}
  .stat b{font-size:28px;margin-bottom:2px}
  .ribbon{margin-bottom:18px;border-width:3px}
  .ribbon span{font-size:13px;padding:0 16px}

  /* --- картки --- */
  .card{padding:22px 18px;margin-bottom:18px;border-radius:20px}
  .card h2{font-size:21px;margin-bottom:14px}
  .card h2::after{height:5px;width:72px;margin-top:8px}
  .card h3{font-size:17px}
  .card::before{width:110px;height:110px;right:-40px;top:-40px}

  /* --- профіль (перебиваємо inline-стиль на головній) --- */
  .profile{grid-template-columns:1fr!important;gap:16px!important;justify-items:center;text-align:left}
  .profile>div:last-child{width:100%}
  .profile .photo{width:170px;max-width:60%;aspect-ratio:4/5}
  .quote{padding:14px 16px;font-size:15.5px}

  /* --- таймлайн --- */
  .tl{padding-left:30px}
  .tl li{padding:12px 14px;font-size:15.5px}

  /* --- плитки "місія" --- */
  .tiles{grid-template-columns:1fr 1fr;gap:12px}
  .tile{padding:14px;font-size:14px;line-height:1.4}
  .tile b{font-size:15px}
  .tile .ic{font-size:50px}

  /* --- новини --- */
  .grid{grid-template-columns:1fr;gap:16px}
  .ph{aspect-ratio:16/10}
  .news .b{padding:16px}

  /* --- педагоги: горизонтальні картки --- */
  .staff{grid-template-columns:1fr;gap:14px}
  .teacher{display:grid;grid-template-columns:112px 1fr;border-bottom-width:5px}
  .teacher .pic{aspect-ratio:auto;height:100%;min-height:150px}
  .teacher .b{padding:12px 14px 14px;min-width:0}
  .teacher h3{font-size:15px;line-height:1.3}
  .teacher p{font-size:14px;line-height:1.45}
  .teacher:hover{transform:none}

  /* --- галерея: 2 колонки --- */
  .gal{columns:2;column-gap:10px}
  .gal figure{margin-bottom:10px;border-radius:14px}
  .gal figcaption{font-size:13px;padding:20px 10px 8px;line-height:1.3}
  .lb{padding:12px}
  .lb button{top:8px;right:10px;width:48px;height:48px;font-size:34px;background:rgba(0,0,0,.35);border-radius:50%}

  /* --- таблиці, документи, карта --- */
  .schedule td{padding:10px 12px;font-size:15px}
  .schedule td:first-child{width:auto}
  .doc{padding:14px;gap:12px}
  .doc i{font-size:30px}
  iframe.pdf{height:60vh;min-height:360px}
  .map iframe{height:300px}
  .steps,.months{grid-template-columns:1fr}
  .month li{font-size:15px}
  .photostrip{grid-template-columns:1fr 1fr}
  .kgimgs .rowimg img{height:220px}
  details.q summary{padding:14px 16px;min-height:52px}
  .fb .btn{justify-self:stretch;width:100%}
  .cols2{gap:14px}

  /* --- розклад дзвінків --- */
  .bells{padding:18px;margin-bottom:6px}

  /* --- кнопка "вгору" --- */
  .up{right:14px;bottom:calc(14px + env(safe-area-inset-bottom,0px));width:48px;height:48px}

  /* --- футер --- */
  .ft{margin-top:30px}
  .ft .wave{height:36px}
  .ft .fg{padding:54px 16px 24px;gap:24px}
  .ft .fl2{display:grid;grid-template-columns:1fr 1fr;column-gap:12px}
  .ft .fl2 h4{grid-column:1/-1}
  .ft .fl2 a{padding:8px 0}
  .ft .copy{padding-bottom:calc(14px + env(safe-area-inset-bottom,0px))}
}

/* =====================================================
   ДУЖЕ ВУЗЬКІ ЕКРАНИ
   ===================================================== */
@media(max-width:380px){
  body{font-size:16px}
  .brand h1{font-size:14px}
  .teacher{grid-template-columns:96px 1fr}
  .stat b{font-size:25px}
  .tiles{grid-template-columns:1fr}
  .burger .cur{display:none}
}

/* низькі ландшафтні екрани телефонів */
@media(max-width:900px) and (max-height:480px){
  .hero{min-height:340px}
  nav.main ul{max-height:calc(100vh - 80px)}
}

/* читабельність тексту на фото hero (мобільні) */
@media(max-width:900px){
  .hero::after{background:linear-gradient(0deg,rgba(0,30,85,.96) 0,rgba(0,40,100,.82) 48%,rgba(0,40,100,.18) 88%)}
  .hero img{object-position:center 25%}
  .hero h2{text-shadow:0 2px 12px rgba(0,20,60,.45)}
}

.teacher .pos{border-radius:12px;line-height:1.3;padding:3px 11px}
.hero::after{background:linear-gradient(0deg,rgba(0,35,95,.94),rgba(0,40,100,.45) 55%,rgba(124,58,237,.18))}

/* =====================================================
   ВИПРАВЛЕННЯ: мобільна шапка та верх футера
   ===================================================== */
/* хвиля над футером мала кремовий колір (#fff8dc), а фон сторінки білий —
   було видно кремову смугу. Тепер колір хвилі = колір сторінки. */
.ft .wave path{fill:#fff}

@media(max-width:900px){
  /* шапка */
  .top{padding-top:env(safe-area-inset-top,0px)}
  .brand{align-items:center;gap:16px;padding:14px 16px 14px 22px}
  .logo{margin:6px 0}              /* місце для пунктирного кільця — раніше його обрізало */
  .logo::after{inset:-6px}
  .brand>div:last-child{min-width:0}
  .brand h1{font-size:clamp(13px,3.9vw,17px);line-height:1.28;overflow-wrap:break-word}
  .top::before{opacity:.35}        /* жовта пляма не «брудніть» заголовок */

  /* верх футера: без зайвого білого проміжку над хвилею */
  .ft{margin-top:0}
  .layout{padding-bottom:18px}
  .ft .wave{height:32px}
  .ft .fg{padding-top:50px}
  .ft .copy{font-size:13px;line-height:1.5;text-wrap:balance}
}
@media(max-width:380px){
  .brand{gap:12px;padding-left:20px}
  .brand h1{font-size:13px}
}

/* кольорова смужка 8px визирала з-під хвилі футера окремими «іскрами» */
.ft::before{display:none}

/* мобільні: верхня панель браузера (iOS) не має «просвічувати» сторінку над меню */
@media(max-width:900px){
  nav.main{background:#fff;backdrop-filter:none;-webkit-backdrop-filter:none}
  body::before{content:"";position:fixed;top:0;left:0;right:0;z-index:299;
    height:max(env(safe-area-inset-top,0px),4px);background:#fff;pointer-events:none}
}