.button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    position: relative;
    min-height: 54px;
    padding: 12px 22px;
    border-radius: var(--radius-control);
    border: 1px solid transparent;
    font-weight: 500;
    transition:
        transform var(--transition-base),
        box-shadow var(--transition-base),
        background-color var(--transition-base),
        border-color var(--transition-base),
        color var(--transition-base);
    background-clip: padding-box;
    overflow: hidden;
    isolation: isolate;
}

.button:hover {
    transform: translateY(-1px);
}

.button:focus-visible,
.gallery__tab:focus-visible,
.gallery__arrow:focus-visible,
.mobile-cta__button:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus);
}

.button--primary {
    color: #ffffff;
    background: transparent;
    border-color: rgba(13, 103, 199, 0.08);
    box-shadow: var(--shadow-button);
}

.button--primary::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--gradient-main);
    background-size: 140% 140%;
    background-position: 0% 50%;
    transition: background-position var(--transition-base);
    z-index: -1;
}

.button--primary:hover::before {
    background-position: 100% 50%;
}

.button--ghost {
    color: var(--color-accent-strong);
    border-color: rgba(13, 103, 199, 0.14);
    background: rgba(255, 255, 255, 0.9);
}

.button--ghost:hover {
    border-color: rgba(13, 103, 199, 0.32);
    background: rgba(255, 255, 255, 0.98);
}

.button--light {
    color: var(--color-accent-strong);
    background: rgba(255, 255, 255, 0.96);
    border-color: rgba(255, 255, 255, 0.28);
    box-shadow: 0 10px 24px rgba(7, 28, 56, 0.12);
}

.button--secondary {
    color: var(--color-accent-strong);
    border: 1px solid rgba(13, 103, 199, 0.14);
    background: rgba(255, 255, 255, 0.9);
}

.button--secondary:hover {
    border-color: rgba(13, 103, 199, 0.32);
    background: rgba(255, 255, 255, 0.98);
}

.program-card__link,
.result-card__link {
    width: 100%;
}
