/*
 * Home page — local styles
 */

/* ── 01 · Hero ( #hero ) ─────────────────────────────────────────────────── */
.hero {
    position: relative;
    height:   900px;
    overflow: hidden;
    color:    var(--text-primary);
}

/* Відео/фото фону — той самий клас на обох тегах, розрізняються лише
   в PHP залежно від того, чи завантажено відео. */
.hero__media {
    position:   absolute;
    inset:      0;
    z-index:    0;
    width:      100%;
    height:     100%;
    object-fit: cover;
}

/* Відео лежить поверх фото й проявляється, коли реально почало грати
   ( клас ставить js/pages/home.js ). Без цього між «src призначено» і
   «перший кадр декодовано» видно чорний прямокутник поверх фото.

   Власного z-index НЕ ставити: над фото відео піднімає порядок у DOM
   ( той самий z-index 0, але йде пізніше ). z-index 1 зрівняв би його зі
   скримом .hero::before, і відео, як пізніший елемент, перекрило б
   градієнт — так уже раз сталося ( 2026-09-17 ). */
.hero__media--video {
    opacity:    0;
    transition: opacity .8s ease;
}

.hero__media--video.is-playing {
    opacity: 1;
}

@media ( prefers-reduced-motion: reduce ) {
    .hero__media--video {
        transition: none;
    }
}

/* Скрим для читабельності тексту. Раніше був суто вертикальним градієнтом,
   прив'язаним відсотками до висоти .hero (900px) — коли на адаптиві висота
   секції змінюється (700 / auto), ті самі відсотки потрапляють на зовсім
   інші місця відео, і на світлих кадрах (яскраве небо, світлі фасади)
   заголовок/кнопки провалюються в контраст. Горизонтальний шар прибитий
   зліва — там, де завжди текст, незалежно від висоти й брейкпоінта;
   вертикальний — лише додає глибини знизу, тримаємо його м'якшим, бо
   під смугою показників зверху ще й власний фон .hero-stats. */
.hero::before {
    content:  "";
    position: absolute;
    inset:    0;
    z-index:  1;
    background:
        linear-gradient(100deg,
          rgba(1, 21, 44, .64) 0%,
          rgba(1, 21, 44, .4)  35%,
          rgba(1, 21, 44, .14) 60%,
          rgba(1, 21, 44, 0)   78%),
        linear-gradient(180deg,
          rgba(1, 21, 44, .12) 0%,
          rgba(1, 21, 44, .22) 40%,
          rgba(1, 21, 44, .5)  75%,
          rgba(1, 21, 44, .58) 100%);
    pointer-events: none;
}

/* Заголовний блок «прибитий» знизу, а не зверху: у макеті .hero__title —
   один рядок, але контейнер (.container) вужчий за viewport на десктопах
   між ~1024 і ~1139px, і заголовок 80px там переносить на 2 рядки. Якби
   позиція йшла від top (фіксований margin-top), зайвий рядок штовхав би
   .hero__actions вниз — просто в hero-stats. flex-end росте вгору: нижній
   край блоку завжди на тій самій відстані від низу секції (190px — те, що
   і давав старий margin-top:414px для однорядкового заголовка), а зайвий
   рядок займає місце над собою, а не під. */
.hero__inner {
    position:        relative;
    z-index:         2;
    height:          100%;
    display:         flex;
    flex-direction:  column;
    justify-content: flex-end;
    padding-bottom:  190px;
}

.hero__headline {
    display:        flex;
    flex-direction: column;
    align-items:    flex-start;
    gap:            60px;
    max-width:      1103px;
}

.hero__text {
    display:        flex;
    flex-direction: column;
    gap:            24px;
    width:          100%;
}
.hero__name {
    display:        flex;
    flex-direction: column;
    gap:            22px;
    align-items:    flex-start;
}
.hero__title {
    margin:         0;
    font-size:      80px;
    font-weight:    500;
    line-height:    84px;
    color:          var(--text-primary);
    /* У макеті капс — але це стиль показу, не сам контент: значення
       в базі лишається як увів клієнт, регістр не нав'язуємо полю. */
    text-transform: uppercase;
}
.hero__subtitle {
    margin:      0;
    max-width:   1038px;
    font-size:   18px;
    font-weight: 600;
    line-height: 32px;
    color:       var(--text-primary);
}

.hero__actions {
    display:     flex;
    align-items: center;
    gap:         20px;
}

/* ── Смуга показників — самостійний блок, не елемент .hero: у макеті
   це компонент з власним фоном (розмиття+затемнення), який просто
   лежить у нижній частині секції, а не є її текстовим вмістом. ── */
.hero-stats {
    position:                absolute;
    z-index:                 2;
    left:                    0;
    right:                   0;
    bottom:                  0;
    height:                  132px;
    /* Менша непрозорість, ніж була: смуга сидить поверх .hero::before,
       який тут і сам уже темний (низ вертикального шару скриму) — разом
       вони раніше давали майже суцільний чорний прямокутник. */
    background-color:        rgba(1, 21, 44, .45);
    backdrop-filter:         blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-top:              1px solid var(--gold-line);
}
/* Ширину й відступи бере готовий .container із markup — тут лише ряд */
.hero-stats__list {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    height:          100%;
    list-style:      none;
}
.hero-stats__item {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            10px;
    width:          240px;
}
.hero-stats__value {
    display:     flex;
    align-items: center;
    gap:         14px;
    width:       100%;
}
.hero-stats__icon {
    flex:   0 0 auto;
    width:  32px;
    height: 32px;
}
.hero-stats__number { color: var(--text-primary); }
.hero-stats__label {
    margin:      0;
    width:       100%;
    font-size:   15px;
    line-height: 22px;
    color:       var(--text-muted);
}

/* ── Hero — адаптація ────────────────────────────────────────────────────
   Фіксована висота 900px і offset 414px розраховані на широкий десктопний
   кадр — нижче 1024px просто скорочуємо обидва числа. На мобільному
   (≤768px) секція вже не тримає рівно висоту 1:1 з макетом: заголовок у
   2–3 рядки, кнопки в колонку і 4 показники в 2 ряди разом не влазять у
   фіксовану рамку без обрізання, тож там `.hero` переходить на природну
   висоту за контентом (`height: auto`, фон і скрим лишаються `inset: 0` —
   вони просто заповнюють нову висоту), а смуга показників — з absolute
   band знизу перетворюється на звичайний блок у потоці під заголовком. ── */
@media (max-width: 1024px) {
    .hero              { height: 700px; }
    /* 134px = 700 − 566 (той самий нижній відступ, що й раніше давав
       margin-top: 260px для однорядкового заголовка) — .hero__inner і тут
       росте вгору, а не штовхає вниз, якщо рядків стає більше. */
    .hero__inner       { padding-bottom: 134px; }
    .hero__headline    { gap: 40px; max-width: 640px; }
    .hero__text        { gap: 20px; }
    .hero__name        { gap: 16px; }
    .hero__title       { font-size: 48px; line-height: 52px; }
    .hero__subtitle    { font-size: 17px; line-height: 26px; max-width: 100%; }

    .hero-stats        { height: 110px; }
    /* Фіксовані 240px на трьох ужитих 60px 3× гепів не гарантовано влазять
       у вузький container — гнучка ширина замість магічного числа. */
    .hero-stats__item  { width: auto; flex: 1 1 0; }
}

@media (max-width: 768px) {
    .hero {
        height:  auto;
        padding: 150px 0 0;
    }
    /* Тут .hero вже height: auto — блок росте разом зі сторінкою, а не
       затиснутий між фіксованими краями, тож трюк з flex-end/padding-bottom
       (потрібен лише коли hero-stats absolute всередині фіксованої висоти)
       тут не потрібен і навіть заважав би. */
    .hero__inner {
        justify-content: flex-start;
        padding-bottom:  0;
    }
    .hero__headline {
        gap:       28px;
        max-width: 100%;
    }
    .hero__title    { font-size: 32px; line-height: 38px; }
    .hero__subtitle { font-size: 16px; line-height: 25px; }

    .hero__actions {
        flex-direction: column;
        align-items:    stretch;
        gap:            12px;
    }
    .hero__actions .btn { width: 100%; }

    /* Смуга показників виходить з absolute-позиціонування в потік:
       відео-фон і скрим (inset: 0 на .hero) самі підлаштуються під нову
       висоту секції, коли вона перестає бути фіксованою. position: relative,
       а не static — z-index (успадкований з базового правила) працює лише
       на позиційованих елементах; на static він просто ігнорується, і
       .hero::before (absolute, z-index: 1) малювався ПОВЕРХ тексту stats,
       а не під ним — саме це «глушило» контраст, а не opacity фону. */
    .hero-stats {
        position:   relative;
        height:     auto;
        margin-top: 40px;
        padding:    28px 0;
    }
    .hero-stats__list {
        display:               grid;
        grid-template-columns: 1fr 1fr;
        gap:                   24px 16px;
        height:                auto;
    }
    .hero-stats__item  { width: 100%; }
}

@media (max-width: 480px) {
    .hero            { padding-top: 130px; }
    .hero-stats      { padding: 24px 0; }
    .hero-stats__list { gap: 20px 12px; }
}

/* ── 02 · Про квартал ( #pro-kvartal ) ──────────────────────────────────── */
/* Стопка карток: кожна — position: sticky зі своїм top (крок 16px), тому
   при скролі наступна картка «насувається» знизу і стає липкою рівно там,
   де попередня. js/pages/home.js (aboutStack) на кожен кадр скролу рахує,
   наскільки наступна картка перекрила поточну, і зменшує/затемнює її —
   так само, як у робочому референсі користувача. Розгорнутий стан — це
   просто природний кінець списку: коли остання картка «дійшла» до своєї
   точки прилипання, попередні вже проскролені вище й у потоці більше
   не існують. */
.about {
    padding:    110px 0;
    background: var(--bg-subtle);
}
.about__head  { margin-bottom: 60px; }
.about__stack {
    margin: 0 auto;
}

.stack__list {
    display:        flex;
    flex-direction: column;
    gap:            44px;
    margin:         0;
    padding:        0;
    list-style:     none;
}
/* --i ( номер картки ) проставляє шаблон. TOP — нижче фіксованого хедера
   (--header-height — стан Solid, у якому хедер завжди перебуває на
   такому скролі — + запас 16px), тому те саме значення саме собою
   підлаштовується під менший хедер на вузьких екранах; STEP — та сама
   «полоска» на 16px, що й у референсі, лише вона й дає ефект
   карток-краєчків, що виглядають одна з-під одної, поки чекають своєї
   черги стати липкими. */
.stack__item {
    position:   sticky;
    top:        calc(var(--header-height) + 16px + var(--i, 0) * 16px);
    z-index:    calc(var(--i, 0) + 1);
    transform-origin: 50% 0;
    will-change: transform;
    /* Тінь картки живе тут, не на .scard: .scard має overflow: hidden
       (щоб обрізати фото/хвилю по заокругленому кутку), а це заразом
       обрізає й власну box-shadow картки — на жодній ширині її не було
       видно. .stack__item точно того самого розміру, що .scard, і без
       overflow, тож тінь тут малюється нормально. */
    border-radius: 4px;
    box-shadow:    var(--card-shadow);
}

/* ── Картка стопки ──────────────────────────────────────────────────────── */
.scard {
    position:      relative;
    height:        600px;
    overflow:      hidden;
    background:    var(--bg-card);
    border:        1px solid var(--gold-line-soft);
    border-radius: 4px;
}

/* Фото починається там, де в макеті: 435px від лівого краю картки */
.scard__media {
    position: absolute;
    inset:    -1px -1px -1px 435px;
}
.scard__image {
    display:    block;
    width:      100%;
    height:     100%;
    object-fit: cover;
}

/* Крива панель поверх фото. Форма з макета, колір — токен */
.scard__wave {
    position: absolute;
    left:     -1px;
    top:      -1px;
    bottom:   -1px;
    width:    529.647px;
    height:   calc(100% + 2px);
    color:    var(--bg-elevated);
}

.scard__panel {
    position:        absolute;
    left:            -1px;
    top:             -1px;
    bottom:          -1px;
    width:           500px;
    display:         flex;
    flex-direction:  column;
    align-items:     flex-start;
    justify-content: center;
    gap:             16px;
    padding:         48px 76px 48px 56px;
}
.scard__name {
    display:        flex;
    flex-direction: column;
    gap:            10px;
    align-items:    flex-start;
}
.scard__title {
    margin:         0;
    color:          var(--text-primary);
    font-size:      30px;
    font-weight:    700;
    line-height:    1.2;
    text-transform: uppercase;
}
.scard__subtitle {
    margin:      0;
    color:       var(--gold-solid);
    font-size:   20px;
    font-weight: 600;
    line-height: 28px;
}
.scard__text {
    margin:      0;
    color:       var(--text-soft);
    font-size:   18px;
    font-weight: 500;
    line-height: 27px;
}

/* aboutStack() у js/pages/home.js сам не рахує кадри при reduced motion —
   але про всяк випадок, якщо скрипт не встиг завантажитись, transform і
   filter, які він міг встановити інлайново, тут глушаться примусово. */
@media (prefers-reduced-motion: reduce) {
    .stack__item { transform: none !important; filter: none !important; }
}

/* ── Про квартал — адаптив ──────────────────────────────────────────────── */
/* Композиція картки (фото зліва з відступом 435px, крива хвиля, панель
   500px) розрахована на широкий формат 1280×600 — нижче 1024px панелі й
   хвилі просто нема з чого масштабуватись пропорційно, тож картка
   перекладається у звичайний потік: фото зверху, текст знизу, хвилю
   прибираємо — вона мала сенс лише як межа між панеллю й фото поруч.
   Ефект липких карток лишається: сторінка й так довга (8 карток), і без
   накладання на вузькому екрані вона стала б довшою вдвічі — усі 8 карток
   показувались би одразу одна під одною на всю висоту. .stack__item сам
   собою не залежить від композиції картки всередині, тож sticky тут
   працює так само, як на десктопі. */
@media (max-width: 1024px) {
    .about        { padding: 72px 0; }
    .about__head  { margin-bottom: 40px; }

    .scard {
        height: auto;
    }
    .scard__media {
        position:     static;
        inset:        auto;
        aspect-ratio: 4 / 3;
    }
    .scard__wave { display: none; }
    .scard__panel {
        position: static;
        inset:    auto;
        width:    100%;
        padding:  28px 24px;
    }
    .scard__title    { font-size: 24px; }
    .scard__subtitle { font-size: 17px; line-height: 24px; }
    .scard__text     { font-size: 16px; line-height: 25px; }
}

@media (max-width: 480px) {
    .about       { padding: 56px 0; }
    .scard__panel { padding: 24px 20px; }
}

/* ── 03 · Я вдома ─────────────────────────────────────────────────────────
   Фото на всю ширину з градієнт-скримом знизу і цитатою по центру внизу.
   Скрим знизу набагато сильніший, ніж у hero, — тут немає окремої картки
   чи форми, що сама відділяється від фону, лише текст просто на фото. */
.ya-vdoma {
    position: relative;
    height:   800px;
    overflow: hidden;
    color:    var(--text-primary);
}
.ya-vdoma__media {
    position:   absolute;
    inset:      0;
    z-index:    0;
    width:      100%;
    height:     100%;
    object-fit: cover;
}
.ya-vdoma__scrim {
    position:   absolute;
    inset:      0;
    z-index:    1;
    background: linear-gradient(180deg,
                  rgba(1, 21, 44, 0)    0%,
                  rgba(1, 21, 44, .27)  50%,
                  rgba(1, 21, 44, .713) 71.261%,
                  rgba(1, 21, 44, .9)   100%);
    pointer-events: none;
}
.ya-vdoma__inner {
    position:        relative;
    z-index:         2;
    height:          100%;
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: flex-end;
    gap:             26px;
    padding-bottom:  60px;
    text-align:      center;
}
.ya-vdoma__title {
    margin:         0;
    max-width:      1270px;
    font-size:      60px;
    font-weight:    500;
    line-height:    66px;
    letter-spacing: -1.2px;
}
/* Дві лінії-градієнти з ромбиком між ними — той самий приз, що й
   .eyebrow::before/after (ромб-маска), лише більший і без тексту поруч. */
.ya-vdoma__divider {
    display:      flex;
    align-items:  center;
    gap:          14px;
}
.ya-vdoma__divider::before,
.ya-vdoma__divider::after {
    content:    "";
    width:      96px;
    height:     1px;
}
.ya-vdoma__divider::before {
    background: linear-gradient(90deg, rgba(189, 137, 95, 0) 0%, rgba(189, 137, 95, .75) 100%);
}
.ya-vdoma__divider::after {
    background: linear-gradient(90deg, rgba(189, 137, 95, .75) 0%, rgba(189, 137, 95, 0) 100%);
}
.ya-vdoma__diamond {
    flex:       0 0 auto;
    width:      7px;
    height:     7px;
    background: var(--gold-solid);
    transform:  rotate(45deg);
}

/* Я вдома — адаптація */
@media (max-width: 1024px) {
    .ya-vdoma       { height: 600px; }
    .ya-vdoma__inner { padding-bottom: 44px; gap: 20px; }
    .ya-vdoma__title { font-size: 40px; line-height: 48px; letter-spacing: -.8px; }
    .ya-vdoma__divider::before,
    .ya-vdoma__divider::after { width: 64px; }
}
@media (max-width: 768px) {
    .ya-vdoma        { height: 480px; }
    .ya-vdoma__inner { padding-bottom: 32px; gap: 16px; }
    .ya-vdoma__title { font-size: 30px; line-height: 38px; letter-spacing: -.5px; }
    .ya-vdoma__divider::before,
    .ya-vdoma__divider::after { width: 44px; }
}
@media (max-width: 480px) {
    .ya-vdoma        { height: 420px; }
    .ya-vdoma__title { font-size: 24px; line-height: 32px; }
}

/* ── 05 · Формат життя ( #format-zhyttia ) ──────────────────────────────── */
/* Фото — портретний кадр із великим запасом неба зверху; показане через
   background-size:cover, що обрізає зайве небо зверху, а
   background-position:bottom — щоб обрізалось саме небо, а не будинок
   знизу. Раніше тут був aspect-ratio (інлайновий style з PHP), що мав
   гарантувати мінімальну висоту секції під фото без обрізання, — прибрано:
   контент (картки + великий padding-bottom) і без нього завжди вищий за
   будь-яку розумну ratio-висоту, а на деяких ширинах (~1025–1440px)
   `aspect-ratio` разом з auto-шириною розтягував саму секцію ширше за
   viewport (горизонтальний скрол — знайдено адаптив-перевіркою).

   Градієнт-скрим — ДРУГИЙ шар того самого background-image (PHP дає
   `var(--format-scrim), url(фото)`), з тим самим background-size/position,
   що й фото — завдяки cover цей шар завжди точно дорівнює висоті секції,
   тож пікселі градієнта = пікселі висоти секції, рахуючи від top:0.

   Стопи градієнта — ТОЧНІ пікселі з макета (вузол 398:843: 12.835% /
   47.014% / 63.633% / 71.402% від висоти фрейма 2159px = 277 / 1015 /
   1374 / 1542px), а не відсотки й не calc від padding — обидва варіанти
   «пливли» від того, наскільки контент розтягує секцію, і давали інший
   результат, ніж у Figma. */
.format {
    position:            relative;
    padding:             110px 0 800px;
    /* Волосяні лінії секції зверху/знизу — вузли 398:869, 468:1717. */
    border-top:          1px solid var(--gold-line);
    border-bottom:       1px solid var(--gold-line);
    background-color:    var(--bg-canvas);
    --format-scrim:      linear-gradient(180deg,
                             var(--bg-subtle) 277px,
                             rgba(2, 31, 63, .819) 1015px,
                             rgba(2, 31, 63, .6) 1374px,
                             rgba(2, 31, 63, 0) 1542px);
    background-image:    none; /* задає інлайновий style, коли є format_bg */
    background-repeat:   no-repeat, no-repeat;
    background-size:     cover, cover;
    background-position: center bottom, center bottom;
    color:               var(--text-primary);
}
/* Без фонового фото (замовник додає сам) — звичайний нижній відступ секції
   замість великого запасу під розкриття фото. */
.format--no-media { padding-bottom: var(--section-gap); }

.format__inner {
    position:       relative;
    z-index:        2;
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            60px;
}

.format__grid {
    display:               grid;
    grid-template-columns: repeat(2, 1fr);
    gap:                   24px;
    width:                 100%;
    margin:                0;
    padding:               0;
    list-style:            none;
}


/* ≤1024px — фіксовані пікселі градієнта й background-size:cover з
   десктопної версії (розраховані під макет, 398:843) тут вже не тримають:
   великий padding-bottom робить бокс вузьким і високим водночас, і cover
   змушений масштабувати фото набагато сильніше, ніж на десктопі, — на
   768px від будинку лишається тільки впритул наближена текстура стіни,
   без даху й землі. Нижче — той самий безпечний режим, що раніше був лише
   для мобільного (≤640px): background-size:100% auto (без агресивного
   кропу) і скрим, порахований від фактичного padding-bottom кожного
   брейкпоінта через `--format-pb` — не від фіксованих пікселів макета,
   бо в Figma планшетного/мобільного макета взагалі немає. */
@media (max-width: 1024px) {
    .format {
        padding:          80px 0 500px;
        --format-pb:      500px;
        background-size:  100% auto, 100% auto;
        --format-scrim:   linear-gradient(180deg,
                              var(--bg-subtle) 0,
                              var(--bg-subtle) calc(100% - var(--format-pb)),
                              rgba(2, 31, 63, .5) calc(100% - var(--format-pb) * .5),
                              rgba(2, 31, 63, 0) 100%);
    }
}
@media (max-width: 768px) {
    .format { padding: 64px 0 400px; --format-pb: 400px; }
}
/* Дві колонки на вужчих екранах перестають вміщати текст без розриву слів
   посередині (перевірено скріншотами — злам стається між 560 і 480px) —
   нижче переходимо на список в один стовпчик. */
@media (max-width: 640px) {
    .format__grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
    .format { padding: 48px 0 250px; --format-pb: 250px; }
}

/* ── 06 · Забудовник ( #zabudovnyk ) ────────────────────────────────────── */
.zabudovnyk {
    padding:    110px 0;
    background: var(--bg-canvas);
    color:      var(--text-primary);
}
.zabudovnyk__inner {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            72px;
}
/* У макеті заголовок цієї секції вужчий за контейнер (900 проти 1280) —
   рядок тексту коротший і блок читається компактніше. */
.zabudovnyk__head  { max-width: 900px; }
.zabudovnyk__video { width: 100%; }

.zabudovnyk__columns {
    display:               grid;
    grid-template-columns: repeat(2, 1fr);
    gap:                   80px;
    width:                 100%;
}
.zabudovnyk__col {
    display:        flex;
    flex-direction: column;
    gap:            18px;
    padding-top:    19px;
    border-top:     1px solid var(--gold-line);
}
.zabudovnyk__col-title {
    margin:         0;
    font-size:      14px;
    line-height:    1.4;
    font-weight:    800;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color:          var(--gold-text);
}
.zabudovnyk__body {
    margin: 0;
    color:  var(--text-secondary);
}
.zabudovnyk__body p {
    margin:      0 0 10px;
    font-size:   16px;
    line-height: 26px;
}
.zabudovnyk__body p:last-child { margin-bottom: 0; }

/* Підпис із логотипом притиснутий до низу правої колонки — у макеті він
   стоїть на одній лінії з останнім рядком лівої колонки. */
.zabudovnyk__col--right { align-items: flex-end; }
.zabudovnyk__col--right .zabudovnyk__col-title,
.zabudovnyk__col--right .zabudovnyk__body { width: 100%; }

.zabudovnyk__credit {
    display:     flex;
    align-items: center;
    gap:         39px;
    margin:      auto 0 0;
    padding-top: 18px;
}
.zabudovnyk__credit-label {
    max-width:   79px;
    font-size:   14px;
    line-height: 1.2;
    color:       var(--text-secondary);
}
.zabudovnyk__credit-logo {
    width:  214px;
    height: auto;
}
/* Логотип 214×34 — ширина вже дає запас, а висота (34px) нижча за поріг
   тач-цілі 44px. Розширюємо зону кліку псевдоелементом, не розміром
   картинки, — той самий прийом, що footer-developer__link (footer.css). */
.zabudovnyk__credit-link {
    position: relative;
    display:  inline-block;
}
.zabudovnyk__credit-link::after {
    content:  "";
    position: absolute;
    inset:    -11px -8px;
}
.zabudovnyk__credit-link:hover .zabudovnyk__credit-logo,
.zabudovnyk__credit-link:focus-visible .zabudovnyk__credit-logo { opacity: .8; }

@media (max-width: 1024px) {
    .zabudovnyk          { padding: 80px 0; }
    .zabudovnyk__inner   { gap: 52px; }
    .zabudovnyk__columns { gap: 48px; }
}
/* Дві колонки по 600px тримаються рівно доти, доки в колонці лишається
   комфортна довжина рядка. Виміряно скріншотами: на 1024px колонка ще
   468px (≈55 знаків, читається нормально), а вже на 769px — 341px, і
   текст ламається по 4–6 слів у рядок, ліва колонка витягується вдвічі
   вище правої, під правою зяє порожнеча. Поріг рахується від бажаних
   ~400px на колонку: 2×400 + gap 48 + відступи контейнера 40 ≈ 890 —
   звідси 900px, а не «рівне» 768. */
@media (max-width: 900px) {
    .zabudovnyk__columns    { grid-template-columns: 1fr; gap: 32px; }
    .zabudovnyk__col--right { align-items: flex-start; }
    .zabudovnyk__credit     { gap: 24px; }
}
@media (max-width: 768px) {
    .zabudovnyk        { padding: 64px 0; }
    .zabudovnyk__inner { gap: 40px; }
}
@media (max-width: 480px) {
    .zabudovnyk              { padding: 48px 0; }
    .zabudovnyk__credit-logo { width: 168px; }
}

/* ── 07 · Наші проєкти ( #proiekty ) ────────────────────────────────────── */
.proiekty {
    position:   relative;
    overflow:   hidden;
    padding:    120px 0;
    background: var(--bg-subtle);
    color:      var(--text-primary);
}
/* Орнамент листя — власний файл секції (1920×369), не той, що у футері:
   там інша висота й інший розкрій. Тримається верхнього краю секції. */
.proiekty__pattern {
    position:            absolute;
    top:                 0;
    left:                0;
    z-index:             0;
    width:               100%;
    height:              369px;
    background-image:    url("../../img/leaf-pattern-projects.svg");
    background-repeat:   no-repeat;
    background-position: center top;
    background-size:     cover;
    pointer-events:      none;
}
.proiekty__inner {
    position: relative;
    z-index:  1;
}

/* Заголовок і лід — у два стовпці: H2 ліворуч, пояснення праворуч. */
.proiekty__head {
    display:       flex;
    align-items:   center;
    gap:           24px;
    margin-bottom: 48px;
}
.proiekty__heading { flex: 1 1 0; }
.proiekty__lead {
    flex:        0 0 auto;
    width:       600px;
    margin:      0;
    font-size:   20px;
    line-height: 32px;
    font-weight: 500;
    color:       rgba(255, 255, 255, .8);
}

.proiekty__list {
    display:    grid;
    grid-template-columns: repeat(3, 1fr);
    gap:        25px;
    margin:     0;
    padding:    0;
    list-style: none;
}
.proiekty__item { display: flex; }

@media (max-width: 1024px) {
    .proiekty        { padding: 80px 0; }
    .proiekty__head  { margin-bottom: 40px; }
    .proiekty__lead  { width: 45%; font-size: 17px; line-height: 27px; }
    .proiekty__list  { gap: 20px; }
}
/* Сітка карток спускається сходинками 3 → 2 → 1, а не 3 → 1. Картка в
   макеті портретна (410×560), і саме ця пропорція несе композицію: фото
   зверху, щільне затемнення й текст знизу. На всю ширину (860×420) вона
   перевертається в майже горизонтальну смугу — фото домінує, а текст
   тулиться вузькою стрічкою внизу. Тому нижче 900px спершу дві колонки
   (≈418px на картку — майже рівно макетні 410), і тільки нижче 640px,
   де й дві колонки дали б ~288px, — один стовпчик.
   Заголовок і лід переходять у стовпчик одразу на 900px: там лід уже
   вужчий за половину екрана й читається як обрізаний. */
@media (max-width: 900px) {
    .proiekty__head {
        flex-direction: column;
        align-items:    flex-start;
        gap:            20px;
    }
    .proiekty__lead { width: 100%; }
    .proiekty__list { grid-template-columns: repeat(2, 1fr); gap: 24px; }
}
@media (max-width: 768px) {
    .proiekty      { padding: 64px 0; }
}
@media (max-width: 640px) {
    .proiekty__list { grid-template-columns: 1fr; }
}
/* На телефоні опис переносить на 3–4 рядки, і при висоті 380px текстовий
   блок з'їдав 40–46% картки (проти ~29% на десктопі) — фото перетворювалось
   на вузьку смужку зверху, а картка читалась як текстовий блок із картинкою,
   а не як фото-картка з підписом, чим вона є в макеті. 440px повертає
   пропорцію ближче до десктопної (35–40%), не роздуваючи секцію.
   Бейдж статусу — текст змінної довжини («ЗДАНИЙ В ЕКСПЛУАТАЦІЮ» найдовший):
   на 320px він займав 205 з 280px ширини картки, тож трохи стискаємо. */
@media (max-width: 480px) {
    .proiekty      { padding: 48px 0; }
}