:root{
  --primary:#223a63; --primary-70:rgba(34,58,99,.7); --accent:#1E90FF;
  --text:#f5f7ff; --text-dark:#2c2c2c;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Arial,sans-serif;color:var(--text-dark);display:flex;flex-direction:column;min-height:100vh;background:#eef}

/* Header + burger */
.site-header{position:fixed;inset:0 0 auto 0;z-index:10}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:10px 20px;background:var(--primary-70);color:#fff;backdrop-filter:blur(6px)}
.brand{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none}
.brand img{width:36px;height:36px}
.topnav a{color:#fff;text-decoration:none;margin:0 8px;padding:8px 10px;border-radius:6px;text-transform:uppercase;font-weight:600;letter-spacing:.5px;font-size:14px}
.topnav a:hover{background:rgba(255,255,255,.12)}
.menu-btn{display:none;background:transparent;color:#fff;border:1px solid rgba(255,255,255,.4);border-radius:6px;padding:8px 10px;cursor:pointer}
.topnav .admin-link{display:none} /* скрыт до логина */

/* Hero */
.hero{
  min-height:100vh;color:#fff;position:relative;display:flex;align-items:center;
  padding:120px 20px 80px;
  background:linear-gradient(180deg,rgba(0,0,0,.25),rgba(0,0,0,.45)),var(--hero-bg, url('../index.jpg')) center/cover no-repeat fixed;
}
.hero .wrap{max-width:1100px;margin:0 auto;width:100%}
.hero h1{
  font-family:'Montserrat', Arial, sans-serif;
  font-weight:800;
  font-size:clamp(42px, 6.2vw, 86px);
  line-height:1.08;
  letter-spacing:.2px;
  margin:0 0 14px;
  text-shadow:0 10px 30px rgba(0,0,0,.35);
}
.hero p{
  font-size:clamp(18px, 2.2vw, 26px);
  margin:0;
  opacity:.95;
}
/* Scroll-down */
.scroll-down{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);text-decoration:none}
.scroll-down .btn{width:46px;height:46px;border:2px solid #fff;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff}
.scroll-down .icon{font-size:22px;line-height:1;animation:bounce 1.6s infinite}
@keyframes bounce{0%,20%,50%,80%,100%{transform:translateY(0)}40%{transform:translateY(6px)}60%{transform:translateY(3px)}}

/* Sections */
.section{padding:60px 20px}
.section-dark{background:var(--primary);color:var(--text)}
.section .wrap{max-width:1100px;margin:0 auto}
.section h2{margin:0 0 20px;font-size:28px}

/* News cards */
.news-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
@media (max-width:980px){.news-grid{grid-template-columns:1fr}}
.card{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);border-radius:12px;overflow:hidden;cursor:pointer;transition:transform .2s,box-shadow .2s,background .2s}
.card:hover{transform:translateY(-4px);box-shadow:0 12px 24px rgba(0,0,0,.25);background:rgba(255,255,255,.12)}
.card img{width:100%;height:160px;object-fit:cover;display:block}
.card-body{padding:12px}
.card h3{margin:0 0 6px;color:#fff;font-size:18px}
.card .meta{opacity:.85;font-size:12px;margin-bottom:6px;color:#e0e6ff}
.card p{margin:0;color:#e8ecf7}

/* Orar */
.class-bands{display:grid;gap:16px;margin-bottom:16px}
.band{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:12px}
.band-title{margin:0 0 8px;color:#fff;font-weight:700}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{background:#fff;color:#223a63;border:none;border-radius:999px;padding:8px 12px;cursor:pointer;font-weight:700}
.chip.active{background:#1E90FF;color:#fff}
.day-grid{overflow-x:auto}
table.schedule{width:100%;border-collapse:collapse;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);border-radius:12px;overflow:hidden}
table.schedule th,table.schedule td{padding:10px 12px;border-bottom:1px solid rgba(255,255,255,.14);color:#e8ecf7;text-align:left;min-width:140px}
table.schedule th{color:#fff;background:rgba(255,255,255,.06)}
table.schedule td.editable{cursor:pointer}
table.schedule td.editable:hover{background:rgba(255,255,255,.08)}
.rowhead{white-space:nowrap;font-weight:700;color:#fff}
.btn{padding:8px 12px;border:none;border-radius:6px;cursor:pointer}
.btn-blue{background:#1E90FF;color:#fff}
.btn-red{background:#ff6b6b;color:#fff}
.hidden{display:none!important}

/* Contacts */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin:12px 0 18px}
.card-box{background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.18);border-radius:12px;padding:14px;color:#e8ecf7}
.card-box h3{margin:0 0 6px;color:#fff}
.map-wrap{border:1px solid rgba(255,255,255,.18);border-radius:12px;overflow:hidden;background:rgba(255,255,255,.08)}

/* Gallery grid */
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.g-item{position:relative;border-radius:12px;overflow:hidden;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12)}
.g-item img{width:100%;height:180px;object-fit:cover;display:block}
.g-item .cap{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(0deg,rgba(0,0,0,.55),transparent);color:#fff;padding:6px 10px;font-size:13px}

/* Mobile */
@media (max-width:860px){
  .hero h1{font-size:34px}.hero p{font-size:18px}.brand strong{font-size:14px}
  .menu-btn{display:block}
  .topnav{position:fixed;top:56px;left:12px;right:12px;background:var(--primary);border:1px solid rgba(255,255,255,.18);border-radius:12px;padding:10px;display:none;flex-direction:column;gap:6px;z-index:9999}
  .topnav.open{display:flex}
  .topnav a{display:block;padding:10px 12px;background:rgba(255,255,255,.06);border-radius:8px;margin:0}
}
@media (max-width:580px){
  table.schedule th,table.schedule td{min-width:120px;padding:8px 10px}
}

/* Hero backgrounds per page */
body.page-index    { --hero-bg: url('../bg/index-hero.jpg'); }
body.page-galerie  { --hero-bg: url('../bg/galerie-hero.jpg'); }
body.page-contacte { --hero-bg: url('../bg/contacte-hero.jpg'); }
body.page-orar     { --hero-bg: url('../bg/orar-hero.jpg'); }
body.page-admin    { --hero-bg: url('../bg/index-hero.jpg'); }

.text-gradient{
  background:linear-gradient(90deg,#ffffff 0%, #a7c9ff 50%, #ffffff 100%);
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
.btn-ghost{border:2px solid #fff;background:transparent;color:#fff}
.badges{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.badge-pill{background:rgba(255,255,255,.15);color:#fff;padding:6px 10px;border-radius:999px;font-weight:700;font-size:14px}

/* Волна-переход */
.shape-divider{position:absolute;bottom:-1px;left:0;right:0;line-height:0;transform:translateY(1px)}
.shape-divider svg{display:block;width:100%;height:80px}
.shape-divider .shape-fill{fill:var(--primary)}

/* Orar: аккордеон групп */
.band{padding:0}
.band-head{
  width:100%; display:flex; align-items:center; justify-content:space-between;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14);
  color:#fff; font-weight:700; border-radius:10px; padding:10px 12px; cursor:pointer;
}
.band-head:hover{ background:rgba(255,255,255,.12) }
.band .chips{ padding:12px 6px 0 }
.band.collapsed .chips{ display:none }
.chev{transition:.2s transform}
.band.collapsed .chev{ transform:rotate(-90deg) }
.chip.ghost{ background:rgba(255,255,255,.25); color:#fff; opacity:.6; cursor:not-allowed }

/* Orar: тюнинг таблицы */
table.schedule{
  border-radius:14px; overflow:hidden; box-shadow:0 14px 28px rgba(0,0,0,.18)
}
table.schedule thead th{background:rgba(255,255,255,.12);font-weight:700;letter-spacing:.2px}
table.schedule tbody tr:nth-child(odd) td{ background:rgba(255,255,255,.03) }
table.schedule tbody tr:hover td{ background:rgba(255,255,255,.07) }

/* Галерея: лайтбокс */
.lightbox{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.9);z-index:10000}
.lightbox.open{display:flex}
.lightbox img{max-width:92vw;max-height:92vh;border-radius:12px;box-shadow:0 20px 50px rgba(0,0,0,.5)}
.lb-btn{position:absolute;top:14px;right:14px;background:rgba(255,255,255,.15);color:#fff;border:none;border-radius:8px;padding:8px 12px;cursor:pointer}
.lb-prev,.lb-next{
  position:absolute; top:50%; transform:translateY(-50%); background:rgba(255,255,255,.15);
  color:#fff; border:none; border-radius:50%; width:44px; height:44px; cursor:pointer; font-size:20px;
}
.lb-prev{left:16px} .lb-next{right:16px}
.lb-cap{position:absolute;left:0;right:0;bottom:10px;text-align:center;color:#fff;opacity:.85;padding:6px 10px}
/* --- Quick tiles (плитки) --- */
.quick-links{background:var(--primary);color:var(--text);padding:28px 20px 24px}
.quick-links .wrap{max-width:1100px;margin:0 auto}
.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
@media (max-width:980px){ .tiles{grid-template-columns:repeat(2,minmax(0,1fr))} }
.tile{
  display:flex;align-items:center;gap:12px;text-decoration:none;color:#fff;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);border-radius:14px;
  padding:16px;transition:transform .18s, box-shadow .18s, background .18s;
}
.tile:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(0,0,0,.25);background:rgba(255,255,255,.12)}
.tile .ico{width:36px;height:36px;display:grid;place-items:center;background:rgba(255,255,255,.15);border-radius:10px}
.tile .ico svg{width:22px;height:22px}
.tile .ttl{font-weight:700}

/* --- Волна под Hero --- */
.hero{position:relative}
.hero .wave-bottom{position:absolute;left:0;right:0;bottom:-1px;line-height:0}
.hero .wave-bottom svg{display:block;width:100%;height:90px}
.hero .wave-bottom .shape-fill{fill:var(--primary)}
/* если раньше включали fade-подложку у hero, отключим её, чтобы не мешала волне */
.hero::after{height:0!important;background:none!important}
/* Базовый баннер */
.hero{
  position: relative;
  color: #fff;
  display: flex;
  align-items: center;
  padding: 120px 20px 80px;
  text-shadow: 0 6px 24px rgba(0,0,0,.25);
  background-repeat: no-repeat;
  background-size: cover;     /* масштаб */
  background-position: 50% 50%; /* кадр по умолчанию: центр */
}

/* Конкретные баннеры (под свои фото в папке bg/) */

/* Главная */
.hero--index{
  min-height: 520px;
  background-image: url('../bg/index-hero.jpg');
  background-position: 50% 45%;   /* если надо поднять/опустить фото — меняй второе число */
}

/* Contacte */
.hero--contacte{
  min-height: 280px;
  background-image: url('../bg/contacte-hero.jpg');
  background-size: 100% auto;
  background-position: 50% 58%;
}

/* Orar */
.hero--orar{
  min-height: 280px;
  background-image: url('../bg/orar-hero.jpg');
  background-position: 50% 50%;
}

/* Galerie */
.hero--galerie{
  min-height: 300px;
  background-image: url('../bg/galerie-hero.jpg');
  background-position: 70% 50%;  /* объект справа → сдвинут правее */
}

/* Мобилка: обычно чуть выше кадр */
@media (max-width: 860px){
  .hero--index     { min-height: 380px; background-position: 50% 35%; }
  .hero--contacte  { min-height: 220px; background-position: 50% 30%; }
  .hero--orar      { min-height: 240px; background-position: 50% 40%; }
  .hero--galerie   { min-height: 240px; background-position: 60% 40%; }
}

/* Reveal-анимации (slide-up + fade) */
:root{ --reveal-distance: 28px; }
.reveal{
  opacity: 0;
  transform: translateY(var(--reveal-distance)) scale(.98);
  filter: blur(2px);
  transition: opacity .4s ease, transform .4s ease, filter .4s ease;
  transition-delay: var(--d, 0ms);  /* индивидуальная задержка */
  will-change: transform, opacity;
}
.reveal.reveal-visible{
  opacity: 1;
  transform: none;
  filter: blur(0);
}

/* Ховер для карточек контактов */
.card-box{
  transition: transform .7s ease, box-shadow .7s ease, background .7s ease;
}
.card-box:hover{
  transform: translateY(-3px);
  box-shadow: 0 12px 26px rgba(0,0,0,.25);
  background: rgba(255,255,255,.14);
}

/* Скелетон для карты, пока грузится iframe */
.map-wrap{ position: relative; }
.map-skel{
  position:absolute; inset:0;
  display:grid; place-items:center;
  border-radius:12px;
  background: linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,.12), rgba(255,255,255,.06));
  color:#dbe8ff; font-weight:700; letter-spacing:.3px;
  animation: skel 1.4s linear infinite;
}
@keyframes skel{
  0%{ filter: brightness(1); }
  50%{ filter: brightness(1.2); }
  100%{ filter: brightness(1); }
}

/* — HERO: фото отдельным слоем, лёгкое затемнение, аккуратная дуга — */
.hero{ position:relative; overflow:hidden; }
.hero .wrap{ position:relative; z-index:3; }
.hero::before{
  content:""; position:absolute; inset:0; z-index:2;
  background: linear-gradient(180deg, rgba(0,0,0,.40), rgba(0,0,0,.28));
  pointer-events:none;
}
/* Фон-фото (анимация Кен-Бёрнс) */
.hero .hero-bg{
  position:absolute; inset:0; z-index:1;
  background:center / cover no-repeat;
  transform: scale(1.06);
  animation: kenburns 22s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes kenburns{
  0%{ transform: scale(1.06) translateY(0) }
  100%{ transform: scale(1.12) translateY(-10px) }
}

/* Тонкая дуга снизу баннера */
.shape-slim{
  position:absolute; left:0; right:0; bottom:-1px;
  height:56px; line-height:0; pointer-events:none; z-index:4; overflow:hidden;
}
.shape-slim svg{ width:100%; height:100%; display:block }
.shape-slim .shape-fill{ fill: var(--section-top, #203b66); }



/* — NEWS карточки и скелетоны — */
.card{ position:relative; transition:transform .18s ease, box-shadow .18s ease }
.card:hover{ transform:translateY(-4px); box-shadow:0 16px 30px rgba(0,0,0,.28) }
.card.skel{ cursor:default; box-shadow:none; background:rgba(255,255,255,.08) }
.skel-img{ height:160px; background:
  linear-gradient(90deg, rgba(255,255,255,.08), rgba(255,255,255,.18), rgba(255,255,255,.08));
  background-size:400% 100%; animation:shimmer 1.1s linear infinite; }
.skel-line{ height:14px; margin:10px 0; border-radius:6px; background:
  linear-gradient(90deg, rgba(255,255,255,.08), rgba(255,255,255,.18), rgba(255,255,255,.08));
  background-size:400% 100%; animation:shimmer 1.1s linear infinite; }
.skel-line.sm{ width:55% } .skel-line.md{ width:80% } .skel-line.lg{ width:95% }
@keyframes shimmer{ 0%{background-position:0 0} 100%{background-position:400% 0} }



/* — Настройки именно главного баннера — */
.hero--index{ min-height: 100vh; }          /* ровно один экран */
.hero--index .hero-bg{
  background-image: url('../bg/index-hero.jpg');  /* твоя фотка */
  background-position: 50% 45%;                   /* подними/опусти вторым числом */
}
/* мобилка */
@media (max-width:860px){
  .hero--index{ min-height: 88vh }
  .hero--index .hero-bg{ background-position:50% 35% }
}

/* Маленький лейбл в секции новостей */
.kicker{ text-transform:uppercase; letter-spacing:1.6px; font-weight:700; opacity:.85; margin:0 0 6px; color:#cfe0ff }

/* только нижняя FB-кнопка в секции новостей */
.page-index #news a[href*="facebook.com"]{
  display:inline-flex; position:relative; overflow:hidden; border-radius:6px;
}
.page-index #news a[href*="facebook.com"]::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.38) 50%,transparent 58%);
  transform:translateX(-130%) skewX(-18deg);
}
.page-index #news a[href*="facebook.com"]:hover::after{
  animation: btnShineSweep .85s cubic-bezier(.2,.6,.2,1);
}
/* Reveal (как на Contacte): мягкий slide-up + fade */
:root{ --reveal-distance: 28px; }
.reveal{
  opacity:0; transform: translateY(var(--reveal-distance)) scale(.98);
  filter: blur(2px);
  transition: opacity .6s ease, transform .6s ease, filter .6s ease;
  transition-delay: var(--d, 0ms);
  will-change: transform, opacity;
}
.reveal.reveal-visible{ opacity:1; transform:none; filter:none; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1!important; transform:none!important; filter:none!important; transition:none!important }
}

/* ДВЕ ВОЛНЫ снизу баннера */
.hero{ position:relative; overflow:hidden; }
.hero .wrap{ position:relative; z-index:3; }
.hero .waves-double{
  position:absolute; left:0; right:0; bottom:-1px;
  height:140px; line-height:0; z-index:4; pointer-events:none; overflow:hidden;
}
.hero .waves-double svg{ display:block; width:100%; height:100%; }
:root{
  --wave-front:#0a86da;  /* нижняя волна */
  --wave-back:#79c6f3;   /* верхняя волна */
}
.waves-double .back { animation: waveFloat 9.5s ease-in-out infinite; }
.waves-double .front{ animation: waveFloat 8s ease-in-out infinite reverse; }
@keyframes waveFloat{ 0%{transform:translateY(0)} 50%{transform:translateY(8px)} 100%{transform:translateY(0)} }

/* Фон фото баннера (анимация Ken Burns) */
.hero--index{ min-height:100vh; }
.hero--index .hero-bg{
  position:absolute; inset:0; z-index:1;
  background: url('../bg/index-hero.jpg') center/cover no-repeat;
  transform: scale(1.06);
  animation: kenburns 22s ease-in-out infinite alternate;
  will-change:transform;
}
.hero--index::before{
  content:""; position:absolute; inset:0; z-index:2;
  background: linear-gradient(180deg, rgba(0,0,0,.40), rgba(0,0,0,.28));
  pointer-events:none;
}
@keyframes kenburns{ 0%{transform:scale(1.06) translateY(0)} 100%{transform:scale(1.12) translateY(-10px)} }
@media (max-width:860px){
  .hero--index{ min-height:88vh }
  .hero--index .hero-bg{ background-position:50% 35% }
}

/* Фон секции новостей (без бликов) */
.section-dark.fancy-bg{
  --section-top:#203b66;
  background: linear-gradient(180deg, var(--section-top) 0%, #223a63 60%, #1d3156 100%);
  position:relative; overflow:hidden;
}
/* если вдруг когда-то включал подсветку ::before — выключим на главной */
.page-index #news::before{ display:none!important; }