/**
 * =============================================================================
 * MultiPress Grid Posts v3
 * =============================================================================
 */

:root{

    --mp-grid-radius:14px;
    --mp-grid-border:#ececec;
    --mp-grid-shadow:0 8px 24px rgba(0,0,0,.05);
    --mp-grid-accent:#d40000;

}

/* ==========================================================================
   WRAPPER
========================================================================== */

.mp-grid-posts{

    background:#fff;

    border-radius:var(--mp-grid-radius);

    overflow:hidden;

    box-shadow:var(--mp-grid-shadow);

}

/* ==========================================================================
   HEADER
========================================================================== */

.mp-grid-posts__header{

    display:flex;

    align-items:center;

    gap:12px;

    padding:20px 24px;

    border-bottom:1px solid var(--mp-grid-border);

}

.mp-grid-posts__accent{

    width:5px;

    height:24px;

    border-radius:20px;

    background:var(--mp-grid-accent);

}

.mp-grid-posts__header h2{

    margin:0;

    font-size:1.35rem;

    font-weight:800;

    color:#111;

}

/* ==========================================================================
   FEATURED STORY
========================================================================== */

.mp-grid-posts__featured{

    padding:24px;

}

.mp-grid-posts__featured-thumb{

    display:block;

    overflow:hidden;

    border-radius:12px;

    background:#ddd;

}

.mp-grid-posts__featured-image{

    width:100%;

    aspect-ratio:16/9;

    object-fit:cover;

    display:block;

    transition:transform .4s ease;

}

.mp-grid-posts__featured:hover
.mp-grid-posts__featured-image{

    transform:scale(1.04);

}

.mp-grid-posts__featured-content{

    padding-top:18px;

}
/* ==========================================================================
   FEATURED CONTENT
========================================================================== */

.mp-grid-posts__category{

    display:inline-block;

    margin-bottom:12px;

    color:var(--mp-grid-accent);

    font-size:.72rem;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.08em;

    text-decoration:none;

}

.mp-grid-posts__category:hover{

    text-decoration:underline;

}

.mp-grid-posts__featured-title{

    margin:0 0 14px;

    font-size:2rem;

    line-height:1.2;

    font-weight:800;

}

.mp-grid-posts__featured-title a{

    color:#111;

    text-decoration:none;

    transition:color .25s ease;

}

.mp-grid-posts__featured-title a:hover{

    color:var(--mp-grid-accent);

}

.mp-grid-posts__excerpt{

    margin:0 0 18px;

    color:#666;

    font-size:1rem;

    line-height:1.75;

}

.mp-grid-posts__meta{

    display:flex;

    flex-wrap:wrap;

    gap:8px;

    font-size:.85rem;

    color:#888;

}

/* ==========================================================================
   GRID
========================================================================== */

.mp-grid-posts__grid{

    display:grid;

    grid-template-columns:repeat(2,minmax(0,1fr));

    gap:24px;

    padding:0 24px 24px;

}

/* ==========================================================================
   CARD
========================================================================== */

.mp-grid-posts__card{

    display:flex;

    flex-direction:column;

}

.mp-grid-posts__thumb{

    display:block;

    overflow:hidden;

    border-radius:10px;

    background:#ddd;

}

.mp-grid-posts__image{

    width:100%;

    aspect-ratio:16/10;

    object-fit:cover;

    display:block;

    transition:transform .35s ease;

}

.mp-grid-posts__card:hover .mp-grid-posts__image{

    transform:scale(1.05);

}

.mp-grid-posts__content{

    padding-top:14px;

}

.mp-grid-posts__title{

    margin:10px 0 12px;

    font-size:1.12rem;

    line-height:1.45;

    font-weight:700;

}

.mp-grid-posts__title a{

    color:#111;

    text-decoration:none;

    transition:color .25s ease;

}

.mp-grid-posts__title a:hover{

    color:var(--mp-grid-accent);

}

/* ==========================================================================
   ACCESSIBILITY
========================================================================== */

.mp-grid-posts__featured-thumb:focus-visible,
.mp-grid-posts__thumb:focus-visible,
.mp-grid-posts__category:focus-visible,
.mp-grid-posts__featured-title a:focus-visible,
.mp-grid-posts__title a:focus-visible{

    outline:2px solid var(--mp-grid-accent);

    outline-offset:3px;

}

/* ==========================================================================
   RESPONSIVE
========================================================================== */

@media (max-width:992px){

    .mp-grid-posts__featured{

        padding:20px;

    }

    .mp-grid-posts__grid{

        grid-template-columns:1fr;

        padding:0 20px 20px;

    }

    .mp-grid-posts__featured-title{

        font-size:1.6rem;

    }

}

@media (max-width:768px){

    .mp-grid-posts__header{

        padding:18px;

    }

    .mp-grid-posts__featured{

        padding:18px;

    }

    .mp-grid-posts__grid{

        padding:0 18px 18px;

    }

    .mp-grid-posts__featured-title{

        font-size:1.45rem;

    }

}

@media (max-width:480px){

    .mp-grid-posts__header{

        padding:16px;

    }

    .mp-grid-posts__featured{

        padding:16px;

    }

    .mp-grid-posts__grid{

        padding:0 16px 16px;

    }

    .mp-grid-posts__featured-title{

        font-size:1.3rem;

    }

    .mp-grid-posts__title{

        font-size:1rem;

    }

}

/* ==========================================================================
   REDUCED MOTION
========================================================================== */

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

    .mp-grid-posts__featured-image,
    .mp-grid-posts__image,
    .mp-grid-posts__featured-title a,
    .mp-grid-posts__title a{

        transition:none !important;

    }

}

/* ==========================================================================
   PRINT
========================================================================== */

@media print{

    .mp-grid-posts{

        box-shadow:none;

        border:1px solid #ddd;

    }

}