/* ==========================================================================
   Hero: плашка-перемикач філій «Філія: Варшава | Краків»
   Темна капсула між підзаголовком і авто. Активна філія — м'ятна, інша — посилання.
   Розмітка: template-parts/home/hero.php (.hero-branch).
   ========================================================================== */
.hero-branch {
    display: flex;
    justify-content: center;
    margin: 28px 0 0;
}

.hero-branch__inner {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px;
    border-radius: 9999px;
    background: var(--color-dark);
    box-shadow:
        0 2px 8px rgba(255, 255, 255, .12) inset,
        0 8px 24px rgba(24, 29, 31, .22);
}

.hero-branch__label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 10px 0 12px;
    color: rgba(255, 255, 255, .72);
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
}

.hero-branch__label .icon {
    flex: none;
    width: 20px;
    height: 20px;
    color: var(--color-cyan);
}

.hero-branch__item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 11px 22px;
    border-radius: 9999px;
    color: var(--color-light);
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    transition: background-color .25s ease, color .25s ease, box-shadow .25s ease;
}

a.hero-branch__item:hover,
a.hero-branch__item:focus-visible {
    background: rgba(255, 255, 255, .14);
}

.hero-branch__item.is-active {
    background: var(--gradient-accent);
    color: var(--color-dark);
    box-shadow:
        0 2px 8px rgba(255, 255, 255, .32) inset,
        0 0 16px rgba(127, 242, 184, .35);
}

/* Мобільний: плашка на 20% менша за десктопну (усі розміри × 0.8) */
@media (max-width: 767px) {
    .hero-branch {
        margin-top: 16px;
    }

    .hero-branch__inner {
        gap: 3px;
        padding: 5px;
    }

    .hero-branch__label {
        gap: 6px;
        padding: 0 3px 0 8px;
    }

    .hero-branch__label .icon {
        width: 16px;
        height: 16px;
    }

    .hero-branch__label-text {
        display: none;
    }

    .hero-branch__item {
        padding: 9px 14px;
        font-size: 12px;
    }
}