/* ══════════════════════════════════════════════════════════════════════════
   Блог — сторінка записів /blog/ (home.php)

   Портовано з `blog-page-template/blog-page.css` замовника на токени теми.

   ВАЖЛИВО ПРО БАЗУ. У шаблоні замовника блог не самостійний: його <main> мав
   клас `about-page blog-page`, тобто базову типографіку, кнопки й секційні
   відступи він брав із `about-page.css`. У темі той файл портований у
   `css/pages/pro-nas.css` і на /blog/ не підключається. Тому потрібний
   мінімум (кнопки, h1/h2, .is-accent, хром FAQ) продубльовано тут — це
   усталений патерн проєкту (той самий блок кнопок уже лежить у poslugy,
   galuzi й pro-nas), а не недогляд.

   01 · Оболонка, типографіка, кнопки
   02 · Хіро
   03 · Стрічка: пошук, фільтри, картки
   04 · Практичний досвід
   05 · Пов'язані послуги
   06 · CTA
   07 · FAQ (хром секції; акордеон — спільний з main.css)
   08 · Адаптив 1024 / 768
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 01 · Оболонка ──────────────────────────────────────────────────────── */
.blog-page {
    /* Скляні поверхні: у темі глобальних токенів для них немає, тому
       тримаємо локально — так само, як зроблено на сторінці «Проєкти». */
    --glass-border:     rgba(184, 209, 255, .24);
    --glass-background: linear-gradient(145deg, rgba(16, 44, 81, .92), rgba(7, 28, 56, .94));
    --glass-shadow:     0 18px 40px -32px rgba(0, 8, 28, .9);

    overflow: clip;
    background: var(--color-bg);
}

.blog-page > section { position: relative; }

.blog-page h1,
.blog-page h2,
.blog-page h3 { color: var(--color-text-light); }

.blog-page h2 {
    margin:         0;
    font-size:      clamp(28px, 3.25vw, 46px);
    font-weight:    300;
    line-height:    1.12;
    letter-spacing: -1.35px;
}

/* Акцент у заголовках — той самий прийом, що на решті сторінок:
   легка база (300) + градієнтний фрагмент 600. */
.blog-page h1 .is-accent,
.blog-page h2 .is-accent {
    font-weight:             600;
    background-image:        var(--gradient-accent);
    -webkit-background-clip: text;
    background-clip:         text;
    color:                   transparent;
    -webkit-text-fill-color: transparent;
}

/* Надзаголовок — теж <p>, але в нього свій інтерліньяж із компонента. */
.blog-page p:not(.section-eyebrow) { line-height: 1.7; }

/* ── Кнопки (локально, як на /poslugy/, /galuzi/, /pro-nas/) ────────────── */
.btn {
    position:        relative;
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             10px;
    box-sizing:      border-box;
    cursor:          pointer;
    text-decoration: none;
}

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

.btn--lg {
    min-width:     270px;
    min-height:    56px;
    padding:       17px 28px;
    border-radius: 10px;
}

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

/* ── 02 · Хіро ──────────────────────────────────────────────────────────── */
/* Фотокомпозиція: знімок атріуму на весь фон, поверх нього — фасад вежі з
   діагональною маскою, і згори затемнення, щоб текст ліворуч лишався
   читабельним. Три шари, бо саме так у макеті: жоден із них окремо не дає
   ані потрібного кадру, ані контрасту під текстом. */
.blog-hero {
    isolation: isolate;
    overflow:  hidden;
    padding:   76px 0 35px;
    background: linear-gradient(180deg, #00000c, #031d47);
}

.blog-hero__art {
    position:   absolute;
    z-index:    -2;
    inset:      0 0 0 24%;
    background: linear-gradient(90deg, #010b20, rgba(3, 20, 47, .12) 65%),
                url('../../img/blog-hero-atrium.webp') center / cover no-repeat;
    opacity:    .88;
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 12%, #000 78%, transparent);
    mask-image:         linear-gradient(180deg, transparent, #000 12%, #000 78%, transparent);
}

.blog-hero__art::before {
    content:    "";
    position:   absolute;
    inset:      0 0 0 34%;
    background: url('../../img/blog-hero-tower.webp') center 42% / cover no-repeat;
    -webkit-mask-image: linear-gradient(110deg, transparent 4%, rgba(0, 0, 0, .2) 18%, #000 43%);
    mask-image:         linear-gradient(110deg, transparent 4%, rgba(0, 0, 0, .2) 18%, #000 43%);
}

.blog-hero::before {
    content:        "";
    position:       absolute;
    z-index:        -1;
    inset:          0;
    pointer-events: none;
    background: linear-gradient(90deg, #010817 0%, rgba(1, 10, 28, .98) 28%, rgba(2, 15, 37, .94) 48%, rgba(3, 22, 49, .25) 77%, rgba(3, 22, 49, .12)),
                linear-gradient(0deg, #031d47, transparent 30%);
}


/* Надзаголовок — спільний компонент теми (13px / 600 / 1.82px / 18px).
   Тут лишаємо тільки колір і розкладку, типографіку не чіпаємо: інакше
   на кожній сторінці він був би свого розміру. */
.blog-hero .section-eyebrow {
    margin-bottom:  22px;
}

.blog-hero__title {
    max-width:      780px;
    width:          64%;
    margin:         0;
    font-size:      clamp(34px, 3.35vw, 54px);
    font-weight:    300;
    line-height:    1.15;
    letter-spacing: -1.6px;
    text-wrap:      balance;
}

.blog-hero__intro {
    width:     57%;
    max-width: 650px;
    /* Відступ від H1 тримає спільний ритм (css/main.css). */
    margin:    0 0 30px;
}

.blog-hero__intro p {
    margin:      0;
    font-size:   16px;
    line-height: 1.7;
    color:       #d0ddef;
}

.blog-hero__intro p + p {
    margin-top: 13px;
    font-size:  14px;
    color:      #a9bfd8;
}

.blog-hero__actions {
    display:     flex;
    flex-wrap:   wrap;
    align-items: center;
    gap:         30px;
}

.blog-hero__proof {
    display:     flex;
    align-items: center;
    gap:         13px;
    max-width:   210px;
    font-size:   12px;
    color:       #b4c9e0;
}

.blog-hero__proof strong {
    font-size:   32px;
    font-weight: 300;
    color:       #a4d7fa;
    white-space: nowrap;
}

/* Підпис під композицією: тонка лінія зверху — спільний токен --gradient-line,
   а не власний колір бордера, щоб збігалася з роздільниками секцій. */
.blog-hero__caption {
    position:        relative;
    display:         flex;
    justify-content: space-between;
    flex-wrap:       wrap;
    gap:             20px;
    margin:          52px 0 0;
    padding-top:     20px;
    font-size:       11px;
    letter-spacing:  .08em;
    color:           #a6bdd8;
}

.blog-hero__caption::before {
    content:    "";
    position:   absolute;
    inset:      0 0 auto;
    height:     1px;
    background: var(--gradient-line);
}

.blog-hero__caption span:first-child {
    color:          #8bcbf5;
    letter-spacing: .16em;
}

/* ── 03 · Стрічка матеріалів ────────────────────────────────────────────── */
.blog-library { padding: 88px 0; }

.blog-library__head {
    display:         flex;
    justify-content: space-between;
    align-items:     end;
    gap:             32px;
}

.blog-library__heading .section-eyebrow { margin-bottom: 22px; }

.blog-search {
    display:   grid;
    gap:       8px;
    min-width: 260px;
    font-size: 13px;
    color:     var(--color-text-light);
}

.blog-search input {
    min-height:    48px;
    padding:       15px 18px;
    border:        1px solid var(--glass-border);
    border-radius: 12px;
    background:    var(--surface-card);
    color:         #fff;
    font:          inherit;
}

.blog-filters {
    display:   flex;
    flex-wrap: wrap;
    gap:       9px;
    margin:    34px 0 22px;
}

.blog-filters button {
    min-height:    44px;
    padding:       10px 15px;
    border:        1px solid var(--glass-border);
    border-radius: 24px;
    background:    var(--surface-chip);
    color:         #c7d8ef;
    font:          inherit;
    font-size:     13px;
    cursor:        pointer;
    transition:    background var(--transition), border-color var(--transition), color var(--transition);
}

.blog-filters button:hover,
.blog-filters button:focus-visible {
    border-color: var(--color-sky);
    background:   rgba(0, 152, 240, .12);
}

.blog-filters button[aria-pressed="true"] {
    border-color: var(--color-sky);
    background:   linear-gradient(135deg, rgba(0, 152, 240, .3), rgba(76, 141, 255, .14));
    color:        var(--color-text);
    box-shadow:   inset 0 1px 0 rgba(184, 209, 255, .2);
}

.blog-library__count {
    margin:    0 0 22px;
    font-size: 13px;
    color:     #9eb4d2;
}

.blog-grid {
    display:               grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap:                   24px;
}

.blog-card {
    overflow:       hidden;
    display:        flex;
    flex-direction: column;
    border:         1px solid var(--glass-border);
    border-radius:  14px;
    background:     var(--glass-background);
    box-shadow:     var(--glass-shadow);
    transition:     border-color var(--transition);
}

.blog-card:hover,
.blog-card:focus-within { border-color: var(--color-sky); }

.blog-card[hidden] { display: none; }

.blog-card__media { overflow: hidden; }

.blog-card__img {
    display:      block;
    width:        100%;
    height:       auto;
    aspect-ratio: 16 / 9;
    object-fit:   cover;
}

.blog-card__body {
    flex:           1;
    display:        flex;
    flex-direction: column;
    padding:        25px;
}

.blog-card__category {
    margin:         0 0 16px;
    font-size:      11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color:          #84caff;
}

.blog-card__title {
    margin:      0;
    font-size:   22px;
    font-weight: 600;
    line-height: 1.35;
}

.blog-card__title a {
    color:           inherit;
    text-decoration: none;
}

.blog-card__title a:hover,
.blog-card__title a:focus-visible { color: var(--color-sky); }

.blog-card__excerpt {
    margin:    14px 0 0;
    font-size: 14px;
    color:     #b9cbe2;
}

.blog-card__bottom {
    position:        relative;
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    flex-wrap:       wrap;
    gap:             12px;
    margin-top:      auto;
    padding-top:     20px;
}

.blog-card__bottom::before {
    content:    "";
    position:   absolute;
    inset:      0 0 auto;
    height:     1px;
    background: var(--gradient-line);
}

.blog-card__date {
    font-size: 12px;
    color:     #b6c8de;
}

.blog-card__link {
    min-height:    48px;
    padding:       13px 20px;
    border-radius: 8px;
    font-family:   var(--font-body);
}

/* Перша картка — «головний» матеріал: удвічі ширша, фото збоку. */
@media (min-width: 1101px) {
    .blog-card:first-child {
        grid-column:           span 2;
        display:               grid;
        grid-template-columns: 1fr 1fr;
    }

    .blog-card:first-child .blog-card__media { height: 100%; }

    /* Фото тягнеться на всю висоту картки, але пропорція лишається задана:
       з aspect-ratio: auto висота картинки й висота рядка сітки визначали
       одна одну (height: 100% у контейнері без власної висоти), і перша
       картка розганялась до ~1500px. */
    .blog-card:first-child .blog-card__img {
        height:       100%;
        aspect-ratio: 16 / 9;
    }

    .blog-card:first-child .blog-card__title { font-size: 30px; }
}

.blog-library__empty {
    margin:    24px 0 0;
    color:     var(--color-text-soft);
}

.blog-library__more { display: flex; margin: 36px auto 0; }

.blog-library__more[hidden] { display: none; }

.blog-library__more .icon { transform: rotate(180deg); }

.blog-library__more[aria-expanded="true"] .icon { transform: rotate(0deg); }

/* ── 04 · Практичний досвід ─────────────────────────────────────────────── */
.blog-expertise {
    padding:    88px 0;
    background: radial-gradient(ellipse at 0 65%, rgba(0, 152, 240, .09), transparent 60%);
}

.blog-expertise__heading .section-eyebrow { margin-bottom: 22px; }

.blog-expertise__title { max-width: 980px; }

.blog-expertise__intro {
    display:               grid;
    grid-template-columns: minmax(200px, .7fr) minmax(0, 1.3fr);
    gap:                   clamp(32px, 6vw, 88px);
    align-items:           center;
    margin:                48px 0;
}

.blog-expertise__stat {
    display:        flex;
    flex-direction: column;
    gap:            16px;
    margin:         0;
    padding:        24px 0;
    color:          var(--color-text-soft);
}

/* Градієнт саме --gradient-accent, а не --gradient-stat: у теми stat-градієнт
   вертикальний (174deg), і на числі заввишки 148px він читається як
   «біле згори — помаранчеве знизу». У рефі градієнт горизонтальний і
   проходить по всій ширині числа. --gradient-accent — це та сама ідея в
   палітрі теми: 90deg, синій → світлий → персиковий. */
.blog-expertise__stat-number {
    font-size:               clamp(88px, 11vw, 156px);
    font-weight:             300;
    line-height:             .95;
    letter-spacing:          -.065em;
    background-image:        var(--gradient-accent);
    -webkit-background-clip: text;
    background-clip:         text;
    color:                   transparent;
    -webkit-text-fill-color: transparent;
}

.blog-expertise__stat > span:last-child {
    max-width:   180px;
    font-size:   15px;
    line-height: 1.6;
}

.blog-expertise__copy p {
    margin:    0 0 20px;
    font-size: 17px;
}

.blog-expertise__copy p:last-child { margin: 0; }

.blog-expertise__topics {
    position:    relative;
    padding-top: 28px;
}

.blog-expertise__topics::before {
    content:    "";
    position:   absolute;
    inset:      0 0 auto;
    height:     1px;
    background: var(--gradient-line);
}

.blog-expertise__topics-label {
    margin:         0 0 20px;
    font-size:      13px;
    letter-spacing: .08em;
    color:          var(--color-sky);
}

.blog-expertise__topics ul {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    column-gap:            48px;
    margin:                0;
    padding:               0;
    list-style:            none;
    counter-reset:         topic;
}

.blog-expertise__topics li {
    counter-increment:     topic;
    display:               grid;
    grid-template-columns: 32px 1fr;
    gap:                   14px;
    align-content:         start;
    padding:               22px 0;
    border-bottom:         1px solid rgba(184, 209, 255, .14);
    font-size:             16px;
    color:                 var(--color-text-soft);
}

.blog-expertise__topics li::before {
    content:               counter(topic, decimal-leading-zero);
    color:                 var(--color-sky);
    font-size:             12px;
    line-height:           2.25;
    font-variant-numeric:  tabular-nums;
}

.blog-expertise__topics li:last-child { grid-column: 1 / -1; }

.blog-expertise__conclusion {
    display:               grid;
    grid-template-columns: 40px 1fr;
    gap:                   20px;
    align-items:           start;
    max-width:             1000px;
    margin-top:            40px;
}

.blog-expertise__conclusion > span {
    color:       var(--color-sky);
    font-size:   32px;
    line-height: 1.4;
}

.blog-expertise__conclusion p {
    margin:      0;
    font-size:   clamp(18px, 1.7vw, 23px);
    line-height: 1.6;
    color:       var(--color-text);
}

/* ── 05 · Пов'язані послуги ─────────────────────────────────────────────── */
.blog-services {
    padding:    88px 0;
    background: radial-gradient(ellipse at 15% 40%, rgba(106, 119, 190, .14), transparent 60%),
                linear-gradient(135deg, #111a40, #081737);
}

.blog-services__heading {
    max-width:  900px;
    margin:     0 auto;
    text-align: center;
}

.blog-services__heading .section-eyebrow {
    justify-content: center;
    margin-bottom:   22px;
}

.blog-services__pair {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   20px;
    margin-top:            44px;
}

/* Фонова ілюстрація картки задається позиційно (перша/друга), як у макеті. */
.blog-services__card {
    position:       relative;
    isolation:      isolate;
    overflow:       hidden;
    display:        flex;
    flex-direction: column;
    align-items:    start;
    gap:            20px;
    min-height:     370px;
    padding:        34px;
    border:         1px solid rgba(173, 192, 255, .13);
    border-radius:  22px;
    background:     linear-gradient(135deg, rgba(83, 93, 147, .25), rgba(31, 39, 77, .7));
    box-shadow:     0 20px 44px rgba(0, 5, 22, .15);
}

.blog-services__card::before {
    content:            "";
    position:           absolute;
    z-index:            -1;
    inset:              0;
    background:         url('../../img/about-principles-node.webp') right center / auto 100% no-repeat;
    opacity:            .28;
    -webkit-mask-image: linear-gradient(90deg, transparent 25%, #000 100%);
    mask-image:         linear-gradient(90deg, transparent 25%, #000 100%);
}

.blog-services__card:nth-child(2)::before {
    background-image: url('../../img/about-role-model.webp');
}

.blog-services__icon {
    display:       grid;
    place-items:   center;
    width:         44px;
    height:        44px;
    border:        1px solid rgba(115, 157, 255, .33);
    border-radius: 14px;
    background:    rgba(102, 138, 255, .13);
    color:         #77b4ff;
}

.blog-services__card:nth-child(2) .blog-services__icon {
    border-color: rgba(255, 218, 50, .27);
    background:   rgba(255, 218, 50, .08);
    color:        #ffda32;
}

/* Селектор із .blog-services__card, а не голий клас: нижче в файлі стоїть
   .blog-services__card p (0,1,1) з font-size 16px і своїм кольором — голий
   .blog-services__tag (0,1,0) програвав йому, і номер у кутку виходив
   завеликим. */
.blog-services__card .blog-services__tag {
    position:       absolute;
    top:            36px;
    right:          34px;
    margin:         0;
    max-width:      none;
    font-size:      11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color:          #a6b3d1;
}

.blog-services__card h3 {
    margin:      0;
    max-width:   90%;
    font-size:   23px;
    font-weight: 500;
    line-height: 1.4;
}

.blog-services__card p {
    margin:      0 0 24px;
    max-width:   90%;
    font-size:   16px;
    line-height: 1.75;
    color:       #c1cce9;
}

.blog-services__card .btn {
    width:      100%;
    min-width:  0;
    min-height: 56px;
    margin-top: auto;
    padding:    16px 24px;
    text-align: center;
}

.blog-services__card .btn__label {
    min-width:     0;
    overflow-wrap: anywhere;
    line-height:   1.45;
}

.blog-services__card .btn .icon { flex-shrink: 0; }

/* ── 06 · CTA ───────────────────────────────────────────────────────────── */
.blog-cta {
    padding:    88px 0;
    background: radial-gradient(ellipse at 50% 100%, rgba(0, 152, 240, .15), transparent 65%),
                var(--color-bg);
    text-align: center;
}

.blog-cta .section-eyebrow {
    justify-content: center;
    margin-bottom:   22px;
}

/* Селектор із .blog-page, а не голі класи: вище в файлі стоять
   .blog-page h2 { margin: 0 } і .blog-page .btn { max-width: 100% } — обидва
   з вищою специфічністю. Без цього заголовок не центрувався, а кнопка
   розтягувалась на всі 1300px замість 850. */
.blog-page .blog-cta__title,
.blog-page .blog-cta__text {
    max-width: 850px;
    margin:    0 auto 30px;
}

.blog-page .blog-cta__btn {
    width:      100%;
    max-width:  850px;
    min-width:  0;
    min-height: 56px;
    padding:    16px 24px;
}

.blog-cta__btn .btn__label { line-height: 1.45; }

.blog-cta__btn .icon { flex-shrink: 0; }

/* ── 07 · FAQ ───────────────────────────────────────────────────────────── */
/* Акордеон (.faq__list, .faq-item*) — спільний блок css/main.css. Тут лише
   хром секції й градієнт заголовка. */
.blog-faq {
    position:   relative;
    isolation:  isolate;
    overflow:   hidden;
    padding:    92px 0 clamp(190px, 23vw, 340px);
    background: radial-gradient(ellipse at 50% 100%, rgba(0, 118, 225, .19), transparent 46%),
                linear-gradient(180deg, rgba(0, 9, 29, .45), rgba(0, 13, 37, .76));
}

/* Знімок команди внизу секції — той самий прийом і той самий файл, що на
   /pro-nas/: маска гасить верх, низ і боки, тож фото розчиняється у фоні,
   а не лежить прямокутником. Нижній падінг секції вище резервує йому місце. */
.blog-faq__art {
    position:           absolute;
    z-index:            -1;
    bottom:             0;
    left:               50%;
    width:              min(1450px, 100%);
    transform:          translateX(-50%);
    pointer-events:     none;
    opacity:            .32;
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 28%, #000 78%, transparent);
    mask-image:         linear-gradient(to bottom, transparent, #000 28%, #000 78%, transparent);
}

.blog-faq__art img {
    display:            block;
    width:              100%;
    height:             auto;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
    mask-image:         linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
}

.blog-faq > .container {
    position:       relative;
    z-index:        1;
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            40px;
}

.faq__head {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            14px;
    width:          100%;
    text-align:     center;
}

.faq__title {
    max-width:      820px;
    margin:         0;
    font-size:      clamp(31px, 3.25vw, 46px);
    font-weight:    300;
    line-height:    1.12;
    letter-spacing: -1.35px;
    color:          var(--color-text-light);
}

.faq__title .is-accent {
    font-weight:             600;
    background-image:        var(--gradient-accent);
    -webkit-background-clip: text;
    background-clip:         text;
    color:                   transparent;
    -webkit-text-fill-color: transparent;
}

/* ── 08 · Адаптив ───────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .blog-page .blog-hero__title { width: 80%; max-width: 730px; }

    .blog-hero__intro { width: 72%; }

    .blog-hero::before {
        background: linear-gradient(90deg, #010817 0%, rgba(1, 10, 28, .94) 45%, rgba(3, 22, 49, .6)),
                    linear-gradient(0deg, #031d47, transparent);
    }

    .blog-grid { grid-template-columns: 1fr 1fr; }

    .blog-library,
    .blog-expertise,
    .blog-services,
    .blog-cta { padding: 72px 0; }
}

@media (max-width: 768px) {
    .blog-hero { padding: 48px 0 26px; }

    .blog-page .blog-hero__title {
        width:          100%;
        font-size:      34px;
        letter-spacing: -1px;
    }

    .blog-hero__intro { width: 100%; margin-top: 23px; }

    .blog-hero__art {
        inset:               0;
        opacity:             .4;
        background-position: 35% center;
    }

    .blog-hero__art::before {
        inset:               0 0 0 20%;
        background-position: center top;
    }

    .blog-hero::before {
        background: linear-gradient(180deg, rgba(1, 8, 23, .82), rgba(2, 16, 39, .93) 58%, #031d47);
    }

    .blog-hero__actions { gap: 22px; }

    .blog-hero__caption { margin-top: 34px; font-size: 10px; }

    .blog-library,
    .blog-expertise,
    .blog-services,
    .blog-cta { padding: 56px 0; }

    .blog-faq { padding: 56px 0 165px; }

    .blog-faq__art { width: 135%; max-width: none; opacity: .25; }

    .blog-library__head {
        flex-direction: column;
        align-items:    stretch;
    }

    .blog-search { min-width: 0; }

    .blog-filters button { font-size: 12px; }

    .blog-services__pair { grid-template-columns: 1fr; }

    /* Показник «20+» і текст біля нього стають одне під одним лише тут:
       у рефі вони поруч аж до 700px, і на планшеті це помітно компактніше,
       ніж число на всю ширину з текстом під ним. */
    .blog-expertise__intro { grid-template-columns: 1fr; gap: 32px; }

    .blog-card__body { padding: 22px; }

    .blog-card__title { font-size: 21px; }

    .blog-expertise__intro { margin: 30px 0; }

    .blog-expertise__stat {
        flex-direction: row;
        align-items:    center;
        gap:            24px;
        padding:        8px 0;
    }

    .blog-expertise__topics ul { grid-template-columns: 1fr; }

    .blog-expertise__topics li { padding: 18px 0; }

    .blog-expertise__conclusion {
        grid-template-columns: 24px 1fr;
        gap:                   12px;
        margin-top:            28px;
    }

    .blog-expertise__conclusion > span { font-size: 24px; }

    .blog-expertise__copy p { font-size: 16px; }

    .blog-services__card { min-height: 0; padding: 26px; }

    .blog-services__tag { top: 28px; right: 26px; }

    .blog-services__card p { max-width: 100%; }
}

/* Третій крок саме для сітки матеріалів. На 768 дві колонки по 356px ще
   читаються (так і в рефі), а одна колонка дає картку 736px завширшки —
   для анонсу це завелика пляма. Тому 2 → 1 переходить нижче, на 640. */
@media (max-width: 640px) {
    .blog-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .blog-card,
    .blog-filters button { transition: none; }
}

/* Blog: shared service-card and CTA design, 2026-10-08. */
.blog-page .blog-library__more.btn.btn {
    display: flex !important;
    width: max-content;
    margin: 36px auto 0 !important;
}
.blog-page .blog-library__more.btn.btn[hidden] { display: none !important; }
.blog-page .blog-services {
    background: radial-gradient(ellipse at 15% 40%, rgba(0, 152, 240, .09), transparent 60%), var(--color-bg);
}
.blog-page .blog-services__pair { gap: 24px; }
.blog-page .blog-services__card {
    padding: 38px;
    border: 1px solid rgba(79, 185, 255, .42);
    border-radius: 20px;
    background: linear-gradient(145deg, rgba(23, 54, 95, .95), rgba(8, 29, 64, .9));
    box-shadow: var(--glass-shadow);
    gap: 20px;
}
.blog-page .blog-services__card::before { opacity: .12; }
.blog-page .blog-services__icon,
.blog-page .blog-services__card:nth-child(2) .blog-services__icon {
    border-color: rgba(79, 185, 255, .42);
    background: rgba(67, 139, 244, .1);
    color: var(--color-sky);
}
.blog-page .blog-services__card h3 { max-width: 100%; font-size: 25px; }
.blog-page .blog-services__card p:not(.blog-services__tag) {
    max-width: 100%; margin-bottom: 4px; color: var(--color-text-soft);
}
.blog-page .blog-services__card .blog-services__tag { top: 40px; right: 38px; color: var(--color-text-soft); }
.blog-page .blog-services__card .btn {
    align-self: center;
    width: auto;
    min-width: min(270px, 100%);
    max-width: 100%;
    margin-top: auto;
}
.blog-page .blog-cta > .container {
    width: calc(100% - 40px);
    max-width: 1100px;
    padding: 64px 88px;
    border: 1px solid rgba(115, 173, 247, .24);
    border-radius: 24px;
    background: radial-gradient(circle at 16% 4%, rgba(67, 139, 244, .22), rgba(35, 93, 181, .09) 27%, transparent 51%), linear-gradient(155deg, rgba(15, 49, 101, .96), rgba(7, 30, 68, .98) 58%, rgba(3, 19, 47, .99));
}
.blog-page .blog-cta__text { color: var(--color-text-soft); }
.blog-page .blog-cta__btn { width: auto; min-width: min(320px, 100%); max-width: 100%; }
@media (max-width: 768px) {
    .blog-page .blog-services__card { padding: 26px; }
    .blog-page .blog-services__card .blog-services__tag { top: 28px; right: 26px; }
    .blog-page .blog-cta > .container { padding: 40px 24px; }
}