/* ===== N TRAVEL — раздел «Полезные статьи» ===== */
.art-progress{position:fixed;top:0;left:0;height:3px;width:0;background:var(--color-cta);z-index:200;transition:width .1s linear}

/* Страница-список */
.articles-head{padding:56px 0 8px}
.articles-head__title{font-size:44px;line-height:1.15;font-weight:800;color:var(--color-primary-dark);letter-spacing:-.02em}
.articles-head__sub{margin-top:12px;font-size:18px;color:var(--color-text-secondary);max-width:640px}
.articles-list{padding:32px 0 72px}
.articles-list .articles-grid{margin-bottom:40px}
.pager{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.pager a,.pager span{min-width:42px;height:42px;padding:0 12px;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);border:1px solid var(--color-border);background:#fff;font-weight:600;color:var(--color-primary-dark);transition:all .2s}
.pager a:hover{border-color:var(--color-primary);color:var(--color-primary)}
.pager .is-current{background:var(--color-primary);border-color:var(--color-primary);color:#fff}

/* Шапка статьи */
.article{padding-bottom:24px}
.article-head{padding:40px 0 28px;max-width:860px}
.crumbs{display:flex;flex-wrap:wrap;gap:8px;font-size:13px;color:var(--color-text-secondary);margin-bottom:22px}
.crumbs a{color:var(--color-primary);font-weight:600}
.crumbs a:hover{text-decoration:underline}
.crumbs span[aria-hidden]{opacity:.5}
.article-meta{display:flex;flex-wrap:wrap;gap:12px;align-items:center;font-size:13px;color:var(--color-text-secondary);margin-bottom:18px}
.article-meta__tag{padding:5px 11px;background:rgba(96,110,178,.1);color:var(--color-primary);border-radius:6px;font-weight:700;font-size:12px}
.article-meta__dot{width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.5}
.article-title{font-size:46px;line-height:1.15;font-weight:800;color:var(--color-primary-dark);letter-spacing:-.02em;margin-bottom:18px}
.article-lead{font-size:20px;line-height:1.55;color:var(--color-text-secondary)}
.article-author{display:flex;align-items:center;gap:12px;margin-top:24px;font-size:14px;color:var(--color-text-secondary)}
.article-author__ava{width:40px;height:40px;border-radius:50%;background:var(--color-primary);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700}
.article-author b{display:block;color:var(--color-primary-dark)}

/* Обложка */
.article-cover{margin:0 0 48px}
.article-cover__img{width:100%;aspect-ratio:21/9;object-fit:cover;border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);background:var(--color-bg-soft)}
.article-cover figcaption{margin-top:10px;font-size:12px;color:var(--color-text-muted);text-align:right}

/* Раскладка: текст + боковая колонка */
.article-layout{display:grid;grid-template-columns:minmax(0,760px) 300px;gap:64px;justify-content:center;align-items:start}
.article-aside{position:sticky;top:96px;display:flex;flex-direction:column;gap:20px}
.toc{background:#fff;border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:22px}
.toc__title{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--color-text-secondary);margin-bottom:12px}
.toc__list{display:flex;flex-direction:column;gap:2px}
.toc__list a{display:block;padding:7px 12px;margin-left:-12px;border-left:2px solid transparent;font-size:14px;line-height:1.4;color:var(--color-text-secondary);transition:all .2s}
.toc__list a:hover{color:var(--color-primary)}
.toc__list a.is-active{color:var(--color-primary);border-left-color:var(--color-primary);font-weight:700}
.aside-cta{background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-primary-dark) 100%);border-radius:var(--radius-lg);padding:26px;color:#fff}
.aside-cta__title{font-size:19px;font-weight:800;line-height:1.3;margin-bottom:8px}
.aside-cta__text{font-size:14px;opacity:.85;margin-bottom:18px}
.aside-cta .btn{width:100%;justify-content:center}
.aside-cta__phone{display:block;margin-top:12px;text-align:center;font-weight:700;font-size:15px;color:#fff;opacity:.9}

/* Типографика статьи: всё, что делает копирайтер в редакторе */
.prose{font-size:18px;line-height:1.75;color:#2b353d}
.prose>*+*{margin-top:1.15em}
.prose h2{font-size:30px;line-height:1.25;font-weight:800;color:var(--color-primary-dark);letter-spacing:-.01em;margin-top:2em;scroll-margin-top:96px}
.prose h3{font-size:22px;line-height:1.3;font-weight:700;color:var(--color-primary-dark);margin-top:1.6em;scroll-margin-top:96px}
.prose h2+*,.prose h3+*{margin-top:.7em}
.prose a{color:var(--color-primary);font-weight:600;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(96,110,178,.35)}
.prose a:hover{text-decoration-color:currentColor}
.prose strong{font-weight:700;color:var(--color-primary-dark)}
.prose ul{list-style:none;padding:0}
.prose ul>li{position:relative;padding-left:28px}
.prose ul>li+li{margin-top:.55em}
.prose ul>li::before{content:"";position:absolute;left:4px;top:.68em;width:8px;height:8px;border-radius:50%;background:var(--color-cta)}
.prose ol{list-style:none;padding:0;counter-reset:step}
.prose ol>li{position:relative;padding-left:52px;counter-increment:step;min-height:36px}
.prose ol>li+li{margin-top:.9em}
.prose ol>li::before{content:counter(step);position:absolute;left:0;top:-.05em;width:36px;height:36px;border-radius:50%;background:var(--color-primary);color:#fff;font-weight:800;font-size:16px;display:flex;align-items:center;justify-content:center}
.prose blockquote{position:relative;background:linear-gradient(135deg,rgba(96,110,178,.08),rgba(125,155,193,.1));border-left:4px solid var(--color-primary);border-radius:0 var(--radius-md) var(--radius-md) 0;padding:20px 24px 20px 28px;font-size:17px;line-height:1.65}
.prose blockquote p+p{margin-top:.7em}
.prose img{width:100%;border-radius:var(--radius-lg)}
.prose figure{margin-left:0;margin-right:0}
.prose figure+*{margin-top:1.6em}
.prose figure{margin-top:1.8em}
.prose figure img{box-shadow:var(--shadow-md)}
.prose figcaption{margin-top:10px;font-size:13px;line-height:1.5;color:var(--color-text-secondary);text-align:center}
.prose table{width:100%;border-collapse:separate;border-spacing:0;font-size:15px;line-height:1.5;border:1px solid var(--color-border);border-radius:var(--radius-md);overflow:hidden;background:#fff}
.prose th{background:var(--color-bg-soft);color:var(--color-primary-dark);text-align:left;font-weight:700;padding:13px 16px}
.prose td{padding:13px 16px;border-top:1px solid var(--color-border);vertical-align:top}
.prose tbody tr:nth-child(even) td{background:#fafbfd}
.prose hr{border:0;height:1px;background:var(--color-border);margin:2.2em 0}
.prose iframe,.prose video{width:100%;aspect-ratio:16/9;border:0;border-radius:var(--radius-lg)}

/* Низ статьи */
.article-foot{margin-top:48px;padding-top:24px;border-top:1px solid var(--color-border);display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.article-tags{display:flex;gap:8px;flex-wrap:wrap}
.article-tags a{padding:6px 12px;border-radius:999px;background:var(--color-bg-soft);font-size:13px;font-weight:600;color:var(--color-text-secondary)}
.article-tags a:hover{background:rgba(96,110,178,.12);color:var(--color-primary)}
.article-back{font-weight:700;color:var(--color-primary)}
.article-back:hover{text-decoration:underline}
.related{padding:64px 0 72px;margin-top:56px;background:#fff;border-top:1px solid var(--color-border)}

@media (max-width:1100px){
	.article-layout{grid-template-columns:minmax(0,1fr);gap:32px}
	.article-aside{position:static}
	.toc{display:none}
}
@media (max-width:760px){
	.articles-head__title{font-size:32px}
	.article-title{font-size:30px}
	.article-lead{font-size:17px}
	.article-cover__img{aspect-ratio:16/10;border-radius:var(--radius-lg)}
	.prose{font-size:17px}
	.prose h2{font-size:25px}
	.prose h3{font-size:20px}
	.prose table{display:block;overflow-x:auto}
}
