/*
MCM Stories plugin: Projects page grid.
Two projects to a row on desktop and tablet (the theme runs four, then three, then two).
Phones are left to the theme: one to a row at 750px and under.
Remove this file's enqueue in mcm-stories.php to go back to the theme grid.
*/

@media screen and (min-width : 751px)
{
    .projects-page .projects:not(.projects--stories) .project
    {
        --project-card : calc(.5 * (100vw - 140px - 20px - 5px));

        flex          : 0 0 var(--project-card);
        width         : var(--project-card);
        margin-bottom : 60px;
    }

    .projects-page .projects:not(.projects--stories) .project__image
    {
        width  : var(--project-card);
        height : calc(.665 * var(--project-card));
    }

    .projects-page .projects:not(.projects--stories) .project__title
    {
        font-size   : 16px;
        line-height : 22px;
        margin-top  : 14px;
    }
}

/* No hover line on grid photos (the inset white border that animated on hover) */
.project .project__image__border
{
    display : none;
}

/* Project descriptions now run to several paragraphs */
.single-project__meta__description p + p
{
    margin-top : 18px;
}

/* "Coming Soon" status label, set beside the project title on the grid card and the project page.
   Turned on per project with the Project Status box on its edit screen. */
.project__status
{
    font-family    : "GoodSans", sans-serif;
    font-size      : 10px;
    font-weight    : 400;
    line-height    : 14px;
    position       : relative;
    top            : -1px;
    display        : inline-block;
    margin-left    : 14px;
    letter-spacing : 2px;
    text-transform : uppercase;
    white-space    : nowrap;
    vertical-align : middle;
    color          : #909090;
}

.single-project__meta__title .project__status
{
    top         : -3px;
    margin-left : 22px;
    font-size   : 11px;
    letter-spacing : 2.5px;
}

@media screen and (max-width : 750px)
{
    .single-project__meta__title .project__status
    {
        top         : -2px;
        margin-left : 16px;
    }
}