/* ==========================================================================
   Projects — shared card grid and call to action
   Used by every page that shows project cards:
     /project-category      home/projects-overview.blade.php   (3-up)
     /projects/{slug}       home/projects.blade.php            (3-up)
     /project-details/{slug} home/project-detail.blade.php     (4-up, "Similar Projects")
   Markup lives in home/includes/project-cards.blade.php.
   ClickUp: 86ey7ftf3, 86ey7ftf4
   ========================================================================== */


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

.projects-grid {
    margin: 0 -7px;
}

.projects-grid:after {
    clear: both;
    content: '';
    display: table;
}

.projects-grid-item {
    box-sizing: border-box;
    float: left;
    margin-bottom: 14px;
    padding: 0 7px;
    width: 33.3333%;
}

/* Hidden by the category filter rather than removed, so the grid needs no reflow
   logic and every card keeps its position when the filter is cleared. */
.projects-grid-item.is-hidden {
    display: none;
}

/* Four across, for the Similar Projects row on a project detail page.
   Centred rather than floated left, because the row is only ever as long as the category
   is: Single Family has two projects, so those detail pages have a single similar project
   and one card stranded at the far left under a centred heading reads as a broken layout.
   Inline-block instead of float is what makes centring possible; font-size:0 on the row
   collapses the whitespace between the items, which would otherwise add ~4px per gap on
   top of the 14px gutter. Every piece of text inside a card sets its own size, so nothing
   inherits the zero. */
.projects-grid-4up {
    font-size: 0;
    text-align: center;
}

.projects-grid-4up .projects-grid-item {
    display: inline-block;
    float: none;
    font-size: 16px;
    text-align: left;
    vertical-align: top;
    width: 25%;
}


/* Card
   ========================================================================== */

.project-card {
    background-color: #8c8c8c; /* shows through when a project has no image on disk */
    display: block;
    overflow: hidden;
    padding-bottom: 96%; /* near-square, per the design */
    position: relative;
    text-decoration: none;
}

.project-card:hover,
.project-card:focus {
    text-decoration: none;
}

.project-card-image {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    -webkit-transition: -webkit-transform 0.45s ease;
    transition: transform 0.45s ease;
    z-index: 1;
}

/* Scrim — keeps the title legible over a light photo. */
.project-card:before {
    background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.82) 100%);
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.82) 100%);
    bottom: 0;
    content: '';
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    -webkit-transition: opacity 0.3s ease;
    transition: opacity 0.3s ease;
    z-index: 2;
}

/* Orange reveal on hover, echoing the overlay treatment used site-wide. */
.project-card:after {
    background-color: #f87836;
    bottom: 0;
    content: '';
    height: 0;
    left: 0;
    position: absolute;
    right: 0;
    -webkit-transition: height 0.3s ease;
    transition: height 0.3s ease;
    z-index: 4;
}

.project-card:hover .project-card-image,
.project-card:focus .project-card-image {
    -webkit-transform: scale(1.06);
    transform: scale(1.06);
}

.project-card:hover:after,
.project-card:focus:after {
    height: 5px;
}

.project-card-badge {
    background-color: #f87836;
    color: #ffffff;
    font-family: "Open Sans", Verdana, Geneva, sans-serif;
    font-size: 10px;
    font-weight: 600;
    left: 14px;
    letter-spacing: 1.2px;
    line-height: 1;
    padding: 7px 11px;
    position: absolute;
    text-transform: uppercase;
    top: 14px;
    z-index: 3;
}

.project-card-text {
    bottom: 0;
    box-sizing: border-box;
    left: 0;
    padding: 18px 18px 20px;
    position: absolute;
    right: 0;
    z-index: 3;
}

.project-card-title {
    color: #ffffff;
    display: block;
    font-family: "Open Sans", Verdana, Geneva, sans-serif;
    font-size: 19px;
    font-weight: 700;
    line-height: 24px;
    text-transform: uppercase;
}

.project-card-location {
    color: #f87836;
    display: block;
    font-family: "Open Sans", Verdana, Geneva, sans-serif;
    font-size: 13px;
    line-height: 18px;
    margin-top: 5px;
}


/* Call to action
   ========================================================================== */

.projects-cta {
    padding-bottom: 90px;
    padding-top: 40px;
    width: 100%;
}


/* Breakpoints — 3-up desktop, 2-up tablet, 1-up phone.
   The 4-up variant steps down one breakpoint later, since its cards start narrower.
   ========================================================================== */

@media only screen and (max-width: 959px) {
    .projects-grid-item {
        width: 50%;
    }

    .projects-grid-4up .projects-grid-item {
        width: 50%;
    }

    .projects-cta {
        padding-bottom: 60px;
    }
}

@media only screen and (max-width: 599px) {
    .projects-grid-item,
    .projects-grid-4up .projects-grid-item {
        width: 100%;
    }

    /* A full-bleed square is too tall on a phone. */
    .project-card {
        padding-bottom: 70%;
    }

    /* The site-wide button carries 4em of side padding, which leaves it flush against
       both edges on a phone. Trim it back here only, and keep the block off the edges. */
    .projects-cta {
        box-sizing: border-box;
        padding-left: 20px;
        padding-right: 20px;
    }

    .projects-cta .uk-button-large.uk-padding-h-large {
        padding-left: 2em;
        padding-right: 2em;
    }
}