/* =========================================================
   === 1) ЗАГАЛЬНІ СТИЛІ СТОРІНКИ =========================
   ========================================================= */
:root{
  /* базова палітра */
  --ink: #2b2b2b;
  --ink-muted: #4d4d4d;
  --bg: #f9f9f9;
  --panel: #ffffff;
  --brand: #4a90e2; /* кнопки/акценти */
  --border: #ddd;
  --shadow: 0 4px 6px rgba(0,0,0,.1);
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
}

body {
  font-family: "Georgia", serif;
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
}

/* Зручність для тих, хто просить менше анімацій */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* =========================================================
   === 2) ХЕДЕР / МЕНЮ =====================================
   ========================================================= */
/* Загальні стилі меню */
header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg);
  padding: 10px 20px;
}

.logo img { height: 40px; }

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

nav ul li { margin: 0 15px; }

nav ul li a {
  text-decoration: none;
  color: #000;
  font-weight: 400;
  font-size: 0.95em;
}

/* Головне меню */
.main-menu {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.main-menu > li {
  position: relative;
  margin: 0 10px;
}

.main-menu > li > a {
  display: block;
  padding: 10px 15px;
  text-decoration: none;
  color: #000;
  font-weight: 500;
  border-radius: 6px;
  transition: background .3s ease;
}

.main-menu > li > a:hover { background-color: #eaeaea; }

/* Випадаюче меню (десктоп) */
.dropdown-menu {
  position: absolute;
  top: 100%; left: 0;
  background: #fff;
  list-style: none;
  padding: 5px 0;
  min-width: 200px;
  box-shadow: 0 8px 16px rgba(0,0,0,.1);
  border-radius: 8px;
  opacity: 0; visibility: hidden;
  transform: translateY(-10px);
  transition: all .3s ease;
  z-index: 999;
}

.dropdown:hover .dropdown-menu {
  opacity: 1; visibility: visible; transform: translateY(0);
}

.dropdown-menu li a {
  display: block;
  padding: 10px 15px;
  color: #000;
  text-decoration: none;
  white-space: nowrap;
}

.dropdown-menu li a:hover { background-color: #f5f5f5; }

/* Бургер */
.menu-toggle {
  display: none;
  font-size: 24px;
  background: none; border: none;
  cursor: pointer;
}

/* Мобільна адаптація меню */
@media (max-width: 992px) {



  .main-menu.is-open { display: flex; }

  .menu-toggle { display: block; }

  .main-menu {
    display: none;
    flex-direction: column;
    width: 100%;
    background-color: var(--bg);
    position: absolute;
    top: 60px; left: 0;
    border-top: 1px solid #ddd;
  }

  .main-menu.open { display: flex; }

  .main-menu li {
    margin: 0;
    border-bottom: 1px solid #ddd;
  }

  .main-menu li a { padding: 12px 20px; }

  .dropdown-menu {
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    box-shadow: none;
    padding-left: 20px;
    display: none; /* показуємо тільки при наведенні/кліку */
  }
  .dropdown.open > .dropdown-menu { display: block; }
  .dropdown:hover .dropdown-menu { display: block; }

  .dropdown-menu li a { color: #333; }
}

/* =========================================================
   === 3) ГЕРО-БЛОК / ХЕРО =================================
   ========================================================= */
.hero {
  position: relative; 
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #f0f0f0;
  padding-left: 2%;
}

.hero-text {
  max-width: 50%;
  animation: slideInLeft 1.2s ease-out forwards;
  display: flex;                  /* додаємо flex-контейнер */
  flex-direction: column;         /* вертикальне розміщення */
  align-items: center;            /* центруємо елементи по горизонталі */
  text-align: center;             /* центруємо текст */
  opacity: 0; 
}

.hero-text h1 {
  color: #2b2b2b;
  font-size: 2em;
  font-weight: 600;
  line-height: 1.2;
  margin: 0 0 10px 0;
}

.hero-text p {
  font-size: 1.25em;
  line-height: 1.6;
  color: #4d4d4d;
}

.hero-image img {
  width: 750px;
  margin: 0; padding: 0;
  max-width: 100%;
  height: auto;
  animation: slideInRight 1.2s ease-out forwards;
  animation-delay: .3s;
  opacity: 0; 
}

.Herb {
  width: 220px;
  max-width: 35%;
  margin: 0; padding: 0;
  display: block;
}

/* =========================================================
   === 4) ЗМІСТ / СЕКЦІЇ ===================================
   ========================================================= */
/* Інформаційний блок */
.info { text-align: center; margin: 20px 0; }

.info h2 {
  font-size: 1.5em;
  font-weight: 600;
  color: #2b2b2b;
}

.details-link {
  display: inline-block;
  margin-top: 10px;
  text-decoration: none;
  color: #fff;
  background: var(--brand);
  padding: 10px 20px;
  border-radius: 5px;
  font-weight: bold;
  font-size: 1em;
}

/* Секція циклової комісії */
.CK { text-align: center; margin-bottom: 20px; }

.commission-title {
  font-size: 1.8em;
  font-weight: 500;
  color: #2b2b2b;
  text-align: center;
  margin-bottom: 5px;
  line-height: 1.3;
}

.commission-subtitle {
  font-size: 1.5em;
  font-weight: 400;
  color: #4d4d4d;
  text-align: center;
  margin-bottom: 15px;
  line-height: 1.3;
}

.commission-description {
  max-width: 1400px;
  margin: 0 auto;
  padding: 20px;
  font-size: 1.1rem;
  line-height: 1.6;
  background-color: #f8f9fa;
  border-left: 5px solid #4e73df;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,.05);
}
.commission-description p { margin-bottom: 1rem; }

/* Стилі для голови циклової комісії */
.head-teacher-card {
  background: #fff;
  border: 2px solid #ffffff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: var(--shadow);
  max-width: 400px;
  margin: 30px auto;
  text-align: center;
  transition: transform .3s, box-shadow .3s;
}
.head-teacher-card:hover { animation: scaleUp .6s ease; }

.head-teacher-photo {
  width: 100%;
  border-radius: 50%;
  margin-bottom: 15px;
}

.head-teacher-name {
  font-size: 1.5em;
  font-weight: 500;
  color: #2b2b2b;
  text-decoration: none;
}
.head-teacher-name:hover { color: #0056b3; text-decoration: underline; }

.head-teacher-card p {
  font-size: 1em; color: #555; margin-top: 10px;
}

/* Сітка для викладачів */
.teachers-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* було 260px */
  gap: 28px;
  padding: 0 20px;
  justify-items: stretch;
  align-items: stretch;
}

/* Картка викладача */
.teacher-card {
  background: #ffffff;
  border: 1px solid #e2e2e2;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0,0,0,.08);
  padding: 16px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform .25s ease, box-shadow .25s ease;
}

.teacher-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 18px rgba(0,0,0,.15);
}

/* --- Фото викладача --- */
.teacher-photo {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 14px;
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
}

/* --- Ім’я викладача --- */
.teacher-name {
  font-size: 1.15em;
  font-weight: 700;
  color: #222;
  margin: 8px 0 0 0;
  text-decoration: none;
  line-height: 1.35;
  text-align: center;
  min-height: 2.8em;
  word-break: break-word;
  transition: color .3s;
}

.teacher-name:hover {
  color: #0056b3;
  text-decoration: underline;
}

.head-teacher-card{ max-width: 520px; } 

.teachers-container { align-items: start; }

/* =========================================================
   === 5) АДАПТИВНІСТЬ =====================================
   ========================================================= */
@media (max-width: 768px) {
 .teachers-container {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
    padding: 0 10px;
  }

  .teacher-card {
    padding: 12px;
  }

  .teacher-name {
    font-size: 1.05em;
  }
  
  body { background: var(--bg); }
  .hero { background: #f0f0f0; }
  .hero { flex-direction: column; text-align: center; }

  .hero-image {
    position: absolute; z-index: -1;
    top: 0; left: 0; width: 100%; height: 100%;
    opacity: 1;                    /* не затемнюємо картинку */
  }

  /* А затемнення під текст робимо окремим напівпрозорим шаром */
  .hero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(
      to bottom,
      rgba(0,0,0,0.25) 0%,
      rgba(0,0,0,0.15) 40%,
      rgba(0,0,0,0.05) 100%
    );
    z-index: 0;
  }

  .hero-text {
    position: relative;
    z-index: 1;                    /* над напівпрозорим шаром */
    max-width: 100%;
    color: #fff;
    background: transparent;       /* прибираємо темний прямокутник */
    padding: 10px;
    border-radius: 8px;
  }

  .hero-image img { width: 100%; height: auto; }
}

@media (max-width: 480px) {
  .teachers-container { grid-template-columns: 1fr; }
}

/* =========================================================
   === 6) АНІМАЦІЇ =========================================
   ========================================================= */
@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-40px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes slideInRight {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes scaleUp {
  0%   { transform: scale(1);   box-shadow: 0 4px 6px rgba(0,0,0,.1); }
  50%  { transform: scale(1.05);box-shadow: 0 8px 12px rgba(0,0,0,.2); }
  100% { transform: scale(1);   box-shadow: 0 4px 6px rgba(0,0,0,.1); }
}

/* =========================================================
   === DARK MODE for browser (prefers-color-scheme: dark) ===
   ========================================================= */
@media (prefers-color-scheme: dark) {

  /* 1) Глобальна палітра темної теми */
  :root {
    --ink: #e5e7eb;
    --ink-muted: #a1a1aa;
    --bg: #0b1220;
    --panel: #0f172a;
    --brand: #60a5fa;
    --border: #23314f;
    --shadow: 0 6px 18px rgba(0, 0, 0, .45);
  }

  body {
    background: var(--bg);
    color: var(--ink);
  }

  /* 2) ХЕДЕР / МЕНЮ (на скріні чорний текст зливається) */
  header,
  .site-header {
    background: var(--panel);
    border-bottom: 1px solid var(--border);
  }

  .main-menu>li>a,
  nav a {
    color: var(--ink) !important;
  }

  .main-menu>li>a:hover {
    background: rgba(255, 255, 255, .08);
  }

  .dropdown-menu {
    background: var(--panel);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
  }

  .dropdown-menu li a {
    color: var(--ink) !important;
  }

  .dropdown-menu li a:hover {
    background: rgba(255, 255, 255, .08);
  }

  /* 3) БІЛИЙ ІНФО-БЛОК в центрі (текст майже не видно) */
  .commission-description,
  .info,
  .info * {
    background: #f8fafc !important;
    /* лишаємо світлий блок */
    color: #0f172a !important;
    /* але текст робимо темним */
    border-color: #cbd5e1 !important;
  }

  .commission-title,
  .commission-subtitle {
    color: var(--ink) !important;
    /* заголовки на темному фоні */
  }

  /* 4) КАРТКА ГОЛОВИ ЦК (ім’я світле на білому) */
  .head-teacher-card {
    background: #f8fafc !important;
    color: #0f172a !important;
    border-color: #cbd5e1 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
  }

  .head-teacher-name,
  .head-teacher-card p {
    color: #0f172a !important;
  }

  /* 5) КАРТКИ ВИКЛАДАЧІВ */
  .teacher-card {
    background: var(--panel);
    border-color: var(--border);
    color: var(--ink);
  }

  .teacher-name {
    color: var(--ink) !important;
  }

  .teacher-name:hover {
    color: var(--brand) !important;
  }

  /* 6) ФУТЕР (контактний текст у вас темний) */
  footer,
  .footer,
  .site-footer {
    background: #0a1020;
    color: var(--ink);
    border-top: 1px solid var(--border);
  }

  footer h3,
  footer h4,
  .footer h3,
  .footer h4 {
    color: #ffd27a;
    /* як у вас акцент */
  }

  footer a,
  .footer a {
    color: var(--ink) !important;
  }

  footer a:hover,
  .footer a:hover {
    color: #fff !important;
  }

  footer p,
  footer li,
  footer span,
  .footer p,
  .footer li,
  .footer span {
    color: var(--ink) !important;
  }

  /* 7) Дрібні приглушені написи */
  .muted,
  .small,
  .copyright {
    color: var(--ink-muted) !important;
  }
}

@media (prefers-color-scheme: dark) {

  /* ---------------------------
     1) DROPDOWN: робимо темним
     --------------------------- */
  .site-header .dropdown-menu,
  header .dropdown-menu,
  nav .dropdown-menu {
    background: var(--panel) !important;
    border: 1px solid var(--border) !important;
    box-shadow: var(--shadow) !important;
  }

  .site-header .dropdown-menu a,
  header .dropdown-menu a,
  nav .dropdown-menu a {
    color: var(--ink) !important;
    opacity: 1 !important;
    /* якщо десь занижена прозорість */
    text-shadow: none !important;
    /* прибираємо “вимивання” */
  }

  .site-header .dropdown-menu a:hover,
  header .dropdown-menu a:hover,
  nav .dropdown-menu a:hover {
    background: rgba(255, 255, 255, .08) !important;
  }


  /* ------------------------------------
     2) Футер: цитата, дрібний текст, копірайт
     ------------------------------------ */

  footer,
  .footer,
  .site-footer {
    background: #0a1020 !important;
    color: var(--ink) !important;
  }

  /* заголовки у футері */
  footer h2,
  footer h3,
  footer h4,
  .footer h2,
  .footer h3,
  .footer h4 {
    color: #ffb84d !important;
  }

  /* звичайний текст/списки у футері */
  footer p,
  footer li,
  footer span,
  .footer p,
  .footer li,
  .footer span {
    color: var(--ink) !important;
    opacity: 1 !important;
  }

  /* цитата під іконками "Слідкуйте за подіями" */
  footer .quote,
  footer blockquote,
  .footer .quote,
  .footer blockquote {
    color: var(--ink-muted) !important;
    opacity: .95 !important;
    font-style: italic;
  }

  /* лінія копірайту (у вас зараз майже чорна) */
  footer .copyright,
  footer .footer-bottom,
  .footer .copyright,
  .footer .footer-bottom {
    color: var(--ink-muted) !important;
    opacity: .9 !important;
  }

  /* іконки соцмереж у футері */
  footer .social a,
  footer .follow a,
  .footer .social a,
  .footer .follow a {
    color: var(--ink) !important;
    background: rgba(255, 255, 255, .04) !important;
    border-color: var(--border) !important;
  }

  footer .social a:hover,
  footer .follow a:hover,
  .footer .social a:hover,
  .footer .follow a:hover {
    background: rgba(255, 255, 255, .10) !important;
  }
}

.video-hover {
  position: relative;
  width: 100%;
  overflow: hidden; /* 🔥 Забороняємо виходити за межі контейнера */
  border-radius: 6px;
}

.video-hover img,
.video-hover video {
 
  height: 100%;
  object-fit: cover; /* 🔥 Відео й фото заповнюють блок без білих полів */
  display: block;
}

/* Відео поверх фото */
.video-hover video {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s ease;
}

/* При наведенні показуємо відео */
.video-hover:hover video {
  opacity: 1;
}

/* При наведенні приховуємо фото */
.video-hover:hover img {
  opacity: 0;
  transition: opacity .4s ease;
}