/* ══════════════════════════════════════════════════════════════════════════
   Вміст блогового запису — СПІЛЬНА система стилів.

   Цей файл підключається двічі:
     • на сторінці запису (single.php) разом із css/pages/single.css;
     • у редакторі WordPress (add_editor_style у functions.php),
   тому селектори тут НЕ прив’язані ні до .article-content, ні до .article-page.

   Що клієнт пише в редакторі, щоб отримати оформлення:

     Блок тексту          <div class="article-section">…</div>
     Надзаголовок секції  <p class="article-kicker">01 / Принцип</p>
     Цитата               <blockquote class="article-quote">…</blockquote>
     Картка з переліком   <div class="requirements-card">
                            <p class="requirements-card__title">Назва</p>
                            <ul class="article-checklist"><li>пункт;</li>…</ul>
                          </div>
     Примітка             <p class="article-note">…</p>
     Етапи 01…04          <ol class="implementation-flow">
                            <li><strong>Назва</strong>Пояснення</li>…
                          </ol>
     Врізка «Досвід»      <div class="article-section article-experience">
                            <div class="article-feature__heading">надзаголовок + H2</div>
                            <div class="article-feature__copy">абзаци</div>
                          </div>
     Висновок             <div class="article-section article-conclusion">
                            <div class="article-conclusion__heading">надзаголовок + H2</div>
                            абзаци + <ol class="readiness-principle"><li>…</li></ol>
                          </div>

   Усі іконки, номери й галочки малює CSS (маски з img/*.svg і лічильники) —
   у тексті запису inline-SVG не виживає, його вирізають фільтри WordPress.
   Готові заготовки цих блоків лежать у бібліотеці патернів редактора
   (inc/patterns.php) — клієнту досить вставити патерн і замінити текст.
   ══════════════════════════════════════════════════════════════════════════ */

.article-section {
    scroll-margin-top: 24px;
    padding:           0 0 clamp(66px, 8vw, 100px);
}
.article-section + .article-section {
    position:    relative;
    padding-top: clamp(66px, 8vw, 100px);
}
.article-section + .article-section::before {
    content:    "";
    position:   absolute;
    inset:      0 0 auto;
    height:     1px;
    background: var(--gradient-line);
}
/* Комфортна довжина рядка — як у шаблоні (врізки й висновок мають свою
   сітку, тому їх це правило не стосується). */
.article-section:not(.article-experience):not(.article-conclusion) > p { max-width: 72ch; }

/* Надзаголовок блоку. У шаблоні клас задає 12px жовтим, але в рендері його
   перебиває правило абзаца (.article-content p), тож на сторінці він виглядає
   як великий сірий капс — тут записано саме те, що видно в рефі. */
.article-kicker {
    margin:         0 0 22px;
    font-size:      clamp(16px, 1.2vw, 18px);
    font-weight:    600;
    line-height:    1.82;
    letter-spacing: .14em;
    text-transform: uppercase;
    color:          #c4d0e8;
}
.article-quote {
    margin:         38px 0 0;
    padding:        28px 32px 28px 38px;
    border:         1px solid rgba(119, 198, 255, .18);
    border-left:    2px solid var(--color-sky);
    border-radius:  0 16px 16px 0;
    background:     linear-gradient(110deg, rgba(36, 84, 160, .2), rgba(10, 30, 66, .35));
    font-size:      clamp(18px, 1.7vw, 23px);
    font-weight:    300;
    line-height:    1.65;
    color:          var(--color-text);
}
.article-quote p {
    margin:      0;
    font-size:   inherit;
    line-height: inherit;
    color:       inherit;
}
.requirements-card {
    position:                relative;
    isolation:               isolate;
    overflow:                hidden;
    margin-top:              38px;
    padding:                 clamp(26px, 4vw, 40px);
    border:                  1px solid rgba(142, 194, 255, .25);
    border-radius:           20px;
    background:              radial-gradient(circle at 100% 0, rgba(62, 130, 238, .15), transparent 36%),
                             linear-gradient(135deg, rgba(35, 79, 143, .34), rgba(5, 28, 66, .72));
    box-shadow:              inset 0 1px 0 rgba(255, 255, 255, .08), 0 22px 58px rgba(0, 9, 34, .2);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter:         blur(12px);
}
.requirements-card::before {
    content:    "";
    position:   absolute;
    inset:      0 24px auto;
    height:     1px;
    background: var(--gradient-line);
}
.requirements-card__title {
    position:       relative;
    display:        flex;
    align-items:    center;
    min-height:     48px;
    margin:         0 0 22px;
    padding-left:   63px;
    font-size:      15px;
    font-weight:    600;
    letter-spacing: .055em;
    text-transform: uppercase;
    color:          var(--color-text);
}
.requirements-card__title::before,
.article-feature__heading::before,
.article-conclusion__heading::before {
    content:       "";
    position:      absolute;
    top:           0;
    left:          0;
    width:         48px;
    height:        48px;
    border:        1px solid rgba(119, 198, 255, .32);
    border-radius: 14px;
    background:    linear-gradient(145deg, rgba(45, 112, 207, .24), rgba(8, 35, 76, .58));
    box-shadow:    inset 0 1px 0 rgba(255, 255, 255, .08), 0 14px 30px -20px rgba(58, 151, 255, .82);
}
.requirements-card__title::after,
.article-feature__heading::after,
.article-conclusion__heading::after {
    content:             "";
    position:            absolute;
    top:                 12px;
    left:                12px;
    width:               24px;
    height:              24px;
    background:          var(--color-sky);
    -webkit-mask-image:  url("../../img/document-check.svg");
    mask-image:          url("../../img/document-check.svg");
    -webkit-mask-size:   contain;
    mask-size:           contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat:         no-repeat;
}
.article-checklist {
    display:               grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap:                   0 30px;
    margin:                0;
    padding:               0;
    font-size:             16px;
    line-height:           1.6;
    list-style:            none;
}
.article-checklist li {
    position:              relative;
    display:               grid;
    grid-template-columns: 26px 1fr;
    gap:                   11px;
    align-items:           start;
    min-width:             0;
    padding:               16px 0;
    border-top:            1px solid rgba(184, 209, 255, .12);
    font-size:             15px;
    line-height:           1.6;
    color:                 var(--color-text-soft);
    transition:            color var(--transition);
}
.article-checklist li:hover { color: #eef5ff; }
.article-checklist li::before {
    content:       "";
    width:         24px;
    height:        24px;
    margin-top:    1px;
    border:        1px solid rgba(119, 198, 255, .28);
    border-radius: 50%;
    background:    rgba(36, 103, 180, .16);
}
.article-checklist li::after {
    content:             "";
    position:            absolute;
    top:                 21px;
    left:                5px;
    width:               15px;
    height:              15px;
    background:          var(--color-sky);
    -webkit-mask-image:  url("../../img/check.svg");
    mask-image:          url("../../img/check.svg");
    -webkit-mask-size:   contain;
    mask-size:           contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat:         no-repeat;
}
.article-note {
    margin-top:   26px;
    padding-left: 18px;
    border-left:  1px solid rgba(119, 198, 255, .48);
    font-size:    15px;
    color:        var(--color-sky);
}
.implementation-flow {
    display:               grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap:                   12px;
    margin:                42px 0 8px;
    padding:               0;
    font-size:             16px;
    line-height:           1.6;
    list-style:            none;
    counter-reset:         flow;
}
.implementation-flow li {
    position:      relative;
    isolation:     isolate;
    display:       block;
    min-height:    192px;
    padding:       20px;
    border:        1px solid rgba(137, 190, 255, .2);
    border-radius: 16px;
    /* Верхня світла риска — шаром фону, бо обидва псевдоелементи зайняті. */
    background:    linear-gradient(90deg, transparent, rgba(119, 198, 255, .55), transparent) no-repeat 16px 0 / calc(100% - 32px) 1px,
                   linear-gradient(155deg, rgba(32, 75, 139, .34), rgba(7, 28, 63, .7));
    box-shadow:    inset 0 1px 0 rgba(255, 255, 255, .05), 0 18px 36px rgba(0, 9, 31, .14);
}
.implementation-flow li::before {
    content:           counter(flow, decimal-leading-zero);
    counter-increment: flow;
    position:          absolute;
    top:               18px;
    right:             18px;
    font-size:         10px;
    letter-spacing:    .13em;
    color:             rgba(174, 213, 255, .78);
}
.implementation-flow li::after {
    content:       "";
    position:      absolute;
    top:           20px;
    left:          20px;
    width:         44px;
    height:        44px;
    border:        1px solid rgba(119, 198, 255, .32);
    border-radius: 12px;
    background:    linear-gradient(145deg, rgba(45, 112, 207, .24), rgba(8, 35, 76, .58));
    box-shadow:    inset 0 1px 0 rgba(255, 255, 255, .08), 0 14px 30px -20px rgba(58, 151, 255, .82);
}
.implementation-flow strong {
    display:     block;
    margin:      66px 0 9px;
    font-size:   17px;
    font-weight: 600;
    color:       var(--color-text);
}
.implementation-flow strong::before {
    content:             "";
    position:            absolute;
    z-index:             1;
    top:                 30px;
    left:                30px;
    width:               24px;
    height:              24px;
    background:          var(--color-sky);
    -webkit-mask-image:  url("../../img/document-check.svg");
    mask-image:          url("../../img/document-check.svg");
    -webkit-mask-size:   contain;
    mask-size:           contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat:         no-repeat;
}
.implementation-flow li:nth-child(2) strong::before {
    -webkit-mask-image: url("../../img/layers-stack.svg");
    mask-image:         url("../../img/layers-stack.svg");
}
.implementation-flow li:nth-child(3) strong::before {
    -webkit-mask-image: url("../../img/conflict-check.svg");
    mask-image:         url("../../img/conflict-check.svg");
}
.implementation-flow li:nth-child(4) strong::before {
    -webkit-mask-image: url("../../img/constructability.svg");
    mask-image:         url("../../img/constructability.svg");
}
.implementation-flow li {
    font-size:   13px;
    line-height: 1.55;
    color:       #9eaccb;
}
.implementation-flow li:not(:last-child) strong::after {
    content:    "";
    position:   absolute;
    z-index:    2;
    top:        45px;
    right:      -13px;
    width:      13px;
    height:     1px;
    background: linear-gradient(90deg, rgba(119, 198, 255, .22), rgba(119, 198, 255, .85));
}
.article-section.article-experience {
    display:                 grid;
    grid-template-columns:   minmax(250px, .78fr) minmax(0, 1.22fr);
    align-items:             start;
    gap:                     clamp(36px, 6vw, 72px);
    margin-top:              clamp(30px, 3.5vw, 44px);
    padding:                 clamp(42px, 4.5vw, 56px);
    border:                  1px solid rgba(146, 193, 255, .24);
    border-radius:           24px;
    background:              radial-gradient(circle at 3% 4%, rgba(79, 145, 255, .24), transparent 38%),
                             linear-gradient(135deg, rgba(25, 61, 121, .84), rgba(6, 27, 63, .9));
    box-shadow:              inset 0 1px 0 rgba(255, 255, 255, .07), 0 26px 70px rgba(0, 8, 31, .23);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter:         blur(12px);
}
.article-experience::before { content: none; }
.article-feature__heading,
.article-conclusion__heading {
    position:     relative;
    padding-left: 65px;
    min-height:   48px;
}
.article-conclusion__heading { margin-bottom: 28px; }
.article-feature__heading .article-kicker,
.article-conclusion__heading .article-kicker { margin-top: 3px; }
.article-feature__heading h2,
.article-conclusion__heading h2 { margin-bottom: 0; }
.article-feature__copy {
    padding-left: clamp(24px, 4vw, 42px);
    border-left:  1px solid rgba(119, 198, 255, .22);
}
.article-feature__copy p { color: #d0dbef; }
.article-section.article-conclusion {
    margin-top:              clamp(72px, 9vw, 112px);
    margin-bottom:           clamp(30px, 4vw, 48px);
    padding:                 clamp(42px, 4.5vw, 56px);
    border:                  1px solid rgba(146, 193, 255, .24);
    border-radius:           24px;
    background:              radial-gradient(circle at 90% 4%, rgba(255, 183, 61, .15), transparent 34%),
                             linear-gradient(125deg, rgba(21, 68, 134, .62), rgba(7, 27, 62, .88));
    box-shadow:              inset 0 1px 0 rgba(255, 255, 255, .07), 0 26px 70px rgba(0, 8, 31, .23);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter:         blur(12px);
}
.article-conclusion::before { inset: 0 24px auto; }
.article-conclusion h2 { font-size: clamp(29px, 2.8vw, 42px); }
.article-conclusion__heading::before {
    border-color: rgba(242, 200, 147, .34);
    background:   linear-gradient(145deg, rgba(186, 111, 34, .2), rgba(10, 39, 77, .58));
}
.article-conclusion__heading::after {
    background:         #ffd08b;
    -webkit-mask-image: url("../../img/constructability.svg");
    mask-image:         url("../../img/constructability.svg");
}
.article-feature__heading::after {
    -webkit-mask-image: url("../../img/layers-stack.svg");
    mask-image:         url("../../img/layers-stack.svg");
}
.readiness-principle {
    display:               grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap:                   12px;
    margin:                30px 0 32px;
    padding:               0;
    font-size:             16px;
    line-height:           1.6;
    list-style:            none;
    counter-reset:         principle;
}
.readiness-principle li {
    position:      relative;
    display:       block;
    min-height:    96px;
    padding:       18px;
    border:        1px solid rgba(135, 190, 255, .2);
    border-radius: 14px;
    background:    linear-gradient(145deg, rgba(35, 82, 151, .28), rgba(5, 27, 63, .68));
    font-size:     14px;
    font-weight:   500;
    line-height:   1.45;
    color:         #e4eeff;
}
.readiness-principle li::before {
    content:           counter(principle, decimal-leading-zero);
    counter-increment: principle;
    display:           block;
    margin-bottom:     12px;
    font-size:         10px;
    font-weight:       400;
    letter-spacing:    .12em;
    color:             var(--color-sky);
}
.readiness-principle li::after {
    content:    "";
    position:   absolute;
    top:        -1px;
    left:       18px;
    width:      44px;
    height:     1px;
    background: linear-gradient(90deg, var(--color-sky), transparent);
}
@media (max-width: 820px) {
    .article-experience {
        grid-template-columns: 1fr;
        gap:                   28px;
    }
    .article-feature__copy {
        padding:     26px 0 0;
        border-top:  1px solid rgba(119, 198, 255, .2);
        border-left: 0;
    }
}

@media (max-width: 760px) {
    .article-checklist,
    .article-services__grid { grid-template-columns: 1fr; }
    .implementation-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .implementation-flow li:not(:last-child) strong::after { content: none; }
    .readiness-principle { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
    .article-section { padding-bottom: 52px; }
    .article-section + .article-section { padding-top: 52px; }
    .article-kicker {
        margin-bottom:  14px;
        font-size:      11px;
        letter-spacing: .12em;
    }
    .article-quote {
        margin-top:  26px;
        padding:     22px 20px;
        font-size:   18px;
        line-height: 1.55;
    }
    .requirements-card {
        margin-top: 28px;
        padding:    22px 20px;
    }
    .requirements-card__title { font-size: 13px; }
    .article-checklist li {
        padding:   13px 0;
        font-size: 14px;
    }
    .implementation-flow { margin: 28px 0; }
    .readiness-principle {
        grid-template-columns: 1fr;
        gap:                   9px;
        margin-top:            24px;
    }
    .readiness-principle li { min-height: 82px; }
    .article-feature__heading,
    .article-conclusion__heading { padding-left: 57px; }
    .requirements-card__title::before,
    .article-feature__heading::before,
    .article-conclusion__heading::before {
        width:         42px;
        height:        42px;
        border-radius: 12px;
    }
    .requirements-card__title::after,
    .article-feature__heading::after,
    .article-conclusion__heading::after {
        top:    10px;
        left:   10px;
        width:  21px;
        height: 21px;
    }
    .requirements-card__title {
        min-height:   42px;
        padding-left: 57px;
    }
    .implementation-flow li { padding: 19px; }
    .implementation-flow strong { font-size: 16px; }
    .article-experience {
        gap:     4px;
        padding: 26px 22px 30px;
    }
    .article-conclusion {
        margin-top:    56px;
        margin-bottom: 28px;
        padding:       27px 21px 30px;
    }
    .article-experience,
    .article-conclusion { border-radius: 18px; }
    .article-conclusion h2 { font-size: 28px; }
}

@media (max-width: 520px) {
    .implementation-flow {
        grid-template-columns: 1fr;
        gap:                   10px;
    }
    .implementation-flow li {
        min-height: 164px;
        padding:    19px;
    }
    .article-experience,
    .article-conclusion,
    .article-service-card { border-radius: 16px; }
}