/* =====================================================================
   V2 — страница статьи. Источник: Templates/V2/reference/article.html
   Подключается только шаблоном 16, поэтому лежит отдельным файлом.

   Правила тёмной темы из макета выброшены: переключатель темы с сайта убран.
   ===================================================================== */

/* --- статья: обложка, мета, текст --- */
.art-hero{padding:30px 0}
.art-breadcrumbs{font-size:.82rem;color:var(--muted);margin-bottom:1.2rem}
.art-breadcrumbs a{color:var(--muted)}
.art-breadcrumbs a:hover{color:var(--blue)}
.art-cover{position:relative;height:340px;border-radius:22px;overflow:hidden;margin-bottom:1.8rem}
.art-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.art-cover::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.55))}
.art-cover .art-tag{position:absolute;top:1.2rem;left:1.2rem;z-index:2;background:rgba(255,255,255,.92);color:#101828;border-radius:999px;padding:.4rem .9rem;font-size:.8rem;font-weight:800}
.art-cover .art-time{position:absolute;top:1.2rem;right:1.2rem;z-index:2;background:rgba(0,0,0,.4);color:#fff;border-radius:999px;padding:.4rem .9rem;font-size:.8rem}
.art-cover h1{position:absolute;left:1.6rem;right:1.6rem;bottom:1.4rem;z-index:2;color:#fff;font-size:clamp(1.6rem,3vw,2.3rem);margin:0}

.art-meta{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem;padding-bottom:1.6rem;margin-bottom:1.8rem;border-bottom:1px solid var(--line)}
.art-author{display:flex;align-items:center;gap:.8rem;text-decoration:none;color:inherit}
.art-author-avatar{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:800;font-size:1.1rem;line-height:1;flex:0 0 auto}
.art-author b{display:block;font-size:.92rem;color:var(--ink)}
.art-author small{display:block;font-size:.78rem;color:var(--muted)}
.art-author:hover b{color:var(--blue)}
.art-dates{font-size:.82rem;color:var(--muted);text-align:right}

.art-body{max-width:760px;margin:0 auto 2.4rem;color:var(--ink);font-size:1rem;line-height:1.75}
.art-body h2{font-size:1.35rem;margin:2rem 0 .8rem;padding-left:.9rem;border-left:4px solid var(--blue)}
.art-body p{margin:0 0 1.1rem;color:var(--ink)}
.art-body ul{margin:0 0 1.1rem;padding-left:1.3rem}
.art-body li{margin-bottom:.4rem}
.art-body .intro{font-size:1.08rem;color:var(--muted);line-height:1.65}

.art-stats{display:flex;gap:0;flex-wrap:wrap;max-width:760px;margin:0 auto 2rem;background:var(--bg);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.art-stats .stat{flex:1 1 0;min-width:150px;display:flex;align-items:center;gap:.7rem;padding:1rem 1.2rem;border-right:1px solid var(--line)}
.art-stats .stat:last-child{border-right:0}
.art-stats .stat i{width:38px;height:38px;border-radius:50%;background:var(--blue-soft);color:var(--blue);display:grid;place-items:center;font-size:1rem;flex:0 0 auto}
.art-stats .stat b{display:block;font-size:1rem;color:var(--ink);line-height:1.2}
.art-stats .stat span{display:block;font-size:.76rem;color:var(--muted)}
@media (max-width:700px){.art-stats .stat{border-right:0;border-bottom:1px solid var(--line)}.art-stats .stat:last-child{border-bottom:0}}

.art-callout{display:flex;gap:.8rem;align-items:flex-start;background:var(--blue-soft);border-left:4px solid var(--blue);border-radius:12px;padding:1rem 1.3rem;margin:0 0 1.3rem}
.art-callout i{color:var(--blue);font-size:1.15rem;margin-top:.2rem;flex:0 0 auto}
.art-callout p{margin:0;color:var(--ink);font-size:.94rem;line-height:1.6}

.art-gallery{display:grid;grid-template-columns:repeat(5,1fr);gap:.8rem;max-width:900px;margin:0 auto 2.6rem}
.art-gallery figure{margin:0}
.art-gallery a{position:relative;display:block;border-radius:14px;overflow:hidden;height:120px}
.art-gallery img{width:100%;height:100%;object-fit:cover;display:block}
.art-gallery figcaption{margin-top:.45rem;font-size:.76rem;color:var(--muted);text-align:center}
.art-gallery a{cursor:zoom-in}
@media (max-width:700px){.art-gallery{grid-template-columns:repeat(2,1fr)}}

.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.85);display:none;align-items:center;justify-content:center;z-index:2000;padding:2rem}
.lightbox.open{display:flex}
.lightbox img{max-width:92vw;max-height:88vh;border-radius:12px;display:block}
.lightbox-close{position:absolute;top:1.2rem;right:1.5rem;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;border:0;font-size:1.3rem;display:grid;place-items:center;cursor:pointer}
.lightbox-close:hover{background:rgba(255,255,255,.22)}

.art-related-wrap{margin-top:2.6rem}
.art-related{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;max-width:1000px;margin:0 auto}
.art-related a{display:block;background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;text-decoration:none;color:inherit;transition:transform .2s ease,border-color .2s ease}
.art-related a:hover{transform:translateY(-4px);border-color:var(--blue)}
.art-related .art-related-img{height:120px;position:relative}
.art-related .art-related-img img{width:100%;height:100%;object-fit:cover;display:block}
.art-related .art-related-tag{position:absolute;top:.6rem;left:.6rem;background:rgba(255,255,255,.92);color:#101828;border-radius:999px;padding:.25rem .65rem;font-size:.7rem;font-weight:800}
.art-related .art-related-body{padding:.9rem 1.1rem}
.art-related h4{font-size:.94rem;margin:0 0 .3rem;line-height:1.35;color:var(--ink)}
.art-related h4:hover{color:var(--blue)}
.art-related span{font-size:.78rem;color:var(--muted)}
@media (max-width:800px){.art-related{grid-template-columns:1fr}}

.art-ai-cta{
  max-width:900px;margin:0 auto 2.6rem;display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;
  background:#0757d8;color:#fff;border-radius:20px;padding:1.6rem 1.8rem;
}
.art-ai-cta b{display:block;font-size:1.1rem;margin-bottom:.25rem}
.art-ai-cta span{font-size:.88rem;opacity:.85}
.art-ai-cta a{border:0;background:#fff;color:#0757d8;font-weight:700;border-radius:12px;padding:.8rem 1.4rem;font-size:.92rem;cursor:pointer;white-space:nowrap;text-decoration:none;display:inline-block}

.art-companies{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;max-width:1000px;margin:0 auto 2.6rem}
@media (max-width:800px){.art-companies{grid-template-columns:1fr}}

/* --- FAQ (переиспользовано) --- */
.faq-list{display:flex;flex-direction:column;gap:.7rem;max-width:800px;margin:0 auto}
.faq-item{display:block;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;transition:all .2s ease}
.faq-item:hover{border-color:var(--blue)}
.faq-item.open{border-color:var(--blue)}
.faq-q{
  width:100%;text-align:left;background:transparent;border:0;padding:.9rem 1.3rem;cursor:pointer;
  font-family:'Manrope',sans-serif;font-weight:700;font-size:1rem;color:var(--ink);
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
}
.faq-q-text{flex:1 1 auto;min-width:0}
.faq-q i{
  flex:0 0 auto;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:.8rem;
  background:var(--bg);color:var(--blue);transition:all .35s ease;
}
.faq-item.open .faq-q{color:var(--blue)}
.faq-item.open .faq-q i{transform:rotate(135deg);background:var(--blue);color:#fff}
.faq-a{display:block;width:100%;max-height:0;overflow:hidden;transition:max-height .4s ease}
.faq-a p{padding:0 1.3rem 1.2rem;margin:0;color:var(--muted);font-size:.92rem;line-height:1.65}

/* --- CTA заявка --- */
.art-request{
  max-width:900px;margin:2.6rem auto 0;background:#0757d8;color:#fff;border-radius:22px;padding:2rem 2.2rem;
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;
}
.art-request b{display:block;font-size:1.25rem;margin-bottom:.3rem}
.art-request span{font-size:.92rem;opacity:.85}
.art-request .btn{background:#fff;color:#0757d8;font-weight:800}

/* --- развязка с карточками статей ------------------------------------
   В v2/style.css класс .art-body уже занят карточкой статьи в списках:
   там он flex-колонка с padding. На странице материала это тот же класс,
   но смысл другой — колонка текста. Поэтому здесь правила заданы через
   .art-hero: специфичность выше, и карточки в других шаблонах не страдают.
   -------------------------------------------------------------------- */
.art-hero .art-body{display:block;padding:0;flex:none;max-width:760px;margin:0 auto 2.4rem;color:var(--ink);font-size:1rem;line-height:1.75}
.art-hero .art-body p{font-size:1rem;margin:0 0 1.1rem;color:var(--ink);flex:none}
.art-hero .art-body .intro{font-size:1.08rem;color:var(--muted);line-height:1.65}

/* Обложка без картинки не должна быть дырой в вёрстке */
.art-cover{background:linear-gradient(135deg,#0757d8,#073a91)}

/* Обтекание из редактора приходит inline-стилями, здесь только рамки */
.art-hero .art-body img{max-width:100%;height:auto;border-radius:12px}
.art-hero .art-body figure{margin:1rem 0}
.art-hero .art-body figure.image{display:table}
.art-hero .art-body figure figcaption{font-size:.82rem;color:var(--muted);padding-top:.4rem}

/* Подпись под картинкой в лайтбоксе */
.lightbox-caption{position:absolute;left:0;right:0;bottom:1.4rem;text-align:center;color:rgba(255,255,255,.85);font-size:.86rem;padding:0 2rem}

/* Картинка с обтеканием не должна вылезать за свой блок текста */
.art-hero .art-body::after{content:"";display:table;clear:both}

/* Ответ приходит из редактора: у списков и подзаголовков должен быть тот же
   боковой отступ, что у абзаца — правило .faq-a p до них не достаёт */
.faq-a > ul,.faq-a > ol{margin:0 0 1.2rem;padding-left:2.6rem;color:var(--muted);font-size:.92rem;line-height:1.65}
.faq-a > h3,.faq-a > h4{padding:0 1.3rem;margin:.6rem 0 .4rem;font-size:1rem;color:var(--ink)}
.faq-a > *:last-child{margin-bottom:1.2rem}