/* ══════════════════════════════════════════════════════════════════════════
   Стаття блогу (single.php) — /blog/{slug}/

   Портовано з `blog-page-template/blog-article.css` замовника — ФІНАЛЬНИЙ
   стан каскаду: хіро в кінці файлу перевизначене «як на сторінках галузей»
   (повноширинне фото з розтяжкою), а частина базових правил перекрита
   пізнішими медіа ≥821 / ≤820 / ≤600.

   ЩО НЕ ПЕРЕНОСИЛОСЬ:
     .article-toc  — у розмітці статті змісту немає (правила мертві);
     .breadcrumbs* — global/breadcrumbs (вигляд сайту).

   РОЗМІТКА vs ШАБЛОН:
     тіло статті        — ОДНА секція; блоки всередині тексту — <div>, а не
                          вкладені <section> (у шаблоні section у section);
     галочки переліку   — CSS-маска img/check.svg замість <svg> у тексті:
                          вміст статті пише редактор, і inline-SVG там
                          не переживе фільтри WordPress;
     номери етапів      — CSS-лічильник (у шаблоні <span>01</span>);
     .article-content   — стилізовані й звичайні теги редактора (h2, h3, p,
                          ul, ol, blockquote, img), щоб проста стаття без
                          жодних класів виглядала правильно.

   01 · Оболонка        03 · Текст статті      05 · CTA
   02 · Хіро            04 · Послуги           06 · Адаптив
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 01 · Оболонка ──────────────────────────────────────────────────────── */
.article-page {
    overflow-x:  clip;
    background:  radial-gradient(ellipse 55% 22% at 86% 7%, rgba(39, 104, 199, .22), transparent 72%),
                 var(--color-bg);
    color:       var(--color-text);
}


:where(.article-page) h1,
:where(.article-page) h2,
:where(.article-page) h3,
:where(.article-page) p { margin: 0; }


.article-page .is-accent {
    background-image:        var(--gradient-accent);
    -webkit-background-clip: text;
    background-clip:         text;
    color:                   transparent;
    -webkit-text-fill-color: transparent;
}


.article-page .btn {
    max-width:   100%;
    height:      auto;
    white-space: normal;
}


.btn--primary {
    font-size:      var(--fs-button);
    line-height:    var(--lh-button);
    letter-spacing: var(--ls-button);
}


.btn--lg { min-height: 56px; }


.article-page .btn__label { min-width: 0; }


.article-page .btn .icon { flex-shrink: 0; }


/* ── 02 · Хіро ──────────────────────────────────────────────────────────── */
.article-hero {
    position:   relative;
    isolation:  isolate;
    overflow:   hidden;
    min-height: 760px;
    padding:    54px 0 78px;
    background: #06183b;
}


.article-hero::before {
    content:       "";
    position:      absolute;
    z-index:       -1;
    top:           9%;
    right:         -12%;
    width:         min(60vw, 840px);
    aspect-ratio:  1;
    border-radius: 50%;
    background:    rgba(63, 110, 220, .1);
    filter:        blur(90px);
}


/* Записи без фото (анонси): без знімка праве півполе хіро порожнє, тож
   висоту під нього не тримаємо, а текст займає всю ширину. */
/* (0,2,0): інакше правило хіро в медіа 821–1100 повертає min-height 720. */
.article-page .article-hero--no-image {
    min-height: 0;
    padding:    54px 0 64px;
}


.article-hero--no-image .article-hero__grid { min-height: 0; }


.article-hero--no-image .article-hero__copy { width: 100%; }



.article-hero > .container { position: static; }



.article-hero__grid {
    display:    block;
    min-height: 490px;
}


.article-hero__copy {
    position:     relative;
    z-index:      3;
    width:        min(57%, 760px);
    min-width:    0;
    padding-left: var(--container-padding);
}


.article-hero__title {
    max-width:      790px;
    margin:         24px 0 28px;
    /* Шкала з оновленого шаблону: трохи більший крок, ніж 4.4vw. */
    font-size:      clamp(34px, calc(25px + 3vw), 70px);
    font-weight:    300;
    line-height:    1.08;
    letter-spacing: -.045em;
    text-wrap:      balance;
}


.article-hero__lead {
    max-width:   720px;
    font-size:   clamp(17px, 1.3vw, 20px);
    line-height: 1.75;
    color:       var(--color-text-soft);
}


.article-meta {
    display:     flex;
    flex-wrap:   wrap;
    gap:         12px 24px;
    margin-top:  34px;
    padding-top: 22px;
    border-top:  1px solid rgba(184, 209, 255, .16);
    font-size:   13px;
    color:       var(--color-muted);
}


.article-meta__item { position: relative; }


.article-meta__item:not(:last-child)::after {
    content:       "";
    position:      absolute;
    top:           50%;
    right:         -13px;
    width:         3px;
    height:        3px;
    border-radius: 50%;
    background:    var(--color-sky);
}


/* Фото на всю праву половину хіро, з розтяжкою в колір секції. */
.article-hero__figure {
    position:   absolute;
    z-index:    0;
    inset:      0 0 0 35%;
    overflow:   hidden;
    margin:     0;
    background: #071b39;
}


.article-hero__figure::before {
    content:        "";
    position:       absolute;
    z-index:        1;
    inset:          0;
    pointer-events: none;
    background:     linear-gradient(90deg, #06183b 0%, rgba(6, 24, 59, .95) 12%, rgba(6, 24, 59, .68) 31%, rgba(6, 24, 59, .14) 58%, transparent 75%),
                    linear-gradient(180deg, rgba(6, 24, 59, .7) 0%, transparent 18%, transparent 67%, #06183b 100%);
}


.article-hero__figure::after {
    content:        "";
    position:       absolute;
    inset:          0;
    pointer-events: none;
    background:     radial-gradient(ellipse 72% 78% at 78% 50%, transparent 35%, rgba(6, 24, 59, .08) 64%, #06183b 100%);
}


.article-hero__image {
    position:        absolute;
    inset:           0;
    width:           100%;
    height:          100%;
    object-fit:      cover;
    object-position: 58% 48%;
    filter:          saturate(.9) contrast(1.04);
}


.article-hero__caption {
    position:      absolute;
    right:         clamp(30px, 5vw, 86px);
    bottom:        48px;
    left:          auto;
    z-index:       1;
    display:       grid;
    justify-items: end;
    gap:           7px;
    max-width:     430px;
    padding:       18px 0 18px 28px;
    border-left:   1px solid rgba(119, 198, 255, .6);
    font-size:     13px;
    color:         var(--color-text-soft);
    text-align:    right;
    text-shadow:   0 2px 14px #00132e;
}


.article-hero__caption-label {
    font-size:      12px;
    font-weight:    600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color:          var(--color-sky);
}


/* Компоненти вмісту запису (картки, етапи, врізки, цитати, чеклісти) винесено
   у спільний css/blocks/article-content.css — він же підключається в редакторі.
   Тут лишилась «обгортка» сторінки: хіро, тло тексту, послуги, CTA й адаптив. */

/* ── 03 · Текст статті ──────────────────────────────────────────────────── */
.article-body {
    padding:    clamp(70px, 9vw, 132px) 0;
    background: radial-gradient(ellipse 45% 24% at 12% 48%, rgba(29, 87, 169, .12), transparent 75%),
                linear-gradient(180deg, #031c45, #061b3e 72%, #031c45);
}


.article-layout {
    position:  relative;
    display:   block;
    max-width: 920px;
}


.article-content { min-width: 0; }


:where(.article-content) h2 {
    max-width:      760px;
    margin-bottom:  30px;
    font-size:      clamp(31px, 3.2vw, 48px);
    font-weight:    300;
    line-height:    1.16;
    letter-spacing: -.035em;
    text-wrap:      balance;
}


:where(.article-content) h3 {
    margin:         34px 0 14px;
    font-size:      clamp(21px, 1.8vw, 26px);
    font-weight:    500;
    line-height:    1.3;
    letter-spacing: -.02em;
}


:where(.article-content) p {
    margin:      0 0 22px;
    font-size:   clamp(16px, 1.2vw, 18px);
    line-height: 1.82;
    color:       #c4d0e8;
}


:where(.article-content) p:last-child { margin-bottom: 0; }


/* Звичайні списки редактора: reset.css робить li блоками. Списки шаблону
   (перелік вимог, етапи) мають власний кегль — виключаємо їх звідси. */
.article-content ul:not([class]),
.article-content ol:not([class]) {
    margin:       0 0 22px;
    padding-left: 22px;
    font-size:    clamp(16px, 1.2vw, 18px);
    line-height:  1.82;
    color:        #c4d0e8;
    list-style:   disc;
}


.article-content ol:not([class]) { list-style: decimal; }


.article-content :is(ul, ol):not([class]) li {
    display: list-item;
    padding: 3px 0;
}


.article-content :is(ul, ol):not([class]) li::marker { color: var(--color-sky); }


.article-content img {
    display:       block;
    max-width:     100%;
    height:        auto;
    margin:        32px 0;
    border-radius: 16px;
}


.article-content a {
    color:                     #61b8ff;
    font-weight:               500;
    text-decoration-line:      underline;
    text-decoration-color:     rgba(97, 184, 255, .42);
    text-decoration-thickness: 1px;
    text-underline-offset:     .2em;
    transition:                color var(--transition), text-decoration-color var(--transition);
}


.article-content a:visited { color: #61b8ff; }


.article-content a:hover {
    color:                 #a9dcff;
    text-decoration-color: currentColor;
}


.article-content a:focus-visible {
    outline:               2px solid #61b8ff;
    outline-offset:        3px;
    border-radius:         2px;
    color:                 #c9eaff;
    text-decoration-color: currentColor;
}


/* Блок статті: між блоками — лінія. */










/* wpautop загортає текст цитати в <p> — кегль і колір мають успадкуватись. */


/* ── Картка з переліком ─────────────────────────────────────────────────
   Розмітка в редакторі:
       <div class="requirements-card">
         <p class="requirements-card__title">Назва</p>
         <ul class="article-checklist"><li>пункт;</li>…</ul>
       </div>
   Іконку, плашку під нею й галочки малює CSS — у тексті запису inline-SVG
   не виживає (фільтри WordPress його вирізають). */






/* Плашка іконки (::before) і сама іконка (::after) — двома шарами, бо
   mask обрізав би і фон плашки. */




/* ── Перелік із галочками ───────────────────────────────────────────────── */






/* Кружечок під галочку. */


/* Сама галочка — маска з іконки теми. */


/* ── Примітка під карткою ───────────────────────────────────────────────── */


/* ── Етапи 01…04 ────────────────────────────────────────────────────────
   Розмітка: <ol class="implementation-flow">
               <li><strong>Назва</strong>Пояснення</li>…
             </ol>
   Номер — лічильник, іконка — маска, з’єднувальна риска — псевдоелемент. */




/* Номер у правому верхньому куті. */


/* Плашка іконки. */




/* Іконка поверх плашки: своя на кожен етап. */










/* З’єднувальна риска між картками. */


/* ── Врізка «Досвід Ziggurat» і висновок ────────────────────────────────── */






















/* Іконка висновку — тепла. */






/* ── Принципи 01…06 у висновку ──────────────────────────────────────────── */








/* ── 04 · Послуги ───────────────────────────────────────────────────────── */
.article-services {
    position:   relative;
    isolation:  isolate;
    overflow:   hidden;
    padding:    clamp(70px, 9vw, 124px) 0;
    background: linear-gradient(135deg, #10183b, #071838);
}


.article-services::before {
    content:    "";
    position:   absolute;
    z-index:    -1;
    inset:      0;
    background: radial-gradient(ellipse 45% 75% at 85% 45%, rgba(59, 109, 215, .13), transparent 70%);
}


.article-services__title {
    max-width:      950px;
    margin-top:     24px;
    font-size:      clamp(31px, 3.2vw, 48px);
    font-weight:    300;
    line-height:    1.16;
    letter-spacing: -.035em;
    text-wrap:      balance;
}


.article-services__grid {
    display:               grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap:                   22px;
    margin-top:            46px;
}


.article-service-card {
    position:                relative;
    isolation:               isolate;
    overflow:                hidden;
    display:                 flex;
    flex-direction:          column;
    align-items:             flex-start;
    min-height:              330px;
    padding:                 clamp(26px, 3.4vw, 42px);
    border:                  1px solid rgba(169, 194, 255, .17);
    border-radius:           22px;
    background:              linear-gradient(140deg, rgba(43, 75, 137, .38), rgba(9, 29, 64, .75));
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter:         blur(12px);
}


.article-service-card::before {
    content:       "";
    position:      absolute;
    z-index:       -1;
    right:         -10%;
    bottom:        -30%;
    width:         60%;
    aspect-ratio:  1;
    border-radius: 50%;
    background:    rgba(61, 126, 238, .16);
    filter:        blur(46px);
}


.article-service-card::after {
    content:    "";
    position:   absolute;
    inset:      0 22px auto;
    height:     1px;
    background: var(--gradient-line);
}


.article-service-card__number {
    font-size:      12px;
    letter-spacing: .12em;
    color:          var(--color-sky);
}


.article-service-card__title {
    margin:      34px 0 16px;
    font-size:   clamp(24px, 2.3vw, 34px);
    font-weight: 300;
    line-height: 1.2;
}


.article-service-card__text {
    max-width:   530px;
    margin:      0 0 28px;
    font-size:   16px;
    line-height: 1.7;
    color:       var(--color-text-soft);
}


.article-page .article-service-card__btn {
    width:       100%;
    min-height:  54px;
    margin-top:  auto;
    padding:     15px 22px;
    text-align:  center;
}


/* ── 05 · CTA ───────────────────────────────────────────────────────────── */
/* Банер лежить у контейнері (у шаблоні ним був сам .container і на вузьких
   екранах він прилягав до країв), тож бічні поля сторінки збережено. */
.article-cta {
    padding:    clamp(72px, 9vw, 126px) 0;
    background: radial-gradient(ellipse 55% 95% at 50% 110%, rgba(36, 112, 216, .28), transparent 72%),
                var(--color-bg);
}


.article-cta__inner {
    position:              relative;
    display:               grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, .8fr);
    gap:                   clamp(50px, 9vw, 140px);
    align-items:           end;
    padding:               clamp(34px, 5vw, 64px);
    border:                1px solid rgba(184, 209, 255, .18);
    border-radius:         24px;
    background:            linear-gradient(135deg, rgba(17, 54, 111, .5), rgba(6, 25, 58, .5));
    box-shadow:            0 28px 72px rgba(0, 7, 30, .24);
}


.article-cta__title {
    max-width:      780px;
    margin-top:     24px;
    font-size:      clamp(31px, 3.2vw, 48px);
    font-weight:    300;
    line-height:    1.16;
    letter-spacing: -.035em;
    text-wrap:      balance;
}


.article-cta__text {
    margin:      0 0 30px;
    font-size:   17px;
    line-height: 1.75;
    color:       var(--color-text-soft);
}


.article-page .article-cta__btn {
    width:      100%;
    max-width:  480px;
    min-height: 56px;
    padding:    16px 24px;
    text-align: center;
}


/* ── 06 · Адаптив ───────────────────────────────────────────────────────── */
@media (min-width: 821px) and (max-width: 1100px) {
.article-hero { min-height: 720px; }

    .article-hero__copy { width: 63%; }

    .article-hero__figure { left: 30%; }

    .article-hero__title { font-size: clamp(44px, 5.3vw, 60px); }
}

@media (max-width: 1050px) {
.article-layout { max-width: 900px; }

    .article-cta__inner {
        grid-template-columns: 1fr;
        gap:                   32px;
    }
}

@media (max-width: 820px) {
.article-hero {
        min-height: 0;
        padding:    34px 0 0;
        background: linear-gradient(180deg, #06183b 0%, #06183b 82%, var(--color-bg) 100%);
    }

    .article-hero::before {
        right: -30%;
        width: 90vw;
    }

    .article-hero__grid {
        display:        flex;
        flex-direction: column;
        gap:            38px;
        min-height:     0;
    }

    .article-hero__copy {
        width:        100%;
        padding-left: 0;
    }

    .article-hero__figure {
        position:   relative;
        inset:      auto;
        align-self: flex-start;
        width:      calc(100% + (2 * var(--container-padding)));
        min-height: 420px;
        margin:     0 0 0 calc(-1 * var(--container-padding));
    }

    .article-hero__figure::before {
        background: linear-gradient(180deg, #06183b 0%, transparent 22%, transparent 70%, var(--color-bg) 100%),
                    linear-gradient(90deg, #06183b 0%, transparent 20%, transparent 82%, #06183b 100%);
    }

    .article-hero__figure::after { background: linear-gradient(0deg, rgba(3, 20, 48, .65), transparent 42%); }

    .article-hero__caption {
        right:           var(--container-padding);
        bottom:          32px;
        left:            var(--container-padding);
        display:         flex;
        align-items:     center;
        justify-content: space-between;
        gap:             20px;
        max-width:       none;
        padding:         0;
        border-left:     0;
        text-align:      left;
    }
}

@media (max-width: 760px) {
.article-hero__title { font-size: clamp(36px, 10vw, 50px); }

    .article-hero__caption {
        align-items:    flex-start;
        flex-direction: column;
        gap:            6px;
    }
}

@media (max-width: 600px) {
.article-hero { padding-top: 24px; }

    /* Крихти на телефоні — один рядок із прокруткою, «Головна» ховається. */
    
    .article-hero .breadcrumbs__item:first-child { display: none; }

    .article-hero .breadcrumbs__list {
        flex-wrap:       nowrap;
        overflow-x:      auto;
        scrollbar-width: none;
        white-space:     nowrap;
    }

    .article-hero .breadcrumbs__list::-webkit-scrollbar { display: none; }

    .article-hero .breadcrumbs__link {
        padding:   3px 4px;
        font-size: 12px;
    }

    .article-hero__grid { gap: 26px; }

    .article-hero .section-eyebrow {
        align-items:    flex-start;
        font-size:      11px;
        line-height:    1.55;
        letter-spacing: 1.2px;
    }

    .article-hero .section-dot {
        flex:       0 0 auto;
        margin-top: 4px;
    }

    .article-hero__title {
        margin:         20px 0 22px;
        font-size:      clamp(34px, 9.4vw, 40px);
        line-height:    1.08;
        letter-spacing: -.035em;
    }

    .article-hero__lead {
        font-size:   16px;
        line-height: 1.65;
    }

    .article-meta {
        gap:         9px 20px;
        margin-top:  26px;
        padding-top: 18px;
        font-size:   12px;
        line-height: 1.4;
    }

    .article-meta__item:last-child { flex-basis: 100%; }

    .article-hero__figure { min-height: clamp(270px, 75vw, 330px); }

    .article-hero__image { object-position: 58% center; }

    .article-hero__caption {
        right:     16px;
        bottom:    20px;
        left:      16px;
        gap:       5px;
        font-size: 12px;
        line-height: 1.45;
    }

    .article-hero__caption-label { font-size: 10px; }

    .article-body { padding: 48px 0 60px; }

    

    

    

    :where(.article-content) h2 {
        margin-bottom: 22px;
        font-size:     clamp(28px, 8.7vw, 36px);
        line-height:   1.15;
    }

    :where(.article-content) p,
    .article-content ul:not([class]),
    .article-content ol:not([class]) {
        margin-bottom: 18px;
        font-size:     16px;
        line-height:   1.7;
    }

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    .article-services { padding: 58px 0; }

    .article-services__title {
        margin-top: 18px;
        font-size:  32px;
    }

    .article-services__grid {
        gap:        16px;
        margin-top: 30px;
    }

    .article-service-card { padding: 24px 20px; }

    .article-service-card__title {
        margin:    24px 0 12px;
        font-size: 27px;
    }

    .article-service-card__text {
        font-size:   15px;
        line-height: 1.65;
    }

    .article-page .article-service-card__btn {
        padding:   14px 18px;
        font-size: 14px;
    }

    .article-cta { padding: 58px 0; }

    .article-cta__inner {
        gap:     24px;
        padding: 26px 20px;
    }

    .article-cta__title {
        margin-top: 18px;
        font-size:  32px;
    }

    .article-cta__text {
        margin-bottom: 24px;
        font-size:     15px;
        line-height:   1.7;
    }

    .article-page .article-cta__btn {
        padding:   15px 18px;
        font-size: 14px;
    }
}

@media (max-width: 520px) {
/* Крапки-роздільники в мета-рядку зникають. Специфічність має збігатися
       з базовим правилом (:not(:last-child) додає свою вагу), інакше не діє. */
    .article-meta__item:not(:last-child)::after { content: none; }

    

    


    

    .article-service-card { min-height: 0; }

    .article-cta__inner { border-radius: 17px; }

    .article-page .article-service-card__btn,
    .article-page .article-cta__btn { max-width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
.article-content a { transition: none; }
}

@media (max-width: 768px) {
}


/* 2026-10-12: related service cards must stay readable on phones. */
@media (max-width: 767.98px) {
    .article-page .article-services__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 18px;
    }
    .article-page .article-service-card {
        min-width: 0;
        min-height: 0;
        height: auto;
    }
    .article-page .article-service-card__title {
        width: 100%;
        word-break: normal;
        overflow-wrap: normal;
    }
    .article-page .article-service-card__btn {
        box-sizing: border-box;
        width: 100%;
        max-width: none;
        min-width: 0;
        min-height: 56px;
        height: auto;
        align-self: stretch;
        padding: 15px 18px;
    }
    .article-page .article-service-card__btn .btn__label {
        min-width: 0;
        white-space: normal;
        word-break: normal;
        overflow-wrap: normal;
        line-height: 1.4;
    }
}