/* ==========================================================
   Awards Page
========================================================== */

.awards-page {

    max-width: 1180px;
    margin: 80px auto;
    padding: 0 40px;

}

.awards-container {

    width: 100%;

}

.post-type-archive-award .bc-hamburger {
    display:none;
}

.post-type-archive-award .bc-back-home {
    display:block;
}

/* ==========================================================
   Award Item
========================================================== */

.award-item {

    border-top: 1px solid #e8e8e8;

    padding: 18px 0;

}

.award-item:last-child {

    border-bottom: 1px solid #e8e8e8;

}

/* ==========================================================
   Header Grid
========================================================== */

.award-header {

    display: grid;

    grid-template-columns: 90px 1fr;

    column-gap: 60px;

    align-items: start;

    cursor: pointer;

}

/* Active item gets certificate column */

.award-item.active .award-header {

    grid-template-columns: 90px 1fr 260px;

}

/* ==========================================================
   Year
========================================================== */

.award-year {

    font-size: 15px;

    color: #888;

    line-height: 2.5;

}

/* ==========================================================
   Title
========================================================== */

.award-title {

    margin: 0;

    font-size: 24px;

    font-weight: 400;

    line-height: 1.35;

}

/* ==========================================================
   Content
========================================================== */

.award-content {

    margin-top: 30px;

}

.award-organization {

    margin-bottom: 25px;

    font-size: 15px;

    color: #666;

}

.award-description {

    max-width: 700px;

    line-height: 1.8;

}

.award-link {

    margin-top: 35px;

}

.award-link a {

    color: #444;

    text-decoration: none;

    border-bottom: 1px solid transparent;

    transition: .25s;

}

.award-link a:hover {

    border-color: #444;

}

/* ==========================================================
   Certificate
========================================================== */

.award-certificate {

    justify-self: flex-start;

    width: 100%;

    max-width: 300px;

    text-align: center;
    

}

.award-certificate a {

    display: block;

}

.award-certificate img {

    display: block;

    width: 100%;

    height: auto;

    background: #fff;

    border: 1px solid #ececec;

    padding: 12px;

    box-sizing: border-box;

}

/* ==========================================================
   Hide Closed Items
========================================================== */

.award-body{

    max-height:0;

    overflow:hidden;

    transition:max-height .45s ease;

}

.award-body-inner{

    display:grid;

    grid-template-columns:90px 1fr 260px;

    column-gap:60px;

    padding-top:10px;

}

.award-item.active .award-body{

    max-height:900px;

}

/* ==========================================
   Mobile
========================================== */

@media (max-width: 768px) {

    .awards-page {

        margin: 40px auto;
        padding: 0 20px;

    }

    .award-item {

        padding: 20px 0;

    }

    /* Header becomes one column */

    .award-header {

        display: block;

        cursor: pointer;

    }

    .award-year {

        margin-bottom: 10px;

        font-size: 14px;

    }

    .award-title h2 {

        font-size: 22px;

        line-height: 1.4;

        margin: 0;

    }

    /* Body becomes one column */

    .award-body-inner {

        display: flex;

        flex-direction: column;

        gap: 24px;

        padding-top: 24px;

    }

    /* Spacer not needed */

    .award-spacer {

        display: none;

    }

    /* Certificate */

    .award-certificate {

        max-width: 100%;

        width: 100%;

    }

    .award-certificate img {

        width: 100%;

        max-width: 320px;

        height: auto;

    }

    .award-organization {

        margin-bottom: 15px;

    }

}