/**
 * Статья Базы знаний на сценах «Глубина» (приёмы 10-12 канваса 3, эталон 13.10.2026).
 * Подключает шаблон components/bitrix/news/seo/bitrix/news.detail/.default/template.php,
 * поэтому правила действуют только на детальной странице статьи (ИБ-31, /articles-info/<code>/).
 * Плейбук: docs/front/PLAYBOOKS/LANDING-SCENES-PLAYBOOK.md, §5. Тексты статьи не меняются: только вёрстка.
 * Палитра та же, что у сцен услуг (css/cds-scenes.css). px, не rem (плейбук #26).
 */
:root{
  --art-d1:#0d2a6e;--art-d2:#06163d;
  --art-sky:var(--ds-cyan-light,#56bcef);--art-cyan:var(--ds-cyan,#00bef3);--art-deep:var(--ds-cyan-deep,#0078b0);
  --art-on-dk:rgba(255,255,255,.84);--art-on-dk-2:rgba(255,255,255,.66);--art-line-dk:rgba(255,255,255,.14);
  --art-stone:#f3f1ed;--art-stone-line:#e2ddd4;--art-stone-ring:#cfc5b2;
  --art-ease:cubic-bezier(.22,1,.36,1)
}

/* 10. Обложка. Плашка с H1 рисуется шаблоном крошек seo (он же стоит на /cyberosnova/, его не трогаем):
   здесь она только перекрашена. Цвет сплошной, без градиента: снизу к ней примыкает полоса обложки
   того же цвета, шва не видно; в сжатом виде при прокрутке плашка остаётся тёмной полосой. */
.navigation{background:var(--art-d1);
  /* у плашки сайта transition:3s на всё: без этой строки фон 3 секунды «доплывает» из светлого в тёмный
     и на стыке с обложкой виден шов. Последнее объявление свойства в списке побеждает. */
  transition:all 3s,background-color 0s}
.navigation .navigation__container{background:transparent}
.navigation .navigation__head-h1{color:#fff}
.navigation a.bread-crumbs__item{color:var(--art-sky)}
.navigation span.bread-crumbs__item{color:var(--art-on-dk-2)}
.navigation a.bread-crumbs__item:focus-visible{outline:2px solid var(--art-cyan);outline-offset:3px;border-radius:2px}

.art-cover{color:var(--art-on-dk);background:linear-gradient(180deg,var(--art-d1),var(--art-d2))}
.art-cover .art-cover__w{padding-top:20px;padding-bottom:40px}
/* Левый край обложки = левый край H1 в плашке. Отступы плашки (main_styles.css ~9951): 27px на 1024-1259,
   0 от 1260. Ниже 1024 у плашки 0 на планшете (H1 прилипал к краю экрана) - на странице статьи даём 15px,
   как у текста. */
@media (max-width:1023px){
  .navigation .navigation__container,.art-cover .art-cover__w{padding-left:15px;padding-right:15px}
}
@media (min-width:1024px) and (max-width:1259px){ .art-cover .art-cover__w{padding-left:27px} }
.art-cover .cds{background:transparent !important}
.art-cover .article-author{max-width:none;margin:0;padding:22px 0 0;border-bottom:0;border-top:1px solid var(--art-line-dk)}
.art-cover .article-author__img{aspect-ratio:1;background:var(--art-d1);box-shadow:0 0 0 2px var(--art-d1),0 0 0 3px var(--art-sky)}
.art-cover .article-author__name{color:#fff}
.art-cover .article-author__pos,.art-cover .article-author__dates{color:var(--art-on-dk-2)}
.art-cover .article-author__more{color:var(--art-sky)}
.art-cover a.article-author--link:focus-visible{outline:2px solid var(--art-cyan);outline-offset:6px;border-radius:4px}
.art-cover .news-banner__dates{display:flex;flex-wrap:wrap;gap:6px 24px;padding-top:22px;border-top:1px solid var(--art-line-dk)}
.art-cover .news-banner__date{margin:0;font-size:14px;color:var(--art-on-dk-2)}

/* Спейсер под фикс-плашкой (.hidden_block_navigation, custom.js): его высота = низ плашки в полном виде.
   При прокрутке плашка сжимается, а спейсер нет: между сжатой плашкой и обложкой открывалась белая
   полоса («трещина», владелец 13.10.2026). Красим спейсер в цвет плашки - шва нет ни в каком состоянии.
   Картинки в обложке нет намеренно (владелец 13.10.2026: предмет и картинка анонса отклонены). */
.hidden_block_navigation{background:var(--art-d1)}

/* 11. Чтение: полоса прочитанного по низу плашки (скрипт в шаблоне), первый абзац крупнее. */
.navigation .art-pbar{position:absolute;left:0;right:0;bottom:0;height:3px;transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,var(--art-deep),var(--art-cyan));pointer-events:none}
.cds.cds-article>p:first-of-type{font-size:clamp(19px,1.5vw,22px);line-height:1.55;color:var(--ds-ink,#0a225e)}
.cds.cds-article>p:first-of-type>i:only-child,.cds.cds-article>p:first-of-type>em:only-child{font-style:normal}
.article-aside__bar i{background:linear-gradient(90deg,var(--art-deep),var(--art-cyan))}

/* 12. Мнение эксперта на камне (вместо .quote-wrapper). Камень - только для голоса людей. */
.art-expert{display:grid;grid-template-columns:132px minmax(0,1fr);grid-template-areas:"ph who" "ph q";
  column-gap:40px;row-gap:14px;align-items:center;max-width:var(--ds-maxw-text,72ch);font-size:var(--ds-fs-md,18px);
  margin:48px 0;padding:clamp(28px,4vw,48px);box-sizing:border-box;background:var(--art-stone);
  border:1px solid var(--art-stone-line);border-radius:16px}
.art-expert__ph{grid-area:ph;position:relative;width:132px;height:132px;align-self:center}
.art-expert__ph::before{content:"";position:absolute;inset:-10px;border-radius:50%;border:1px solid var(--art-stone-ring)}
.art-expert__ph img{position:relative;display:block;width:132px;height:132px;border-radius:50%;object-fit:cover;object-position:center 15%}
.art-expert__who{grid-area:who;align-self:end;font-size:15px;line-height:1.4;color:var(--ds-muted,#5a6470)}
.art-expert__name{font-size:17px;font-weight:600;color:var(--ds-ink,#0a225e)}
.art-expert__q{grid-area:q;align-self:start;margin:0;padding:0;border:0;quotes:"«" "»"}
.art-expert__q p{margin:0;font-size:clamp(20px,1.9vw,25px);line-height:1.4;font-weight:500;color:var(--ds-ink,#0a225e);text-wrap:pretty}
.art-expert__q p::before{content:open-quote}
.art-expert__q p::after{content:close-quote}
@media (max-width:640px){
  .art-expert{grid-template-columns:72px minmax(0,1fr);grid-template-areas:"ph who" "q q";column-gap:20px;row-gap:20px;margin:36px 0}
  .art-expert__ph,.art-expert__ph img{width:72px;height:72px}
  .art-expert__ph::before{inset:-6px}
  .art-expert__who{align-self:center}
}