/* ClientSync: оформление блога — на токенах брендбука (docs/brandbook/project/tokens.json), как лендинг и кабинеты.
   Тема — своя копия Casper 5.10.3 (blog/theme/clientsync). Подключается после built/screen.css Casper и правится руками, без сборки gulp.
   Светлая и тёмная тема — по системе посетителя (prefers-color-scheme), без переключателя (решение владельца 28.10.2026).
   Кадры статей только светлые: в тёмной теме их отделяет корпус телефона или тонкая рамка, не приглушаем.
   Цвета — только переменными ниже; новый цвет — сначала токен в брендбуке. В Casper 1rem = 10px (html 62.5%), поэтому здесь размеры в px. */

:root {
    color-scheme: light dark;
    --cs-bg: #f2f4f7;
    --cs-surface: #ffffff;
    --cs-surface-2: #eef1f5;
    --cs-border: #e3e7ed;
    --cs-text: #111827;
    --cs-text-muted: #5b6878;
    --cs-brand: #2481cc;
    --cs-primary: #2279c2;
    --cs-primary-pressed: #1d68a6;
    --cs-on-primary: #ffffff;
    --cs-primary-text: #1a6bab;
    --cs-primary-soft: #e6f0fa;
    --cs-success-soft: #e5f5ec;
    --cs-danger-soft: #fdeceb;
    --cs-warning-soft: #fdf3e1;
    --cs-shadow-card: 0 1px 2px #1018280f;
    --cs-shadow-raised: 0 4px 16px #1018281f;
    /* Корпус телефона у кадров — как на лендинге (border-gray-900), в обеих темах */
    --cs-phone: #111827;
    /* Подвал — тёмная палитра в обеих темах (как theme-dark у лендинга) */
    --cs-foot-bg: #0f151c;
    --cs-foot-surface: #1d2733;
    --cs-foot-border: #38475a;
    --cs-foot-text: #e9eef3;
    --cs-foot-muted: #98a6b5;
    --cs-font: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif,
        "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    /* Casper берёт шрифты из этих переменных — везде один шрифт без засечек */
    --gh-font-heading: var(--cs-font);
    --gh-font-body: var(--cs-font);
    --font-sans: var(--cs-font);
    --font-serif: var(--cs-font);
    --ghost-accent-color: var(--cs-primary);
}
@media (prefers-color-scheme: dark) {
    :root {
        --cs-bg: #0f151c;
        --cs-surface: #1d2733;
        --cs-surface-2: #2a3644;
        --cs-border: #38475a;
        --cs-text: #e9eef3;
        --cs-text-muted: #98a6b5;
        --cs-primary-text: #6db3f0;
        --cs-primary-soft: #213d5c;
        --cs-success-soft: #1d3d33;
        --cs-danger-soft: #48292d;
        --cs-warning-soft: #403520;
        --cs-shadow-card: none;
        --cs-shadow-raised: 0 4px 16px #00000066;
    }
}

body.cs-theme {
    background: var(--cs-surface);
    color: var(--cs-text);
    font-family: var(--cs-font);
    -webkit-font-smoothing: antialiased;
}
.cs-theme .viewport { display: flex; flex-direction: column; min-height: 100vh; }
.cs-theme .site-content { flex-grow: 1; padding-bottom: 0; }

.cs-wrap { max-width: 1200px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 640px) { .cs-wrap { padding: 0 24px; } }
@media (min-width: 1024px) { .cs-wrap { padding: 0 32px; } }

/* ── Кнопки и пилюли ───────────────────────────────────────────────────── */
.cs-btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 44px; padding: 0 24px; border-radius: 9999px;
    background: var(--cs-primary); color: var(--cs-on-primary) !important;
    font-size: 16px; font-weight: 700; line-height: 1.2; text-decoration: none !important;
    transition: background-color .2s, transform .2s, box-shadow .2s;
}
.cs-btn:hover { background: var(--cs-primary-pressed); }
.cs-btn-sm { min-height: 40px; padding: 0 18px; font-size: 14px; }
/* Кнопка на синей заливке — как на лендинге: on-primary с текстом primary, в обеих темах */
.cs-btn-light { background: var(--cs-on-primary); color: var(--cs-primary) !important; }
.cs-btn-light:hover { background: var(--cs-on-primary); transform: translateY(-2px); }

.cs-pill {
    display: inline-flex; align-items: center; min-height: 40px; padding: 0 18px;
    border: 1px solid var(--cs-border); border-radius: 9999px; background: var(--cs-surface);
    color: var(--cs-text-muted); font-size: 14px; font-weight: 700; text-decoration: none; white-space: nowrap;
    transition: color .2s, border-color .2s, background-color .2s;
}
.cs-pill:hover { color: var(--cs-primary-text); border-color: var(--cs-primary-text); }
.cs-pill.is-active { background: var(--cs-primary); border-color: var(--cs-primary); color: var(--cs-on-primary); }

.cs-tag {
    display: inline-block; padding: 3px 10px; border-radius: 9999px;
    background: var(--cs-primary-soft); color: var(--cs-primary-text);
    font-size: 12px; font-weight: 700; line-height: 1.5; text-decoration: none;
}
a.cs-tag:hover { background: var(--cs-primary); color: var(--cs-on-primary); }

.cs-meta { margin: 0; color: var(--cs-text-muted); font-size: 14px; line-height: 1.5; }
.cs-meta span { margin: 0 4px; }

/* ── Шапка ─────────────────────────────────────────────────────────────── */
.cs-head {
    position: sticky; top: 0; z-index: 50;
    background: var(--cs-surface);
    background: color-mix(in srgb, var(--cs-surface) 90%, transparent);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--cs-border);
}
.cs-head-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 64px; }
/* Марка — «знак + слово» по брендбуку (assets/Logos/README.md): знак в кегль слова, зазор 0,4, слово цветом знака —
   brand в светлой теме, белый в тёмной и в тёмном подвале (решение владельца 29.10.2026; лендинг — .cs-logo в input.css) */
.cs-brand { display: flex; align-items: center; gap: 8px; text-decoration: none; }
.cs-brand img { width: auto; height: 20px; }
.cs-brand span { color: var(--cs-brand); font-size: 20px; font-weight: 700; letter-spacing: -.01em; }
.cs-brand .cs-mark-white { display: none; }
.cs-brand-light span { color: var(--cs-on-primary); }
@media (prefers-color-scheme: dark) {
    .cs-brand span { color: var(--cs-on-primary); }
    .cs-brand .cs-mark { display: none; }
    .cs-brand .cs-mark-white { display: inline; }
}
.cs-nav { display: none; gap: 32px; }
/* Меню — 600, как меню лендинга: нажимаемое без веса 500 (брендбук, решение № 33) */
.cs-nav a { color: var(--cs-text-muted); font-size: 14px; font-weight: 600; text-decoration: none; transition: color .2s; }
.cs-nav a:hover, .cs-nav a.is-active { color: var(--cs-primary-text); }
@media (min-width: 768px) { .cs-nav { display: flex; } }
.cs-head-actions { display: flex; align-items: center; gap: 8px; }
.cs-icon-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; padding: 0; border: 0; border-radius: 9999px;
    background: transparent; color: var(--cs-text-muted); cursor: pointer;
}
.cs-icon-btn:hover { color: var(--cs-primary-text); background: var(--cs-surface-2); }
.cs-icon-btn svg { width: 20px; height: 20px; }
@media (max-width: 380px) { .cs-head-actions .cs-btn-sm { padding: 0 14px; font-size: 13px; } }

/* ── Верхний блок главной и раздела ────────────────────────────────────── */
/* Блоки чередуются, как на лендинге: верхний — surface, сетка карточек — bg, карточки на ней — surface */
.cs-hero { background: var(--cs-surface); padding: 48px 0 40px; text-align: center; }
@media (min-width: 768px) { .cs-hero { padding: 72px 0 56px; } }
.cs-hero-title {
    margin: 0; color: var(--cs-text); font-size: 36px; font-weight: 800; line-height: 1.1; letter-spacing: -.025em;
}
@media (min-width: 768px) { .cs-hero-title { font-size: 48px; } }
.cs-hero-title span { color: var(--cs-primary-text); }
.cs-hero-text { max-width: 640px; margin: 16px auto 0; color: var(--cs-text-muted); font-size: 17px; line-height: 1.6; }
@media (min-width: 768px) { .cs-hero-text { font-size: 19px; } }
.cs-sections {
    display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 28px;
}
@media (max-width: 639px) {
    /* на телефоне — одной строкой с прокруткой, как фильтры во вкладке «Клієнти» */
    .cs-sections { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; margin: 24px -16px 0; padding: 0 16px; scrollbar-width: none; }
    .cs-sections::-webkit-scrollbar { display: none; }
}

/* ── Сетка карточек ────────────────────────────────────────────────────── */
.cs-main { padding: 40px 0 64px; background: var(--cs-bg); border-top: 1px solid var(--cs-border); }
@media (min-width: 768px) { .cs-main { padding: 56px 0 96px; } }
.cs-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
@media (min-width: 640px) { .cs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .cs-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; } }

.cs-card { min-width: 0; }
.cs-card-link {
    display: flex; flex-direction: column; height: 100%;
    background: var(--cs-surface); border-radius: 16px; overflow: hidden;
    color: inherit; text-decoration: none;
    box-shadow: var(--cs-shadow-card);
    transition: box-shadow .2s, transform .2s, border-color .2s;
}
.cs-card-link:hover { box-shadow: var(--cs-shadow-raised); transform: translateY(-2px); }
.cs-card-image { aspect-ratio: 40 / 21; /* обложка 1200×630, как og:image */ background: var(--cs-primary-soft); overflow: hidden; }
.cs-card-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cs-card-body { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; flex-grow: 1; padding: 20px; }
.cs-card-title { margin: 0; color: var(--cs-text); font-size: 20px; font-weight: 800; line-height: 1.3; letter-spacing: -.01em; }
.cs-card-link:hover .cs-card-title { color: var(--cs-primary-text); }
.cs-card-excerpt {
    margin: 0; color: var(--cs-text-muted); font-size: 15px; line-height: 1.55;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.cs-card .cs-meta { margin-top: auto; padding-top: 4px; font-size: 13px; }

.cs-theme .pagination { margin-top: 48px; }

/* ── Статья ────────────────────────────────────────────────────────────── */
/* Статья читается на surface; «Читайте також» под ней — на bg */
.cs-main-post { padding-top: 32px; background: var(--cs-surface); border-top: 0; }
@media (min-width: 768px) { .cs-main-post { padding-top: 56px; } }
/* Ширина шапки статьи и CTA — как у основной колонки текста (.gh-canvas в Casper: --main) */
.cs-article-head,
.cs-article-end { width: min(720px, 100% - 2 * max(4vmin, 20px)); margin-left: auto; margin-right: auto; padding: 0; }
.cs-article-title {
    margin: 16px 0 0; color: var(--cs-text); font-size: 32px; font-weight: 800; line-height: 1.15; letter-spacing: -.025em;
}
@media (min-width: 768px) { .cs-article-title { font-size: 44px; } }
.cs-article-head .cs-meta { margin-top: 20px; padding-bottom: 28px; border-bottom: 1px solid var(--cs-border); }

.cs-content.gh-content { margin-top: 32px; font-family: var(--cs-font); font-size: 18px; line-height: 1.7; color: var(--cs-text); }
/* Переход по якорю (ссылка из приложения на шаг статьи, F-192): заголовок не прячется под закреплённой шапкой (64px) */
.cs-content.gh-content :is(h2, h3, h4)[id] { scroll-margin-top: 80px; }
@media (max-width: 767px) { .cs-content.gh-content { font-size: 17px; } }
.cs-content.gh-content > * + * { margin-top: 1.1em; }
.cs-content.gh-content h2,
.cs-content.gh-content h3,
.cs-content.gh-content h4 { font-family: var(--cs-font); color: var(--cs-text); font-weight: 800; letter-spacing: -.015em; line-height: 1.25; }
.cs-content.gh-content h2 { margin-top: 2em; font-size: 28px; }
.cs-content.gh-content h3 { margin-top: 1.8em; font-size: 23px; }
.cs-content.gh-content h4 { margin-top: 1.6em; font-size: 19px; }
@media (max-width: 767px) {
    .cs-content.gh-content h2 { font-size: 24px; }
    .cs-content.gh-content h3 { font-size: 21px; }
}
.cs-content.gh-content a { color: var(--cs-primary-text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; word-break: break-word; }
.cs-content.gh-content a:hover { text-decoration-thickness: 2px; }
.cs-content.gh-content strong { color: var(--cs-text); }
.cs-content.gh-content ul, .cs-content.gh-content ol { padding-left: 1.3em; }
.cs-content.gh-content li + li { margin-top: .4em; }
.cs-content.gh-content li::marker { color: var(--cs-primary-text); }
.cs-content.gh-content blockquote {
    margin-left: 0; padding: 4px 0 4px 20px; border-left: 3px solid var(--cs-primary); border-radius: 0;
    color: var(--cs-text); font-style: normal;
}
.cs-content.gh-content hr { border: 0; border-top: 1px solid var(--cs-border); }

/* Название кнопки или поля приложения в тексте — инлайн-код в редакторе Ghost.
   Выглядит как тональная кнопка приложения (primary-soft, primary-text), чтобы её узнавали на экране. */
.cs-content.gh-content :not(pre) > code {
    display: inline-block; padding: 1px 9px; margin: 0 1px; border: 0; border-radius: 9px;
    background: var(--cs-primary-soft); color: var(--cs-primary-text);
    font-family: var(--cs-font); font-size: .86em; font-weight: 700; line-height: 1.55; vertical-align: 1px;
    white-space: normal; word-break: normal;
}

/* ── Скриншоты ─────────────────────────────────────────────────────────────
   Рамку даёт тема, в статью кладутся голые скриншоты (решение владельца 08.10.2026).
   clientsync.js ставит класс по пропорциям картинки:
   cs-shot-phone — экран целиком (высота ≥ 1.9 ширины) → корпус телефона, как в #hero лендинга, в обеих темах;
   cs-shot-part  — фрагмент (модалка, кусок экрана) → тонкая рамка и скругление.
   Кадры светлые и в тёмной теме: корпус там обведён линией border, чтобы не сливался с фоном (решение владельца 28.10.2026).
   Без скрипта картинка просто узкая и скруглённая. Селекторы с .cs-content — сильнее
   старых правил из Code injection (.kg-image-card img { max-width: 300px }). */
.cs-content .kg-image-card { text-align: center; }
.cs-content .kg-image-card img { max-width: min(100%, 320px); height: auto; margin: 0 auto; border-radius: 16px; }
.cs-content .kg-image-card.cs-shot-phone img {
    width: 100%; max-width: 300px;
    border: 8px solid var(--cs-phone); border-radius: 40px;
    box-shadow: 0 25px 50px -12px #10182840;
    background: var(--cs-phone);
}
.cs-content .kg-image-card.cs-shot-part img {
    width: 100%; max-width: 420px;
    border: 1px solid var(--cs-border); border-radius: 16px;
    box-shadow: var(--cs-shadow-card);
}
.cs-content .kg-image-card figcaption,
.cs-content .kg-gallery-card figcaption {
    margin-top: 16px; color: var(--cs-text-muted); font-family: var(--cs-font); font-size: 14px; font-style: normal; line-height: 1.5; text-align: center;
}
.cs-content .kg-image-card figcaption i,
.cs-content .kg-image-card figcaption em { font-style: normal; }
/* Два экрана подряд на широком экране встают рядом (обёртку ставит clientsync.js) */
.cs-content .cs-shot-row { display: flex; flex-direction: column; gap: 32px; }
@media (min-width: 720px) {
    .cs-content .cs-shot-row { flex-direction: row; justify-content: center; align-items: flex-start; gap: 32px; }
}
.cs-content .kg-image-card + .kg-image-card,
.cs-content .cs-shot-row + *, .cs-content * + .cs-shot-row,
.cs-content * + .kg-image-card, .cs-content .kg-image-card + * { margin-top: 40px; }
/* В ряду — без отступа сверху, иначе второй экран съезжает ниже первого (правило выше даёт
   .kg-image-card + .kg-image-card отступ 40px) */
.cs-content .cs-shot-row > .kg-image-card,
.cs-content .cs-shot-row > .kg-image-card + .kg-image-card { margin: 0; }
@media (min-width: 720px) { .cs-content .cs-shot-row > .kg-image-card { flex: 0 1 300px; } }
/* Галерея Ghost: те же рамки телефона, помельче */
.cs-content .kg-gallery-image img { border: 6px solid var(--cs-phone); border-radius: 28px; max-width: 300px; }
@media (prefers-color-scheme: dark) {
    .cs-content .kg-image-card.cs-shot-phone img,
    .cs-content .kg-gallery-image img { box-shadow: 0 0 0 1px var(--cs-border); }
}

/* ── Блоки Ghost внутри статьи ─────────────────────────────────────────── */
/* «Важливо» — карточка Callout */
.cs-content .kg-callout-card {
    display: flex; gap: 12px; padding: 18px 20px; border-radius: 16px;
    background: var(--cs-primary-soft); color: var(--cs-text);
}
/* Кнопка внутри «Важливо»: фон карточки тот же, что у кнопки, — кнопка на surface с обводкой */
.cs-content.gh-content .kg-callout-card :not(pre) > code {
    background: var(--cs-surface); box-shadow: inset 0 0 0 1px var(--cs-border);
}
.cs-content .kg-callout-card.kg-callout-card-grey,
.cs-content .kg-callout-card.kg-callout-card-white { background: var(--cs-surface-2); color: var(--cs-text); }
.cs-content .kg-callout-card.kg-callout-card-yellow { background: var(--cs-warning-soft); color: var(--cs-text); }
.cs-content .kg-callout-card.kg-callout-card-red { background: var(--cs-danger-soft); color: var(--cs-text); }
.cs-content .kg-callout-card.kg-callout-card-green { background: var(--cs-success-soft); color: var(--cs-text); }
.cs-content .kg-callout-text { font-size: 16px; line-height: 1.6; }
.cs-content .kg-callout-emoji { font-size: 20px; line-height: 1.4; }
/* «Питання — відповідь» — карточка Toggle */
.cs-content .kg-toggle-card {
    padding: 0; border: 1px solid var(--cs-border); border-radius: 12px; background: var(--cs-surface); box-shadow: none;
}
.cs-content .kg-toggle-card + .kg-toggle-card { margin-top: 12px; }
.cs-content .kg-toggle-heading { padding: 16px 20px; cursor: pointer; }
.cs-content .kg-toggle-heading-text { font-family: var(--cs-font); font-size: 17px; font-weight: 700; color: var(--cs-text); }
.cs-content .kg-toggle-heading-text { margin: 0; }
.cs-content .kg-toggle-content { padding: 0 20px; color: var(--cs-text); font-size: 16px; }
.cs-content .kg-toggle-card[data-kg-toggle-state="open"] .kg-toggle-content { padding-bottom: 18px; }
.cs-content .kg-toggle-card-icon { color: var(--cs-primary-text); }

/* Старый CTA, вписанный в каждую статью HTML-карточкой: теперь CTA ставит тема (partials/cs-cta.hbs).
   Прячем старый, чтобы не было двух подряд, пока статьи не переписаны. */
.cs-content div[style*="linear-gradient(135deg, #2884D3"] { display: none !important; }

/* ── CTA и «Читайте також» ─────────────────────────────────────────────── */
.cs-article-end { margin-top: 56px; }
.cs-cta {
    padding: 40px 24px; border-radius: 24px; text-align: center;
    background: var(--cs-primary);
    box-shadow: var(--cs-shadow-raised);
}
.cs-cta-title { margin: 0; color: var(--cs-on-primary); font-size: 26px; font-weight: 800; line-height: 1.25; letter-spacing: -.015em; }
.cs-cta-text { max-width: 480px; margin: 12px auto 24px; color: var(--cs-on-primary); font-size: 17px; line-height: 1.55; }

.cs-related { padding: 56px 0 72px; margin-top: 0; background: var(--cs-bg); border-top: 1px solid var(--cs-border); }
.cs-related-title { margin: 0 0 28px; color: var(--cs-text); font-size: 28px; font-weight: 800; letter-spacing: -.02em; }

/* ── Подвал ────────────────────────────────────────────────────────────── */
.cs-foot { margin-top: 0; padding: 48px 0 24px; background: var(--cs-foot-bg); color: var(--cs-foot-muted); border-top: 1px solid var(--cs-foot-border); }
.cs-foot-top { display: flex; flex-direction: column; gap: 48px; }
@media (min-width: 768px) { .cs-foot-top { flex-direction: row; justify-content: space-between; } }
.cs-foot-brand { display: flex; flex-direction: column; gap: 16px; max-width: 384px; }
.cs-foot-tagline { margin: 0; color: var(--cs-foot-muted); font-size: 14px; line-height: 1.625; }
.cs-foot-social { display: flex; gap: 12px; }
.cs-foot-social a { width: 44px; height: 44px; border-radius: 50%; background: var(--cs-foot-surface); color: var(--cs-foot-muted);
    display: flex; align-items: center; justify-content: center; transition: color .15s; }
.cs-foot-social a:hover { color: var(--cs-foot-text); }
.cs-foot-social svg { width: 20px; height: 20px; fill: currentColor; }
.cs-foot-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; font-size: 14px; }
.cs-foot-col p { margin: 0 0 4px; color: var(--cs-foot-text); font-weight: 600; }
.cs-foot-col a { display: block; padding: 10px 0; color: var(--cs-foot-muted); text-decoration: none; }
.cs-foot-col a:hover { color: var(--cs-foot-text); }
@media (min-width: 768px) { .cs-foot-col a { padding: 6px 0; } }  /* на компьютере плотнее, как md:py-1.5 у лендинга */
.cs-foot-bottom { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--cs-foot-border); color: var(--cs-foot-muted); font-size: 12px; }

/* Подпись в окне просмотра галереи — у Casper 500; веса 500 в брендбуке нет (решение № 33) */
.pswp__caption__center .post-caption-title { font-weight: 600; }

/* Поиск Ghost (sodo-search) берёт акцентный цвет из настроек — #2481cc, ничего не нужно */

/* ── Страницы ошибок ───────────────────────────────────────────────────── */
.cs-error-code { margin: 0 0 8px; color: var(--cs-brand); font-size: 64px; font-weight: 800; line-height: 1; letter-spacing: -.03em; }
@media (min-width: 768px) { .cs-error-code { font-size: 88px; } }
.cs-brand-center { justify-content: center; margin-bottom: 40px; }