/* ============================================================
   Mario Hitch SEO — article.css
   Стили страницы статьи блога
   ============================================================ */

/* ── BREADCRUMBS ─────────────────────────────────────────── */
.breadcrumbs { padding-top:calc(var(--header-h) + 20px); padding-bottom:0; }
.breadcrumbs__list { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.breadcrumbs__item { display:flex; align-items:center; gap:6px; font-size:12px; font-weight:500; letter-spacing:.04em; color:var(--grey-3); }
.breadcrumbs__link { color:var(--grey-3); transition:color .2s; }
.breadcrumbs__link:hover { color:var(--white); }
.breadcrumbs__sep { display:flex; align-items:center; color:var(--grey-2); }
.breadcrumbs__item--current { color:var(--white-dim); }

/* ── ARTICLE HERO ────────────────────────────────────────── */
.art-hero {
  position:relative;
  padding:52px 0 64px;
  overflow:hidden;
}
.art-hero__bg { position:absolute; inset:0; pointer-events:none; }
.art-hero__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:60px 60px;
  mask-image:radial-gradient(ellipse 100% 80% at 0 50%,black 20%,transparent 100%);
}
.art-hero__inner { position:relative; z-index:1; max-width:800px; }

.art-hero__meta {
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin-bottom:20px;
}
.art-category {
  font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--grey-3); border:1px solid var(--grey-1); border-radius:4px; padding:4px 12px;
}
.art-meta-sep { color:var(--grey-2); }
.art-date { font-size:13px; color:var(--grey-3); letter-spacing:.03em; }
.art-read-time {
  display:flex; align-items:center; gap:5px;
  font-size:13px; color:var(--grey-3);
}

.art-hero__title {
  font-family:var(--ff-display); font-size:clamp(36px,5vw,72px);
  font-weight:400; color:var(--pure); line-height:.97; letter-spacing:.02em;
  margin-bottom:24px;
  text-shadow:0 0 80px rgba(255,255,255,.06);
}
.art-hero__excerpt {
  font-size:18px; color:var(--white-dim); line-height:1.7;
  margin-bottom:24px; max-width:680px;
}
.art-hero__tags { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:32px; }
.article-tag {
  font-size:11px; font-weight:600; letter-spacing:.07em; text-transform:uppercase;
  color:var(--grey-3); border:1px solid var(--grey-1); border-radius:4px; padding:4px 10px;
  transition:color .2s, border-color .2s;
}
.article-tag:hover { color:var(--white-dim); border-color:var(--grey-3); }

.art-hero__author { display:flex; align-items:center; gap:14px; }
.art-author-avatar {
  width:44px; height:44px; flex-shrink:0;
  background:var(--pure); color:var(--black);
  font-family:var(--ff-display); font-size:22px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
}
.art-author-info { display:flex; flex-direction:column; gap:2px; }
.art-author-name { font-size:14px; font-weight:700; color:var(--white); }
.art-author-role { font-size:12px; color:var(--grey-3); }

/* ── COVER IMAGE ─────────────────────────────────────────── */
.art-cover {
  width:100%; max-height:480px; overflow:hidden;
  border-top:1px solid var(--grey-1); border-bottom:1px solid var(--grey-1);
  background:var(--black-2);
}
.art-cover img {
  width:100%; max-height:480px; object-fit:cover;
  filter:grayscale(10%);
  transition:filter .4s;
}
.art-cover img:hover { filter:grayscale(0%); }

/* ── ARTICLE LAYOUT ──────────────────────────────────────── */
.art-layout { padding:72px 0 80px; }
.art-layout__inner {
  display:grid;
  grid-template-columns:1fr 300px;
  gap:64px;
  align-items:start;
}

/* ── ARTICLE CONTENT (typography) ────────────────────────── */
.art-content { max-width:none; min-width:0; }

.art-content p {
  font-size:17px; color:var(--white-dim); line-height:1.8;
  margin-bottom:24px;
}
.art-content h2 {
  font-family:var(--ff-display); font-size:clamp(28px,3vw,44px);
  color:var(--pure); font-weight:400; line-height:1.05; letter-spacing:.02em;
  margin:52px 0 20px; padding-top:8px;
  border-top:1px solid var(--grey-1);
}
.art-content h3 {
  font-size:20px; font-weight:700; color:var(--pure);
  margin:36px 0 14px; line-height:1.3;
}
.art-content h4 {
  font-size:16px; font-weight:700; color:var(--white-dim);
  margin:28px 0 10px; letter-spacing:.02em;
}
.art-content ul, .art-content ol {
  margin:0 0 28px 0; padding-left:0;
  display:flex; flex-direction:column; gap:10px;
}
.art-content ul li, .art-content ol li {
  display:flex; gap:14px;
  font-size:16px; color:var(--white-dim); line-height:1.7;
}
.art-content ul li::before {
  content:''; display:block; width:6px; height:6px; border-radius:50%;
  background:var(--grey-3); flex-shrink:0; margin-top:10px;
}
.art-content ol { counter-reset:item; }
.art-content ol li::before {
  counter-increment:item; content:counter(item);
  display:block; width:24px; height:24px; flex-shrink:0;
  border:1px solid var(--grey-1); border-radius:50%;
  font-size:11px; font-weight:700; color:var(--grey-3);
  display:flex; align-items:center; justify-content:center;
  margin-top:4px;
}
.art-content strong { color:var(--pure); font-weight:700; }
.art-content em { font-style:italic; color:var(--white-dim); }
.art-content a { color:var(--white); text-decoration:underline; text-decoration-color:var(--grey-2); transition:text-decoration-color .2s; }
.art-content a:hover { text-decoration-color:var(--white); }
.art-content blockquote {
  margin:36px 0; padding:24px 28px;
  border-left:3px solid var(--pure);
  background:var(--black-2); border-radius:0 var(--radius) var(--radius) 0;
  font-size:18px; color:var(--white); font-style:italic; line-height:1.7;
}
.art-content blockquote p { margin-bottom:0; color:var(--white); font-size:18px; }
.art-content code {
  font-family:'Courier New',monospace; font-size:13px;
  background:var(--black-3); color:var(--white-dim);
  padding:3px 8px; border-radius:4px; border:1px solid var(--grey-1);
}
.art-content pre {
  background:var(--black-2); border:1px solid var(--grey-1); border-radius:var(--radius);
  padding:24px; margin:28px 0; overflow-x:auto;
}
.art-content pre code {
  background:none; border:none; padding:0;
  font-size:13px; line-height:1.7; color:var(--white-dim);
}
.art-content img {
  width:100%; border-radius:var(--radius); margin:28px 0;
  border:1px solid var(--grey-1);
}
.art-content hr {
  border:none; border-top:1px solid var(--grey-1); margin:48px 0;
}
/* Таблицы */
.art-content table {
  width:100%; border-collapse:collapse; margin:32px 0;
  font-size:14px;
}
.art-content th {
  background:var(--black-3); color:var(--pure); font-weight:700;
  padding:12px 16px; text-align:left; border:1px solid var(--grey-1);
  font-size:12px; letter-spacing:.05em; text-transform:uppercase;
}
.art-content td {
  padding:11px 16px; color:var(--white-dim);
  border:1px solid var(--grey-1); line-height:1.55;
}
.art-content tr:nth-child(even) td { background:var(--black-2); }
/* Highlight box */
.art-content .highlight-box {
  background:var(--black-2); border:1px solid rgba(255,255,255,.12);
  border-radius:var(--radius-lg); padding:28px 32px; margin:36px 0;
  box-shadow:0 0 40px rgba(255,255,255,.03);
}
.art-content .highlight-box p { margin-bottom:0; }

/* ── SIDEBAR ─────────────────────────────────────────────── */
.art-sidebar {
  position:sticky; top:calc(var(--header-h) + 24px);
  display:flex; flex-direction:column; gap:16px;
}
.art-sidebar-widget {
  border:1px solid var(--grey-1); border-radius:var(--radius-lg);
  background:var(--black-2); overflow:hidden;
  padding:24px;
}
.art-sidebar-widget__title {
  font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--grey-3); margin-bottom:16px;
}

/* Author widget */
.art-sidebar-author { text-align:center; }
.art-s-author-avatar {
  width:56px; height:56px; margin:0 auto 12px;
  background:var(--pure); color:var(--black);
  font-family:var(--ff-display); font-size:28px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
}
.art-s-author-name { font-size:15px; font-weight:700; color:var(--pure); margin-bottom:4px; }
.art-s-author-role { font-size:12px; color:var(--grey-3); margin-bottom:12px; }
.art-s-author-bio { font-size:13px; color:var(--grey-4); line-height:1.65; }

/* TOC */
.art-toc-list { display:flex; flex-direction:column; gap:2px; }
.art-toc-link {
  display:block; padding:8px 10px; font-size:13px; color:var(--grey-4);
  border-radius:4px; transition:color .2s, background .2s; line-height:1.4;
}
.art-toc-link:hover { color:var(--white); background:var(--black-3); }
.art-toc-link.active { color:var(--pure); background:var(--black-3); }

/* CTA widget */
.art-sidebar-cta__label {
  font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--grey-3); margin-bottom:8px;
}
.art-sidebar-cta__text { font-size:13px; color:var(--grey-4); line-height:1.65; }

/* ── FOOTER SECTION ──────────────────────────────────────── */
.art-footer-section { padding:32px 0; border-top:1px solid var(--grey-1); }
.art-footer-inner { display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.art-footer-tags { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.art-footer-tags__label { font-size:12px; color:var(--grey-3); font-weight:600; letter-spacing:.04em; text-transform:uppercase; }
.art-share { display:flex; align-items:center; gap:10px; }
.art-share__label { font-size:12px; color:var(--grey-3); font-weight:600; letter-spacing:.04em; text-transform:uppercase; }
.art-share-btn {
  display:inline-flex; align-items:center; gap:7px;
  padding:9px 16px; border:1px solid var(--grey-1); border-radius:40px;
  font-size:12px; font-weight:700; color:var(--grey-3);
  transition:color .2s, border-color .2s;
}
.art-share-btn:hover { color:var(--white); border-color:var(--grey-3); }
.art-share-btn--tg:hover { color:var(--pure); }

/* ── CTA BANNER ──────────────────────────────────────────── */
.art-cta-section { padding:0 0 80px; }
.art-cta-banner {
  position:relative;
  border-radius:var(--radius-lg);
  background:var(--black-2);
  overflow:hidden;
  animation:promo-glow-pulse 2.8s ease-in-out infinite;
}
@keyframes promo-glow-pulse {
  0%,100% { box-shadow:0 0 0 1px rgba(255,255,255,.12),0 0 30px rgba(255,255,255,.05); }
  50%      { box-shadow:0 0 0 1px rgba(255,255,255,.28),0 0 60px rgba(255,255,255,.12); }
}
.art-cta-banner__border { position:absolute; inset:0; border-radius:var(--radius-lg); pointer-events:none; overflow:hidden; }
.promo-border-line { position:absolute; }
.promo-border-line--top    { top:0;    left:-100%; width:100%; height:1px; background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent); animation:border-run-h 3s linear infinite; }
.promo-border-line--bottom { bottom:0; left:100%;  width:100%; height:1px; background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent); animation:border-run-h 3s linear 1.5s infinite; animation-direction:reverse; }
.promo-border-line--right  { right:0;  top:-100%;  width:1px; height:100%; background:linear-gradient(180deg,transparent,rgba(255,255,255,.6),transparent); animation:border-run-v 3s linear .75s infinite; }
.promo-border-line--left   { left:0;   top:100%;   width:1px; height:100%; background:linear-gradient(180deg,transparent,rgba(255,255,255,.6),transparent); animation:border-run-v 3s linear 2.25s infinite; animation-direction:reverse; }
@keyframes border-run-h { from{left:-100%} to{left:200%} }
@keyframes border-run-v { from{top:-100%}  to{top:200%}  }
.art-cta-banner__inner {
  position:relative; z-index:1;
  display:flex; align-items:center; justify-content:space-between; gap:32px;
  padding:40px 48px; flex-wrap:wrap;
}
.art-cta-banner__title { font-family:var(--ff-display); font-size:36px; color:var(--pure); letter-spacing:.04em; margin-bottom:6px; }
.art-cta-banner__text p { font-size:16px; color:var(--grey-4); line-height:1.6; }
.art-cta-banner__actions { display:flex; gap:14px; flex-shrink:0; flex-wrap:wrap; }

/* ── PAGE always solid header ─────────────────────────────── */
.article-page .header { background:rgba(7,7,8,.95); backdrop-filter:blur(20px); border-bottom-color:var(--grey-1); }
.nav__link--active { color:var(--pure) !important; }
.nav__link--active::after { width:100% !important; }

/* ── RESPONSIVE ──────────────────────────────────────────── */
@media (max-width:1024px) {
  .art-layout__inner { grid-template-columns:1fr; }
  .art-sidebar { position:static; }
}
@media (max-width:768px) {
  .art-hero { padding:36px 0 48px; }
  .art-hero__title { font-size:clamp(32px,10vw,56px); }
  .art-hero__excerpt { font-size:16px; }
  .art-content h2 { font-size:clamp(26px,7vw,38px); }
  .art-cta-banner__inner { padding:28px 24px; flex-direction:column; align-items:flex-start; }
  .art-footer-inner { flex-direction:column; align-items:flex-start; }
}
@media (prefers-reduced-motion:reduce) {
  .art-cta-banner, .promo-border-line { animation:none !important; }
}
/* --- МЯГКИЙ ФИКС СТАТЬИ --- */

/* 1. Блок картинки: говорим ему "не прижимайся к краю" */
.art-cover {
    display: block;        /* Блок занимает всю строку */
    width: 100%;           /* Но не шире родителя */
    max-width: 900px;      /* Ограничиваем, чтобы не рвало экран */
    margin: 0 auto 30px;   /* Центрируем и даем отступ снизу */
    float: none;           /* Запрещаем обтекание (чтобы текст не лез сбоку) */
    clear: both;           /* Очищаем потоки */
}

/* 2. Сама картинка */
.art-cover img {
    width: 100%;
    height: auto;
    border-radius: 12px;
}

/* 3. Текст статьи */
/* Центрируем его под картинкой */
.article-content {
    max-width: 800px;      /* Текст чуть уже картинки для удобства чтения */
    margin: 0 auto;        /* Центр */
    padding: 0 15px;       /* Отступы на мобилках */
    display: block;        /* Точно блок */
}