@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --nt-primary:#7709FF;
  --nt-primary-hover:#8d3bff;
  --nt-card-bg:#1b1e28;
  --nt-text:#e8e8e8;
  --nt-text-dim:#b0b3c7;
  --nt-border:rgba(255,255,255,.08);
  --header-h:72px;
  --rail-gap:24px;
  --content-max:1654px;
}

html{scroll-behavior:smooth}
body{
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  min-height:100vh;display:flex;flex-direction:column;
  background:#121212;color:#e8e8e8;line-height:1.55;
}
main{flex:1 0 auto}header,footer{flex-shrink:0}

.guide-main{
  /* max-width убран, теперь ширина всегда 100% */
  width:100%;
  margin:0 auto;
  padding-left:var(--page-gutter);
  padding-right:var(--page-gutter);
  padding-bottom:60px;
  box-sizing:border-box;
}



.guide-page{
  /* убираем фон, чтобы не перебивал основной */
  background:none;
  color:inherit;
  line-height:inherit;
  font-family:inherit;
}

/* ===== Header & Breadcrumbs ===== */
.guide-header{
  margin:1.5rem 0 2rem;
  padding:0;
}
.breadcrumbs {
  font-size: 14px;
  margin: 20px 0 24px;
  white-space: normal;
  overflow: visible;
  color: #9aa0a6;
}
.breadcrumbs ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  row-gap: 6px;
  column-gap: 0;
  padding: 0;
  margin: 0;
}
.breadcrumbs li {
  display: flex;
  align-items: center;
}
.breadcrumbs li + li::before {
  content: "›";
  margin: 0 6px;
  color: #c9c9c9;
}
.breadcrumbs a{
  color: #ffffff;
  text-decoration: none;
  font-size: 15px;
}
.breadcrumbs a:hover{ text-decoration: underline; }


.nav-svg svg,
.nav-svg img,
.nav-svg .nav-svg-img{
  width: 28px;
  height: 28px;
  vertical-align: -3px;
  margin-right: 6px;
  display: block;
  object-fit: contain;
}

.guide-header{margin:1.5rem 0 2rem}
.guide-title{margin:.2rem 0 1rem;font-size:clamp(1.8rem,3vw,2.4rem);line-height:1.15;font-weight:700;color:#fff}
.guide-meta-dates{display:flex;flex-wrap:wrap;gap:.6rem;margin:.5rem 0 1.2rem}
.guide-meta-dates .meta-pill{
  background:var(--nt-card-bg);
  padding:.35rem .7rem;
  border:1px solid var(--nt-border);
  border-radius:40px;
  font-size:.7rem;
  letter-spacing:.5px;
  font-weight:600;
  text-transform:uppercase;
  color:var(--nt-text-dim);
}

.guide-top-image{margin:1rem 0 1.2rem}
.guide-top-image img{
  display:block;
  max-width:100%;
  border-radius:16px;
  border:1px solid var(--nt-border);
  box-shadow:0 6px 24px -8px #000;
  max-height:420px;
  width:100%;
  object-fit:cover;
}

.guide-short-desc{
  background:var(--nt-card-bg);
  border:1px solid var(--nt-border);
  padding:1rem 1.2rem;
  border-radius:14px;
  font-size:.95rem;
  box-shadow:0 4px 18px -8px #000;
  color:var(--nt-text-dim);
}
.guide-short-desc p:first-child{margin-top:0}
.guide-short-desc p:last-child{margin-bottom:0}



/* === Обновлённая сетка: шире контент, шире TOC === */
.guide-content-wrapper{
  display:grid; /* ДОБАВЛЕНО: чтобы aside стоял сбоку */
  grid-template-columns:minmax(0,1fr) 300px;
  gap:2.6rem;
  align-items:start;
}
.guide-toc{
  width:300px;
  max-width:300px;
  position:sticky;
  top:92px; /* скорректировать под высоту вашего header */
  align-self:start;
  background:rgba(27,30,40,.78);
  backdrop-filter:blur(10px);
  border:1px solid var(--nt-border);
  border-radius:20px;
  padding:1.1rem 1.1rem 1.4rem;
  box-shadow:0 8px 28px -10px #000a, 0 0 0 1px rgba(255,255,255,.06);
  overflow:auto;
}
.guide-toc:before{
  content:"";
  position:absolute;
  inset:-10px -12px -10px -12px;
  background:linear-gradient(135deg,rgba(255,156,43,.18),rgba(120,165,255,.08) 40%,rgba(255,255,255,0) 75%);
  border-radius:28px;
  z-index:-1;
  mask:
    linear-gradient(#000,#000) content-box,
    linear-gradient(#000,#000);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
  padding:1px;
  opacity:.55;
  pointer-events:none;
}

/* === TOC fixes (убираем горизонт/вертик скролл, фикс цвета ссылок) === */
.guide-toc{
  overflow-y:auto;
  overflow-x:hidden;
  -ms-overflow-style:none;          /* IE/Edge */
  scrollbar-width:none;             /* Firefox */
}
.guide-toc::-webkit-scrollbar{
  width:0;
  height:0;
}
.toc-list{
  /* убираем возможный горизонтальный скролл из-за тени/псевдоэлементов */
  padding-right:4px;
  overflow:hidden;
}
.toc-item a,
.toc-item a:link,
.toc-item a:visited{
  color:var(--g-text-dim) !important;
  text-decoration:none;
  display:block;
}
.toc-item a:hover{
  color:#fff !important;
}
.toc-item.active > a,
.toc-item.active > a:visited{
  color:#fff !important;
}

/* Тонкий прогресс чтения внутри TOC */
.toc-progress{
  position:relative;
  height:4px;
  border-radius:4px;
  background:rgba(119,9,255,.10); /* фиолетовый фон */
  overflow:hidden;
  margin:0 0 .9rem;
}
.toc-progress span{
  position:absolute;
  inset:0 100% 0 0;
  background:linear-gradient(90deg,#7709FF,#8d3bff);
  transition:inset .25s ease;
  border-radius:4px;
}

/* Адаптив TOC (вниз под контент) */
@media (max-width:1050px){
  .guide-content-wrapper{
    grid-template-columns:1fr;
  }
  .guide-toc{
    width:100%;
    max-width:none;
    order:3;
    position:relative;
    top:0;
    margin-top:1.6rem;
    backdrop-filter:none;
    background:#1d2531;
  }
  .guide-toc:before{display:none;}
}

@media (max-width:1023px){
  .guide-toc{ display:none !important; }
}

/* TOC элементы */
.toc-list{ /* ...existing code... */ }
.toc-item a{ /* ...existing code... */ }

/* Активный пункт (scroll spy) */
.toc-item.active > a{
  color:#fff;
  font-weight:600;
  position:relative;
  text-shadow:0 0 6px rgba(119,9,255,.45);
  background:linear-gradient(90deg,rgba(119,9,255,.18),rgba(119,9,255,.05));
}
.toc-item.active > a:before{
  content:"";
  position:absolute;
  left:-10px;
  top:50%;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--nt-primary);
  transform:translateY(-50%) scale(1);
  box-shadow:0 0 10px 2px #7709FF55;
}

/* Вложенные h3 — тонкая линия слева при активе */
.toc-item.toc-h3.active > a{
  font-weight:600;
  padding-left:1rem;
  color:#fff;
}
.toc-item.toc-h3.active > a:before{
  left:.2rem;
  width:4px;
  height:4px;
  box-shadow:0 0 6px 1px #8d3bff80;
  background:var(--nt-primary-hover);
}

/* Плавный hover */
.toc-item a:hover{
  color:#fff;
}

/* Немного увеличим заголовки в контенте — визуальный баланс ширины */
.sun-content h2{ font-size:1.65rem; }
.sun-content h3{ font-size:1.32rem; }

/* Ограничение ширины блочных медиа внутри контента, чтобы не расползались на ультрашироких */
.sun-content img,
.sun-content video,
.sun-content iframe{
  max-width:100%;
  width:100%;
  border-radius:16px;
}

.sun-content{
  font-size:1rem;
  word-wrap:break-word;
  overflow-wrap:anywhere;
  color:var(--nt-text-dим);
}
.sun-content h1,
.sun-content h2,
.sun-content h3,
.sun-content h4{
  font-weight:700;
  line-height:1.25;
  margin:2rem 0 1rem;
  scroll-margin-top:90px;
  color:#fff;
}
.sun-content h1{font-size:1.9rem}
.sun-content h2{font-size:1.55rem}
.sun-content h3{font-size:1.25rem}
.sun-content h4{font-size:1.05rem}
.sun-content h1:first-child,
.sun-content h2:first-child,
.sun-content h3:first-child{margin-top:0}

.sun-content p{margin:1rem 0}
.sun-content ul,
.sun-content ol{margin:1rem 0 1rem 1.3rem;padding-left:.3rem}
.sun-content li{margin:.35rem 0}
.sun-content a{
  color:#4aa8ff;
  text-decoration:underline;
  text-underline-offset:3px;
}
.sun-content a:hover{color:#8ecfff}

.sun-content blockquote{
  margin:1.2rem 0;
  background:#1b1e28;
  padding:.9rem 1.1rem;
  border-left:4px solid var(--nt-primary);
  border-radius:10px;
  color:#d8dee8;
  font-style:italic;
}

.sun-content code{
  background:#1e2834;
  color:#ffe7c4;
  padding:.15rem .45rem;
  border-radius:6px;
  font-size:.85rem;
  font-family:ui-monospace,Menlo,Consolas,monospace;
}
.sun-content pre{
  background:#1b1e28;
  border:1px solid var(--nt-border);
  padding:1rem 1.1rem;
  border-radius:12px;
  overflow:auto;
  font-size:.95rem;
  line-height:1.45;
  box-shadow:0 4px 18px -10px #000;
}
.sun-content pre code{
  background:transparent;
  padding:0;
  color:#cfe6ff;
}

.sun-content table{
  width:auto !important;
  max-width:100% !important;
  table-layout:fixed !important;
  display:table !important;
  border-collapse:collapse;
  margin:1rem 0;
  background:#1b1e28;
  border:1px solid rgba(255,255,255,.10);
  border-radius:10px;
  overflow:hidden;
  box-shadow:0 2px 10px rgba(0,0,0,.25);
}
.sun-content thead th{
  background:linear-gradient(180deg,#262b3d 0%,#20253a 100%) !important;
  color:#fff !important;
  font-weight:700;
  letter-spacing:.02em;
}
.sun-content th,
.sun-content td{
  padding:.65rem .85rem;
  border-bottom:1px solid rgba(255,255,255,.08);
  vertical-align:top;
  white-space:normal !important;
  overflow-wrap:anywhere;
  word-break:break-word;
  hyphens:auto;
  background:transparent;
  color:inherit;
  font-weight:400;
}
.sun-content tbody tr:nth-child(even) td{
  background:rgba(255,255,255,.03);
}
.sun-content tbody tr:hover td{
  background:rgba(255,255,255,.05);
}
.sun-content td img,
.sun-content td video{
  max-width:100%;
  height:auto;
  display:block;
  border-radius:6px;
}
@media (max-width:600px){
  .sun-content table{font-size:.95rem;}
}

/* (Опционально) убрать горизонтальный скролл, если редактор добавил широкий wrapper */
.sun-content{overflow-x:hidden;}

/* Scrollbar minimalism for TOC */
.guide-toc::-webkit-scrollbar{width:8px}
.guide-toc::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15);border-radius:4px}

/* Дополнительная защита от слишком широких вложенных элементов */
.sun-content > table,
.sun-content table{
  max-width:100%!important;
}

/* === TABLE: фиксированные (заданные) ширины колонок без переноса === */
.sun-content table td[style*="width"],
.sun-content table th[style*="width"],
.sun-content table td[width],
.sun-content table th[width],
.sun-content table col[style*="width"] + col,
.sun-content table col[width] + col {
  white-space: nowrap !important;
}

/* Если нужно применить прямо к <col> – распространить на клетки через атрибут width */
.sun-content table col[style*="width"],
.sun-content table col[width] {
  /* вспомогательный хук: ничего не делаем здесь, но оставляем для расширений */
}

/* === TABLE layout adjustments (no wrap in headers, adaptive columns) === */
.sun-content table{
  table-layout:auto !important; /* вместо fixed */
}
.sun-content thead th{
  white-space:nowrap !important;
}
.sun-content tbody th,
.sun-content tbody td{
  white-space:normal !important; /* данные могут переноситься */
  overflow-wrap:anywhere;
  word-break:break-word;
}
/* Если ширина заголовка слишком большая — разрешим перенос только при очень узких экранах */
@media (max-width:560px){
  .sun-content thead th{
    white-space:normal !important;
  }
}

/* Избавляемся от равномерного деления при прежнем fixed: reset min-width */
.sun-content table th,
.sun-content table td{
  min-width:auto;
}

/* При наличии явно заданной ширины (inline style) — уважать её */
.sun-content table th[style*="width"],
.sun-content table td[style*="width"]{
  white-space:nowrap;
  overflow-wrap:normal;
  word-break:normal;
}

/* === TOC: уровни h2 / h3 / h4 без точек, с отступами === */
.toc-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:.35rem;
}

.toc-item{margin:0;padding:0;}
.toc-item a{
  display:block;
  padding:.35rem .55rem;
  border-radius:6px;
  font-size:.8rem;
  line-height:1.25;
  text-decoration:none;
  color:var(--g-text-dim) !important;
  transition:.15s background,color;
  position:relative;
}
.toc-item.toc-h2 a{font-size:.8rem;font-weight:600;padding-left:.55rem;}
.toc-item.toc-h3 a{font-size:.75rem;padding-left:1.25rem;}
.toc-item.toc-h4 a{font-size:.7rem;padding-left:2.0rem;opacity:.85;}

.toc-item a:hover{
  color:#fff !important;
  background:rgba(255,255,255,.05);
}





/* Убираем прежние декоративные кружки (если остались) */
.toc-h3 a::before,
.toc-h4 a::before{
  content:none !important;
}

/* === GUIDE PROMO BANNER (re-added) =================================== */
.guide-banner--promo{
  --gb-h:180px;
  position:relative;
  margin:26px 0;
  border-radius:16px;
  overflow:hidden;
  background:linear-gradient(93deg,#3f2ca8 0%,#4a38c7 18%,#4f41de 38%,#235fe9 56%,#0a91d7 74%,#06cbbf 100%);
  box-shadow:0 6px 24px -10px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.08);
  isolation:isolate;
  max-height:180px;
  font-family:inherit;
  transition:box-shadow .5s ease;
}
.guide-banner--promo:hover{
  box-shadow:0 10px 36px -12px rgba(15,38,80,.7),0 0 0 1px rgba(255,255,255,.12);
}
.guide-banner--promo .guide-banner-link{
  display:flex;
  align-items:stretch;
  width:100%;
  min-height:var(--gb-h);
  max-height:180px;
  text-decoration:none;
  color:#fff;
  position:relative;
  overflow:hidden;
}

/* Текстовый блок с затемнением для контраста */
.guide-banner--promo .guide-banner-body{
  position:relative;
  z-index:3;
  flex:1 1 auto;
  max-width:520px;
  padding:18px 28px 18px 32px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:8px;
  background:linear-gradient(115deg,rgba(12,16,28,.82),rgba(18,24,40,.62) 55%,rgba(18,24,40,0) 100%);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  border-right:1px solid rgba(255,255,255,.09);
}

.guide-banner--promo .gb-title{
  font-size:clamp(1.35rem,2.15vw,1.95rem);
  line-height:1.18;
  font-weight:700;
  letter-spacing:.4px;
  margin:0;
  text-shadow:0 3px 14px rgba(0,0,0,.55),0 0 2px rgba(255,255,255,.25);
  padding-bottom:2px;
}
.guide-banner--promo .gb-subtitle{
  font-size:.85rem;
  line-height:1.34;
  font-weight:500;
  max-width:440px;
  color:#f2f6ff;
  opacity:.95;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
  text-shadow:0 2px 10px rgba(0,0,0,.55);
  margin:0;
}

/* CTA – контрастная и читаемая */
.guide-banner--promo .guide-banner-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  margin-top:10px;
  padding:.62rem 1.25rem .66rem;
  font-size:.7rem;
  font-weight:600;
  letter-spacing:.95px;
  text-transform:uppercase;
  color:#fff !important;
  background:
    linear-gradient(160deg,#162734,#0f1c29 55%,#0d2830 100%);
  border:1px solid rgba(255,255,255,.18);
  border-radius:44px;
  box-shadow:
    0 6px 18px -8px rgba(0,0,0,.8),
    0 0 0 1px rgba(255,255,255,.15),
    inset 0 0 0 1px rgba(255,255,255,.06);
  text-shadow:0 2px 8px rgba(0,0,0,.6);
  position:relative;
  z-index:5;
  transition:box-shadow .45s, filter .45s, background .5s;
}
.guide-banner--promo .guide-banner-cta:before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:linear-gradient(90deg,rgba(255,255,255,.18),rgba(255,255,255,0) 60%);
  mix-blend-mode:overlay;
  opacity:.35;
  pointer-events:none;
}
.guide-banner--promo:hover .guide-banner-cta{
  filter:brightness(1.08);
  box-shadow:
    0 8px 28px -10px rgba(0,0,0,.85),
    0 0 0 1px rgba(255,255,255,.22),
    inset 0 0 0 1px rgba(255,255,255,.12);
}

/* Блок изображения справа */
.guide-banner--promo .guide-banner-media{
  flex:0 0 clamp(340px,48%,560px);
  width:clamp(340px,48%,560px);
  position:relative;
  margin-left:auto;
  overflow:hidden;
  align-self:stretch;
  max-height:180px;
}

/* Изображение: единичный трансформ – исчезает дёргание */
.guide-banner--promo .guide-banner-media img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  transform:scale(1.04) translateZ(0);
  transform-origin:center center;
  transition:transform .8s ease;
  will-change:transform;
  backface-visibility:hidden;
}
.guide-banner--promo:hover .guide-banner-media img{
  transform:scale(1.07) translateZ(0);
}

/* Полосы у краёв – статичны, анимация только при hover */
.guide-banner--promo .guide-banner-media:before,
.guide-banner--promo .guide-banner-media:after{
  content:"";
  position:absolute;
  top:0;
  width:90px;
  height:100%;
  pointer-events:none;
  mix-blend-mode:screen;
  opacity:.58;
  filter:blur(.25px);
  transition:transform .75s cubic-bezier(.16,.8,.25,1), opacity .55s ease;
  z-index:2;
}
.guide-banner--promo .guide-banner-media:before{
  left:0;
  transform:translateX(-55%) skewX(-26deg);
  background:linear-gradient(125deg,rgba(255,255,255,.34) 0%,rgba(145,205,255,.5) 50%,rgba(0,0,0,0) 100%);
}
.guide-banner--promo .guide-banner-media:after{
  right:0;
  transform:translateX(55%) skewX(-26deg);
  background:linear-gradient(55deg,rgba(255,255,255,.34) 0%,rgba(190,140,255,.5) 50%,rgba(0,0,0,0) 100%);
}
.guide-banner--promo:hover .guide-banner-media:before{
  transform:translateX(-6%) skewX(-26deg);
  opacity:.75;
}
.guide-banner--promo:hover .guide-banner-media:after{
  transform:translateX(6%) skewX(-26deg);
  opacity:.75;
}

/* Левый внешний лёгкий клин (фоновой) */
.guide-banner--promo:before{
  content:"";
  position:absolute;
  top:-20%;
  bottom:-20%;
  left:-55px;
  width:180px;
  transform:skewX(-26deg);
  background:linear-gradient(120deg,rgba(255,255,255,.18),rgba(140,180,255,0) 72%);
  filter:blur(1px);
  opacity:.7;
  pointer-events:none;
  transition:transform .9s cubic-bezier(.16,.8,.25,1), opacity .6s;
  z-index:1;
}
.guide-banner--promo:hover:before{
  transform:skewX(-26deg) translateX(-24px);
  opacity:.85;
}

/* Адаптив */
@media (max-width:880px){
  .guide-banner--promo,
  .guide-banner--promo .guide-banner-link{
    max-height:none;
  }
  .guide-banner--promo .guide-banner-link{
    flex-wrap:wrap;
  }
  .guide-banner--promo .guide-banner-body{
    max-width:none;
    border-right:none;
    padding:20px 22px 12px 24px;
    background:linear-gradient(180deg,rgba(12,16,28,.88),rgba(18,24,40,.55));
  }
  .guide-banner--promo .guide-banner-media{
    flex:1 1 100%;
    width:100%;
    min-width:0;
    height:170px;
    max-height:none;
    margin-left:0;
  }
  .guide-banner--promo .gb-title{white-space:normal;}
  .guide-banner--promo .guide-banner-media:before{transform:translateX(-55%) skewX(-26deg);}
  .guide-banner--promo .guide-banner-media:after{transform:translateX(55%) skewX(-26deg);}
  .guide-banner--promo:hover .guide-banner-media:before{transform:translateX(-10%) skewX(-26deg);}
  .guide-banner--promo:hover .guide-banner-media:after{transform:translateX(10%) skewX(-26deg);}
}

/* Focus */
.guide-banner--promo .guide-banner-link:focus-visible .guide-banner-cta{
  outline:2px solid #fff;
  outline-offset:3px;
}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
  .guide-banner--promo,
  .guide-banner--promo *{
    transition:none!important;
  }
}
/* ===================================================================== */

.guide-banner--promo:hover .guide-banner-media:after{
  transform:translateX(5%) skewX(-26deg);
  opacity:.75;
  filter:brightness(1.05);
}

/* Доп. вариант: если нужно совсем лёгкое движение — раскомментировать ниже */
/*
.guide-banner--promo:hover .guide-banner-media:before{ transform:translateX(-15%) skewX(-26deg); }
.guide-banner--promo:hover .guide-banner-media:after{  transform:translateX(15%) skewX(-26deg); }
*/

/* Reduced motion — без смещений */
@media (prefers-reduced-motion:reduce){
  .guide-banner--promo .guide-banner-media:before,
  .guide-banner--promo .guide-banner-media:after{
    transition:none!important;
  }
  .guide-banner--promo:hover .guide-banner-media:before,
  .guide-banner--promo:hover .guide-banner-media:after{
    transform:translateX(-55%) skewX(-26deg);
  }
}
/* === END PATCH === */

/* Убираем сильное «разъезжание» на hover (оставляем лёгкий параллакс) */
.guide-banner--promo:hover .guide-banner-media:before,
.guide-banner--promo:hover .guide-banner-media:after{
  opacity:.7;
  filter:brightness(1.05);
}

/* Лёгкий fade контентного блока поверх — улучшение читаемости текста */
.guide-banner--promo .guide-banner-body:after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(95deg,rgba(12,16,28,.78),rgba(18,24,40,.55) 55%,rgba(18,24,40,0) 100%);
  pointer-events:none;
  z-index:-1;
}

/* Заголовок — небольшой ап-лифт для читаемости */
.guide-banner--promo .gb-title{
  text-shadow:0 3px 12px rgba(0,0,0,.55),0 0 2px rgba(255,255,255,.25);
  letter-spacing:.4px;
}

/* Подзаголовок — усиленный контраст */
.guide-banner--promo .gb-subtitle{
  color:#f2f6ff;
  text-shadow:0 2px 10px rgba(0,0,0,.55);
  opacity:.95;
}

/* Reduced motion: отключаем анимацию полос */
@media (prefers-reduced-motion:reduce){
  .guide-banner--promo .guide-banner-media:before,
  .guide-banner--promo .guide-banner-media:after{
    animation:none !important;
  }
}

/* === NEW GUIDE GALLERY ================================================= */
.guide-gallery{
  margin:2rem 0 2.2rem;
  position:relative;
  font:inherit;
}

.guide-gallery--standard{
  padding:18px 18px 20px;
  box-shadow:0 8px 28px -14px #000;
  background:var(--g-surface);
  border:1px solid var(--g-border);
  border-radius:22px;
}

.guide-gallery-main{
  position:relative;
  border:2px solid rgba(255,255,255,.10);
  border-radius:18px;
  overflow:hidden;
  background:#0f141c;
}

.guide-gallery-main .swiper-slide{
  aspect-ratio:3/2;
  display:flex;
  align-items:center;
  justify-content:center;
  user-select:none;
}

.gg-main-slide{
  width:100%;
  height:100%;
  overflow:hidden;
  position:relative;
}

.gg-main-slide img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .6s ease;
}
.guide-gallery-main .swiper-slide:hover img{
  transform:scale(1.03);
}

.guide-gallery-caption-overlay{
  position:absolute;
  left:0; right:0; bottom:0;
  background:linear-gradient(0deg,rgba(10,14,22,.85),rgba(10,14,22,0));
  padding:.75rem 1.05rem .85rem;
  font-size:.8rem;
  line-height:1.25;
  color:#eaeff6;
  text-align:center;
  backdrop-filter:blur(2px);
  pointer-events:none;
  z-index:5; /* ДОБАВЛЕНО */
}

.guide-gallery-caption{
  margin-top:14px;
  font-size:.78rem;
  line-height:1.35;
  color:var(--g-text-dim);
  text-align:center;
  padding:0 6px;
}
.guide-gallery-caption a{
  color:var(--g-accent);
  text-decoration:underline;
}

.guide-gallery-thumbs{
  margin-top:14px;
  padding-bottom:4px;
}

.guide-gallery-thumbs .swiper-slide{
  width:150px;
  aspect-ratio:16/9;
  cursor:pointer;
  border-radius:12px;
  overflow:hidden;
  position:relative;
  border:2px solid transparent;
  background:#111823;
  transition:.25s border, .25s filter;
}
.guide-gallery-thumbs .swiper-slide img{
  width:100%; height:100%; object-fit:cover; display:block;
  filter:brightness(.82);
  transition:filter .35s;
}
.guide-gallery-thumbs .swiper-slide:hover img{
  filter:brightness(.95);
}
.guide-gallery-thumbs .swiper-slide-thumb-active{
  border-color:var(--g-accent);
}
.guide-gallery-thumbs .swiper-slide-thumb-active img{
  filter:brightness(1);
}

.guide-gallery-button{
  /* выравнивание иконки строго по центру */
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:44px;height:44px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(18,24,34,.62);
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
}
.guide-gallery--mini .guide-gallery-button{
  width:38px;height:38px;
}

.guide-gallery-button:after{
  content:"";
  position:absolute;
  top:50%;left:50%;
  width:14px;height:14px;
  border-top:2px solid #fff;
  border-right:2px solid #fff;
  transform:translate(-50%,-50%) rotate(45deg);
  border-radius:2px;
}

.guide-gallery-button.gg-prev:after{
  transform:translate(-50%,-50%) rotate(-135deg);
}

.guide-gallery-button:hover{
  background:rgba(40,50,66,.85);
  border-color:rgba(255,255,255,.32);
}

.guide-gallery-pagination{
  position:absolute;
  left:0;right:0;
  bottom:10px;
  text-align:center;
  z-index:25;
}
.guide-gallery-pagination .swiper-pagination-bullet{
  width:10px !important;
  height:10px !important;
  border-radius:50% !important;
  background:rgba(255,255,255,.35);
  opacity:1;
  margin:0 6px !important;
  position:relative;
  transition:.3s;
  box-sizing:border-box;
  aspect-ratio:1/1;
}
.guide-gallery-pagination .swiper-pagination-bullet-active{
  background:var(--g-accent);
  box-shadow:0 0 0 4px rgba(255,156,43,.25);
  border-radius:50% !important;
}

/* MINI ГАЛЕРЕЯ */
.guide-gallery--mini{

  padding:16px 26px 18px;

}
.guide-gallery--mini .guide-gallery-thumbs{
  margin:0;
}
.guide-gallery--mini .guide-gallery-thumbs .swiper-slide{
  width:140px;
  aspect-ratio:16/9;
  border-radius:14px;
  background:#0f141c;
}
.guide-gallery--mini .guide-gallery-button{
  top:calc(50% - 4px);
  width:36px;
  height:36px;
}
.guide-gallery-caption-mini{
  margin-top:12px;
  font-size:.7rem;
  color:var(--g-text-dим);
  text-align:center;
}

/* Mobile adjustments */
@media (max-width:680px){
  .guide-gallery--mini{padding:14px 18px 16px;}
  .guide-gallery-button{display:none;}
  .guide-gallery-pagination{bottom:6px;}
}

@media (prefers-reduced-motion:reduce){
  .guide-gallery-button,
  .guide-gallery-thumbs .gg-thumb img,
  .gg-main-slide img{transition:none!important;}
}

/* === GALLERY ADJUSTMENTS (caption below, arrows center, mini tweaks) === */

/* Новый caption под галереей (полная) */
.guide-gallery-caption{
  margin-top:14px;
  font-size:.78rem;
  line-height:1.35;
  color:var(--g-text-дим);
  text-align:center;
  padding:0 6px;
}
.guide-gallery-caption a{
  color:var(--g-accent);
  text-decoration:underline;
}

/* Overlay оставляем на случай старого контента, но делаем прозрачнее / не обязателен */
.guide-gallery-caption-overlay{
  display:none; /* отключено в новой разметке */
}

/* Мини версия: больший отступ между большим слайдером и превью */
.guide-gallery--mini .guide-gallery-thumbs{
  margin-top:22px;
}

/* Мини: делаем основное изображение шире (та же пропорция, но убираем лишние ограничения) */
.guide-gallery--mini .guide-gallery-main .swiper-slide{
  aspect-ratio:16/9;
}
.guide-gallery--mini{
  padding:18px 46px 20px;
}

/* Адаптив для мини после правки */
@media (max-width:680px){
  .guide-gallery--mini{
    padding:16px 18px 18px;
  }
  .guide-gallery--mini .guide-gallery-thumbs{ margin-top:16px; }
}

/* Стрелки – полное переопределение для центрирования */
.guide-gallery-button{
  display:flex !important;
  align-items:center;
  justify-content:center;
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:44px;
  height:44px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.2);
  background:rgba(18,24,34,.6);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  cursor:pointer;
  transition:.3s background,.3s border-color,.3s transform;
  padding:0;
}
.guide-gallery--mini .guide-gallery-button{
  width:40px;
  height:40px;
}
.guide-gallery-button.gg-prev{ left:14px; }
.guide-gallery-button.gg-next{ right:14px; }

.guide-gallery-button:before{
  content:"";
  width:14px;
  height:14px;
  border-top:2px solid #fff;
  border-right:2px solid #fff;
  transform:rotate(45deg);
  display:block;
}
.guide-gallery-button.gg-prev:before{
  transform:rotate(-135deg);
}

.guide-gallery-button:hover{
  background:rgba(40,50,66,.85);
  border-color:rgba(255,255,255,.35);
}

/* Пули – страховка округления (часть уже есть — дублирование для уверенности) */
.guide-gallery-pagination .swiper-pagination-bullet{
  width:10px !important;
  height:10px !important;
  border-radius:50% !important;
  aspect-ratio:1/1;
  box-sizing:border-box;
  background:rgba(255,255,255,.38);
}
.guide-gallery-pagination .swiper-pagination-bullet-active{
  background:var(--g-accent);
  box-shadow:0 0 0 4px rgba(255,156,43,.25);
}

/* === FIX: arrows above slides ======================================= */
.guide-gallery-main{
  position:relative; /* на случай если где-то переопределилось */
}
.guide-gallery-main .swiper-slide{
  position:relative;
  z-index:1;
}
.guide-gallery-button{
  z-index:60 !important;
  opacity:1 !important;
  pointer-events:auto;
}
.guide-gallery-button:before,
.guide-gallery-button:after{
  pointer-events:none;
}
.guide-gallery--mini .guide-gallery-button{
  z-index:60 !important;
}
/* ==================================================================== */

/* Read-time pill (guide header) */
.guide-meta-dates .rt-pill{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 8px; border-radius:999px;
  background: var(--nt-card-bg);
  border: 1px solid var(--nt-border);
  color: var(--nt-text-dim);
  font-size:.72rem; line-height:1; font-weight:600;
  text-transform:none; /* не кричим, в отличие от .meta-pill */
}
.guide-meta-dates .rt-pill img{ width:14px; height:14px; display:block; opacity:.9; }