/* =========================================================
   Enhanced Posts
   ========================================================= */

.latest-posts
{
    display: flex;
    flex-direction: column;

    gap: 0.75rem;
}


/* ---------------------------------------------------------
   Post Card
   --------------------------------------------------------- */

.latest-post
{
    padding: 1rem 1.25rem;

    background: #eef8f0;

    border-radius: 10px;
}


.latest-post:nth-child(even)
{
    background: #f8f8f8;
}


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

.latest-post-title
{
    margin: 0 0 0.25rem 0;

    font-size: 1.2rem;
    font-weight: 700;
}


.latest-post-title a
{
    color: #000000;

    text-decoration: none;
}


.latest-post-title a:hover,
.latest-post-title a:focus
{
    color: #000000;

    text-decoration: underline;
}


/* ---------------------------------------------------------
   Date / Categories
   --------------------------------------------------------- */

.latest-post-meta
{
    display: flex;
    align-items: baseline;
    justify-content: space-between;

    gap: 1rem;

    margin-bottom: 0.75rem;
}


.latest-post-date
{
    color: #888888;

    font-size: 0.9rem;
}


.latest-post-categories
{
    margin-left: auto;

    color: #666666;

    font-size: 0.85rem;

    text-align: right;
}


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

.latest-post-excerpt
{
    color: #000000;

    line-height: 1.5;
}


/* ---------------------------------------------------------
   More Button
   --------------------------------------------------------- */

.latest-post-more
{
    margin-top: 0.75rem;
}


.latest-post-more a
{
    display: inline-block;

    padding: 0.35rem 0.75rem;

    background: #2d7747;
    color: #ffffff;

    border-radius: 6px;

    font-size: 0.9rem;
    font-weight: 600;

    text-decoration: none;
}


.latest-post-more a:hover,
.latest-post-more a:focus
{
    background: #24633b;
    color: #ffffff;

    text-decoration: none;
}


/* =========================================================
   Responsive
   ========================================================= */

@media (max-width: 600px)
{
    .latest-post
    {
        padding: 0.9rem 1rem;
    }


    .latest-post-meta
    {
        flex-direction: column;
        align-items: flex-start;

        gap: 0.2rem;
    }


    .latest-post-categories
    {
        margin-left: 0;

        text-align: left;
    }


    .latest-post-title
    {
        font-size: 1.1rem;
    }
}