/* --- Anchor offset for cards (fix scroll to anchor under fixed header) --- */
/* --- Anchor offset for cards (fix scroll to anchor under fixed header) --- */
/* ===== Header layout (баннер сверху, nav+title в ряд) ===== */
.wrap header{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  /* главный зазор под шапкой, чтобы контент не прилипал */
  margin-bottom: 16px;
}

/* баннер всегда отдельной строкой сверху */
.wrap header .banner{ flex-basis: 100%; }

/* навигация слева, заголовок справа в той же строке */
.wrap header nav.nav{ order: 1; }
.wrap header h1{
  order: 2;
  margin: 0 0 0 auto;   /* <<< прижать заголовок вправо */
}

/* если на главной осталась “подзаголовочная” строка — спрячем */
.wrap header > .muted{ display: none; }
/* --- Шапка: баннер + кнопки слева + заголовок справа --- */
.wrap > header{
  display:flex;            /* одна линия для кнопок и заголовка */
  flex-wrap:wrap;          /* баннер занимает всю строку */
  align-items:center;
  gap:12px;
  margin-bottom:16px;      /* ЕДИНЫЙ отступ снизу шапки на всех страницах */
}
.wrap > header .banner{ flex:0 0 100%; }  /* баннер всегда на всю ширину */
.wrap > header nav{ order:1; }            /* кнопки слева */
.wrap > header h1{ order:2; margin:0 0 0 auto; } /* заголовок справа */
:root{--w:1024px;--pad:16px;--radius:14px}
*{box-sizing:border-box}
body{margin:0;background:#0f1115;color:#e7e7e7;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial}
a{color:#9ecbff;text-decoration:none} a:hover{text-decoration:underline}
.wrap{max-width:var(--w);margin:32px auto;padding:0 var(--pad)}
header{margin:0 0 16px}
h1{margin:0 0 6px;font-size:28px}
.nav{display:flex;flex-wrap:wrap;gap:12px;margin:8px 0 0}
.nav a{padding:8px 12px;background:#171a21;border:1px solid #2a2f3a;border-radius:999px}
.card{background:#171a21;border:1px solid #2a2f3a;border-radius:var(--radius);padding:16px;margin:0 0 16px}
.grid{display:grid;gap:16px}
@media(min-width:760px){.grid{grid-template-columns:1fr 1fr}}
.muted{color:#a9b2be;font-size:14px}
footer{margin-top:12px;color:#8a93a3;font-size:13px}
.btn{display:inline-block;padding:10px 14px;border-radius:12px;border:1px solid #2a2f3a;background:#151922;text-decoration:none}
.btn:hover{background:#1a1f29}
.input{background:#12151b;border:1px solid #2a2f3a;border-radius:12px;padding:10px 12px;color:#e7e7e7;width:100%}

/* === Sticky header + banner slot ======================================= */
.wrap > header{
  position: sticky;
  top: 0;
  z-index: 1000;
  background: #0f1115;           /* фон как у страницы */
  border-bottom: 1px solid #2a2f3a;
  padding-top: 12px;
  padding-bottom: 10px;
}

/* слот под баннер (если добавим в разметку) */
.banner{
  margin-top: 10px;
}
.banner img{
  display: block;
  width: 100%;
  height: 140px;                 /* можно менять позже */
  object-fit: cover;             /* подрезаем по краю без искажений */
  border-radius: var(--radius);
}

/* === Fixed header ======================================================= */
:root{ --header-h: 120px; } /* базовая высота шапки (подправим позже под баннер) */

.wrap > header{
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(100vw, var(--w));
  z-index: 1000;
  background: #0f1115;
  border-bottom: 1px solid #2a2f3a;
  padding-top: 12px;
  padding-bottom: 10px;
  min-height: var(--header-h);
}

/* отступ, чтобы контент не уезжал под фикс-шапку */
body{ padding-top: calc(var(--header-h) + 24px); }

/* === FIXED HEADER (forced) ============================================ */
:root{ --header-h: 120px; } /* при необходимости подправим позже */

body .wrap > header{
  position: fixed !important;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(100vw, var(--w));
  z-index: 9999;
  background: #0f1115;
  border-bottom: 1px solid #2a2f3a;
  padding-top: 12px;
  padding-bottom: 10px;
  min-height: var(--header-h);
}

body{ padding-top: calc(var(--header-h) + 24px) !important; }

/* === Fixed header — universal fallback (включая страницы без .wrap) === */
:root{ --header-h: 120px; } /* подправим потом под баннер */

body > header,
body .wrap > header{
  position: fixed !important;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(100vw, var(--w));
  z-index: 9999;
  background: #0f1115;
  border-bottom: 1px solid #2a2f3a;
  padding-top: 12px;
  padding-bottom: 10px;
  min-height: var(--header-h);
}

/* Отступ под фикс-шапку */
body{ padding-top: calc(var(--header-h) + 24px) !important; }
#admin-tabs a.active{ background:#1a1f29; border-color:#3a4150; }

/* Карточки всегда под контент */
.card {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

/* Нормальные отступы у текста внутри карточек */
.card p { margin: 8px 0; }
.card ul, .card ol { margin: 8px 0 8px 20px; }

/* Картинки в карточках — по ширине контейнера */
.card img {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
}

/* Guides: карточки под размер текста */
.guide-article,
.guide-article .card,
.guide-list .card {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

/* Нормальные отступы и картинки */
.guide-article p { margin: 8px 0; }
.guide-article ul, .guide-article ol { margin: 8px 0 8px 20px; }
.guide-article img {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
}

/* Guides: список карточек в 1–2 колонки */
.guide-list{display:grid;gap:16px}
@media(min-width:760px){.guide-list{grid-template-columns:1fr 1fr}}
.guide-list .card{margin:0}

/* Карточка-ссылка должна вести себя как блок и не «ломаться» по краям */
a.card{display:block;color:inherit;text-decoration:none}
a.card:hover{background:#1a1f29}

/* --- header image (safe for ad-blockers) --- */
.header-image img{
  display:block;
  width:100%;
  height:auto;
  max-height:220px;
  object-fit:cover;
  border-radius:12px;
  margin:12px 0;
}

/* ===== Ряд с меню и заголовком ===== */
.head-row{
  display:flex;
  align-items:center;
  justify-content:space-between;  /* меню слева, заголовок вправо */
  gap:16px;
  margin:8px 0 10px;
}
.head-row .nav{ flex:0 1 auto; }
.head-row h1{
  margin:0;
  font-size:24px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
@media (max-width:720px){
  .head-row{ flex-wrap:wrap; }
  .head-row h1{ width:100%; order:2; margin-top:6px; text-align:left; }
}

/* --- spacing under header (универсально для всех страниц) --- */
.wrap > header{
  margin-bottom: 14px;   /* одинаковая "воздушность" под шапкой */
}

/* если первая секция/карточка идёт сразу за header — не даём ей прилипнуть */
.wrap > .card:first-of-type,
.wrap > section.card:first-of-type{
  margin-top: 8px;
}

/* custom overrides */
.wrap header{margin:0 0 16px 0;}
.wrap header .nav{margin:8px 0 0;}
.wrap header .page-title{margin-left:auto;padding:6px 0 0;}
/* баннер всегда блочный и не даёт «проседать» высоте */
.wrap header .banner img{display:block;width:100%;height:auto;}
/* --- header layout: banner -> (nav | title) in one row --- */
.wrap > header{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:end;margin-bottom:16px}
.wrap > header .banner{grid-column:1/-1}
.wrap > header .nav{grid-column:1/2}
.wrap > header h1{grid-column:2/3;justify-self:end;margin:0}

/* баннер стабильно занимает место и не "проваливается" */
.wrap > header .banner img{
  display:block;width:100%;height:auto;max-height:220px;
  object-fit:cover;border-radius:12px;margin:12px 0;
}

/* первый блок контента не заезжает под шапку */
.wrap > .card:first-of-type,
.wrap > section:first-of-type{margin-top:0}
/* --- header layout: banner -> (nav | title) in one row --- */
.wrap > header{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:end;margin-bottom:16px}
.wrap > header .banner{grid-column:1/-1}
.wrap > header .nav{grid-column:1/2}
.wrap > header h1{grid-column:2/3;justify-self:end;margin:0}

/* баннер стабильно занимает место и не "проваливается" */
.wrap > header .banner img{
  display:block;width:100%;height:auto;max-height:220px;
  object-fit:cover;border-radius:12px;margin:12px 0;
}

/* первый блок контента не заезжает под шапку */
.wrap > .card:first-of-type,
.wrap > section:first-of-type{margin-top:0}
/* --- header layout: banner -> (nav | title) in one row --- */
.wrap > header{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:end;margin-bottom:16px}
.wrap > header .banner{grid-column:1/-1}
.wrap > header .nav{grid-column:1/2}
.wrap > header h1{grid-column:2/3;justify-self:end;margin:0}

/* баннер стабильно занимает место и не "проваливается" */
.wrap > header .banner img{
  display:block;width:100%;height:auto;max-height:220px;
  object-fit:cover;border-radius:12px;margin:12px 0;
}

/* первый блок контента не заезжает под шапку */
.wrap > .card:first-of-type,
.wrap > section:first-of-type{margin-top:0}

/* === FIX: Header layout (banner top, nav+title in one row) === */
.wrap header{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  margin-bottom:10px;     /* зазор от контента */
}
.wrap header .banner{
  flex:1 0 100%;          /* баннер — отдельной строкой на всю ширину */
}
.wrap header .banner img{
  display:block;
  width:100%;
  max-height:220px;
  object-fit:cover;
  border-radius:12px;
  margin:0 0 8px 0;       /* небольшой отступ снизу баннера */
}
.wrap header .nav{
  order:1;                /* сначала кнопки */
}
.wrap header h1{
  order:2;                /* справа от кнопок */
  margin:0 0 0 auto;      /* прижать к правому краю */
}
/* небольшой вертикальный зазор под строкой кнопок/заголовка */
.wrap header .nav + h1,
.wrap header .nav { margin-bottom:8px; }

/* === header layout: banner on top; below: nav + title in one row === */
.wrap header{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  row-gap:10px;
  margin-bottom:16px; /* общий отступ от шапки до контента */
}
.wrap header .banner{ flex: 0 0 100%; }         /* баннер всегда на всю ширину, отдельной строкой */
.wrap header .nav{ flex: 1 1 auto; }            /* навигация слева */
.wrap header h1{ margin-left:auto; }            /* заголовок прижат вправо */
@media (max-width: 640px){
  .wrap header h1{ font-size:1.1rem; }
  .wrap header{ margin-bottom:12px; }
}

/* === FIX header layout (banner top, nav + title in one row) === */
.wrap header{
  display:flex;           /* одна строка для nav + h1 */
  flex-wrap:wrap;         /* баннер на всю ширину, остальное переносится ниже */
  align-items:center;
  gap:12px;
  margin-bottom:18px;     /* зазор от контента, чтобы ничего не пряталось */
}

.wrap header .banner{     /* баннер всегда на всю ширину сверху */
  flex-basis:100%;
}

.wrap header .nav{        /* кнопки слева, без позиционирования */
  display:flex;
  gap:8px;
  position:static !important;
}

.wrap header h1{          /* заголовок справа в той же строке */
  margin:0 0 0 auto;      /* прижимаем вправо */
  position:static !important;
}

/* === FIX 2025-09-06: Header layout & spacing === */
/* Баннер — сверху всей строкой; ниже — в ОДНОМ ряду: слева nav, справа h1. */
/* Отступ снизу делаем padding-ом, чтобы исключить схлопывание margin-ов
   (иначе первый блок страницы может «залезать» под нав-кнопки). */

.wrap header{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  /* вместо margin-bottom, чтобы не схлопывалось с margin-top следующего блока: */
  padding-bottom:14px;
}

/* Баннер всегда отдельной строкой сверху */
.wrap header .banner{
  flex-basis:100%;
  order:0;
}

/* Навигация слева */
.wrap header .nav{
  order:1;
  margin-right:auto; /* тянет h1 вправо */
}

/* Заголовок страницы — справа в этом же ряду */
.wrap header h1{
  order:2;
  margin-left:auto;
  white-space:nowrap;   /* не переносим заголовок, чтобы был реально «в одну строку» */
}

/* Чуть аккуратнее на узких экранах */
@media (max-width: 720px){
  .wrap header{ gap:8px; }
  .wrap header h1{ font-size:20px; }
}
/*
==============================================================================
SV_D_ — Header Hotfix (2025-09-07)
Назначение: убрать налезание контента под меню и прижать <h1> вправо.
Принцип: поверх любых прежних правил принудительно делаем шапку НЕ фиксированной,
         задаём layout: баннер — на всю ширину, ниже одна строка (nav слева, h1 справа).
============================================================================== */

/* 1) Сбросить fixed/sticky у шапки и отменить искусственный отступ у body */
body > header,
body .wrap > header{
  position: static !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
  width: auto !important;
  z-index: auto !important;
  border-bottom: none !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  min-height: 0 !important;
  background: transparent !important;
}
body{
  padding-top: 0 !important;
}

/* 2) Универсальный layout шапки */
.wrap header{
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 0 0 16px 0; /* нормальный зазор под шапкой */
}

/* Баннер — отдельной строкой на всю ширину */
.wrap header .banner{
  flex: 0 0 100% !important;
}
.wrap header .banner img{
  display: block;
  width: 100%;
  height: auto;
  max-height: 220px;
  object-fit: cover;
  border-radius: 12px;
}

/* Меню слева, заголовок справа */
.wrap header .nav{
  order: 1;
  margin-right: auto; /* тянет заголовок вправо */
  position: static !important;
}
.wrap header h1{
  order: 2;
  margin: 0 0 0 auto !important; /* ПРИЖАТЬ ВПРАВО */
  position: static !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Мобильная аккуратность */
@media (max-width: 720px){
  .wrap header{ gap: 8px; }
  .wrap header h1{ font-size: 20px; }
}
/*
==============================================================================
SV_D_ — Head row layout fix (2025-09-07)
Цель: держать <nav> слева, <h1> справа в ОДНОЙ строке (на широких экранах).
Примечание: работает с текущей разметкой .header-image + .head-row.
============================================================================== */

.wrap header .head-row{
  display: flex !important;
  align-items: center;
  gap: 12px;
  flex-wrap: nowrap;           /* не переносить на вторую строку */
}

.wrap header .head-row .nav{
  margin-right: auto;          /* отталкивает заголовок вправо */
  display: flex;
  flex-wrap: wrap;             /* кнопки могут переноситься сами внутри */
  gap: 12px;
}

.wrap header .head-row h1{
  margin: 0 0 0 auto !important;  /* прижать к правому краю */
  white-space: nowrap;            /* не переносить текст заголовка */
  overflow: hidden;
  text-overflow: ellipsis;        /* на всякий случай усечение в строке */
}

/* На узких экранах позволим перенос (чтобы не ломать верстку) */
@media (max-width: 780px){
  .wrap header .head-row{
    flex-wrap: wrap;
  }
  .wrap header .head-row h1{
    margin: 6px 0 0 0;
    white-space: normal;
  }
}
/*
==============================================================================
SV_D_ — Sticky Header + Right-Aligned Title (2025-09-07)
Цель: фиксировать всю шапку (баннер + меню + h1) сверху и выстроить
      меню слева, заголовок справа в одной строке. Перекрываем старые правила.
============================================================================== */

/* 1) Шапка прилипает сверху на всех страницах */
body .wrap > header,
.wrap > header{
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
  background: #0f1115 !important;
  left: auto !important;
  transform: none !important;
  width: auto !important;
}

/* 2) Баннер — отдельной строкой на всю ширину (внутри шапки) */
.wrap > header .header-image{ flex-basis:100% !important; }
.wrap > header .header-image img{
  display:block; width:100%; height:auto; max-height:220px;
  object-fit:cover; border-radius:12px; margin:12px 0;
}

/* 3) Ряд: меню слева, заголовок справа — в одной строке */
.wrap > header .head-row{
  display:flex !important;
  align-items:center;
  gap:12px;
  margin:8px 0 10px;
}
.wrap > header .head-row .nav{
  display:flex; flex-wrap:wrap; gap:12px;
  margin-right:auto !important;            /* тянем h1 вправо */
}
.wrap > header .head-row h1{
  margin:0 0 0 auto !important;            /* прижать вправо */
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* 4) Унифицируем отступ под шапкой */
.wrap > header{ padding-bottom:12px !important; margin-bottom:14px !important; }

/* 5) Сброс лишнего отступа, если где-то задавался под fixed-шапку */
body{ padding-top:0 !important; }

/*
==============================================================================
SV_D_ — Head-row full width (2025-09-07)
Цель: .head-row должна занимать всю строку под баннером, чтобы h1 мог
прижаться к правому краю; меню остаётся слева.
============================================================================== */
.wrap header .head-row{
  flex: 0 0 100% !important;   /* ВЕСЬ ряд под баннером */
  display: flex !important;
  align-items: center;
  gap: 12px;
}
.wrap header .head-row .nav{
  margin-right: auto;          /* отталкиваем h1 вправо */
}
.wrap header .head-row h1{
  margin-left: auto;           /* прижать к правому краю строки */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/*
SV_D_ — Tight banner gap (2025-09-07)
Цель: уменьшить расстояние между баннером и рядом с меню/заголовком.
*/
.wrap > header .header-image img{
  margin-bottom: 4px !important;   /* было ~12px, делаем плотнее */
}
.wrap > header .head-row{
  margin-top: 0 !important;        /* убираем верхний отступ у ряда с меню */
}
/* SV_D_ — ещё плотнее под баннером */
.wrap > header .header-image img{
  margin-bottom: 0 !important;    /* было 4px */
}
.wrap > header .head-row{
  margin-top: -4px !important;    /* чуть подтягиваем ряд вверх */
}

/* Модальное окно увеличения картинки */
#img-zoom-modal {
  animation: fadeInZoom 0.2s;
}
#img-zoom-modal img {
  box-shadow: 0 4px 32px #000b;
  cursor: zoom-out;
  transition: transform 0.15s;
}
@keyframes fadeInZoom {
  from { opacity: 0; }
  to { opacity: 1; }
}