/* =============================================
   ELDORIA — NEWS  (list + single)
   Dark · Gold accent · Syne + DM Sans
   ============================================= */

:root {
    --clr-bg:       #08090d;
    --clr-s1:       #0e1117;
    --clr-s2:       #13161f;
    --clr-s3:       #1a1f2b;
    --clr-border:   rgba(255,255,255,.07);
    --clr-border2:  rgba(255,255,255,.12);
    --clr-text:     #e2e8f0;
    --clr-muted:    #5a6478;
    --clr-muted2:   #8492a6;
    --clr-gold:     #e9b84a;
    --clr-gold-dim: rgba(233,184,74,.1);
    --clr-gold-b:   rgba(233,184,74,.28);
    --clr-pink:     #f43f6b;
    --clr-green:    #34d399;
    --clr-blue:     #60a5fa;
    --font-d: 'Syne', sans-serif;
    --font-b: 'DM Sans', sans-serif;
    --r-md:14px; --r-lg:20px; --r-xl:28px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ══════════════════════════════════════════════
   SHARED HELPERS
══════════════════════════════════════════════ */
.nl-container,
.ns-container { max-width: 1100px; margin: 0 auto; padding: 0 24px; }

/* ══════════════════════════════════════════════
   NEWS LIST — HERO
══════════════════════════════════════════════ */
.news-listing { background: var(--clr-bg); }

.nl-hero {
    position: relative;
    padding: 80px 0 56px;
    background: var(--clr-s1);
    border-bottom: 1px solid var(--clr-border);
    overflow: hidden; isolation: isolate;
}
.nl-hero__grid {
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.02) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black, transparent);
}
.nl-hero__glow {
    position: absolute; border-radius: 50%; filter: blur(80px); pointer-events: none;
}
.nl-hero__glow--a { width:420px;height:420px;background:rgba(233,184,74,.09); top:-20%;left:-6%; }
.nl-hero__glow--b { width:300px;height:300px;background:rgba(244,63,107,.07); top:5%; right:-4%; }

.nl-hero__inner {
    position: relative; z-index: 2;
    display: flex; align-items: flex-end; justify-content: space-between;
    flex-wrap: wrap; gap: 24px;
}
.nl-hero__label {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--font-d); font-size: .68rem; font-weight: 700;
    letter-spacing: .2em; text-transform: uppercase;
    color: var(--clr-gold); background: var(--clr-gold-dim);
    border: 1px solid var(--clr-gold-b);
    padding: 5px 14px; border-radius: 100px; margin-bottom: 14px;
}
.nl-hero__title {
    font-family: var(--font-d); font-size: clamp(2rem, 4.5vw, 3.2rem);
    font-weight: 800; color: #fff; line-height: 1.1; margin-bottom: 12px;
}
.nl-hero__title em {
    font-style: normal;
    background: linear-gradient(90deg, var(--clr-gold), var(--clr-pink));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.nl-hero__sub { font-size: .9rem; color: var(--clr-muted); }
.nl-hero__right { display: flex; align-items: center; gap: 20px; flex-shrink: 0; }
.nl-hero__stat { text-align: center; }
.nl-hero__stat-val {
    display: block; font-family: var(--font-d); font-size: 2rem;
    font-weight: 800; color: var(--clr-gold); line-height: 1;
}
.nl-hero__stat-lbl { font-size: .72rem; color: var(--clr-muted); }
.nl-hero__divider { width: 1px; height: 40px; background: var(--clr-border); }

/* ── Filter nav ───────────────────────────────── */
.nl-filter { background: var(--clr-s1); border-bottom: 1px solid var(--clr-border); padding: 14px 0; }
.nl-filter__track { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.nl-filter__btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 16px; border-radius: 100px;
    font-family: var(--font-d); font-size: .72rem; font-weight: 700;
    text-decoration: none; color: var(--clr-muted);
    background: transparent; border: 1px solid transparent;
    transition: all .18s;
}
.nl-filter__btn:hover { color: var(--clr-text); background: rgba(255,255,255,.05); }
.nl-filter__btn--active {
    color: var(--clr-gold); background: var(--clr-gold-dim);
    border-color: var(--clr-gold-b);
}
.nl-filter__sep { width: 1px; height: 20px; background: var(--clr-border); margin: 0 4px; }

/* ── Body layout ──────────────────────────────── */
.nl-body { padding: 48px 0 80px; background: var(--clr-bg); }
.nl-layout { display: grid; grid-template-columns: 1fr 280px; gap: 32px; align-items: start; }

/* ── Cards grid ───────────────────────────────── */
.nl-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-bottom: 40px; }

.nl-card {
    background: var(--clr-s1); border: 1px solid var(--clr-border);
    border-radius: var(--r-xl); overflow: hidden;
    transition: border-color .25s, transform .25s, box-shadow .25s;
    display: flex; flex-direction: column; position: relative;
}
.nl-card:hover {
    border-color: var(--clr-gold-b);
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(0,0,0,.35);
}

/* Hero card (first) */
.nl-card--hero { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; }
.nl-card--hero .nl-card__body { padding: 28px; justify-content: center; }
.nl-card--hero .nl-card__title a { font-size: 1.5rem; }
.nl-card--hero .nl-card__img-wrap { border-radius: 0; }

.nl-card__img-wrap {
    display: block; position: relative; overflow: hidden;
    aspect-ratio: 16/9;
}
.nl-card__img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform .4s;
}
.nl-card:hover .nl-card__img { transform: scale(1.05); }
.nl-card__img-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(8,9,13,.7) 0%, transparent 60%);
}
.nl-card__img-placeholder {
    width: 100%; height: 100%;
    background: var(--clr-s2);
    display: flex; align-items: center; justify-content: center;
    color: var(--clr-muted); font-size: 2rem;
}

.nl-card__cat {
    position: absolute; top: 14px; left: 14px;
    padding: 4px 12px; border-radius: 100px;
    background: var(--clr-gold-dim); border: 1px solid var(--clr-gold-b);
    font-family: var(--font-d); font-size: .62rem; font-weight: 700;
    color: var(--clr-gold); text-decoration: none;
    transition: background .18s;
}
.nl-card__cat:hover { background: rgba(233,184,74,.2); }

.nl-card__body {
    padding: 18px; display: flex; flex-direction: column; gap: 10px; flex: 1;
}
.nl-card__meta {
    display: flex; gap: 12px; font-size: .72rem; color: var(--clr-muted);
}
.nl-card__meta span { display: flex; align-items: center; gap: 4px; }
.nl-card__meta i { font-size: .62rem; color: var(--clr-gold); }

.nl-card__title { font-family: var(--font-d); font-size: 1rem; font-weight: 800; line-height: 1.35; }
.nl-card__title a { color: #fff; text-decoration: none; transition: color .18s; }
.nl-card:hover .nl-card__title a { color: var(--clr-gold); }

.nl-card__excerpt { font-size: .82rem; color: var(--clr-muted2); line-height: 1.6; flex: 1; }

.nl-card__footer {
    display: flex; align-items: center; justify-content: space-between;
    padding-top: 10px; border-top: 1px solid var(--clr-border);
    font-size: .74rem;
}
.nl-card__author { display: flex; align-items: center; gap: 5px; color: var(--clr-muted); }
.nl-card__author i { font-size: .7rem; }
.nl-card__read {
    display: inline-flex; align-items: center; gap: 5px;
    color: var(--clr-gold); font-family: var(--font-d); font-weight: 700;
    text-decoration: none; font-size: .72rem;
    transition: gap .18s;
}
.nl-card__read:hover { gap: 8px; }

/* ── Empty ────────────────────────────────────── */
.nl-empty {
    text-align: center; padding: 80px 20px;
    background: var(--clr-s1); border: 1px solid var(--clr-border);
    border-radius: var(--r-xl);
}
.nl-empty__icon { font-size: 3rem; color: var(--clr-muted); margin-bottom: 16px; }
.nl-empty h2 { font-family: var(--font-d); font-size: 1.3rem; color: #fff; margin-bottom: 10px; }
.nl-empty p  { font-size: .84rem; color: var(--clr-muted); margin-bottom: 24px; }

.nl-btn {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 10px 20px; border-radius: 100px;
    font-family: var(--font-d); font-size: .76rem; font-weight: 700;
    text-decoration: none; transition: transform .2s, box-shadow .2s;
}
.nl-btn--primary {
    background: linear-gradient(135deg, var(--clr-gold), #d4920f);
    color: #0e0900; box-shadow: 0 6px 18px rgba(233,184,74,.3);
}
.nl-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(233,184,74,.45); }

/* ── Pager ────────────────────────────────────── */
.nl-pager { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 32px; }
.nl-pager__btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 36px; height: 36px; padding: 0 10px;
    border-radius: 10px;
    background: var(--clr-s1); border: 1px solid var(--clr-border);
    font-family: var(--font-d); font-size: .76rem; font-weight: 700;
    color: var(--clr-muted2); text-decoration: none;
    transition: all .18s;
}
.nl-pager__btn:hover { border-color: var(--clr-gold-b); color: var(--clr-gold); }
.nl-pager__btn--active {
    background: var(--clr-gold-dim); border-color: var(--clr-gold-b); color: var(--clr-gold);
}
.nl-pager__dots { color: var(--clr-muted); padding: 0 4px; }

/* ── Sidebar widgets ──────────────────────────── */
.nl-sidebar { display: flex; flex-direction: column; gap: 20px; position: sticky; top: 80px; }

.nl-widget {
    background: var(--clr-s1); border: 1px solid var(--clr-border);
    border-radius: var(--r-xl); overflow: hidden;
}
.nl-widget__head {
    padding: 14px 18px; border-bottom: 1px solid var(--clr-border);
    font-family: var(--font-d); font-size: .72rem; font-weight: 800;
    letter-spacing: .1em; text-transform: uppercase; color: var(--clr-muted2);
    display: flex; align-items: center; gap: 7px;
}
.nl-widget__head i { color: var(--clr-gold); font-size: .68rem; }

/* Popular list */
.nl-popular-list { list-style: none; display: flex; flex-direction: column; }
.nl-popular-item {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 16px; border-bottom: 1px solid var(--clr-border);
    transition: background .18s;
}
.nl-popular-item:last-child { border-bottom: none; }
.nl-popular-item:hover { background: rgba(255,255,255,.03); }
.nl-popular-item__num {
    font-family: var(--font-d); font-size: .8rem; font-weight: 800;
    color: var(--clr-gold); width: 20px; text-align: center; flex-shrink: 0;
}
.nl-popular-item__img {
    width: 44px; height: 44px; border-radius: 8px; object-fit: cover;
    flex-shrink: 0; background: var(--clr-s2);
}
.nl-popular-item__body { flex: 1; min-width: 0; }
.nl-popular-item__title {
    font-family: var(--font-d); font-size: .76rem; font-weight: 700;
    color: #fff; text-decoration: none; display: block;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    margin-bottom: 3px; transition: color .18s;
}
.nl-popular-item__title:hover { color: var(--clr-gold); }
.nl-popular-item__views { font-size: .68rem; color: var(--clr-muted); display: flex; align-items: center; gap: 4px; }
.nl-popular-item__views i { font-size: .6rem; }

/* Tag cloud */
.nl-tag-cloud { display: flex; flex-wrap: wrap; gap: 7px; padding: 14px 16px; }
.nl-tag {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 13px; border-radius: 100px;
    font-family: var(--font-d); font-size: .68rem; font-weight: 700;
    text-decoration: none; color: var(--clr-muted);
    background: var(--clr-s2); border: 1px solid var(--clr-border);
    transition: all .18s;
}
.nl-tag:hover { color: var(--clr-gold); border-color: var(--clr-gold-b); background: var(--clr-gold-dim); }
.nl-tag--active { color: var(--clr-gold); border-color: var(--clr-gold-b); background: var(--clr-gold-dim); }

/* Promo widget */
.nl-widget--promo .ns-promo { padding: 20px 18px; text-align: center; }

/* ══════════════════════════════════════════════
   NEWS SINGLE
══════════════════════════════════════════════ */

/* ── Cinematic Hero ──────────────────────────── */
.ns-hero {
    position: relative;
    min-height: 560px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden;
    isolation: isolate;
    background: var(--clr-s1);
}

/* Без фото — обычный hero как в списке */
.ns-hero:not(.ns-hero--has-img) {
    min-height: auto;
    padding: 72px 0 48px;
    border-bottom: 1px solid var(--clr-border);
}
.ns-hero:not(.ns-hero--has-img) .ns-hero__bg { position: absolute; inset: 0; z-index: 0; }
.ns-hero:not(.ns-hero--has-img) .ns-hero__grid {
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.02) 1px, transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.02) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black, transparent);
}
.ns-hero__orb { position: absolute; border-radius: 50%; filter: blur(80px); }
.ns-hero__orb--a { width:420px;height:420px;background:rgba(233,184,74,.09);top:-20%;left:-6%; }
.ns-hero__orb--b { width:300px;height:300px;background:rgba(244,63,107,.07);top:5%;right:-4%; }

/* Фоновое изображение — на всю секцию */
.ns-hero__bg-img {
    position: absolute; inset: 0; z-index: 0;
}
.ns-hero__bg-img img {
    width: 100%; height: 100%;
    object-fit: cover; object-position: center;
    display: block;
    transform: scale(1.04);
    animation: nsHeroZoom 12s ease-in-out infinite alternate;
}
@keyframes nsHeroZoom {
    from { transform: scale(1.04); }
    to   { transform: scale(1.0);  }
}

/* Многослойный оверлей — красиво затемняет снизу и по бокам */
.ns-hero__bg-overlay {
    position: absolute; inset: 0;
    background:
        /* Сверху — небольшое затемнение под хедер */
        linear-gradient(to bottom, rgba(8,9,13,.55) 0%, transparent 30%),
        /* Снизу — сильное затемнение, чтобы текст читался */
        linear-gradient(to top,    rgba(8,9,13,.97) 0%, rgba(8,9,13,.6) 35%, transparent 65%),
        /* Левый край — слабый gold glow */
        radial-gradient(ellipse 60% 80% at 0% 100%, rgba(233,184,74,.08) 0%, transparent 60%);
}
/* Сетка поверх фото — тонкая текстура */
.ns-hero__bg-grid {
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.025) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: linear-gradient(to top, black 0%, transparent 60%);
    opacity: .5;
}

/* Контент */
.ns-hero__inner {
    position: relative; z-index: 2;
    display: flex; flex-direction: column;
    justify-content: flex-end;
    min-height: 560px;
    padding-top: 90px;
    padding-bottom: 48px;
    gap: 20px;
}
.ns-hero:not(.ns-hero--has-img) .ns-hero__inner {
    min-height: auto;
    padding-top: 0; padding-bottom: 0;
}

.ns-hero__top {
    display: flex; align-items: center; gap: 14px;
    flex-wrap: wrap;
}
.ns-hero__back {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 7px 16px; border-radius: 100px;
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.15);
    backdrop-filter: blur(10px);
    font-family: var(--font-d); font-size: .72rem; font-weight: 700;
    color: rgba(255,255,255,.8); text-decoration: none;
    transition: all .2s;
}
.ns-hero__back:hover {
    background: rgba(255,255,255,.18);
    color: #fff;
}

.ns-cat-tag {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 6px 16px; border-radius: 100px;
    background: var(--clr-gold-dim);
    border: 1px solid var(--clr-gold-b);
    backdrop-filter: blur(10px);
    font-family: var(--font-d); font-size: .68rem; font-weight: 700;
    color: var(--clr-gold); text-decoration: none;
    letter-spacing: .1em; text-transform: uppercase;
    transition: background .18s;
}
.ns-cat-tag:hover { background: rgba(233,184,74,.22); }

.ns-hero__content { max-width: 820px; }

.ns-hero__title {
    font-family: var(--font-d);
    font-size: clamp(1.9rem, 4.5vw, 3.2rem);
    font-weight: 800; line-height: 1.12;
    margin-bottom: 22px;
    /* С фото — белый + лёгкий тень для читаемости */
    color: #fff;
    text-shadow: 0 2px 20px rgba(0,0,0,.5);
}
/* Без фото — gold gradient */
.ns-hero:not(.ns-hero--has-img) .ns-hero__title {
    background: linear-gradient(135deg, #fff 60%, rgba(233,184,74,.8));
    -webkit-background-clip: text; background-clip: text; color: transparent;
    text-shadow: none;
}

.ns-hero__meta { display: flex; gap: 10px; flex-wrap: wrap; }
.ns-meta-pill {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 7px 16px; border-radius: 100px;
    background: rgba(8,9,13,.55);
    border: 1px solid rgba(255,255,255,.15);
    backdrop-filter: blur(12px);
    font-size: .78rem; color: rgba(255,255,255,.85);
    transition: background .2s, transform .2s;
}
.ns-meta-pill:hover {
    background: rgba(233,184,74,.15);
    border-color: var(--clr-gold-b);
    transform: translateY(-2px);
}
.ns-meta-pill i { color: var(--clr-gold); font-size: .68rem; }

/* ── Body / layout ────────────────────────────── */
.ns-body { background: var(--clr-bg); padding: 40px 0 80px; }
.ns-layout { display: grid; grid-template-columns: 1fr 300px; gap: 32px; align-items: start; }

/* ── Article ──────────────────────────────────── */
.ns-article {
    background: var(--clr-s1); border: 1px solid var(--clr-border);
    border-radius: var(--r-xl); overflow: hidden;
    position: relative;
    box-shadow: 0 24px 64px rgba(0,0,0,.35);
}
.ns-article::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, var(--clr-gold), var(--clr-pink));
}

.ns-article__content {
    padding: 36px;
    color: var(--clr-muted2);
    font-size: 1rem; line-height: 1.82;
}

/* Lead paragraph */
.ns-article__content > p:first-of-type {
    font-size: 1.1rem; color: var(--clr-text); line-height: 1.75;
    padding: 18px 22px; margin-bottom: 28px;
    background: rgba(233,184,74,.05);
    border-left: 3px solid var(--clr-gold);
    border-radius: 0 var(--r-md) var(--r-md) 0;
}
.ns-article__content p { margin-bottom: 18px; }

.ns-article__content h2 {
    font-family: var(--font-d); font-size: 1.5rem; font-weight: 800;
    color: #fff; margin: 36px 0 16px;
    padding-left: 16px; border-left: 3px solid var(--clr-gold);
}
.ns-article__content h3 {
    font-family: var(--font-d); font-size: 1.15rem; font-weight: 800;
    color: #fff; margin: 28px 0 12px;
}
.ns-article__content h4 {
    font-family: var(--font-d); font-size: .96rem; font-weight: 700;
    color: var(--clr-text); margin: 20px 0 8px;
}
.ns-article__content a { color: var(--clr-gold); text-underline-offset: 3px; }
.ns-article__content a:hover { opacity: .8; }

.ns-article__content img {
    max-width: 100%; border-radius: var(--r-lg);
    margin: 24px 0; border: 1px solid var(--clr-border);
    display: block; opacity: 0; transform: scale(.97);
    transition: opacity .5s, transform .5s;
}
.ns-article__content img.ns-img-visible { opacity: 1; transform: scale(1); }

.ns-article__content blockquote {
    margin: 24px 0; padding: 20px 24px;
    background: rgba(233,184,74,.05);
    border: 1px solid var(--clr-gold-b);
    border-radius: var(--r-lg);
    font-style: italic; color: var(--clr-text); font-size: 1.05rem;
    position: relative;
}
.ns-article__content blockquote::before {
    content: '"'; position: absolute; top: -12px; left: 18px;
    font-size: 5rem; color: rgba(233,184,74,.15);
    font-family: var(--font-d); line-height: 1;
}

.ns-article__content ul,
.ns-article__content ol { margin: 16px 0; padding-left: 0; }
.ns-article__content li {
    list-style: none; padding: 6px 0 6px 24px;
    position: relative; color: var(--clr-muted2);
}
.ns-article__content ul li::before {
    content: '→'; position: absolute; left: 0;
    color: var(--clr-gold); font-weight: 700;
}
.ns-article__content ol { counter-reset: art-counter; }
.ns-article__content ol li { counter-increment: art-counter; }
.ns-article__content ol li::before {
    content: counter(art-counter) '.'; position: absolute; left: 0;
    color: var(--clr-gold); font-weight: 700;
}

.ns-article__content table {
    width: 100%; border-collapse: collapse; margin: 20px 0; font-size: .88rem;
}
.ns-article__content th {
    background: var(--clr-s2); color: var(--clr-gold);
    font-family: var(--font-d); font-size: .72rem; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase;
    padding: 10px 14px; border-bottom: 1px solid var(--clr-gold-b); text-align: left;
}
.ns-article__content td {
    padding: 10px 14px; border-bottom: 1px solid var(--clr-border); color: var(--clr-muted2);
}
.ns-article__content tr:last-child td { border-bottom: none; }

.ns-article__content code {
    background: var(--clr-s2); border: 1px solid var(--clr-border);
    border-radius: 6px; padding: 2px 8px; font-size: .85em; color: var(--clr-gold);
}
.ns-article__content pre {
    background: var(--clr-s2); border: 1px solid var(--clr-border);
    border-radius: var(--r-md); padding: 18px; overflow-x: auto; margin: 20px 0;
}
.ns-article__content pre code { background: none; border: none; padding: 0; color: var(--clr-text); }

/* Article footer */
.ns-article__footer {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 14px;
    padding: 20px 36px; border-top: 1px solid var(--clr-border);
}
.ns-back-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 20px; border-radius: 100px;
    background: rgba(255,255,255,.05); border: 1px solid var(--clr-border2);
    font-family: var(--font-d); font-size: .74rem; font-weight: 700;
    color: var(--clr-muted2); text-decoration: none; transition: all .18s;
}
.ns-back-btn:hover { color: var(--clr-gold); border-color: var(--clr-gold-b); }

.ns-share { display: flex; align-items: center; gap: 10px; }
.ns-share__label {
    font-family: var(--font-d); font-size: .68rem; font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase; color: var(--clr-muted);
}
.ns-share__btn {
    width: 38px; height: 38px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    text-decoration: none; color: var(--clr-muted2);
    background: rgba(255,255,255,.05); border: 1px solid var(--clr-border);
    font-size: .9rem; transition: all .22s;
}
.ns-share__btn:hover { transform: translateY(-3px); }
.ns-share__btn--vk:hover  { background: #4c75a3; border-color: #4c75a3; color: #fff; }
.ns-share__btn--tg:hover  { background: #26a5e4; border-color: #26a5e4; color: #fff; }

/* ── Sidebar ──────────────────────────────────── */
.ns-sidebar { display: flex; flex-direction: column; gap: 20px; position: sticky; top: 80px; }
.ns-widget {
    background: var(--clr-s1); border: 1px solid var(--clr-border);
    border-radius: var(--r-xl); overflow: hidden;
}
.ns-widget__head {
    padding: 14px 18px; border-bottom: 1px solid var(--clr-border);
    font-family: var(--font-d); font-size: .72rem; font-weight: 800;
    letter-spacing: .1em; text-transform: uppercase; color: var(--clr-muted2);
    display: flex; align-items: center; gap: 7px;
}
.ns-widget__head i { color: var(--clr-gold); font-size: .68rem; }

.ns-related-list { display: flex; flex-direction: column; }
.ns-related-item {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 16px; border-bottom: 1px solid var(--clr-border);
    text-decoration: none; transition: background .18s;
}
.ns-related-item:last-child { border-bottom: none; }
.ns-related-item:hover { background: rgba(255,255,255,.03); }
.ns-related-item__img {
    width: 52px; height: 52px; border-radius: 10px; object-fit: cover;
    flex-shrink: 0; background: var(--clr-s2);
    display: flex; align-items: center; justify-content: center;
    color: var(--clr-muted); overflow: hidden;
}
.ns-related-item__img img { width: 100%; height: 100%; object-fit: cover; }
.ns-related-item__body { flex: 1; min-width: 0; }
.ns-related-item__title {
    font-family: var(--font-d); font-size: .78rem; font-weight: 700;
    color: #fff; display: -webkit-box;
    -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; margin-bottom: 4px; line-height: 1.35;
    transition: color .18s;
}
.ns-related-item:hover .ns-related-item__title { color: var(--clr-gold); }
.ns-related-item__date {
    font-size: .68rem; color: var(--clr-muted);
    display: flex; align-items: center; gap: 4px;
}
.ns-related-item__date i { font-size: .6rem; }

.ns-widget--promo { border-top: 2px solid var(--clr-gold); }
.ns-promo { padding: 22px 18px; text-align: center; }
.ns-promo__icon { font-size: 2rem; margin-bottom: 10px; }
.ns-promo__title {
    font-family: var(--font-d); font-size: .84rem; font-weight: 800;
    color: #fff; margin-bottom: 7px;
}
.ns-promo__text { font-size: .75rem; color: var(--clr-muted); line-height: 1.5; margin-bottom: 14px; }
.ns-promo__btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 18px; border-radius: 100px;
    background: linear-gradient(135deg, var(--clr-gold), #d4920f);
    color: #0e0900; font-family: var(--font-d); font-size: .72rem; font-weight: 700;
    text-decoration: none; transition: opacity .18s;
}
.ns-promo__btn:hover { opacity: .85; }

/* old cover block — hide if present */
.ns-cover-wrap { display: none; }
.ns-hero__cover { display: none; }

/* ── Responsive ───────────────────────────────── */
@media (max-width: 900px) {
    .nl-layout, .ns-layout { grid-template-columns: 1fr; }
    .nl-sidebar, .ns-sidebar { position: static; }
    .nl-card--hero { grid-template-columns: 1fr; }
    .nl-card--hero .nl-card__img-wrap { aspect-ratio: 16/9; border-radius: 0; }
}
@media (max-width: 680px) {
    .nl-grid { grid-template-columns: 1fr; }
    .nl-hero__inner { flex-direction: column; align-items: flex-start; }
    .ns-hero { padding: 60px 0 40px; }
    .ns-hero__title { font-size: 1.7rem; }
    .ns-article__content { padding: 22px 18px; }
    .ns-article__footer { padding: 16px 18px; flex-direction: column; align-items: stretch; }
    .ns-back-btn { justify-content: center; }
    .ns-share { justify-content: center; }
    .ns-hero__meta { flex-direction: column; gap: 8px; }
}

/* ── Single page extra polish ─────────────────── */

/* Hero — убираем старый ns-hero__cover если он есть */
.ns-hero__cover { display: none; }

/* Более богатый hero градиент */
.ns-hero {
    background: linear-gradient(
        180deg,
        var(--clr-s1) 0%,
        rgba(14,17,23,.97) 100%
    ) !important;
    padding: 72px 0 48px !important;
}

/* Заголовок с тонким градиентом */
.ns-hero__title {
    background: linear-gradient(135deg, #fff 60%, rgba(233,184,74,.7));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
}

/* ns-body — небольшой отступ сверху */
.ns-body { padding-top: 32px !important; }

/* Карточка статьи — тень богаче */
.ns-article {
    box-shadow: 0 24px 64px rgba(0,0,0,.4) !important;
}

/* Первый абзац — lead */
.ns-article__content > p:first-of-type {
    font-size: 1.08rem !important;
    line-height: 1.75 !important;
}

/* Мета-пилюли в hero — более выразительные */
.ns-meta-pill {
    background: rgba(255,255,255,.07) !important;
    backdrop-filter: blur(12px) !important;
    transition: background .2s, transform .2s !important;
}
.ns-meta-pill:hover {
    background: rgba(233,184,74,.1) !important;
    transform: translateY(-2px) !important;
}

/* Кнопка «Все новости» в article footer */
.ns-back-btn:hover {
    border-color: var(--clr-gold-b) !important;
    color: var(--clr-gold) !important;
}

/* Cover responsive */
@media (max-width: 680px) {
    .ns-cover { border-radius: 0; max-height: 260px; }
    .ns-cover__img { max-height: 260px; }
}
@media (max-width: 900px) {
    .ns-cover { max-height: 360px; }
    .ns-cover__img { max-height: 360px; }
}

/* ── Responsive — single ──────────────────────── */
@media (max-width: 900px) {
    .nl-layout, .ns-layout { grid-template-columns: 1fr; }
    .nl-sidebar, .ns-sidebar { position: static; }
    .nl-card--hero { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
    .nl-grid { grid-template-columns: 1fr; }
    .nl-hero__inner { flex-direction: column; align-items: flex-start; }

    .ns-hero { min-height: 380px; }
    .ns-hero__inner { min-height: 380px; padding-bottom: 32px; }
    .ns-hero__title { font-size: 1.7rem; }
    .ns-hero__meta { flex-direction: column; gap: 8px; }
    .ns-meta-pill { width: fit-content; }

    .ns-article__content { padding: 20px 16px; }
    .ns-article__footer { padding: 14px 16px; flex-direction: column; align-items: stretch; }
    .ns-back-btn { justify-content: center; }
    .ns-share { justify-content: center; }
}