:root{
  --bg:#f2f4f8;
  --card:#ffffff;
  --muted:#5b6472;
  --accent:#2b6cb0;
  --accent-dark:#1f4f7a;
  --radius:16px;
  --container:1200px;
  --soft-shadow: 0 12px 30px rgba(16,24,40,0.06);
  --btn-shadow: 0 6px 14px rgba(16,24,40,0.08);
  --divider-strong: rgba(0,0,0,0.18);

  /* Блог: общий фон и плотность футера */
  --blog-bg-opacity: 0.20;
  --blog-footer-tint: 0.58;

  /* Слайдер/модалки */
  --overlay: rgba(0,0,0,.55);
  --overlay-strong: rgba(0,0,0,.65);
  --modal-bg:#fff;
  --arrow-bg: rgba(255,255,255,.96);
  --arrow-fg:#0f172a;
  --dot:#d1d5db;
  --dot-active:#111827;
}

*{box-sizing:border-box}
html,body{height:100%}
html{overflow-x:hidden}
body{
  font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  margin:0; color:#111; background:var(--bg); -webkit-font-smoothing:antialiased;
  display:flex; flex-direction:column; min-height:100vh; overflow-x:hidden;
}

.container{max-width:var(--container); margin:0 auto; padding:20px; position:relative; z-index:1}
.page-home .container, .page-performances .container{ max-width:1400px; }
main{flex:1 0 auto}

.hoverable{transition:transform .18s ease, box-shadow .18s ease}
.hoverable:hover{ transform: scale(1.035); box-shadow:0 22px 50px rgba(16,24,40,0.14) }

/* ===== Универсальная кнопка ===== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background: linear-gradient(180deg, #2b6cb0 0%, #245b96 100%);
  color:#fff; text-decoration:none; padding:12px 18px; border-radius:12px;
  font-weight:900; border:0; box-shadow:var(--btn-shadow); cursor:pointer;
  transition: transform .14s ease, filter .14s ease, box-shadow .14s ease;
}
.btn:hover{ transform: translateY(-1px) scale(1.03) }
.btn:active{ transform: translateY(0) scale(.98); filter:brightness(.96) }
.btn[disabled]{ opacity:.65; cursor:not-allowed }

/* ===== Хедер ===== */
.site-header{
  background:rgba(255,255,255,0.92);
  backdrop-filter:blur(4px);
  border-bottom:1px solid rgba(0,0,0,0.05);
  position:sticky; top:0; z-index:60;
}
.header-inner{display:flex; align-items:center; justify-content:space-between; gap:18px; padding-block:6px}
.brand{ font-weight:900; color:var(--accent-dark); text-decoration:none; font-size:22px }
.brand:hover{ text-decoration:underline; opacity:.9 }

.main-nav{display:flex; gap:26px; justify-content:center; flex:1}
.main-nav a{
  color:var(--muted); text-decoration:none; font-weight:800;
  padding:12px 24px; border-radius:12px; font-size:17px;
  transition:transform .16s ease, background .16s ease
}
.main-nav a:hover{background:rgba(43,108,176,0.06)}

.menu-toggle{display:none; background:none; border:0; font-size:24px}
@media (max-width: 880px){
  .main-nav{display:none}
  .menu-toggle{display:block}
}

/* ===== ОДНА кнопка языка ===== */
.lang-toggle{position:relative}
.lang-single-btn{
  background:#fff; border:1px solid rgba(0,0,0,0.06); padding:10px 14px; border-radius:12px;
  box-shadow:var(--btn-shadow); font-weight:900; cursor:pointer; transition:transform .16s ease
}
.lang-single-btn:hover{ transform:scale(1.07) }

/* ===== Мобильное меню ===== */
.mobile-menu{
  display:none; position:absolute; top:64px; left:12px; right:12px; margin:0 auto; max-width:620px;
  background:#fff; border-radius:12px; padding:12px;
  box-shadow:0 20px 44px rgba(16,24,40,.2);
  opacity:0; transform:translateY(-10px) scale(.98);
  transition:opacity .28s cubic-bezier(.2,.8,.2,1), transform .28s cubic-bezier(.2,.8,.2,1)
}
.mobile-menu.open{display:block; opacity:1; transform:translateY(0) scale(1)}
.mobile-list{list-style:none; margin:0; padding:6px 8px}
.mobile-list a{
  display:block; padding:12px 14px; border-radius:10px; font-weight:800; color:var(--accent); text-decoration:none; font-size:16px
}
.mobile-list a:hover{ background:rgba(43,108,176,0.06) }
.mobile-list .mobile-lang{padding:8px 6px}

/* ===== Блог: единый фон для main + footer ===== */
.page-home .blog-with-bg{ position:relative; isolation:isolate; }
.page-home .blog-with-bg::before{
  content:"";
  position:fixed; inset:0; width:100dvw; height:100dvh;
  background-image:url('bg.jpg'); background-position:center; background-repeat:no-repeat; background-size:cover;
  opacity:var(--blog-bg-opacity); filter:saturate(1.05); z-index:-1; pointer-events:none;
}
@media (max-width: 640px){ .page-home .blog-with-bg::before{ opacity:calc(var(--blog-bg-opacity) + 0.03); } }
@media (max-width: 420px){ .page-home .blog-with-bg::before{ opacity:calc(var(--blog-bg-opacity) + 0.05); } }

/* Футер блога: тот же фон + более плотная вуаль */
.page-home .site-footer--blog-merged{ position:relative; z-index:1; background:transparent; }
.page-home .site-footer--blog-merged::before{
  content:""; position:absolute; inset:0; background: rgba(255,255,255, var(--blog-footer-tint)); pointer-events:none; z-index:0;
}
.page-home .site-footer--blog-merged .footer-inner{ position:relative; z-index:1 }

/* ===== Блог / карточки ===== */
.blog-banner{ display:flex; justify-content:center; margin:18px 0 10px }
.blog-banner .banner-inner{
  width:min(1100px,100%); position:relative; border-radius:16px; overflow:hidden; box-shadow:var(--soft-shadow); background:#e6edf6;
}
.page-home .blog-banner img{ width:100%; aspect-ratio:16/5; object-fit:cover; display:block; filter:brightness(.97); }
.zoomable{ cursor: zoom-in; }

.hero{padding:8px 0 6px; text-align:center}
.hero h1{font-size:clamp(24px, 3.6vw, 36px); margin:8px 0}
.lead{color:var(--muted); margin:0 0 18px}

.grid-cards{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr));
  gap:24px; align-items:stretch;
}
@media (min-width: 1100px){
  .page-home .grid-cards,
  .three-cols-lg{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.card{
  background:var(--card); border-radius:16px; overflow:hidden; box-shadow:var(--soft-shadow);
  transition:transform .18s ease, box-shadow .18s ease; display:flex; flex-direction:column; height:100%;
  cursor:pointer;
}
.card .thumb img{width:100%; aspect-ratio: 16/10; object-fit:cover; display:block; border:none; box-shadow:none;}
.card .body{padding:16px; display:flex; flex-direction:column; gap:8px; flex:1}
.card .body h3{margin:0; font-size:18px}
.card .excerpt{margin:0; color:var(--muted); font-size:14px}
.meta-date{ color:#7a8595; font-size:12px; letter-spacing:.2px; font-weight:600; }

/* Красивее кнопка «Смотреть все» — БЕЗ composes */
.view-all-wrap{ display:flex; gap:12px; justify-content:center; align-items:center; margin:14px 0 10px; flex-wrap:wrap }
.view-all-btn{
  display:inline-flex; align-items:center; justify-content:center;
  background: linear-gradient(180deg, #2d7bd8 0%, #1e5fb0 100%);
  color:#fff; text-decoration:none; padding:12px 22px; border-radius:14px;
  font-weight:900; border:0; box-shadow:var(--btn-shadow); cursor:pointer;
  transition: transform .14s ease, filter .14s ease, box-shadow .14s ease;
}
.view-all-btn:hover{ transform: translateY(-1px) scale(1.04) }
.view-all-btn:active{ transform: translateY(0) scale(.98) }

/* ===== Модалка «Все посты» ===== */
.allposts-backdrop{
  position:fixed; inset:0; background: var(--overlay); backdrop-filter: blur(8px);
  opacity:0; pointer-events:none; z-index:2000; transition: opacity .2s ease;
}
.allposts-backdrop.open{ opacity:1; pointer-events:auto; }
.allposts-backdrop.closing{ animation: apFade .16s ease both reverse; }
@keyframes apFade{ from{opacity:0} to{opacity:1} }

.allposts-dialog{
  position:absolute; left:50%; top:50%; transform: translate(-50%, -46%) scale(.98);
  width:min(1100px, 94vw); max-height:86vh; overflow:auto;
  background:#fff; border-radius:16px; box-shadow:0 30px 80px rgba(0,0,0,.30);
  padding:18px; animation: apIn .18s ease both;
}
.allposts-backdrop.open .allposts-dialog{ transform: translate(-50%, -50%) scale(1); }
@keyframes apIn{ from{opacity:.6; transform: translate(-50%, -42%) scale(.98)} to{opacity:1; transform: translate(-50%, -50%) scale(1)} }
.allposts-dialog h3{ margin:4px 4px 12px; font-size:22px }
.allposts-close{
  position:sticky; left:100%; top:0; margin-left:auto;
  width:40px; height:40px; border-radius:12px; border:0; background:#fff;
  font-size:22px; line-height:40px; cursor:pointer; box-shadow:0 8px 20px rgba(0,0,0,.22);
}

/* ===== Поездки — как блог ===== */
.page-performances .grid-cards.same-as-blog .thumb img{ aspect-ratio:16/10; border:none; box-shadow:none; }
@media (min-width:1100px){
  .page-performances .grid-cards.same-as-blog{ grid-template-columns: repeat(3,minmax(0,1fr)); }
}

/* ===== Учителя/Ученики ===== */
.homeroom h2{ text-align:center; margin:18px 0 6px }
.teacher-wrap{ display:flex; justify-content:center; margin:12px 0 60px }
.teacher-card{
  width:min(380px, 96%); padding:12px; background:var(--card); border-radius:16px; box-shadow:var(--soft-shadow);
  border:1px solid #fff; display:flex; flex-direction:column; transition: transform .18s ease, box-shadow .18s ease;
}
.teacher-card:hover{ transform: translateY(-4px) scale(1.035); box-shadow:0 22px 50px rgba(16,24,40,0.14) }
.teacher-card .student-photo img{
  width:100%; aspect-ratio: 3/4; object-fit:cover; border-radius:14px; display:block;
  filter:grayscale(1); transition:filter .18s ease;
  border:none !important; outline:none !important; box-shadow:none !important; /* НИГДЕ нет рамок у фото */
}
.teacher-card:hover .student-photo img{ filter:none }
.teacher-card .student-info{ display:flex; flex-direction:column; gap:10px; align-items:center; text-align:center; margin-top:10px; padding-bottom:14px }

.students-title{ text-align:center; font-size:clamp(20px, 2.6vw, 26px); margin:8px 0 10px; font-weight:900 }
.grid-students{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap:18px; align-items:stretch; justify-items:center;
}
@media (min-width: 1100px){ .grid-students{ grid-template-columns: repeat(4, 1fr); } }
.student-card{
  padding:12px; background:var(--card); border-radius:16px; box-shadow:var(--soft-shadow);
  border:1px solid #fff; display:flex; flex-direction:column; height:100%;
  transition: transform .18s ease, box-shadow .18s ease;
}
.student-card:hover{ transform: translateY(-4px) scale(1.035); box-shadow:0 22px 50px rgba(16,24,40,0.14) }
.student-card .student-photo img{
  width:100%; aspect-ratio: 3/4; object-fit:cover; border-radius:14px; display:block; filter:grayscale(1); transition:filter .18s ease;
  border:none !important; outline:none !important; box-shadow:none !important; /* НИГДЕ нет рамок */
}
.student-card:hover .student-photo img{ filter:none; }
.student-info{ display:flex; flex-direction:column; gap:8px; align-items:center; text-align:center; margin-top:8px }
.bio-btn{
  background:#fff; border:1px solid rgba(0,0,0,0.08); padding:8px 12px; border-radius:10px; cursor:pointer; font-weight:800; transition:transform .16s ease; text-decoration:none
}
.bio-btn:hover{ transform:scale(1.06) }
@media (max-width: 480px){
  .grid-students{ grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap:12px }
  .student-card{ padding:10px }
  .student-info strong{ font-size: 14px }
}

/* ===== Модалка («О себе» и общая модалка галереи) ===== */
.modal{ position:fixed; inset:0; display:none; align-items:center; justify-content:center; z-index:1200; }
.modal.open{ display:flex; background:var(--overlay); backdrop-filter: blur(6px); }
.modal.closing{ animation: modalFade .18s ease both reverse; }
@keyframes modalFade{ from{opacity:0} to{opacity:1} }
.modal-dialog{
  width:min(960px, 92vw); background:#fff; border-radius:16px; box-shadow:0 30px 80px rgba(0,0,0,.3); position:relative;
  padding:18px; animation: dialogIn .18s ease both;
}
.modal-lg{ width:min(1100px, 94vw); }
@keyframes dialogIn{ from{transform:translateY(6px); opacity:.6} to{transform:none; opacity:1} }
.modal-close{
  position:absolute; right:12px; top:12px; width:36px; height:36px; border-radius:10px; border:0; background:#fff;
  box-shadow:0 6px 16px rgba(0,0,0,.18); font-size:22px; line-height:36px; cursor:pointer;
  z-index: 100;          /* <-- добавили: всегда выше слайдера/картинки */
  pointer-events: auto;  /* <-- кликабельность гарантирована */
}

/* Сетка и фото внутри «О себе» — БЕЗ рамок */
.bio-wrap{ display:grid; grid-template-columns: 260px 1fr; gap:16px; align-items:flex-start }
.bio-photo img{
  width:100%; aspect-ratio:3/4; object-fit:cover; display:block;
  border:none !important; outline:none !important; box-shadow:none !important; border-radius:12px;
}
.bio-content h3{ margin:0 0 8px }
.bio-role{ color:var(--muted); margin-bottom:10px; font-weight:600 }
.bio-text{ line-height:1.5 }
@media (max-width: 680px){ .bio-wrap{ grid-template-columns: 1fr; } }

/* ===== Лайтбокс/Зум фото баннера ===== */
.imgzoom-backdrop{
  position:fixed; inset:0; background:var(--overlay);
  backdrop-filter: blur(8px);
  opacity:0; pointer-events:none; transition:opacity .24s ease, backdrop-filter .24s ease; z-index:2200;
}
.imgzoom-backdrop.open{ opacity:1; pointer-events:auto }
.imgzoom-dialog{ position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background:transparent; }
.imgzoom-close{
  position:fixed; right:20px; top:20px; width:40px; height:40px; border-radius:12px;
  border:0; background:rgba(255,255,255,.96); font-size:22px; line-height:40px; cursor:pointer;
  box-shadow:0 8px 20px rgba(0,0,0,.25); z-index:5;
}
.imgzoom-close:hover{ transform:scale(1.06) }
.imgzoom-stage{ position:relative; display:flex; align-items:center; justify-content:center; width:100vw; height:100vh; overflow:hidden; cursor:default; touch-action:none; background:transparent; }
.imgzoom-img{
  --s: 1; --tx: 0px; --ty: 0px;
  display:block; max-width:96vw; max-height:92vh; width:auto; height:auto;
  transform: scale(var(--s)) translate(var(--tx), var(--ty));
  transform-origin: center center;
  transition: transform .2s ease-out, transform-origin .12s ease-out;
  user-select:none; -webkit-user-drag:none; will-change: transform;
  cursor: zoom-in; border:none !important; outline:none !important; box-shadow:none !important;
}
.imgzoom-img.zoomed{ cursor: zoom-out; }
@keyframes zoomOutFade { from{opacity:1} to{opacity:0} }
.imgzoom-backdrop.closing .imgzoom-dialog{ animation: zoomOutFade .14s ease forwards; }

/* ===== ГАЛЕРЕЯ ДЛЯ КАРТОЧЕК БЛОГА/ПОЕЗДОК — ОДИН БОЛЬШОЙ РАЗМЕР ===== */
.carousel{
  position:relative;
  width:100%;
  aspect-ratio: 16/9;                 /* горизонтальная область показа */
  max-height: min(55vh, 570px);       /* было 78vh/880px → стало меньше ≈ в 1.5 раза */
  overflow:hidden;
  background:#000;
  border:none !important;
  outline:none !important;
  box-shadow:none !important;
}


.carousel img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;       /* 16:9 заполняем, лишнее аккуратно режется */
  background:#000;
  border:none !important;
  outline:none !important;
  box-shadow:none !important;
  margin:0 auto;
}


/* Анимации перелистывания */
@keyframes galIn{ from{opacity:0; transform:translateX(14px) scale(.98)} to{opacity:1; transform:translateX(0) scale(1)} }
@keyframes galOut{ from{opacity:1; transform:translateX(0) scale(1)} to{opacity:0; transform:translateX(-14px) scale(.98)} }
.carousel img.enter{ animation: galIn .36s cubic-bezier(.2,.8,.2,1) both }
.carousel img.leave{ animation: galOut .24s cubic-bezier(.2,.8,.2,1) both }

.car-btn{
  position:absolute; top:50%; transform:translateY(-50%);
  width:46px; height:46px; border-radius:14px; border:0;
  background: var(--arrow-bg);
  color:var(--arrow-fg); font-size:26px; line-height:46px; text-align:center;
  box-shadow:0 12px 30px rgba(16,24,40,.30); cursor:pointer;
  transition: transform .14s ease, filter .14s ease;
}
.car-btn:hover{ transform:translateY(-50%) scale(1.06) }
.car-prev{ left:12px } .car-next{ right:12px }

.car-dots{
  position:absolute; left:50%; bottom:12px; transform:translateX(-50%);
  display:flex; gap:8px; z-index:2; padding:6px 10px; border-radius:999px;
  background: rgba(0,0,0,.25); backdrop-filter: blur(4px);
}
.car-dots .dot{
  width:9px; height:9px; border-radius:50%; background:var(--dot); opacity:.85;
  border:0; padding:0; cursor:pointer; transition: transform .14s ease, opacity .14s ease, background .14s ease;
}
.car-dots .dot.active{ background:var(--dot-active); opacity:1; transform:scale(1.25) }

/* КОЛОНКИ в модалке галереи: фото шире, текст уже */
/* Фото сверху, текст снизу — всегда одна колонка */
#galleryDialog .bio-wrap{ grid-template-columns: 1fr; }
#galleryDialog .bio-photo{ order: 0; }
#galleryDialog .bio-content{ order: 1; }


/* ===== Футер (для страниц кроме блога — обычный) ===== */
.site-footer{
  position:relative; overflow:hidden; color:#2b3b48;
  flex-shrink:0; background:rgba(255,255,255,.9);
}
.footer-inner{
  position:relative; z-index:1;
  display:grid; grid-template-columns:96px 1fr auto; gap:16px; align-items:center; padding:18px 0
}
.footer-logo img{ border-radius:10px; display:block; width:84px; height:84px; object-fit:cover; border:none; box-shadow:none; }
.footer-info{ padding-right:16px; border-right:2px solid rgba(0,0,0,0.18) }
.footer-credit{ padding-left:16px; font-size:13px; color:#384454 }

@media (max-width:980px){
  .container{padding:16px}
  .footer-inner{ grid-template-columns:72px 1fr; }
  .footer-credit{ grid-column: 1 / -1; padding-left:0; text-align:center; border:0 }
  .footer-info{ border-right:0; border-bottom:2px solid rgba(0,0,0,0.18); padding-right:0; padding-bottom:10px; margin-bottom:6px }
}

/* ===== Служебное и финальные правки ===== */
.no-tr{ unicode-bidi: isolate; }
.trip-end-note{ text-align:center; color:#6b7280; font-weight:700; margin:16px 0 8px; }

/* ВЕЗДЕ убираем рамки у фото (меню/модалки/списки/галереи) */
.modal img,
.allposts-dialog img,
.carousel img,
.bio-photo img,
.imgzoom-img,
.mobile-menu img{
  border:none !important;
  outline:none !important;
  box-shadow:none !important;
}

/* поверх модалки «Все посты», только когда нужно */
#galleryModal.over-allposts{ z-index: 3000; }


/* ==== HARD OVERRIDES: БЕЗ РАМОК + ЗАПОЛНЕНИЕ + СКРУГЛЕНИЕ ==== */
/* единый радиус для всех картинок */
:root{ --img-radius: 18px; }

/* 1) Сбрасываем любые «рамки»/обводки у изображений ГЛОБАЛЬНО */
img{
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* 2) Удаляем возможные «рамки»/отступы у обёрток, где живут картинки в модалках и карточках */
.card .thumb,
.student-photo,
.bio-photo,
.carousel,
.postslider,
.postslide,
#galleryDialog .bio-photo,
#bioDialog .bio-photo,
.imgzoom-stage{
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  overflow: hidden; /* чтобы скругление было чистым */
}

/* 3) Карточки блога/поездок — картинка заполняет свой слот целиком и имеет скругления */
.card .thumb img{
  display: block !important;
  width: 100% !important;
  height: 100% !important;          /* картинка под размер слота */
  object-fit: cover !important;      /* без чёрных/белых полос */
  border-radius: var(--img-radius) !important;
}

/* 4) Фото учеников/учителя и «О себе» — без рамок, со скруглением */
.student-photo img,
.bio-photo img{
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: var(--img-radius) !important;
}

/* 5) Галерея/слайдеры/лайтбокс — растягиваем на всю область слайдера, скругляем края */
#galImg,
.postslide img,
.carousel img,
.imgzoom-img,
#classHero{
  display: block !important;
  width: 100% !important;
  height: 100% !important;          /* всегда по высоте контейнера */
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;      /* заполняем без «рамок» */
  border-radius: var(--img-radius) !important;
  background: transparent !important;
}

/* 6) На всякий случай убираем любые рамки у превью внутри модалки «Все посты» */
.allposts-dialog img{
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  border-radius: var(--img-radius) !important;
}


/* ==== ZOOM LIMITS: изображение не фулл-скрин и не больше окна ==== */
.imgzoom-stage{
  /* небольшой внутренний отступ, чтобы вокруг изображения всегда был «воздух» */
  padding: clamp(8px, 2.2vw, 24px);
}

/* Базовое состояние: картинка компактная (≈74% / 68% окна) и вписывается без искажений */
.imgzoom-img{
  width: auto !important;
  height: auto !important;
  max-width: min(74vw, 1000px) !important;
  max-height: min(68vh, 720px) !important;
  object-fit: contain !important;
  border-radius: var(--img-radius) !important;
}

/* В «увеличенном» состоянии ограничение по размеру окна всё равно соблюдаем (границы задаёт JS) */
.imgzoom-img.zoomed{
  cursor: zoom-out;
}


/* =====================================================================
   Админ-панель (изолированные стили, не ломают публичные страницы)
   ===================================================================== */
.admin-wrap{max-width:1100px;margin:24px auto;padding:16px;background:#fff;border-radius:var(--radius);box-shadow:var(--soft-shadow)}
.admin-top{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px}
.admin-title{font-size:22px;font-weight:900}
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}
.tab-btn{padding:10px 14px;border-radius:10px;border:1px solid rgba(0,0,0,0.08);background:#fff;font-weight:800;cursor:pointer}
.tab-btn.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.section{display:none}
.section.active{display:block}
.list{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.item{border:1px solid #eee;border-radius:12px;padding:12px;background:#fff;box-shadow:var(--soft-shadow)}
.item h4{margin:4px 0 8px}
.field{display:flex;flex-direction:column;gap:6px;margin:6px 0}
.field label{font-weight:700;font-size:13px;color:#374151}
.row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.row-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
.actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
input[type="text"], input[type="date"], textarea{padding:10px;border-radius:8px;border:1px solid rgba(0,0,0,.12);font:inherit}
/* admin: prevent long title inputs from spilling outside card */
.row .field, .row-3 .field{min-width:0}
.row .field input, .row-3 .field input{width:100%;min-width:0;box-sizing:border-box}
.item{overflow:hidden}
textarea{min-height:66px;resize:vertical}
.muted{color:#6b7280;font-size:12px}
.login{max-width:420px;margin:16vh auto;padding:16px;background:#fff;border-radius:var(--radius);box-shadow:var(--soft-shadow)}
.login h1{margin:6px 0 12px}
.login .field{margin:10px 0}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.note{background:#f9fafb;border:1px dashed #d1d5db;border-radius:10px;padding:10px;font-size:13px;color:#374151}
.thumb{display:block;width:100%;height:160px;object-fit:cover;border-radius:10px;background:#f3f4f6}

/* admin gallery widget */
.gal-admin{display:flex;flex-direction:column;gap:8px}
.gal-stage{position:relative;border-radius:10px;overflow:hidden;background:#f3f4f6}
.gal-stage .gal-img{display:block;width:100%;height:200px;object-fit:cover}
.gal-del{position:absolute;top:8px;right:8px;width:34px;height:34px;border-radius:999px;border:0;
  background:rgba(0,0,0,.65);color:#fff;font-weight:900;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.gal-del:hover{filter:brightness(1.05)}
.gal-controls{display:flex;align-items:center;justify-content:space-between;gap:10px}
.gal-count{font-weight:800;color:#374151}

/* оттенки кнопок — используются только в админке */
.btn.success{background:#22c55e}
.btn.danger{background:#ef4444}
.btn.warn{background:#f59e0b}
.btn.success:hover, .btn.danger:hover, .btn.warn:hover{filter:brightness(1.02)}

/* ==== Mobile: show language button only in the mobile menu ==== */
@media (max-width: 880px){
  /* hide header toggle on small screens */
  .site-header .lang-toggle{ display:none !important; }
  /* (optional) make the mobile menu's language button span full width for easier tap */
  .mobile-list .mobile-lang .lang-single-btn{ width:100%; }
}

/* Desktop/large: (optional explicit) hide the mobile menu lang item if someone forces it open */
@media (min-width: 881px){
  #mobile-menu .mobile-lang{ display:none; }
}



.btn.secondary{background:#eee;color:#111;border:1px solid #ddd;}
.btn.secondary:hover{filter:brightness(.98);}
[hidden] { display: none !important; }