//
// Team Unit
// ---
// bigchaindb.com
//
.team__image {
    @extend .img--responsive;
    background: $brand-main-gray;
    width: 230px;
    clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%);
    filter: grayscale(1);
}

.team__name {
    @extend .h5;
    color: $text-color;
    margin-bottom: 0;

    // the bottom line
    &:after {
        content: '';
        height: 1px;
        width: 3rem;
        display: block;
        margin: ($spacer / 1.3) auto ($spacer / 2) auto;
        background: $brand-main-blue-light;
    }
}

.team__position {
    @extend .text-dimmed;
    margin-bottom: ($spacer / 2);
}

.team__social {
    margin-bottom: 0;
}

.team__social__link {
    display: inline-block;
    margin: 0 ($spacer / 2);
    box-shadow: none;

    &,
    &:hover,
    &:focus {
        background: transparent;
    }

    &:hover,
    &:focus {
        transform: translateY(-1px);
        filter: drop-shadow(0 1px 4px rgba($brand-main-blue-dark, .4));
    }

    &:active {
        filter: drop-shadow(0 1px 2px rgba($brand-main-blue-dark, .3));
        outline: 0;
        transform: none;
    }

    .icon {
        fill: $brand-primary;
    }
}

.team__bio {
    text-align: left;
    font-size: $font-size-sm;
    margin-bottom: 0;
    margin-top: $spacer;
    display: none;
    opacity: 0;
    height: 0;
    transition: .4s ease-out;

    p:last-child {
        margin-bottom: 0;
    }
}

.team__bio__trigger {
    display: block;
    text-align: center;
    cursor: pointer;
    padding-top: $spacer;
    border-top: 1px solid $gray-dark;
    margin-top: $spacer * 3;
    margin-bottom: $spacer * 2;
    position: relative;
    font-size: $font-size-sm;
    color: $gray;

    span {
        width: 2rem;
        height: 2rem;
        display: block;
        margin-left: auto;
        margin-right: auto;
        margin-top: -2rem;
        background: $gray-dark;
        color: $gray-light;
        font-size: $font-size-lg;
        line-height: 1.35;
        transition: .15s ease-out;
    }

    &:hover {
        border-top-color: darken($gray-dark, 5%);

        span {
            background: darken($gray-dark, 5%);
            color: $brand-main-green;
        }
    }
}


//
// Grid redefinition: more spacious
//
$spacer-team: 3rem;

.grid--team {
    margin: -($spacer-team) 0 $spacer-team (-($spacer-team));

    > .grid__col {
        padding: $spacer-team 0 0 $spacer-team;
    }
}