/**
 * =============================================================================
 * MultiPress Latest News v3
 * =============================================================================
 */

:root{

    --mp-latest-radius:14px;
    --mp-latest-border:#ececec;
    --mp-latest-shadow:0 8px 24px rgba(0,0,0,.05);
    --mp-latest-accent:#d40000;
    --mp-latest-text:#111;
    --mp-latest-muted:#777;
    --mp-latest-bg:#ffffff;

}

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

.mp-latest-news{

    background:var(--mp-latest-bg);

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

    overflow:hidden;

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

    display:flex;

    flex-direction:column;

}

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

.mp-latest-news__header{

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:18px 22px;

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

    background:#fff;

}

.mp-latest-news__title{

    margin:0;

    font-size:1.25rem;

    font-weight:800;

    line-height:1.2;

    color:var(--mp-latest-text);

}

/* ==========================================================================
   LIST
========================================================================== */

.mp-latest-news__list{

    display:flex;

    flex-direction:column;

}

/* ==========================================================================
   ITEM
========================================================================== */

.mp-latest-news__item{

    display:flex;

    align-items:flex-start;

    gap:12px;

    padding:14px 16px;

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

    transition:
        background .25s ease,
        transform .25s ease;

}

.mp-latest-news__item:last-child{

    border-bottom:none;

}

.mp-latest-news__item:hover{

    background:#fafafa;

}

/* ==========================================================================
   THUMBNAIL
========================================================================== */

.mp-latest-news__thumb{

    position:relative;

    flex:0 0 110px;

    width:110px;

    height:82px;

    overflow:hidden;

    border-radius:10px;

    background:#f2f2f2;

    display:block;

}

.mp-latest-news__image{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

    object-position:center;

    display:block;

    transition:transform .35s ease;

}

.mp-latest-news__item:hover .mp-latest-news__image{

    transform:scale(1.06);

}

/* ==========================================================================
   CONTENT
========================================================================== */

.mp-latest-news__content{

    flex:1;

    min-width:0;

    display:flex;

    flex-direction:column;

}
/* ==========================================================================
   BREAKING
========================================================================== */

.mp-latest-news__breaking{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    align-self:flex-start;

    padding:4px 10px;

    margin-bottom:6px;

    border-radius:999px;

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

    color:#fff;

    font-size:.65rem;

    font-weight:700;

    letter-spacing:.08em;

    text-transform:uppercase;

}

/* ==========================================================================
   CATEGORY
========================================================================== */

.mp-latest-news__category{

    display:inline-block;

    align-self:flex-start;

    margin-bottom:8px;

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

    font-size:.66rem;

    font-weight:700;

    letter-spacing:.08em;

    text-transform:uppercase;

    text-decoration:none;

    transition:color .25s ease;

}

.mp-latest-news__category:hover{

    color:#a70000;

    text-decoration:underline;

}

/* ==========================================================================
   HEADLINE
========================================================================== */

.mp-latest-news__headline{

    margin:0 0 8px;

    font-size:.90rem;

    line-height:1.38;

    font-weight:700;

}

.mp-latest-news__headline a{

    color:var(--mp-latest-text);

    text-decoration:none;

    transition:color .25s ease;

}

.mp-latest-news__headline a:hover{

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

}

/* ==========================================================================
   EXCERPT
========================================================================== */

.mp-latest-news__excerpt{

    margin:0 0 12px;

    color:#666;

    font-size:.88rem;

    line-height:1.6;

}

/* ==========================================================================
   META
========================================================================== */

.mp-latest-news__meta{

    display:flex;

    align-items:center;

    flex-wrap:wrap;

    gap:8px;

    margin-top:auto;

    font-size:.74rem;

    color:#999;

}

.mp-latest-news__meta time{

    white-space:nowrap;

}

.mp-latest-news__meta span{

    display:inline-flex;

    align-items:center;

}

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

.mp-latest-news__thumb:focus-visible,
.mp-latest-news__category:focus-visible,
.mp-latest-news__headline a:focus-visible{

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

    outline-offset:3px;

}

/* ==========================================================================
   TRANSITIONS
========================================================================== */

.mp-latest-news__item,
.mp-latest-news__thumb,
.mp-latest-news__image,
.mp-latest-news__headline a,
.mp-latest-news__category{

    transition:all .25s ease;

}
/* ==========================================================================
   LARGE TABLET
========================================================================== */

@media (max-width:1200px){

    .mp-latest-news__header{

        padding:16px 20px;

    }

    .mp-latest-news__item{

        padding:15px 16px;

        gap:12px;

    }

    .mp-latest-news__thumb{

        width:96px;

        height:76px;

        flex:0 0 96px;

    }

}

/* ==========================================================================
   TABLET
========================================================================== */

@media (max-width:992px){

    .mp-latest-news{

        border-radius:12px;

    }

    .mp-latest-news__header{

        padding:16px 18px;

    }

    .mp-latest-news__title{

        font-size:1.15rem;

    }

    .mp-latest-news__item{

        padding:14px 16px;

    }

    .mp-latest-news__thumb{

        width:90px;

        height:72px;

        flex:0 0 90px;

    }

    .mp-latest-news__headline{

        font-size:.95rem;

    }

}

/* ==========================================================================
   MOBILE
========================================================================== */

@media (max-width:768px){

    .mp-latest-news__item{

        gap:12px;

        padding:14px;

    }

    .mp-latest-news__thumb{

        width:88px;

        height:72px;

        flex:0 0 88px;

    }

    .mp-latest-news__headline{

        font-size:.92rem;

        line-height:1.4;

    }

    .mp-latest-news__excerpt{

        display:none;

    }

    .mp-latest-news__meta{

        font-size:.75rem;

    }

}

/* ==========================================================================
   SMALL MOBILE
========================================================================== */

@media (max-width:480px){

    .mp-latest-news__header{

        padding:14px 16px;

    }

    .mp-latest-news__title{

        font-size:1.08rem;

    }

    .mp-latest-news__item{

        flex-direction:column;

        gap:12px;

    }

    .mp-latest-news__thumb{

        width:100%;

        height:180px;

        flex:auto;

    }

    .mp-latest-news__image{

        position:absolute;

        inset:0;

        width:100%;

        height:100%;

        object-fit:cover;

    }

}

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

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

    .mp-latest-news__item,
    .mp-latest-news__thumb,
    .mp-latest-news__image,
    .mp-latest-news__headline a,
    .mp-latest-news__category{

        transition:none !important;

    }

}

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

@media print{

    .mp-latest-news{

        box-shadow:none;

        border:1px solid #ddd;

    }

    .mp-latest-news__item{

        break-inside:avoid;

        page-break-inside:avoid;

    }

}
