/*
|--------------------------------------------------------------------------
| Single post
|--------------------------------------------------------------------------
*/

.mf-single-post{
    max-width:900px;
    margin:0 auto;
}

/*
|--------------------------------------------------------------------------
| Header
|--------------------------------------------------------------------------
*/

.mf-single-post__header{
    max-width:800px;
    margin:0 auto 3rem;
}

.mf-single-post__title{
    margin:0;

    color:var(--mf-dark);

    font-size:clamp(
        2.5rem,
        6vw,
        5rem
    );

    font-weight:700;
    line-height:1.05;

    letter-spacing:-.035em;

    text-wrap:balance;
}

/*
|--------------------------------------------------------------------------
| Thumbnail
|--------------------------------------------------------------------------
*/

.mf-single-post__thumbnail{
    margin:0 0 3rem;
}

.mf-single-post__thumbnail img{
    display:block;

    width:100%;
    height:auto;

    border-radius:var(--mf-radius);
}

/*
|--------------------------------------------------------------------------
| Content
|--------------------------------------------------------------------------
*/

.mf-single-post__content{
    max-width:760px;
    margin:0 auto;

    font-size:1.125rem;
    line-height:1.8;
}

.mf-single-post__content > * + *{
    margin-top:1.5rem;
}

.mf-single-post__content h2,
.mf-single-post__content h3,
.mf-single-post__content h4{
    color:var(--mf-dark);

    line-height:1.2;

    margin-top:3rem;
}

.mf-single-post__content h2{
    font-size:clamp(
        1.8rem,
        4vw,
        2.75rem
    );
}

.mf-single-post__content h3{
    font-size:clamp(
        1.5rem,
        3vw,
        2rem
    );
}

.mf-single-post__content p{
    margin-bottom:1.5rem;
}

.mf-single-post__content img{
    max-width:100%;
    height:auto;

    border-radius:var(--mf-radius);
}

/*
|--------------------------------------------------------------------------
| Lists
|--------------------------------------------------------------------------
*/

.mf-single-post__content ul,
.mf-single-post__content ol{
    padding-left:1.5rem;
}

.mf-single-post__content li + li{
    margin-top:.5rem;
}

/*
|--------------------------------------------------------------------------
| Links
|--------------------------------------------------------------------------
*/

.mf-single-post__content a{
    color:var(--mf-primary);

    text-decoration-thickness:1px;
    text-underline-offset:3px;
}

/*
|--------------------------------------------------------------------------
| Blockquote
|--------------------------------------------------------------------------
*/

.mf-single-post__content blockquote{
    margin:2.5rem 0;
    padding:1.5rem 2rem;

    border-left:4px solid var(--mf-primary);

    background:rgba(37,99,235,.05);

    font-size:1.25rem;
    font-style:italic;
}

/*
|--------------------------------------------------------------------------
| Taxonomy
|--------------------------------------------------------------------------
*/

.mf-post-taxonomy{
    max-width:760px;

    margin:4rem auto 0;
    padding-top:2rem;

    border-top:1px solid rgba(0,0,0,.1);
}

.mf-post-taxonomy__group + .mf-post-taxonomy__group{
    margin-top:1.5rem;
}

.mf-post-taxonomy__label{
    display:block;

    margin-bottom:.75rem;

    color:var(--mf-dark);

    font-size:.875rem;
    font-weight:700;
}

.mf-post-taxonomy__items{
    display:flex;
    flex-wrap:wrap;

    gap:.75rem;
}

.mf-post-taxonomy__items a{
    display:inline-flex;

    padding:.45rem .85rem;

    border-radius:999px;

    background:rgba(0,0,0,.05);

    color:var(--mf-dark);

    font-size:.875rem;

    text-decoration:none;

    transition:
        background-color .25s ease,
        color .25s ease;
}

.mf-post-taxonomy__items a:hover{
    background:var(--mf-primary);
    color:var(--mf-light);
}

/*
|--------------------------------------------------------------------------
| Post navigation
|--------------------------------------------------------------------------
*/

.mf-post-navigation{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));

    gap:2rem;

    max-width:900px;

    margin:4rem auto 0;
    padding-top:2rem;

    border-top:1px solid rgba(0,0,0,.1);
}

.mf-post-navigation__next{
    text-align:right;
}

.mf-post-navigation a{
    display:flex;
    flex-direction:column;

    gap:.5rem;

    color:var(--mf-dark);

    text-decoration:none;
}

.mf-post-navigation__label{
    color:var(--mf-gray);

    font-size:.875rem;

    font-weight:600;
}

.mf-post-navigation__title{
    font-size:1.125rem;

    font-weight:700;

    line-height:1.35;

    transition:color .25s ease;
}

.mf-post-navigation a:hover .mf-post-navigation__title{
    color:var(--mf-primary);
}

/*
|--------------------------------------------------------------------------
| Mobile
|--------------------------------------------------------------------------
*/

@media (max-width:767px){

    .mf-single-post__header{
        margin-bottom:2rem;
    }

    .mf-single-post__thumbnail{
        margin-bottom:2rem;
    }

    .mf-single-post__content{
        font-size:1.0625rem;
        line-height:1.75;
    }

    .mf-single-post__content blockquote{
        padding:1.25rem;
        margin:2rem 0;
    }

     .mf-post-navigation{
        grid-template-columns:1fr;

        gap:2rem;
    }

    .mf-post-navigation__next{
        text-align:left;
    }

}