﻿.BusinessCard,
.BusinessCard * {
    box-sizing: border-box;
}

.BusinessCard {
    margin: var(--mbase-spacer-xxl) 0 var(--mbase-spacer);
    padding: var(--mbase-spacer-md) var(--mbase-spacer-md) var(--mbase-spacer-lg);
    box-shadow: var(--mbase-nice-box-shadow);
    border-radius: var(--mbase-brdr-radius);
    position: relative;
}

.BusinessCard:last-child {
    margin-bottom: 0;
}

.BusinessCard::after {
    background: var(--mbase-clr-theme-intense);
    background: -webkit-linear-gradient(-180deg, var(--mbase-clr-theme-intense) 0%, var(--mbase-clr-theme) 100%);
    background: linear-gradient(270deg, var(--mbase-clr-theme-intense) 0%, var(--mbase-clr-theme) 100%);
    border-top-left-radius: var(--mbase-brdr-radius);
    border-top-right-radius: var(--mbase-brdr-radius);
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 5px;
    z-index: 2;
}

.BusinessCard__title {
    position: absolute;
    top: -4.5rem;
    right: 0;
    width: 70%;
    margin-bottom: var(--mbase-spacer-md);
    font-size: var(--mbase-txtSize-3);
    font-weight: var(--mbase-txt-regular);
    color: var(--mbase-clr-theme);
    text-align: right;
}

.BusinessCard__title::before {
    font-family: var(--mbase-fam-icon);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    text-decoration: none;
    text-transform: none;
    content: "\e01d";
}

.BusinessCard__title::before {
    margin-right: var(--mbase-spacer-xs);
    position: relative;
    top: 4px;
}

.BusinessCard__columns {
    display: flex;
    word-break: break-word;
    flex-direction: column;
}

.BusinessCard__columns + p {
    margin: var(--mbase-spacer) 0 0;
}

.BusinessCard__col--left {
    position: absolute;
    top: -50px;
    z-index: 3;
    display: inline-block;
    left: calc(var(--mbase-spacer-md) - var(--mbase-spacer-xxs));
    width: 115px;
    height: 115px;
    margin: 0 0 var(--mbase-spacer-xs);
    border-radius: 50%;
    overflow: hidden;
    vertical-align: middle;
    background: var(--mbase-color-grey-100) url(/ui/members-base-2023/img/placeholders/profile--placeholder.png) no-repeat 50% 50%;
    background-size: 200%;
    border: 4px solid var(--mbase-clr-white);
    box-shadow: var(--mbase-shadow-overlay);
}

.BusinessCard__col--right {
    width: 100%;
    padding-top: var(--mbase-spacer-xl);
}

.BusinessCard__profilePicture {
    width: 100%;
}

.BusinessCard .BusinessCard__name {
    margin-bottom: var(--mbase-spacer-sm);
    font-size: var(--mbase-txtSize-4);
    color: var(--mbase-clr-txt-body);
    font-family: var(--mbase-fam-regular);
    font-weight: var(--mbase-txt-bold);
}

.BusinessCard__description {
    margin-bottom: var(--mbase-spacer-sm);
    font-size: var(--mbase-txtSize-5);
    line-height: var(--mbase-lnHeight-xs);
    margin-top: calc(var(--mbase-spacer-xs) * -1);
}

.BusinessCard_contactInformation {
    margin-bottom: var(--mbase-spacer);
    font-size: var(--mbase-txtSize-5);
}

.BusinessCard__phoneNumber,
.BusinessCard__emailAddress,
.BusinessCard__url {
    display: block;
}

.BusinessCard__typeName {
    font-size: var(--mbase-txtSize-7);
    color: var(--mbase-clr-txt-meta);
    margin-right: var(--mbase-spacer-xs);
}

.BusinessCard__phoneNumber {
    margin-bottom: var(--mbase-spacer-sm);
    font-size: var(--mbase-txtSize-6);
}

.BusinessCard__phoneNumber::before {
    font-family: var(--mbase-fam-icon);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    text-decoration: none;
    text-transform: none;
    content: "\e028";
}

.BusinessCard__phoneNumber::before {
    position: relative;
    top: 3px;
}

.BusinessCard__phoneNumber a {
    color: var(--mbase-clr-txt-body);
    text-decoration: none;
}

.BusinessCard__phoneNumber:last-child {
    margin-bottom: var(--mbase-spacer-sm);
}

.BusinessCard__emailAddress {
    color: var(--mbase-clr-link);
    line-height: var(--mbase-lnHeight-sm);
    margin-bottom: var(--mbase-spacer-sm);
}

.BusinessCard__emailAddress::before {
    font-family: var(--mbase-fam-icon);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    text-decoration: none;
    text-transform: none;
    content: "\e023";
}

.BusinessCard__emailAddress::before {
    margin-right: var(--mbase-spacer-xs);
    position: relative;
    top: 2px;
}

.BusinessCard__emailAddress a {
    text-decoration: none;
}

.BusinessCard__url--typeWebsite {
    color: var(--mbase-clr-link);
    line-height: var(--mbase-lnHeight-sm);
    margin-bottom: var(--mbase-spacer-sm);
}

.BusinessCard__url--typeWebsite::before {
    font-family: var(--mbase-fam-icon);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    text-decoration: none;
    text-transform: none;
    content: "\e01b";
}

.BusinessCard__url--typeWebsite::before {
    margin-right: var(--mbase-spacer-xs);
    position: relative;
    top: 2px;
}

.BusinessCard__url--typeWebsite a {
    text-decoration: none;
}

.BusinessCard__address {
    margin-bottom: var(--mbase-spacer-sm);
    font-style: normal;
    line-height: var(--mbase-lnHeight-sm);
}

.BusinessCard__address:last-child {
    margin-bottom: 0;
}

@media (min-width: 62em) {
    .BusinessCard__title {
        font-size: var(--mbase-txtSize-5);
    }
}
