/* ============================================================
   BOTOVOD / CODE - chrome
   Общая обвязка страниц блога: навбар, промо-баннер курса, футер.
   Один источник правды для ленты и статей - правится здесь,
   применяется везде.
   Требует base.css.
   ============================================================ */

/* ============ НАВБАР ============ */
.nav{position:sticky;top:0;z-index:50;background:rgba(8,6,12,.82);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav-inner{display:flex;align-items:center;gap:28px;height:64px}
.brand{display:flex;align-items:center;gap:12px;font-family:'Russo One',sans-serif;font-size:18px;letter-spacing:.5px;text-decoration:none;color:inherit}
.brand .kanji{font-family:'Noto Serif JP',serif;font-size:26px;color:var(--red-2);line-height:1;text-shadow:0 0 14px rgba(255,42,109,.55)}
.brand b{color:var(--ink)}
.brand span{color:var(--muted);font-size:14px}
/* шапка: бренд в стиле лендинга (единый текст 13px, компактный) */
.nav .brand .kanji{font-size:22px;color:var(--red);text-shadow:0 0 20px rgba(255,0,60,.9),0 0 40px rgba(255,42,109,.5)}
.brand-text{font-family:'Russo One',sans-serif;font-size:13px;font-weight:400;letter-spacing:.18em;color:var(--ink)}
.brand-home,.brand-blog{text-decoration:none;color:inherit;transition:color .2s}
.brand-home{display:inline-flex;align-items:center}
.brand-home:hover,.brand-blog:hover{color:var(--red-2)}

/* вкладки рубрик */
.rubr-tabs{display:flex;align-items:center;gap:6px;margin-left:auto;overflow-x:auto}
.tab{font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--muted);padding:6px 14px;border-radius:20px;border:1px solid transparent;transition:.2s;white-space:nowrap;text-decoration:none}
.tab:hover{color:var(--ink);border-color:var(--line)}
.tab.on{color:var(--red-2);border-color:var(--red-2);background:rgba(255,42,109,.08);box-shadow:0 0 14px rgba(255,42,109,.18)}
.tab.dot::before{content:"";display:inline-block;width:.7em;height:.7em;margin-right:5px;vertical-align:-.02em;background:var(--cyan);-webkit-mask:var(--diamond) center/contain no-repeat;mask:var(--diamond) center/contain no-repeat}

/* ============ ПРОМО-БАННЕР КУРСА ============
   Живёт и в ленте, и внутри статьи. В статье колонка узкая,
   поэтому ниже есть отдельная вертикальная раскладка. */
@keyframes promo-in{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:translateY(0)}}
@keyframes promo-border-run{0%{background-position:0% 50%}100%{background-position:300% 50%}}
/* Свечение пульсирует прозрачностью отдельного слоя, а не box-shadow.
   box-shadow нельзя отдать композитору: его анимация перерисовывает
   блок на каждом кадре. opacity считает GPU, вид тот же. */
@keyframes promo-glow-fade{0%,100%{opacity:.28}50%{opacity:1}}
@keyframes promo-scan{0%{transform:translateY(-100%)}100%{transform:translateY(220%)}}

.promo{display:block;text-decoration:none;color:inherit;cursor:pointer;position:relative;margin:38px 0 8px;border-radius:14px;padding:2px;background:linear-gradient(90deg,var(--red-dark),var(--red-light),var(--red-dark));background-size:300% 100%;animation:promo-in .7s cubic-bezier(.2,.7,.2,1) both,promo-border-run 7s linear infinite;isolation:isolate;contain:paint}
.promo::before{content:"";position:absolute;inset:0;border-radius:14px;pointer-events:none;z-index:-1;box-shadow:0 0 34px rgba(255,42,109,.28),0 14px 44px rgba(255,0,60,.18);animation:promo-glow-fade 3.6s ease-in-out infinite;will-change:opacity}
.promo-inner{position:relative;display:flex;align-items:stretch;background:var(--bg-2);border-radius:12px;overflow:hidden}
.promo::after{content:"";position:absolute;inset:0;border-radius:14px;pointer-events:none;z-index:3;background:linear-gradient(115deg,transparent 44%,rgba(5,217,232,.10) 50%,transparent 56%);transform:translateX(-30%)}
.promo-media{position:relative;flex:0 0 46%;max-width:46%;overflow:hidden;background:#0a0714}
/* без filter: на видео он пересчитывался бы для каждого кадра ролика */
.promo-media img,.promo-media video{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:16/9}
.promo-media img{filter:saturate(1.08) contrast(1.04)}
.promo-media::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 62%,rgba(15,10,24,.9))}
.promo-media .promo-scan{position:absolute;left:0;right:0;height:40%;z-index:2;pointer-events:none;background:linear-gradient(180deg,transparent,rgba(5,217,232,.14),transparent);animation:promo-scan 4.2s linear infinite}
.promo-body{flex:1;display:flex;flex-direction:column;justify-content:center;gap:14px;padding:34px 40px;min-width:0}
.promo-kicker{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:3px;text-transform:uppercase;color:var(--ink);display:flex;align-items:center;gap:9px}
.promo-kicker .jp{color:var(--red-2);font-size:15px}
.promo-body h2{font-family:'Russo One',sans-serif;font-weight:400;font-size:clamp(22px,2.7vw,32px);line-height:1.1;letter-spacing:.3px;margin:0}
.promo-body h2 .neon{color:var(--red-2);text-shadow:0 0 22px rgba(255,42,109,.55)}
.promo-body h2 .cy{color:var(--cyan)}
.promo-body p{color:var(--muted);font-size:15px;max-width:520px;margin:0}
.promo-actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:4px}
.promo-btn{display:inline-flex;align-items:center;gap:10px;padding:16px 28px;font-family:'Russo One',sans-serif;letter-spacing:.16em;font-size:13px;text-transform:uppercase;text-decoration:none;border:1px solid transparent;cursor:pointer;background:linear-gradient(180deg,var(--red-2),var(--red));color:#fff;box-shadow:0 0 0 0 var(--red-2);transition:all .2s}
.promo-btn::after{content:"";width:1.05em;height:1.05em;flex:0 0 auto;background:currentColor;-webkit-mask:var(--chevron-right-bold) center/contain no-repeat;mask:var(--chevron-right-bold) center/contain no-repeat}
.promo-btn:hover{box-shadow:0 0 32px rgba(255,42,109,.7),inset 0 0 30px rgba(255,255,255,.08);transform:translateY(-1px)}
.promo-note{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--muted)}
.promo-note b{color:var(--cyan);font-weight:700}
@media (prefers-reduced-motion:reduce){.promo,.promo::before,.promo-media .promo-scan{animation:none}}

/* складываем баннер в колонку заранее, ещё до тесноты */
@media (max-width:1024px){
  .promo-inner{flex-direction:column}
  .promo-media{flex:0 0 auto;max-width:100%;width:100%}
  .promo-media::after{background:linear-gradient(180deg,transparent 60%,rgba(15,10,24,.92))}
  .promo-body{padding:24px 22px 26px}
  .promo-actions{gap:12px}
}
/* внутри статьи колонка ~720px, поэтому баннер вертикальный всегда */
.article .promo .promo-inner{flex-direction:column}
.article .promo .promo-media{flex:0 0 auto;max-width:100%;width:100%}
.article .promo .promo-media::after{background:linear-gradient(180deg,transparent 60%,rgba(15,10,24,.92))}
.article .promo .promo-body{padding:24px 22px 26px}

/* ============ ФУТЕР ============ */
/* position+z-index обязательны: иначе футер уходит под фиксированный
   фоновый слой body::before, который есть и в ленте, и в статье */
footer{position:relative;z-index:2;margin-top:70px;border-top:1px solid var(--line);background:linear-gradient(180deg,transparent,rgba(15,10,24,.6));padding:52px 0 34px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.4fr;gap:36px}
.foot-brand .brand{margin-bottom:14px}
.foot-brand p{color:var(--muted);font-size:14px;max-width:280px;margin:0}
.foot-col h4{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--cyan);margin:0 0 16px}
.foot-col a{display:block;color:var(--muted);font-size:14px;margin-bottom:10px;transition:color .2s;text-decoration:none}
.foot-col a:hover{color:var(--ink)}
.tg{display:flex;align-items:center}
.tg a{display:inline-flex;align-items:center;justify-content:center;gap:10px;width:100%;font-family:'JetBrains Mono',monospace;font-size:13px;font-weight:700;padding:14px 16px;border-radius:9px;color:#fff;background:linear-gradient(135deg,#2aabee,#229ed9);box-shadow:0 0 20px rgba(34,158,217,.4);transition:transform .15s,box-shadow .2s;text-decoration:none}
.tg a:hover{transform:translateY(-1px);box-shadow:0 0 30px rgba(34,158,217,.6)}
.tg a svg{width:19px;height:19px;flex:0 0 auto}
.foot-bottom{margin-top:40px;padding-top:24px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--muted)}
.foot-bottom .jp{color:var(--red-2)}

/* ============ АДАПТИВ ОБВЯЗКИ ============ */
@media (max-width:900px){.foot-grid{grid-template-columns:1fr 1fr}}
@media (max-width:600px){
  .foot-grid{grid-template-columns:1fr}
  .nav-inner{flex-wrap:wrap;height:auto;padding:10px 0;gap:8px 12px}
  .brand{font-size:15px}
  .rubr-tabs{margin-left:0;width:100%;gap:6px;overflow-x:auto;scrollbar-width:none}
  .rubr-tabs::-webkit-scrollbar{display:none}
  .tab{padding:6px 12px;font-size:12px}
}