@import 'variables';
@import 'mixins';

body.namespace-none.controller-team_pages {
    footer {
        margin-top:50px;
    }


    &.action-show {
        footer {
            margin-top:0px;
        }
    }
}

#team-intro-page {
    section.organisation-top-banner-section {
        .inner {
            background-image:image-url("company/team-header.jpg");
        }
    }
    .section-link {
        color:$color-2;
    }
    section.intro-section {
        padding:50px 0;
        margin-bottom:0;

        @include width-medium() {
            border-bottom:none !important;
            .lo-container {
                display:flex;
                align-items: center;
            }
        }

        h2 {
            @include font-size(23, 27);
            font-weight:$fw-semibold;
            margin-bottom:10px;
        }


        p {
            @include font-size(16, 22);
            margin-bottom:10px;
            a {
                color:$color-2;
                font-weight:$fw-semibold;
            }
        }

        .content {
            margin-bottom:50px;

            @include width-medium() {
                margin-bottom:0;
                width:45%;
            }
        }

        .map {
            img {
                display:block;
                width:100%;
            }

            @include width-medium() {
                width:55%;
                padding-left:10%;
            }
        }
    }

    .details-section {
        background:#eee;
        padding:50px 0;

        .lo-container {
            display:flex;
            flex-wrap: wrap;
        }
        h2 {
            width:100%;
            margin-bottom:20px;
            @include font-size(18, 18);
            font-weight:$bold;
            text-align:center;
        }

        .group {
            background:#fff;
            padding:30px;
            margin-bottom: 20px;
            border-radius:2px;

            @include width-medium {
                margin: 2%;
                width:46%;
            }
            h3 {
                @include font-size(22, 22);
                font-weight:$fw-semibold;
                margin-bottom:20px;
            }
            p {
                margin-bottom:10px;
                @include font-size(16, 22);
            }
        }
    }
}

#team-members-page {
    section.organisation-top-banner-section {
        .inner {
            background-image:image-url("company/team-header.jpg");
        }
    }
    .pagination {
        width:100%;
        margin: 0 auto;
    }
    section {
        padding:30px 0 0 0;

        &.organisation-top-banner-section {
            padding:0;
            margin-bottom:20px;
        }
        h3 {
            @include font-size(16, 20);
            color:#fff;
            a {
                color:#fff;
                text-decoration:none;
                border-bottom:1px solid #ddd;
            }
        }
    }
    h2 {
        font-weight:$fw-black;
        @include font-size(23, 27);
        margin-bottom:10px;
    }
    p.subheading {
        @include font-size(16, 22)
        max-width:650px;
        margin-bottom:20px;
    }
    .people {
        display:flex;
        flex-wrap:wrap;
    }
    .maintainer-wrapper, .mentor-wrapper {
        margin-bottom:20px;
    }
    .widget-maintainer, .widget-mentor {
        margin:0 20px;
        height:100%;
        img {
            filter:none;
        }
        .bio {
            color:#555;
            @include font-size(14, 20);
            letter-spacing:-0.3px;
        }

    }

    .person {
        display:block;
        text-decoration:none;
        @include width-smaller-than-medium {
            padding:0 0 30px 0;
            &.contributor {
                width:50%;
                padding:0 20px 20px 0;
                img {
                    padding-right:15%;
                }
            }
        }
        @include width-medium {
            width:50%;
            padding:0 50px 30px 0;
            &.contributor {
                width:33%;
            }
        }
        &.contributor {
            h3 {
                @include font-size(15, 14);
            }
            a {
                color:$color-2;
                font-weight:$fw-semibold;
            }
            .bio, a {
                @include font-size(14, 14);
            }
        }

        img {
            display:block;
            width:100%;
            padding-right:20px;
            border-radius:2px;
        }

        h3 {
            color:#333;
            @include font-size(18, 18);
            font-weight:$fw-black;
            margin-bottom:5px;
            overflow:hidden;
            text-overflow:ellipsis;
            white-space:nowrap;
        }
        .bio {
            color:#333;
            @include font-size(15, 20);
        }
        .holding-text {
            color:#999;
            @include font-size(15, 20);
        }
    }

    .contributors {
        .contributor {
            border:1px solid #ddd;
            border-radius:2px;
            display:block;
            text-decoration:none;
            color:#333;
            margin:10px;
            clear:both;
            &:hover {
                background:#fafafa;
            }

            img {
                display:block;
                width:100%;
                margin-right:20px;
                border-radius:2px 0 0 2px;
                float:left;
                width:66px;
                height:66px;
                border-right:1px solid #ddd;
            }
            h3 {
                color:$color-2;
                @include font-size(16, 18);
                font-weight:$bold;
                margin-bottom:5px;
                overflow:hidden;
                text-overflow:ellipsis;
                white-space:nowrap;
                padding:12px 15px 0 0;
            }
            .num-contributions {
                color:#555;
                @include font-size(10, 10);
                letter-spacing:-0.3px;
                margin:0 15px 11px 0;
                color:#999;
                font-weight:$regular;
                background:#eee;
                border:1px solid #ddd;
                border-radius:2px;
                display:inline-block;
                padding:3px 6px;
            }
        }
        .pure-button {
            margin-top:10px;
            border:1px solid $color-2;
            background:#fff;
            color:$color-2;
            width:100%;
            padding:15px;
            @include font-size(15, 15);
            &:hover {
                background:$color-2;
                color:#fff;
            }
        }
    }
}
