/*
 * okoss.ru — то, чего нет в блоках PAGES v2 (public/design/styles.css, «Блоки статьи 4.13»): введение, выравнивание,
 * цвет и выделение текста, код, колонки, спойлер, сноски-«↩», число колонок «Цифр», виджет Telegram после загрузки,
 * обложка-видео и обложка-галерея в шапке статьи, полоса предпросмотра.
 */

/* Введение (лид), выравнивание, цвет, выделение, код */
.prose .lead{font-size:20px;line-height:1.6;color:var(--text);margin:0 0 28px}
.prose .lead p{margin:0 0 12px}
.prose [data-align="center"]{text-align:center}
.prose [data-align="end"]{text-align:right}
.prose .color[data-color="accent"]{color:var(--signal)}
.prose .color[data-color="muted"]{color:var(--muted)}
.prose mark{background:rgba(255,97,116,.22);color:inherit;padding:0 2px}
.prose pre{background:var(--surface);border:1px solid var(--border);padding:16px 18px;overflow-x:auto;font:13px/1.6 var(--mono);margin:28px 0}
.prose code{font-family:var(--mono);font-size:.9em}
.prose h4[id]{scroll-margin-top:calc(var(--header-h) + 24px)}

/* Спойлер (вопрос — ответ — .blk-faq из v2) */
.prose :not(.faq)>details{margin:28px 0;border-top:1px solid var(--border);padding:12px 0}
.prose :not(.faq)>details>summary{cursor:pointer;font-weight:650;list-style-position:outside}
.prose :not(.faq)>details>summary:hover{color:var(--signal)}
.prose :not(.faq)>details>div{margin-top:10px;color:var(--muted)}

/* Колонки */
.prose [data-cols]{display:grid;grid-template-columns:var(--cols,repeat(2,minmax(0,1fr)));gap:28px;margin:28px 0}
.prose [data-cols="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}
.prose [data-cols="3"]{grid-template-columns:repeat(3,minmax(0,1fr))}
.prose [data-cols]>div{min-width:0}
@media(max-width:700px){.prose [data-cols]{grid-template-columns:1fr!important}}

/* Галерея из одного фото, «Цифры» на 1, 2 и 4 числа (в макете число колонок — style="--n", его вырезает очистка) */
.blk-gallery-grid.n1{grid-template-columns:1fr}
.stats-grid.n1{--n:1}
.stats-grid.n2{--n:2}
.stats-grid.n4{--n:4}
@media(max-width:900px){.stats-grid.n1{grid-template-columns:1fr}}

/* Источники: возврат к сноске, подсветка источника по ссылке [n] */
.sources li{scroll-margin-top:calc(var(--header-h) + 24px)}
.sources li:target{color:#fff}
.prose .sources .blk-backref{margin-left:6px;text-decoration:none;color:var(--muted)}
.prose .sources .blk-backref:hover{color:var(--signal)}

/* Пост Telegram: кнопка загрузки и виджет после клика */
.tg-foot .tg-load{background:transparent;border:1px solid #2c3b4f;color:#9ccbff;font:inherit;padding:6px 10px;cursor:pointer}
.tg-foot .tg-load:hover{border-color:#9ccbff;color:#fff}
.blk-tg iframe{display:block;width:100%;height:520px;border:0;margin-top:12px}
.blk-tg .tg-card.is-loaded{padding:0;border:0;background:none}
.blk-tg .tg-card.is-loaded>:not(iframe){display:none}
.blk-tg .tg-card.is-loaded iframe{margin:0}

/* Embed HTML: снимка нет — вместо него строка «загрузится после нажатия», поэтому заглушка ниже, чем в макете */
.blk-embed .embed-body{min-height:96px}
.blk-embed .embed-static .click-note{margin:0;padding-right:230px}
@media(max-width:600px){.blk-embed .embed-static .click-note{padding-right:0}}

/* Обложка статьи: видео (по клику, public/js/blocks.js) и галерея */
.blk-video-frame{position:relative;background:var(--surface);border:1px solid var(--border);overflow:hidden;aspect-ratio:16/9}
.blk-video-frame img{width:100%;height:100%;object-fit:cover;border:0}
.blk-video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.blk-video-play{position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%);width:76px;height:76px;border-radius:50%;border:0;background:var(--red);color:#fff;font-size:26px;display:grid;place-items:center}
.blk-video-play:hover{background:var(--signal)}
.article-cover--video .blk-video-frame{aspect-ratio:3/2}
.article-cover--gallery .blk-gallery-items{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:8px}
.article-cover--gallery img{flex:0 0 100%;scroll-snap-align:start;aspect-ratio:3/2;object-fit:cover}

/* Предпросмотр */
.preview-bar{position:sticky;top:0;z-index:60;background:#e0b252;color:#111;text-align:center;padding:8px 16px}