/*
|--------------------------------------------------------------------------
| Blog grid
|--------------------------------------------------------------------------
*/

.mf-posts{
    display:grid;
    grid-template-columns:
        repeat(
            auto-fit,
            minmax(280px, 1fr)
        );

    gap:2rem;
}

.mf-posts__empty{
    grid-column:1 / -1;

    margin:2rem 0;

    color:var(--mf-gray);

    font-size:1.125rem;

    text-align:center;
}


/*
|--------------------------------------------------------------------------
| Post card
|--------------------------------------------------------------------------
*/

.mf-post-card{
    display:flex;
    flex-direction:column;

    height:100%;

    overflow:hidden;

    background:var(--mf-light);

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

    box-shadow:var(--mf-shadow);

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}

.mf-post-card:hover{
    transform:translateY(-6px);

    box-shadow:
        0 18px 40px
        rgba(0,0,0,.12);
}


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

.mf-post-card__thumbnail{
    display:block;

    overflow:hidden;

    aspect-ratio:16 / 10;
}

.mf-post-card__thumbnail img{
    display:block;

    width:100%;
    height:100%;

    object-fit:cover;

    transition:transform .5s ease;
}

.mf-post-card:hover
.mf-post-card__thumbnail img{
    transform:scale(1.05);
}


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

.mf-post-card__content{
    display:flex;
    flex:1;
    flex-direction:column;

    padding:1.75rem;
}


/*
|--------------------------------------------------------------------------
| Meta
|--------------------------------------------------------------------------
*/

.mf-post-meta{
    margin-bottom:.75rem;

    color:var(--mf-gray);

    font-size:.875rem;
}


/*
|--------------------------------------------------------------------------
| Title
|--------------------------------------------------------------------------
*/

.mf-post-card__title{
    margin:0;

    font-size:clamp(
        1.35rem,
        2vw,
        1.75rem
    );

    line-height:1.25;
}

.mf-post-card__title a{
    color:var(--mf-dark);

    text-decoration:none;

    transition:color .25s ease;
}

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


/*
|--------------------------------------------------------------------------
| Excerpt
|--------------------------------------------------------------------------
*/

.mf-post-card__excerpt{
    margin-top:1rem;

    color:var(--mf-gray);

    line-height:1.7;
}

.mf-post-card__excerpt p{
    margin:0;
}


/*
|--------------------------------------------------------------------------
| Read more
|--------------------------------------------------------------------------
*/

.mf-post-card__link{
    margin-top:auto;
    padding-top:1.5rem;

    color:var(--mf-primary);

    font-weight:600;

    text-decoration:none;

    transition:
        color .25s ease,
        transform .25s ease;
}

.mf-post-card__link:hover{
    color:var(--mf-dark);
}

/*
|--------------------------------------------------------------------------
| Empty state
|--------------------------------------------------------------------------
*/

.mf-post-empty{
    max-width:720px;

    margin:4rem auto;

    padding:3rem 2rem;

    text-align:center;
}

.mf-post-empty__title{
    margin:0;

    color:var(--mf-dark);

    font-size:clamp(
        1.5rem,
        4vw,
        2.25rem
    );
}

.mf-post-empty__description{
    max-width:560px;

    margin:1rem auto 0;

    color:var(--mf-gray);
}


/*
|--------------------------------------------------------------------------
| Reduced motion
|--------------------------------------------------------------------------
*/

@media (prefers-reduced-motion:reduce){

    .mf-post-card,
    .mf-post-card__thumbnail img,
    .mf-post-card__title a,
    .mf-post-card__link{
        transition:none;
    }

}