/* Педагоги (storinky/pedahohy.php, vchytel.php) */

/* ---------- Сузір'я ---------- */
/* шапка сайту прозора – над темним небом їй потрібна підкладка одразу */
body:has(.ped-nebo) .shapka{background:color-mix(in srgb,var(--tlo) 88%,transparent);backdrop-filter:blur(16px);box-shadow:0 1px 0 var(--liniia)}
.ped-nebo{position:relative;overflow:hidden;padding:120px 0 28px;color:#e9ecf8;
  background:radial-gradient(ellipse at 20% 0%,#2b3d82 0%,transparent 55%),radial-gradient(ellipse at 90% 100%,#4a2a6e 0%,transparent 50%),#0d1433}
.ped-nebo::before{content:"";position:absolute;inset:0;opacity:.55;pointer-events:none;
  background-image:radial-gradient(1px 1px at 10% 20%,#fff,transparent),radial-gradient(1px 1px at 30% 70%,#fff,transparent),
  radial-gradient(1.5px 1.5px at 55% 35%,#fff,transparent),radial-gradient(1px 1px at 75% 15%,#fff,transparent),
  radial-gradient(1px 1px at 88% 60%,#fff,transparent),radial-gradient(1px 1px at 45% 90%,#fff,transparent);background-size:340px 260px}
.ped-nebo .mitka{color:#e9c46a}
.ped-nebo h2{font:800 clamp(34px,5vw,64px)/1.04 var(--serif);margin:10px 0 22px;color:#fff}
.ped-nebo h2 em{font-style:italic;font-weight:500;color:#e9c46a}
.ped-lich{display:flex;flex-wrap:wrap;gap:10px 34px}
.ped-lich div{display:grid}.ped-lich b{font:800 40px/1 var(--serif);color:#fff}.ped-lich span{font-size:14px;color:#aeb6d8}
.ped-suzirja{display:block;width:100%;max-width:1200px;height:auto;margin:18px auto 0;overflow:visible}
.ped-suz line{stroke:var(--k);stroke-width:1.2;stroke-opacity:.55;filter:brightness(1.8);transition:stroke-opacity .3s}
.ped-suz circle{fill:#fff;transition:r .2s,fill .2s}
.ped-suz circle.ped-zona{fill:transparent}
.ped-zirka{animation:ped-myhtinnia 4s ease-in-out infinite;animation-delay:calc(var(--z) * -.37s)}
.ped-zirka:hover circle:not(.ped-zona),.ped-zirka:focus circle:not(.ped-zona){fill:#e9c46a;r:7}
.ped-suz .ped-suz-nazva{fill:#c9cfee;font:600 13px var(--sans);letter-spacing:.06em;text-transform:uppercase;opacity:.75}
.ped-pr{fill:#dfe3f7;font:500 9.5px var(--sans);opacity:.62;pointer-events:none;transition:opacity .2s,fill .2s}
.ped-pr-pr{fill:#e9c46a;font-size:8.5px;opacity:0;transition:opacity .2s}
.ped-zirka:hover .ped-pr,.ped-zirka:focus .ped-pr{opacity:1;fill:#fff;font-weight:700}
.ped-zirka:hover .ped-pr-pr,.ped-zirka:focus .ped-pr-pr{opacity:1}
.ped-zirka:hover{animation:none}
@media (max-width:700px){.ped-pr{font-size:13px}.ped-suz .ped-suz-nazva{font-size:18px}}
.ped-suzirja.vybrano .ped-suz{opacity:.18;transition:opacity .3s}.ped-suzirja.vybrano .ped-suz.tut{opacity:1}
.ped-suzirja.vybrano .ped-suz.tut line{stroke-opacity:1}
@keyframes ped-myhtinnia{0%,100%{opacity:1}50%{opacity:.55}}
@media (prefers-reduced-motion:reduce){.ped-zirka{animation:none}}
.ped-pidkazka{font-size:13px;color:#8e97c4;margin-top:6px}

/* ---------- Фільтри й картки ---------- */
.ped-spysok{padding:44px 0 60px}
.ped-filtr{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:14px}
.ped-filtr input,.ped-filtr select{font:inherit;padding:11px 16px;border:1px solid var(--liniia);border-radius:999px;background:#fff;min-width:0}
.ped-filtr input{flex:1 1 240px}
.ped-kafedry{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.ped-kaf{font:600 14px var(--sans);padding:7px 15px;border-radius:999px;border:1px solid var(--k,var(--synii));background:#fff;color:var(--k,var(--synii));cursor:pointer}
.ped-kaf.aktyvna{background:var(--k,var(--synii));color:#fff}
.ped-znaideno{min-height:1.4em;font-size:14px}
.ped-kartky{list-style:none;margin:6px 0 30px;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:18px}
.ped-kartka a{position:relative;display:grid;grid-template-rows:auto 1fr;align-content:start;height:100%;border-radius:20px;overflow:hidden;background:#fff;color:var(--tekst);text-decoration:none;
  box-shadow:0 1px 0 var(--liniia),0 10px 30px rgba(18,58,122,.06);transition:transform .25s,box-shadow .25s}
.ped-kartka a:hover,.ped-kartka a:focus-visible{transform:translateY(-4px);box-shadow:0 18px 40px rgba(18,58,122,.16)}
.ped-kartka .ped-portret{width:100%;height:auto;aspect-ratio:1;display:block}
.ped-portret .ped-vizerunok{transition:transform 6s linear}
.ped-kartka a:hover .ped-vizerunok{transform:translate(-4px,3px)}
.ped-k-tekst{display:grid;align-content:start;gap:2px;padding:14px 16px 16px;border-top:4px solid var(--k)}
.ped-k-tekst b{font:800 20px/1.15 var(--serif);color:var(--k)}
.ped-k-tekst span{font-size:14px}.ped-k-tekst small{margin-top:6px;font-size:12.5px;color:var(--tykho)}
.ped-k-bilshe{position:absolute;inset:0 0 auto;aspect-ratio:1;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;padding:16px;
  background:linear-gradient(transparent 20%,rgba(10,16,40,.86));color:#fff;font-size:13px;opacity:0;transition:opacity .25s}
.ped-k-bilshe em{font-style:normal;font-weight:700;color:#e9c46a}.ped-k-bilshe i{font-style:normal;font-weight:600}
.ped-kartka a:hover .ped-k-bilshe,.ped-kartka a:focus-visible .ped-k-bilshe{opacity:1}
.ped-kartka[hidden]{display:none}
@media (max-width:560px){.ped-kartky{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.ped-k-tekst b{font-size:17px}.ped-k-bilshe{display:none}}

/* ---------- Сторінка вчителя ---------- */
.vch-shapka{padding:120px 0 44px;background:linear-gradient(135deg,var(--ks) 0%,#fff 70%)}
.vch-shapka .w{display:grid;grid-template-columns:auto 1fr;gap:44px;align-items:center}
.vch-portret svg{display:block;width:clamp(150px,22vw,260px);height:auto;border-radius:32px;box-shadow:0 24px 60px rgba(18,58,122,.22);transform:rotate(-2deg)}
.vch-kafedra{display:inline-block;padding:5px 14px;border-radius:999px;background:var(--k);color:#fff;font:600 13px var(--sans);text-decoration:none}
.vch-osn h2{margin:14px 0 6px;font:500 clamp(26px,3.4vw,44px)/1.1 var(--serif);color:var(--tekst)}
.vch-osn h2 span{display:block;font-weight:800;font-size:1.35em;color:var(--k)}
.vch-posada{margin:0 0 8px;font-weight:600}
.vch-pigulky{list-style:none;padding:0;margin:14px 0 0;display:flex;flex-wrap:wrap;gap:8px}
.vch-pigulky li{padding:6px 14px;border-radius:999px;background:#fff;border:1px solid var(--k);color:var(--k);font-weight:600;font-size:14px}
.vch-fakty{display:flex;flex-wrap:wrap;gap:12px 32px;margin-top:22px}
.vch-fakty div{display:grid}.vch-fakty b{font:800 30px/1 var(--serif);color:var(--k)}.vch-fakty span{font-size:13px;color:var(--tykho)}
.vch-tilo{padding:36px 16px 70px;display:grid;grid-template-columns:minmax(0,1fr);gap:26px}
.vch-tilo>*{min-width:0}
.vch-blok{padding:26px;border-radius:24px;background:#fff;box-shadow:0 1px 0 var(--liniia),0 10px 30px rgba(18,58,122,.05)}
.vch-blok h3{margin:0 0 14px;font:800 24px/1.2 var(--serif);color:var(--tekst)}
.vch-kredo{margin:0;padding:8px 0 8px 28px;border-left:6px solid var(--k);font:500 italic clamp(20px,2.4vw,30px)/1.35 var(--serif);color:var(--k)}
.vch-kredo p{margin:0 0 6px}
.vch-pryklad{position:relative}
.vch-mitka-pryklad{display:inline-block;vertical-align:middle;margin-left:6px;padding:2px 9px;border-radius:9px;background:#fdf5d8;color:#8a6200;
  font:600 11px/1.6 var(--sans);font-style:normal;letter-spacing:.04em;text-transform:uppercase}
.vch-zaraz-teper{font-size:18px;margin:0 0 16px}.vch-zaraz-teper b{color:var(--k)}
.vch-tyzhden{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.vch-den{display:grid;align-content:start;gap:6px;padding:12px;border-radius:16px;background:var(--tlo-2)}
.vch-den>b{font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--tykho)}
.vch-den.sohodni{background:var(--ks);outline:2px solid var(--k)}
.vch-urok{font-size:13px;line-height:1.35;padding:6px 8px;border-radius:10px;background:#fff}
.vch-urok i{display:inline-grid;place-items:center;width:20px;height:20px;margin-right:4px;border-radius:50%;background:var(--k);color:#fff;font:700 11px var(--sans);font-style:normal}
.vch-urok small{color:var(--tykho)}.vch-urok.zaraz{background:var(--k);color:#fff}.vch-urok.zaraz small{color:#fff}
.vch-urok.zaraz i{background:#fff;color:var(--k)}
.vch-vikno{border-radius:18px;overflow:hidden;background:linear-gradient(180deg,#eaf0fa,#f1f4fb)}
.vch-vikno iframe{display:block;width:100%;height:clamp(260px,40vw,420px);border:0}
.vch-tyzhnia{padding:16px 20px;border-radius:16px;background:linear-gradient(120deg,var(--k),#123a7a);color:#fff;margin-bottom:14px}
.vch-tyzhnia span{font:700 12px var(--sans);letter-spacing:.1em;text-transform:uppercase;color:#e9c46a}.vch-tyzhnia p{margin:6px 0 0;font-size:17px}
.vch-resursy,.vch-materialy{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px}
.vch-resursy li,.vch-materialy li{display:grid;gap:4px;padding:14px 16px;border-radius:16px;border:1px solid var(--liniia);background:#fff;transition:border-color .2s,transform .2s}
.vch-resursy li:hover,.vch-materialy li:hover{border-color:var(--k);transform:translateY(-2px)}
.vch-resursy small,.vch-materialy small{color:var(--tykho);font-size:12.5px}
.vch-typ{justify-self:start;padding:2px 10px;border-radius:9px;background:var(--ks);color:var(--k);font:700 11.5px/1.7 var(--sans);text-transform:uppercase;letter-spacing:.04em}
.t-zoshyt{background:#e2ecfb;color:#2a5aa8}.t-pamiatka{background:#dcf2e9;color:#1f7a5a}.t-test{background:#fbe7da;color:#c2541b}
.t-pidruchnyk{background:#ece6f8;color:#5b3fa0}.t-metod{background:#f6ecd6;color:#8a6116}.t-prohrama{background:#f8e1ee;color:#a8326e}
.vch-materialy li[hidden]{display:none}
.vch-vkladky{display:inline-flex;padding:4px;border-radius:999px;background:var(--tlo-2);margin-bottom:12px}
.vch-vkladky button{font:600 14px var(--sans);padding:7px 18px;border:0;border-radius:999px;background:transparent;color:var(--tykho);cursor:pointer}
.vch-vkladky button[aria-selected=true]{background:#fff;color:var(--k);box-shadow:0 2px 8px rgba(0,0,0,.08)}
.vch-paraleli{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.vch-paraleli button{font:600 13px var(--sans);padding:6px 13px;border-radius:999px;border:1px solid var(--liniia);background:#fff;color:var(--tekst);cursor:pointer}
.vch-paraleli button.aktyvna{background:var(--k);border-color:var(--k);color:#fff}
.vch-peremohy{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.vch-peremohy li{padding-left:16px;border-left:3px solid var(--k)}.vch-peremohy b{color:var(--k);margin-right:8px}
.vch-kolehy ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(124px,1fr));gap:20px 12px}
.vch-kolehy a{display:grid;justify-items:center;gap:6px;text-align:center;color:var(--tekst);text-decoration:none;font-size:13px;font-weight:600}
.vch-kolehy svg{border-radius:50%;transition:transform .2s}.vch-kolehy a:hover svg{transform:scale(1.08)}
.vch-kolehy em{display:block;font-style:normal;font-weight:500;font-size:12.5px;line-height:1.3}
.vch-kolehy small{display:block;margin-top:3px;font-weight:400;color:var(--tykho);font-size:11.5px}
@media (max-width:760px){
  .vch-shapka .w{grid-template-columns:1fr;gap:22px}.vch-portret svg{width:150px}
  .vch-tyzhden{grid-template-columns:1fr}.vch-den:not(.sohodni){display:none}.vch-tyzhden.vsi .vch-den{display:grid}
  .vch-blok{padding:18px}}

/* ---------- Вікторини «Дзвінок» (тренування) ---------- */
.vch-dzv-spysok{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.vch-dzv-k{display:grid;gap:4px;padding:16px 18px;border-radius:18px;color:#fff;text-decoration:none;background:linear-gradient(135deg,var(--kt),color-mix(in srgb,var(--kt) 70%,#fff));transition:transform .2s}
.vch-dzv-k:hover{transform:translateY(-3px)}
.vch-dzv-k b{font:800 19px/1.2 var(--serif)}.vch-dzv-k span{font-size:13.5px;opacity:.92}.vch-dzv-k small{font-size:13px;opacity:.85}
.vch-dzv-k.k0{--kt:#2e1d87}.vch-dzv-k.k1{--kt:#b5482a}.vch-dzv-k.k2{--kt:#1d6b33}.vch-dzv-k.k3{--kt:#8a6200}.vch-dzv-k.k4{--kt:#0e6b7a}.vch-dzv-k.k5{--kt:#7a2a6b}

/* Панель кафедри (квізи «Дзвінка» за теками + корисне: сайти, відео, література) – yadro/korysne.php */
.ped-kaf-panel{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;margin:6px 0 22px;padding:18px;border-radius:18px;
  background:var(--ks);border:1px solid color-mix(in srgb,var(--k) 25%,transparent)}
.ped-kaf-panel[hidden]{display:none}
.ped-kp-stovp h3{margin:0 0 10px;color:var(--k);font-size:18px}
.ped-teka{background:#fff;border-radius:12px;margin:0 0 10px;padding:4px 12px;border:1px solid color-mix(in srgb,var(--k) 15%,transparent)}
.ped-teka summary{cursor:pointer;padding:8px 0;font-weight:600;color:var(--k)}
.ped-teka summary span{font-weight:500;opacity:.7;margin-left:4px}
.ped-teka ul{list-style:none;margin:0 0 6px;padding:0}
.ped-teka li a{display:flex;flex-direction:column;gap:2px;padding:8px 0;border-top:1px solid rgba(0,0,0,.06);text-decoration:none;color:inherit}
/* квіз: назва + «▶ Запустити в класі» (для вчителя, гра з QR) */
.ped-teka li:has(.ped-v-klasi){display:flex;align-items:center;gap:10px;border-top:1px solid rgba(0,0,0,.06)}
.ped-teka li:has(.ped-v-klasi) > a:first-child{flex:1;min-width:0;border-top:0}
.ped-v-klasi-f{flex:none;margin:0}
.ped-teka .ped-v-klasi{flex:none;cursor:pointer;background:transparent;font-family:inherit;line-height:1.3;padding:5px 11px;border:1px solid var(--k);border-radius:999px;color:var(--k);font-size:12.5px;font-weight:600;white-space:nowrap}
.ped-teka .ped-v-klasi:hover{background:var(--k);color:#fff}
.ped-teka li a:hover b{color:var(--k);text-decoration:underline}
.ped-teka small{color:#6b7280;font-size:13px}

/* квізи кафедри – теки у два стовпчики (на телефоні – один) */
.ped-kp-kvizy{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 18px;align-items:start}
.ped-kp-kvizy>h3,.ped-kp-kvizy>p{grid-column:1/-1}
@media (max-width:700px){.ped-kp-kvizy{grid-template-columns:minmax(0,1fr)}}
/* у двох стовпчиках і на телефоні кнопка запуску – під назвою, щоб не стискала її */
.ped-kp-kvizy .ped-teka li:has(.ped-v-klasi){flex-direction:column;align-items:flex-start;gap:0;padding-bottom:8px}
.ped-kp-kvizy .ped-teka li:has(.ped-v-klasi) > a:first-child{width:100%;padding-bottom:4px}