/*
MCM Stories
Styles for the Stories grid (/stories/) and the single story page.
Sits on top of the mcmny theme: same margins (70 / 40 / 20), same breakpoints
(1450, 1200, 750, 400), same fonts (Chronicle Display, GoodSans).
*/

/********************************
 *  STORIES GRID
 ********************************/

/* A hairline under the page title, the width of the grid, so the title has a defined
   space of its own above the stories. */
.stories-page .stories__title
{
    padding-bottom : 80px;
}

.stories-page .page-title__wrapper::after
{
    display    : block;
    width      : calc(100vw - 140px);
    margin     : 0 auto 80px;
    content    : "";
    border-top : 1px solid #d5d5d5;
}

/* Two across on desktop and tablet, one on phones.
   Wider cards than Projects, with the title set in the serif. */
.projects--stories .project
{
    --story-card : calc(.5 * (100vw - 140px - 20px - 5px));

    flex          : 0 0 var(--story-card);
    width         : var(--story-card);
    margin-bottom : 80px;
}

.projects--stories .project__image
{
    width  : var(--story-card);
    height : calc(.66 * var(--story-card));
}

.projects--stories .project__text
{
    align-items : center;
    text-align  : center;
}

.projects--stories .story-card__title
{
    font-family             : "Chronicle Display", "GT Super Display", serif;
    font-size               : 30px;
    font-weight             : 200;
    line-height             : 40px;
    max-width               : 90%;
    margin                  : 26px 0 0;
    letter-spacing          : 0;
    text-decoration         : none;
    color                   : #000000;
    -webkit-font-smoothing  : antialiased;
    -moz-osx-font-smoothing : grayscale;
}

@media screen and (max-width : 750px)
{
    .stories-page .stories__title
    {
        padding-bottom : 60px;
    }

    .stories-page .page-title__wrapper::after
    {
        width         : calc(100vw - 80px);
        margin-bottom : 60px;
    }

    .projects--stories .project
    {
        --story-card  : calc(100vw - 80px);

        margin-bottom : 55px;
    }

    .projects--stories .story-card__title
    {
        font-size   : 24px;
        line-height : 32px;
        margin-top  : 18px;
    }
}

@media screen and (max-width : 400px)
{
    .stories-page .page-title__wrapper::after
    {
        width : calc(100vw - 40px);
    }

    .projects--stories .project
    {
        --story-card : calc(100vw - 40px);
    }
}

/********************************
 *  SINGLE STORY: TITLE AND BANNER
 ********************************/

.story__meta,
.story__banner,
.story__body
{
    position         : relative;
    z-index          : 200;
    box-sizing       : border-box;
    width            : 100vw;
    background-color : #ffffff;
}

.story__meta
{
    padding    : 190px 70px 90px;
    text-align : center;
}

.story__title
{
    font-family             : "Chronicle Display", "GT Super Display", serif;
    font-size               : 60px;
    font-weight             : 200;
    line-height             : 72px;
    max-width               : 900px;
    margin                  : 0 auto;
    letter-spacing          : 0;
    color                   : #000000;
    -webkit-font-smoothing  : antialiased;
    -moz-osx-font-smoothing : grayscale;
}

.story__subheadline
{
    font-family             : "Chronicle Display", "GT Super Display", serif;
    font-size               : 26px;
    font-weight             : 200;
    line-height             : 38px;
    max-width               : 720px;
    margin                  : 28px auto 0;
    letter-spacing          : 0;
    color                   : #6b6b6b;
    -webkit-font-smoothing  : antialiased;
    -moz-osx-font-smoothing : grayscale;
}

.story__banner__media
{
    overflow : hidden;
    width    : 100%;
    height   : 78vh;
}

.story__banner__media img
{
    display    : block;
    width      : 100%;
    height     : 100%;
    object-fit : cover;
}

/********************************
 *  SINGLE STORY: BODY
 ********************************/

.story__body
{
    padding : 100px 0 40px;
}

/* Everything sits in a 680px reading column unless it asks for more room */
.story__content > *
{
    box-sizing   : border-box;
    width        : calc(100% - 140px);
    max-width    : 680px;
    margin-right : auto;
    margin-left  : auto;
}

.story__content,
.story__content p,
.story__content li
{
    font-family             : "GoodSans", sans-serif;
    font-size               : 16px;
    line-height             : 31px;
    letter-spacing          : .5px;
    color                   : #4d4d4d;
    -webkit-font-smoothing  : antialiased;
    -moz-osx-font-smoothing : grayscale;
}

.story__content p
{
    margin-top    : 0;
    margin-bottom : 26px;
    padding       : 0;
}

.story__content a
{
    text-decoration       : underline;
    text-underline-offset : 3px;
    color                 : #000000;
}

.story__content h2,
.story__content h3,
.story__content h4
{
    font-family             : "Chronicle Display", "GT Super Display", serif;
    font-weight             : 200;
    margin-top              : 64px;
    margin-bottom           : 22px;
    letter-spacing          : 0;
    color                   : #000000;
    -webkit-font-smoothing  : antialiased;
    -moz-osx-font-smoothing : grayscale;
}

.story__content h2
{
    font-size   : 34px;
    line-height : 44px;
}

.story__content h3
{
    font-size   : 26px;
    line-height : 36px;
}

.story__content h4
{
    font-size   : 21px;
    line-height : 30px;
}

.story__content ul,
.story__content ol
{
    margin-top    : 0;
    margin-bottom : 26px;
    padding-left  : 22px;
}

.story__content ul
{
    list-style : disc;
}

.story__content ol
{
    list-style : decimal;
}

.story__content hr,
.story__content .wp-block-separator
{
    width      : 60px;
    height     : 0;
    margin     : 64px auto;
    border     : 0;
    border-top : 1px solid #d5d5d5;
}

/* Photos
   No alignment set  = inset (960px)
   Wide width        = inside the page margins
   Full width        = edge to edge */

.story__content figure
{
    margin-top    : 80px;
    margin-bottom : 80px;
    padding       : 0;
}

.story__content img
{
    display   : block;
    width     : 100%;
    max-width : 100%;
    height    : auto;
}

.story__content > .wp-block-image,
.story__content > .wp-block-gallery,
.story__content > .wp-block-columns,
.story__content > .wp-block-video,
.story__content > .wp-block-embed
{
    max-width : 960px;
}

.story__content > .alignwide
{
    max-width : none;
}

.story__content > .alignfull
{
    width     : 100%;
    max-width : none;
}

.story__content figcaption,
.story__content .wp-element-caption
{
    font-family    : "GoodSans", sans-serif;
    font-size      : 12px;
    line-height    : 20px;
    margin         : 14px 0 0;
    letter-spacing : .5px;
    text-align     : left;
    color          : #909090;
}

.story__content > .alignfull figcaption,
.story__content > .alignfull .wp-element-caption
{
    padding : 0 70px;
}

/* Two photos side by side: a Gallery block, or a Columns block with an image in each */
.story__content > .wp-block-gallery,
.story__content > .wp-block-columns
{
    display         : flex;
    align-items     : flex-start;
    flex-flow       : row nowrap;
    justify-content : space-between;
    margin-top      : 80px;
    margin-bottom   : 80px;
    gap             : 20px;
}

.story__content .wp-block-gallery > figure,
.story__content .wp-block-columns > .wp-block-column
{
    flex      : 1 1 0;
    min-width : 0;
    margin    : 0;
}

.story__content .wp-block-columns figure
{
    margin : 0;
}

.story__content .wp-block-gallery > figcaption
{
    flex : 0 0 100%;
}

/* Pull quote, set between two hairlines like the text blocks on project pages */
.story__content .wp-block-pullquote,
.story__content > blockquote
{
    max-width     : 780px;
    margin-top    : 80px;
    margin-bottom : 80px;
    padding       : 48px 0;
    text-align    : center;
    border        : 0;
    border-top    : 1px solid #d5d5d5;
    border-bottom : 1px solid #d5d5d5;
}

.story__content .wp-block-pullquote blockquote
{
    margin  : 0;
    padding : 0;
    border  : 0;
}

.story__content .wp-block-pullquote p,
.story__content > blockquote p
{
    font-family    : "Chronicle Display", "GT Super Display", serif;
    font-size      : 32px;
    font-weight    : 200;
    line-height    : 44px;
    margin         : 0;
    letter-spacing : 0;
    color          : #0d1927;
}

.story__content .wp-block-pullquote cite,
.story__content > blockquote cite
{
    font-family    : "GoodSans", sans-serif;
    font-size      : 12px;
    font-style     : normal;
    line-height    : 20px;
    display        : block;
    margin-top     : 22px;
    letter-spacing : .5px;
    color          : #909090;
}

.story__content > *:first-child
{
    margin-top : 0;
}

.story__content > *:last-child
{
    margin-bottom : 0;
}

/********************************
 *  SINGLE STORY: RESPONSIVE
 ********************************/

@media screen and (max-width : 1200px)
{
    .story__title
    {
        font-size   : 52px;
        line-height : 64px;
    }

    .story__banner__media
    {
        height : 62vh;
    }
}

@media screen and (max-width : 750px)
{
    .story__meta
    {
        padding : 150px 40px 64px;
    }

    .story__title
    {
        font-size   : 40px;
        line-height : 50px;
    }

    .story__subheadline
    {
        font-size   : 21px;
        line-height : 31px;
        margin-top  : 20px;
    }

    .story__banner__media
    {
        height : 46vh;
    }

    .story__body
    {
        padding : 70px 0 20px;
    }

    .story__content > *
    {
        width : calc(100% - 80px);
    }

    .story__content > .alignfull
    {
        width : 100%;
    }

    .story__content > .alignfull figcaption,
    .story__content > .alignfull .wp-element-caption
    {
        padding : 0 40px;
    }

    .story__content figure,
    .story__content > .wp-block-gallery,
    .story__content > .wp-block-columns,
    .story__content .wp-block-pullquote,
    .story__content > blockquote
    {
        margin-top    : 56px;
        margin-bottom : 56px;
    }

    /* side-by-side photos stack on phones */
    .story__content > .wp-block-gallery,
    .story__content > .wp-block-columns
    {
        flex-flow : column nowrap;
        gap       : 20px;
    }

    .story__content .wp-block-gallery > figure,
    .story__content .wp-block-columns > .wp-block-column
    {
        flex  : 0 0 auto;
        width : 100%;
    }

    .story__content h2
    {
        font-size   : 28px;
        line-height : 38px;
        margin-top  : 48px;
    }

    .story__content h3
    {
        font-size   : 23px;
        line-height : 32px;
    }

    .story__content .wp-block-pullquote p,
    .story__content > blockquote p
    {
        font-size   : 25px;
        line-height : 36px;
    }
}

@media screen and (max-width : 400px)
{
    .story__meta
    {
        padding-right : 20px;
        padding-left  : 20px;
    }

    .story__title
    {
        font-size   : 34px;
        line-height : 44px;
    }

    .story__content > *
    {
        width : calc(100% - 40px);
    }

    .story__content > .alignfull
    {
        width : 100%;
    }

    .story__content > .alignfull figcaption,
    .story__content > .alignfull .wp-element-caption
    {
        padding : 0 20px;
    }
}