/*
 * Ziggurat BIM — Footer
 * Значення зняті з макета 407:5804.
 */

/* Верхня межа — градієнтна лінія (.has-line-top у розмітці, токен у main.css). */
.site-footer {
    position:   relative;
    overflow:   hidden;
    padding:    72px 0 40px;
    background: linear-gradient(180deg, #031431 0%, #0f3068 100%);
}

/* Лінія має лежати над декоративним світлом. */
.site-footer::before { z-index: 2; }

/* Декоративне світло у правому нижньому куті. */
.site-footer__glow {
    position:            absolute;
    right:               -60px;
    bottom:              -80px;
    width:               811px;
    height:              645px;
    background-image:    url('../img/glow.svg');
    background-repeat:   no-repeat;
    background-size:     contain;
    background-position: right bottom;
    pointer-events:      none;
    opacity:             .9;
}

.site-footer > .container {
    position:       relative;
    z-index:        1;
    display:        flex;
    flex-direction: column;
    gap:            42px;
}

/* ── Спільне ────────────────────────────────────────────────────────────── */
.footer-label {
    margin:         0;
    font-size:      14px;
    font-weight:    400;
    line-height:    1.6;
    letter-spacing: 4px;
    text-transform: uppercase;
    /* #697591 давав 2.77:1 на світлому краї градієнта футера — нижче норми
       WCAG AA (4.5:1 для дрібного тексту). Токен --color-muted дає 4.99:1. */
    color:          var(--color-muted);
    /* Без цього у вузькому flex-рядку лейбл стискається до нуля
       і переноситься по одній літері. */
    flex:           none;
    white-space:    nowrap;
}

.footer-links {
    display:    flex;
    flex-wrap:  wrap;
    gap:        24px;
    list-style: none;
}

.footer-links a {
    font-size:       16px;
    line-height:     1.6;
    color:           var(--color-text-light);
    text-decoration: none;
    transition:      color var(--transition);
}

.footer-links a:hover,
.footer-links a:focus-visible { color: #fff; }

/* ── Верхній ряд: послуги + меню ────────────────────────────────────────── */
.footer-nav {
    display:         flex;
    justify-content: space-between;
    gap:             48px;
    flex-wrap:       wrap;
}

.footer-nav__col {
    display:        flex;
    flex-direction: column;
    gap:            12px;
}

/* ── Середній ряд ───────────────────────────────────────────────────────── */
.footer-main {
    display:     flex;
    gap:         80px;
    align-items: flex-start;
    padding-top: 42px;
    border-top:  1px solid rgba(184, 209, 255, .1);
}

.footer-brand {
    display:        flex;
    flex-direction: column;
    gap:            32px;
    width:          283px;
    flex:           none;
}

.footer-brand__about {
    font-size:   16px;
    line-height: 1.6;
    color:       var(--color-text-light);
}

.footer-social {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           48px;
    height:          48px;
    background:      #0e2652;
    border:          1.143px solid var(--color-border-blue);
    border-radius:   10px;
    transition:      border-color var(--transition);
}

.footer-social:hover,
.footer-social:focus-visible { border-color: var(--color-border-hover); }

.footer-social .icon { width: 23px; height: 21px; }

/* Контакти */
.footer-contacts {
    display:        flex;
    flex-direction: column;
    gap:            40px;
    flex:           none;
}

.office__title {
    margin:      0 0 4px;
    font-size:   14px;
    font-weight: 400;
    line-height: 1.6;
    color:       #fff;
}

.office__body {
    display:        flex;
    flex-direction: column;
    font-size:      16px;
    line-height:    1.6;
    font-style:     normal;
    color:          var(--color-text-light);
}

.office__body a {
    color:           inherit;
    text-decoration: none;
    transition:      color var(--transition);
}

.office__body a:hover,
.office__body a:focus-visible { color: #fff; }

/* ── Карта ──────────────────────────────────────────────────────────────── */
.footer-map {
    display:        flex;
    flex-direction: column;
    gap:            10px;
    flex:           1 1 523px;
    min-width:      0;
}

.footer-map__head {
    display:         flex;
    align-items:     flex-start;
    justify-content: space-between;
    gap:             16px;
    min-height:      42px;
    flex-wrap:       wrap;
}

.footer-map__switch {
    display:   flex;
    gap:       6px;
    flex-wrap: wrap;
    min-width: 0;
}

.map-tab {
    display:         inline-flex;
    align-items:     center;
    gap:             8px;
    height:          42px;
    padding:         0 14px;
    border-radius:   12px;
    border:          1px solid #05a5ff;
    background:      rgba(5, 8, 20, .3);
    color:           #05a5ff;
    font-size:       14px;
    font-weight:     500;
    letter-spacing:  .28px;
    white-space:     nowrap;
    cursor:          pointer;
    box-shadow:      0 7px 13px rgba(0, 0, 0, .1);
    transition:      color var(--transition), border-color var(--transition);
}

.map-tab .icon { flex: none; }

.map-tab.is-active {
    background:   linear-gradient(90deg, #2d79e8 0%, #5ea8f8 100%);
    border-color: rgba(255, 255, 255, .3);
    color:        #fff;
}

.footer-map__pane {
    position:      relative;
    overflow:      hidden;
    border-radius: 16px;
    min-height:    280px;
    background:    #0a1a34;
}

.footer-map__pane[hidden] { display: none; }

.footer-map__img {
    display:    block;
    width:      100%;
    height:     280px;
    object-fit: cover;
}

.footer-map__marker {
    position:  absolute;
    top:       50%;
    left:      50%;
    width:     29px;
    height:    40px;
    transform: translate(-50%, -75%);
}

.footer-map__link {
    position:        absolute;
    right:           17px;
    bottom:          17px;
    display:         inline-flex;
    align-items:     center;
    gap:             10px;
    height:          32px;
    padding:         0 16px;
    background:      #fff;
    border:          1px solid rgba(255, 255, 255, .2);
    border-radius:   8px;
    color:           #000;
    font-size:       14px;
    font-weight:     500;
    letter-spacing:  .28px;
    text-decoration: none;
    white-space:     nowrap;
    filter:          drop-shadow(0 7px 6.5px rgba(0, 0, 0, .1));
}

/* У макеті стрілка дивиться вліво й розвернута трансформацією. */
.footer-map__link .icon {
    flex:      none;
    transform: scaleX(-1);
}

/* ── Нижній ряд ─────────────────────────────────────────────────────────── */
/* Роздільник перед нижнім рядом — та сама градієнтна лінія, що й угорі. */
.footer-bottom {
    position:        relative;
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             24px;
    flex-wrap:       wrap;
    padding-top:     42px;
}

.footer-copyright,
.footer-legal .footer-links a {
    font-size:   14px;
    line-height: 1.6;
    color:       rgba(255, 255, 255, .5);
}

.footer-legal .footer-links a:hover,
.footer-legal .footer-links a:focus-visible { color: #fff; }

/* ── Адаптив ────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .site-footer { padding: 56px 0 32px; }

    /* Планшет: кожен блок на свою смугу — інакше контактам і карті
       не вистачає ширини й вони стискаються до нечитабельного. */
    .footer-main {
        flex-wrap: wrap;
        gap:       40px;
    }

    .footer-brand,
    .footer-contacts,
    .footer-map { flex: 1 1 100%; width: 100%; }

    /* Офіси — у дві колонки, лейбл над ними на всю ширину. */
    .footer-contacts {
        display:               grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap:                   24px 40px;
        align-items:           start;
    }

    .footer-contacts > .footer-label { grid-column: 1 / -1; }

    .site-footer__glow { opacity: .5; }
}

@media (max-width: 768px) {
    .site-footer > .container { gap: 32px; }

    .site-footer { padding: 40px 0 24px; }

    .footer-nav { gap: 32px; }

    .footer-main,
    .footer-bottom { padding-top: 32px; }

    .footer-main {
        flex-direction: column;
        gap:            32px;
    }

    /* Мобайл: офіси назад в одну колонку — дві не вміщаються. */
    .footer-contacts {
        grid-template-columns: 1fr;
        gap:                   32px;
    }

    .footer-map__head {
        flex-direction: column;
        align-items:    flex-start;
        gap:            12px;
    }

    .map-tab {
        min-height: 44px;
        flex:       1 1 auto;
    }

    .footer-links { gap: 12px 20px; }

    .footer-bottom {
        flex-direction: column;
        align-items:    flex-start;
        gap:            16px;
    }
}