/* ══════════════════════════════════════════════════════════════════════════
   Спільний блок сторінок галузей: «Які системи взаємодіють у проєктах».

   У шаблонах замовника (residential-bim-page-template і
   commercial-real-estate-page-template) цей блок ідентичний до символу, тому
   живе одним файлом і одним партіалом pages/global/industry-systems.php.
   Підключається лише сторінкам зі списку в functions.php, не глобально.

   Хром секції (фон, відступ заголовка) лишається в CSS відповідної сторінки.
   ══════════════════════════════════════════════════════════════════════════ */

.systems-overview {
    display:               grid;
    grid-template-columns: minmax(230px, 290px) minmax(0, 1fr);
    align-items:           center;
    gap:                   clamp(42px, 6vw, 88px);
}

.systems-core {
    position:        relative;
    isolation:       isolate;
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    aspect-ratio:    1;
    border:          1px solid rgba(91, 180, 251, .25);
    border-radius:   50%;
    background:      radial-gradient(circle, rgba(29, 105, 202, .22) 0%, rgba(5, 29, 69, .72) 53%, rgba(3, 21, 51, .9) 72%),
                     linear-gradient(145deg, rgba(11, 48, 100, .72), rgba(4, 22, 52, .84));
    box-shadow:      inset 0 0 55px rgba(24, 107, 210, .15), 0 0 0 13px rgba(68, 160, 239, .025), 0 24px 50px -37px rgba(0, 4, 20, .95);
    text-align:      center;
}

.systems-core::before, .systems-core::after {
    content:        "";
    position:       absolute;
    z-index:        -1;
    border:         1px solid rgba(81, 177, 248, .16);
    border-radius:  50%;
    pointer-events: none;
}

.systems-core::before { inset: 27px; }

.systems-core::after {
    top:           50%;
    right:         -72px;
    width:         72px;
    height:        1px;
    border:        0;
    border-radius: 0;
    background:    linear-gradient(90deg, rgba(81, 185, 255, .72), rgba(81, 185, 255, .08));
    box-shadow:    0 0 12px rgba(50, 164, 255, .26);
}

.systems-core__count {
    font-size:           clamp(64px, 7vw, 94px);
    font-weight:         300;
    line-height:         .85;
    letter-spacing:      -.07em;
    color:               transparent;
    -webkit-text-stroke: 1px rgba(105, 195, 255, .72);
    text-shadow:         0 0 25px rgba(52, 166, 255, .16);
}

.systems-core__label {
    margin-top:     11px;
    font-size:      11px;
    line-height:    1;
    letter-spacing: .22em;
    text-transform: uppercase;
    color:          #91bce5;
}

.systems-core__title {
    margin-top:     27px;
    font-size:      18px;
    font-weight:    500;
    line-height:    1.32;
    letter-spacing: .035em;
    text-transform: uppercase;
    color:          #edf5ff;
}

.systems-core__dot {
    position:      absolute;
    width:         8px;
    height:        8px;
    border:        1px solid #69c8ff;
    border-radius: 50%;
    background:    #082c5d;
    box-shadow:    0 0 13px rgba(71, 181, 255, .58);
}

.systems-core__dot--1 { top: 18%; left: 23%; }

.systems-core__dot--2 { top: 36%; right: 10%; }

.systems-core__dot--3 { bottom: 13%; left: 38%; }

.systems-categories {
    display:               grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap:                   16px 18px;
}

.systems-group {
    position:      relative;
    overflow:      hidden;
    min-height:    218px;
    padding:       27px 28px 25px;
    border:        1px solid rgba(75, 141, 213, .12);
    border-top:    1px solid rgba(100, 190, 255, .44);
    border-radius: 0 0 10px 10px;
    background:    linear-gradient(150deg, rgba(9, 39, 84, .72), rgba(4, 23, 55, .54));
    box-shadow:    inset 0 1px 0 rgba(213, 237, 255, .025);
}

.systems-group::before {
    content:    "";
    position:   absolute;
    top:        -1px;
    left:       0;
    width:      100px;
    height:     1px;
    background: #60c5ff;
    box-shadow: 0 0 13px rgba(74, 185, 255, .4);
}

.systems-group__head {
    display:       flex;
    align-items:   baseline;
    gap:           17px;
    margin-bottom: 22px;
}

.systems-group__index {
    flex:           0 0 auto;
    font-size:      10px;
    letter-spacing: .17em;
    color:          #65bff8;
}

.systems-group__title {
    font-size:      20px;
    font-weight:    500;
    line-height:    1.25;
    letter-spacing: -.4px;
    color:          #edf5ff;
}

.systems-group__list {
    display:    flex;
    flex-wrap:  wrap;
    gap:        8px;
    margin:     0;
    padding:    0;
    list-style: none;
}

.systems-group__item {
    position:      relative;
    padding:       8px 11px 8px 22px;
    border:        1px solid rgba(88, 161, 231, .18);
    border-radius: 6px;
    background:    rgba(7, 27, 61, .66);
    font-size:     12.5px;
    line-height:   1.25;
    color:         #c5d6ec;
}

.systems-group__item::before {
    content:       "";
    position:      absolute;
    top:           50%;
    left:          10px;
    width:         5px;
    height:        5px;
    border-radius: 50%;
    background:    #59bfff;
    box-shadow:    0 0 8px rgba(72, 180, 255, .44);
    transform:     translateY(-50%);
}

.section-note {
    max-width:     1040px;
    margin:        clamp(42px, 6vw, 68px) 0 0;
    padding:       23px 27px 23px 31px;
    border:        1px solid rgba(84, 161, 230, .16);
    border-left:   2px solid #61c4ff;
    border-radius: 0 10px 10px 0;
    background:    linear-gradient(90deg, rgba(19, 69, 132, .28), rgba(6, 31, 70, .16));
    box-shadow:    0 14px 30px -28px rgba(44, 148, 247, .45);
    line-height:   1.65;
    color:         #d9e7f9;
}

.systems-levels {
    position:              relative;
    display:               grid;
    grid-template-columns: 1fr 30px 1fr 30px 1fr 30px 1fr 30px 1fr;
    align-items:           center;
    gap:                   8px;
    margin-top:            26px;
}

.systems-levels::before {
    content:    "";
    position:   absolute;
    top:        50%;
    right:      2%;
    left:       2%;
    z-index:    -1;
    height:     1px;
    background: linear-gradient(90deg, transparent, rgba(84, 186, 255, .54) 12%, rgba(84, 186, 255, .54) 88%, transparent);
}

.systems-levels__step {
    display:       grid;
    place-items:   center;
    min-height:    48px;
    padding:       9px 13px;
    border:        1px solid rgba(88, 171, 241, .25);
    border-radius: 8px;
    background:    rgba(5, 27, 63, .94);
    font-size:     12px;
    color:         #cfe0f6;
    text-align:    center;
}

.systems-levels__arrow {
    display:       grid;
    place-items:   center;
    width:         27px;
    height:        27px;
    border:        1px solid rgba(92, 181, 248, .3);
    border-radius: 50%;
    background:    #092c5b;
    box-shadow:    0 0 11px rgba(61, 172, 255, .12);
    font-size:     12px;
    color:         #70c8ff;
}

@media (max-width: 1000px) {
    .systems-overview {
        grid-template-columns: 1fr;
        gap:                   40px;
    }
    .systems-core {
        width:         min(100%, 560px);
        min-height:    210px;
        aspect-ratio:  auto;
        margin:        0 auto;
        border-radius: 18px;
    }
    .systems-core::before {
        inset:         22px;
        border-radius: 12px;
    }
    .systems-core::after {
        top:        auto;
        right:      50%;
        bottom:     -40px;
        width:      1px;
        height:     40px;
        background: linear-gradient(180deg, rgba(81, 185, 255, .72), rgba(81, 185, 255, .08));
    }
    .systems-core__count { font-size: 64px; }
    .systems-core__title { margin-top: 18px; }
}

@media (max-width: 760px) {
    .systems-overview { gap: 34px; }
    .systems-core {
        width:      100%;
        min-height: 190px;
    }
    .systems-categories {
        grid-template-columns: 1fr;
        gap:                   11px;
    }
    .systems-group {
        min-height: 0;
        padding:    24px 22px 22px;
    }
    .systems-group__head { margin-bottom: 18px; }
    .section-note {
        margin-top: 38px;
        padding:    20px 20px 20px 23px;
        font-size:  14.5px;
    }
    .systems-levels {
        grid-template-columns: 1fr;
        gap:                   7px;
        padding-left:          13px;
    }
    .systems-levels::before {
        top:        8px;
        bottom:     8px;
        left:       0;
        width:      1px;
        height:     auto;
        background: linear-gradient(180deg, transparent, rgba(84, 186, 255, .55), transparent);
    }
    .systems-levels__arrow {
        margin:    0 auto;
        transform: rotate(90deg);
    }
    .systems-levels__step {
        width:      100%;
        min-height: 43px;
    }
}

@media (max-width: 480px) {
    .systems-levels__step { min-width: 0; }
}