/* ═══════════════════════════════════════════════════════
   ARTICLE.CSS — единый шаблон статей sem365.ru
   Подключается вместе с direction.css на всех статьях
   ═══════════════════════════════════════════════════════ */

/* ─── Header ─── */
.art-header{background:#141C27;padding:0}
.art-header-inner{
  max-width:1200px;margin:0 auto;padding:16px 40px;
  display:flex;align-items:center;justify-content:space-between;
}
.art-header-logo{font-weight:700;font-size:20px;color:#fff;text-decoration:none;letter-spacing:.5px}
.art-header-phone{color:#fff;text-decoration:none;font-size:15px;font-weight:500;white-space:nowrap}

/* ─── Breadcrumb ─── */
.art-breadcrumb{background:var(--bg2);padding:10px 0;font-size:13px}
.art-breadcrumb-inner{
  max-width:1200px;margin:0 auto;padding:0 40px;
  display:flex;align-items:center;flex-wrap:wrap;gap:4px;
}
.art-breadcrumb-inner a{color:var(--txt-m);text-decoration:none;transition:color .15s}
.art-breadcrumb-inner a:hover{color:var(--txt)}
.art-breadcrumb-sep{color:var(--txt-d);margin:0 2px}
.art-breadcrumb-current{color:var(--txt)}

/* ─── Article body ─── */
.art-body{max-width:740px;margin:0 auto;line-height:1.8;font-size:16px;color:var(--txt)}
.art-body h2{
  font-family:var(--ff-d);font-size:clamp(20px,3vw,30px);
  line-height:1;letter-spacing:.5px;color:var(--txt);
  margin:40px 0 14px;
}
.art-body p{color:var(--txt-m);margin-bottom:16px}
.art-body ul{list-style:disc;margin:12px 0 20px 22px;color:var(--txt-m)}
.art-body ol{list-style:decimal;margin:12px 0 20px 22px;color:var(--txt-m)}
.art-body li{margin-bottom:8px;line-height:1.7;color:var(--txt-m)}
.art-body strong{color:var(--txt)}
.art-body a{color:var(--copper-l);text-decoration:underline;text-underline-offset:3px}

/* ─── Tables ─── */
.art-body table{width:100%;border-collapse:collapse;margin:24px 0;font-size:15px}
.art-body th{
  background:var(--bg2);padding:12px 16px;text-align:left;
  border:1px solid var(--bg3);font-weight:600;color:var(--txt);
  font-family:var(--ff-b);
}
.art-body td{padding:12px 16px;border:1px solid var(--bg3);color:var(--txt-m)}
.art-body tr:nth-child(even) td{background:var(--bg1)}

/* ─── FAQ ─── */
.art-faq{margin-top:40px}
.art-faq>h2{margin-bottom:16px}
.art-faq details{
  border:1px solid var(--border);border-radius:3px;
  padding:14px 18px;margin-bottom:8px;
  transition:border-color .2s;
}
.art-faq details[open]{border-color:rgba(20,28,39,.2)}
.art-faq summary{
  font-weight:600;cursor:pointer;color:var(--txt);
  list-style:none;
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  font-size:15px;
}
.art-faq summary::-webkit-details-marker{display:none}
.art-faq summary::after{content:'+';font-size:20px;font-weight:300;color:var(--copper);flex-shrink:0}
.art-faq details[open] summary::after{content:'−'}
.art-faq details p{margin-top:12px;color:var(--txt-m);font-size:15px;margin-bottom:0}

/* ─── Related links ─── */
.art-related{margin-top:40px;padding-top:24px;border-top:1px solid var(--border)}
.art-related-label{
  font-size:11px;color:var(--txt-d);
  text-transform:uppercase;letter-spacing:.06em;margin-bottom:14px;
}
.art-related a{
  display:block;color:var(--copper-l);font-size:15px;
  text-decoration:none;margin-bottom:8px;transition:color .15s;
}
.art-related a:hover{color:var(--copper)}
.art-related-back{color:var(--txt-d)!important;font-size:14px!important}
.art-related-back:hover{color:var(--txt-m)!important}

/* ─── Footer ─── */
.art-footer{
  background:#0D1420;color:rgba(255,255,255,.45);
  padding:24px 0;font-size:13px;text-align:center;
}
.art-footer p+p{margin-top:6px}
.art-footer a{color:rgba(255,255,255,.45);text-decoration:none;transition:color .15s}
.art-footer a:hover{color:rgba(255,255,255,.7)}

/* ─── Mobile ─── */
@media(max-width:768px){
  .art-header-inner{padding:14px 20px}
  .art-breadcrumb-inner{padding:0 20px}
}
@media(max-width:600px){
  .art-body{font-size:15px}
  .art-body table{font-size:13px;display:block;overflow-x:auto}
  .art-body th,.art-body td{padding:10px 12px}
  .art-header-phone{font-size:14px}
}