/*
    This file is for the block elements used to separate areas on the page. They can be dynamic width vertically ruled, or any width (usually full) horizontally ruled.
*/

/*
    blocks-container will equally space descendant divs into a 100% width wrappable flex row.

    ----------------------
    | [] [] [] [] [] []  |
    | [] []              |
    ----------------------

    <div class="blocks-container">
        <div class="block-item">
        <div class="block-item">
        <div class="block-item">
        <div class="block-item">
        <div class="block-item">
        ...

    OR

    <div class="blocks-container">
        <div>
            outside of block content...
            <div class="block-item">
*/
.blocks-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin-left: -10px;
    margin-right: -10px;
    /*justify-content: space-between;*/ /* can use if one line, OR add many hidden child elements to ensure equal spacing is used */
    
}

    .blocks-container > div {
        margin: 10px;
        flex: 0 1 auto;
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    .blocks-container b,
    .blocks-container h1,
    .blocks-container h2,
    .blocks-container h3,
    .blocks-container h4,
    .blocks-container h5,
    .blocks-container h6 {
        margin: 0;
        padding: 0;
        margin-top: 5px;
        margin-bottom: 15px;
        font-size: 15px;
        font-weight: bold;
        line-height: 20px;
        color: black;
    }

/*
    block-item is for a small block item whose contents are vertically ruled. 5 of them can fit in a row in a container.

    ---------
    |       | 
    |  img  |
    |       |
    | Title |
    | Subhe |
    | Desc  |
    |  CTA  |
    ---------

    <div class="block-item">
        <a> image url (optional)
            <img src=""/> Image, add class "fill" to not contain
            <h1,h2,h3,h4,h5,h6,b> Title
        <c-subheading-1,2,3,4,5,6> Subheading
        <p> Caption
        <a> Call-to-action
*/
.block-item,
.block-item-spacer {
    width: 100%;
    min-height: 360px;
    background-color: white;
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.051);
    overflow: hidden;
    text-align: center;
    vertical-align: top;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: black;
    padding-right: 35px;
    padding-left: 35px;
    padding-bottom: 45px;
    flex-grow: 1;
}

.block-item-spacer {
    background: none;
    box-shadow: none;
}

.block-item > a:last-child:not(.c-call-to-action) {
    margin-top: auto;
    color: #0067B8;
    font-weight: 500;
}

    .block-item > a:last-child:not(.c-call-to-action)::after {
        content: "\E76C";
        font-family: MWF-MDL2;
        color: #0067B8;
        vertical-align: middle;
        padding-left: 5px;
        font-weight: 800;
    }

    .block-item > a.c-call-to-action:last-child {
        margin-top: auto;
    }

.block-item > img {
    max-height: 175px;
    min-height: 175px;
    width: 100%;
    object-fit: scale-down;
}

.block-item > img.fill {
    width: auto;
    min-width: 275px;
    min-height: 130px;
    max-height: 130px;
    margin-bottom: 15px;
    object-fit: cover;
}

.block-item h1,
.block-item h2,
.block-item h3,
.block-item h4,
.block-item h5,
.block-item h6,
.block-item .c-heading-1,
.block-item .c-heading-2,
.block-item .c-heading-3,
.block-item .c-heading-4,
.block-item .c-heading-5,
.block-item .c-heading-6,
.block-item b {
    margin: 0;
    padding: 0;
    margin-top: 0;
    margin-bottom: 5px;
    font-size: 15px;
    font-weight: 600;
    line-height: 20px;
}

.block-item [class*="c-caption"] {
    margin: 0;
    padding: 0;
}

.block-item p {
    margin-top: 15px;
    margin-bottom: 15px;
}

/*.block-item > a:first-of-type {
        word-break: break-word;
        padding-top: 0;
        position: relative;
        display: block;
    }

        .block-item > a:first-of-type:hover,
        .block-item > a:first-of-type:active {
            text-decoration: underline;
        }

        .block-item > a:first-of-type:focus {
            border: 2px solid black;
        }

    .block-item > a:first-of-type > img,
    .block-item > img:first-of-type {
        position: relative;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: 130px;
        margin-bottom: 10px;
        object-fit: cover;
    }



.block-item p {
    word-wrap: break-word;
    margin: 0 auto;
    padding: 12px 24px;
    width: 100%;
    max-height: 100%;
}

.block-item .c-glyph {
    vertical-align: middle;
}*/




/*
    block-item-horizontal has similar elements to block-item, but it is horizontally ruled and 100% width.

    -----------------------------------------
    |          Title                 CTA    |
    |  img     Description                  |
    |          Controls                     |
    -----------------------------------------

    <div class="block-item-horizontal">
        <div>
            <img> Left-aligned image, add .f-round for circle image
        </div>
        <div>
            <a,b,header> Title
            <p> Caption
            <input/> Any controls you want
        </div>
        <div>
            <a> Right-aligned actions
        </div>
    </div>
*/
.block-item-horizontal {
    display: flex;
    flex-direction: row;
    background: #F3F2F1;
    box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.15);
    min-height: 145px;
    margin: 20px 0;
}

    .block-item-horizontal > div {
        padding: 15px 0;
        padding-left: 15px;
    }

        .block-item-horizontal > div:first-child { /* img container */
            margin-left: 0;
            padding: 0;
            width: 175px;
            min-width: 175px;
            align-items: center;
            overflow: hidden;
        }

        .block-item-horizontal > div:first-child img {
            max-width: 100%;
        }

        .block-item-horizontal > div:last-child { /* right-aligned actions */
            text-align: right;
            margin-right: 20px;
            flex-grow: 1;
        }

            .block-item-horizontal > div:last-child > a.c-button {
                display: inline-block;
            }

    .block-item-horizontal .title {
        font-size: 18px;
        line-height: 24px;
        font-weight: 500;
        color: black;
        border: 0;
    }

    .block-item-horizontal a.title:not(.f-image) {
        color: #0067B8;
    }

        .block-item-horizontal a.title:not(.f-image):hover {
            text-decoration: underline;
            color: #0067B8;
        }

        .block-item-horizontal a.title:not(.f-image):focus {
            border: 2px solid black;
        }

    .block-item-horizontal [class*="c-caption"] {
        color: #6a6a6a;
        margin-bottom: 8px;
    }

    .block-item-horizontal b {
        font-size: 14px;
        color: black;
        margin-top: auto;
    }

    .block-item-horizontal .c-checkbox .c-label {
        font-size: 14px;
        line-height: 20px;
        font-weight: 400;
        margin-top: 5px;
    }

    .block-item-horizontal img.f-round {
        max-width: 115px;
        max-height: 115px;
        margin: 0 auto;
        position: relative;
        top: 50%;
        transform: translatey(-50%);
    }


/*
    .teams-collaboration-block-item is a simple responsive horizontal block item with a different background color and a background image.

    Desktop, horizontal:
    |-----------------------------------------------------------|
    |  Collaborate!                                           x |
    |  Here's why you should join us.            (graphic here) |
    |  [Join us]                                                |
    |-----------------------------------------------------------|


    Mobile, vertical:
    |-----------------|
    |               x |
    | Collaborate!    |
    | Here's why you  |
    | should join us. |
    | [Join us]       |
    |                 |
    | (graphic here)  |
    |-----------------|

    <div class="teams-collaboration-block-item">
        <div class="c-heading-1">Collaborate with your peers</div>
        <p>Join our Teams collaboration platform and meet peers in your region, form teams and generate new ideas for your Imagine Cup projects.</p>
        <a href="#" class="c-call-to-action">Join us</a>
        <a href="#" class="c-glyph glyph-close"><a>
    </div>
*/
.teams-collaboration-block-item {
    background: #EBE6F4;
    background-image: url('/Library/Images/BG/teams-collaboration-bg.svg');
    background-image: url('/Library/Images/BG/teams-collaboration-bg.svg'), linear-gradient(180deg, #EBE6F4 99.99%, rgba(106, 54, 182, 0) 100%);
    background-repeat: no-repeat;
    background-position-y: bottom;
    background-position-x: 97%;
    padding: 40px;
    padding-right: 45%;
    position: relative;
    margin: 30px 0;
}

    .teams-collaboration-block-item .c-heading-1 {
        font-size: 24px;
        font-weight: 700;
        line-height: 32px;
        color: black;
        margin: 0;
        padding: 0;
    }

        .teams-collaboration-block-item .c-heading-1::before {
            background: url('/Library/Images/Icons/teams_48x1.svg');
            background-position: center;
            background-size: contain;
            background-repeat: no-repeat;
            width: 39px;
            height: 39px;
            display: inline-block;
            content: ' ';
            margin-right: 15px;
            vertical-align: middle;
        }

    .teams-collaboration-block-item p {
        font-size: 14px;
        line-height: 17px;
        color: black;
        margin-top: 10px;
        max-width: 630px;
    }

    .teams-collaboration-block-item .c-call-to-action {
        background: #4B53BC;
        margin-top: 20px;
    }

    .teams-collaboration-block-item .c-call-to-action::after {
        font-family: 'MWF MDL2 Assets', mwf-mdl2;
        margin-top: 0;
        vertical-align: middle;
    }

    .teams-collaboration-block-item button.c-glyph.glyph-cancel {
        position: absolute;
        top: 0;
        right: 0;
        color: black;
    }

@media screen and (max-width: 768px){
    .teams-collaboration-block-item {
        padding-bottom: 215px;
        padding-right: 40px;
        background-position: bottom center;
    }

    .block-item-horizontal {
        flex-wrap: wrap;
    }

    .block-item-horizontal > div:first-child {
        max-width: unset;
        min-width: unset;
        width: 30%;
        padding: 5px;
    }

    .block-item-horizontal > div:nth-child(2) {
        width: 70%;
    }
}