/* ==========================================================
   AWD Core - Project Page
   ========================================================== */

/* ---------- Variables ---------- */

:root {

    --awd-font-sans: "Montserrat", sans-serif;
    --awd-font-serif: "EB Garamond", serif;
    --awd-font-display: "Cinzel", serif;

    --awd-gold: #9a8446;
    --awd-ink: #333333;
    --awd-text: #444444;
}


/* ---------- Page Layout ---------- */

.awd-project-page {

    width: 100%;
    background: #F5F5F5;

}

.awd-project-container {

    width: 100%;
    max-width: 100%;

    margin: 0 auto;

    padding: 0 40px 40px;

    box-sizing: border-box;

}


/* ---------- Images ---------- */

.awd-project-container img {

    display: block;

    max-width: 100%;

    height: auto;

}


/* ==========================================================
   Project Header
   ========================================================== */

.awd-project-header {

    text-align: center;

    padding: 70px 0 0px;

}

.awd-project-header .awd-project-kicker {

    font-family: var(--awd-font-sans);

    font-size: .78rem;

    font-weight: 600;

    letter-spacing: .22em;

    text-transform: uppercase;

    color: var(--awd-gold);

    margin-bottom: 22px;

}

.awd-project-header h1.awd-project-title {

    font-family: var(--awd-font-display);

    font-size: 3rem;

    font-weight: 500;

    line-height: 1.1;

    letter-spacing: .02em;

    color: var(--awd-ink);

    margin: 0 0 28px;
    
    margin-bottom:40px;

    letter-spacing:.03em;


}

.awd-project-header .awd-project-intro {

    font-family: var(--awd-font-serif);

    font-size: 1.5rem;

    line-height: 1.55;

    max-width: 700px;

    margin: 0 auto;

    color: var(--awd-text);

}


/* ==================================================
   Project Gallery
================================================== */

.awd-project-gallery {

    max-width: 1200px;
    margin: 5rem auto;

    column-count: 3;
    column-gap: 1.9rem;
    margin-bottom: 2.5rem;
}

.awd-gallery-card {

    display: inline-block;
    width: 100%;

    margin: 0 0 1.5rem;

    break-inside: avoid;
    page-break-inside: avoid;

    overflow: hidden;

}

.awd-gallery-card img {

    display: block;
    width: 100%;
    height: auto;

    transition: transform .35s ease;

}

.awd-gallery-card:hover img {

    /* transform: scale(1.02); */
}
.awd-gallery-card a{
    position: relative;
    display: block;
}
.awd-gallery-card a::after{
    content: '';
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    transition: .4s all;
}

.awd-gallery-card a:hover::after{
    background-color: rgba(0,0,0,0.5);
}
.awd-project-page .awd-back-link-wrap a.awd-back-link{
   color: #444444; 
}

/* For Enter Animation */
.awd-gallery-card {
    overflow: hidden;
}

.awd-gallery-image {
    display: block;
    width: 100%;
    height: auto;
    opacity: 0;
    transform: scale(0.5);
    transform-origin: center center;
    will-change: transform, opacity;
}

/* =====================================================
   Project Details
===================================================== */

.awd-project-details{

    margin:20px 0 0px;

}


/* =====================================================
   Accordion Header
===================================================== */

.awd-accordion-toggle{

    width:100%;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:22px 0;

    border:none;

    border-top:1px solid #d9d5cd;

    background:none;

    cursor:pointer;

}


.awd-accordion-toggle span:first-child{

    font-family:var(--awd-font-sans);

    font-size:15px;

    letter-spacing:.20em;

    text-transform:uppercase;

    font-weight:500;

    color:var(--awd-text);

}

.awd-accordion-toggle:hover{

    color:var(--awd-gold);

}


/* =====================================================
   Plus / Minus
===================================================== */

.awd-accordion-icon{

    font-size:40px;

    color:var(--awd-gold);

    line-height:1;

    transition:transform .3s ease;

}

.awd-accordion.is-open .awd-accordion-icon{
    transform: rotate(45deg);
}




/* =====================================================
   Accordion Panel
===================================================== */

.awd-accordion-content{

    max-height:0;

    overflow:hidden;

    transition:max-height .45s ease;

}

.awd-accordion.is-open .awd-accordion-content{
    max-height: 2000px;
}



/* =====================================================
   Editorial Details Grid
===================================================== */

.awd-details-grid{

    display:grid;

    grid-template-columns:repeat(2,minmax(0,1fr));

    column-gap:90px;

    row-gap:40px;

    padding:65px 0;

}


/* =====================================================
   Individual Item
===================================================== */

.awd-detail-item{

    min-width:0;

}


.awd-detail-label{

    margin:0 0 12px;

    color:var(--awd-gold);

    font-family:var(--awd-font-sans);

    font-size:14px;

    font-weight:500;

    letter-spacing:.18em;

    text-transform:uppercase;

}


.awd-detail-value{

    color:var(--awd-text);

    font-family:var(--awd-font-serif);

    font-size:18px;

    line-height:1.65;

}




/* =====================================================
   Project Story
===================================================== */

.awd-project-story{

    margin:0 0 0px;

}

.awd-project-story-content{

    width:100%;

    max-width:none;

    padding:45px 0;

    font-family:var(--awd-font-serif);

    font-size:22px;

    line-height:1.9;

    color:var(--awd-text);

}

.awd-project-story-content p{

    margin:0 0 1.7em;

}

.awd-project-story-content p:last-child{

    margin-bottom:0;

}


/* Editorial Drop Cap */

.awd-project-story-content p:first-child::first-letter{

    float:left;

    font-family:var(--awd-font-display);

    font-size:5.2rem;

    line-height:.78;

    color:var(--awd-gold);

    margin:.10em .18em 0 0;

}


/* =====================================================
   Back to Portfolio
===================================================== */

.awd-back-link-wrap{

    margin-top:20px;

}

.awd-back-link{

    display:inline-block;

    padding-bottom:8px;

    border-bottom:1px solid var(--awd-gold);

    color:var(--awd-text);

    font-family:var(--awd-font-sans);

    font-size:15px;

    letter-spacing:.18em;

    text-transform:uppercase;

    text-decoration:none;

    transition:.25s ease;

}

.awd-back-link:hover{

    color:var(--awd-gold);

}

/* Tablet */

@media (max-width: 1023px) {

    .awd-project-gallery {

        column-count: 2;

    }
    .awd-project-gallery{
        column-gap: 10px;
    }
    .awd-gallery-card{
        margin: 0 0 3px;
    }

}

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

@media (max-width:768px){

    .awd-details-grid{

        grid-template-columns:1fr;

        row-gap:32px;

        column-gap:0;

        padding:35px 0;

    }

}


/* Mobile */

@media (max-width: 767px) {

    .awd-project-gallery {

        column-count: 1;
        column-gap: 10px;

    }

    .awd-gallery-card {

        margin-bottom: 3px;

    }
    .awd-project-header h1.awd-project-title{
        font-size: 2.25rem;
        margin-bottom: 20px;
    }

    .awd-project-gallery{
        height:auto !important;
    }

    .awd-gallery-card{
        position:static !important;
        width:100% !important;
        margin-bottom:20px;
    }

    .awd-gallery-sizer{
        display:none;
    }

}