/**
 * =============================================================================
 * MultiPress Most Popular v2
 * =============================================================================
 */

:root{

    --mp-popular-radius:14px;
    --mp-popular-gap:16px;
    --mp-popular-border:#e9e9e9;
    --mp-popular-shadow:0 8px 24px rgba(0,0,0,.05);
    --mp-popular-accent:#d40000;

}

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

.mp-most-popular{

    background:#fff;

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

    overflow:hidden;

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

}

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

.mp-most-popular__header{

    padding:18px 22px;

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

}

.mp-most-popular__title{

    margin:0;

    font-size:1.25rem;

    font-weight:800;

    color:#111;

    line-height:1.2;

}

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

.mp-most-popular__list{

    display:flex;

    flex-direction:column;

}

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

.mp-popular-card{

    display:flex;

    flex-direction:column;

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

    transition:background .25s ease;

}

.mp-popular-card:last-child{

    border-bottom:none;

}

.mp-popular-card:hover{

    background:#fafafa;

}

/* ==========================================================================
   IMAGE
========================================================================== */

.mp-popular-card__thumb{

    display:block;

    width:100%;

    overflow:hidden;

    background:#ddd;

}

.mp-popular-card__image{

    width:100%;

    display:block;

    aspect-ratio:16/9;

    object-fit:cover;

    transition:transform .35s ease;

}

.mp-popular-card:hover .mp-popular-card__image{

    transform:scale(1.04);

}

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

.mp-popular-card__content{

    padding:16px 18px 18px;

}

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

.mp-popular-card__category{

    display:inline-block;

    margin-bottom:10px;

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

    font-size:.72rem;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.08em;

    text-decoration:none;

}

.mp-popular-card__category:hover{

    text-decoration:underline;

}

/* ==========================================================================
   TITLE
========================================================================== */

.mp-popular-card__title{

    margin:0 0 12px;

    font-size:1rem;

    line-height:1.45;

    font-weight:700;

}

.mp-popular-card__title a{

    color:#111;

    text-decoration:none;

    transition:color .25s;

}

.mp-popular-card__title a:hover{

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

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

.mp-popular-card__meta{

    display:flex;

    align-items:center;

    flex-wrap:wrap;

    gap:8px;

    font-size:.82rem;

    color:#777;

}

.mp-popular-card__views{

    display:inline-flex;

    align-items:center;

    gap:4px;

    font-weight:600;

}

.mp-popular-card__dot{

    opacity:.45;

}

.mp-popular-card__date{

    color:#888;

}

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

.mp-popular-card__thumb:focus-visible,
.mp-popular-card__category:focus-visible,
.mp-popular-card__title a:focus-visible{

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

    outline-offset:3px;

}

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

.mp-popular-card,
.mp-popular-card__thumb,
.mp-popular-card__image,
.mp-popular-card__title a,
.mp-popular-card__category{

    transition:all .25s ease;

}

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

@media (max-width:1200px){

    .mp-popular-card__content{

        padding:15px 16px;

    }

}

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

@media (max-width:992px){

    .mp-most-popular{

        border-radius:12px;

    }

    .mp-most-popular__header{

        padding:16px 18px;

    }

    .mp-popular-card__content{

        padding:14px 16px 16px;

    }

    .mp-popular-card__title{

        font-size:.95rem;

    }

}

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

@media (max-width:768px){

    .mp-popular-card__image{

        aspect-ratio:16/10;

    }

    .mp-popular-card__content{

        padding:14px;

    }

    .mp-popular-card__title{

        font-size:.92rem;

        line-height:1.4;

    }

    .mp-popular-card__meta{

        font-size:.78rem;

    }

}

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

@media (max-width:480px){

    .mp-most-popular__header{

        padding:14px 16px;

    }

    .mp-most-popular__title{

        font-size:1.1rem;

    }

    .mp-popular-card__content{

        padding:12px;

    }

}

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

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

    .mp-popular-card,
    .mp-popular-card__thumb,
    .mp-popular-card__image,
    .mp-popular-card__title a,
    .mp-popular-card__category{

        transition:none !important;

    }

}

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

@media print{

    .mp-most-popular{

        box-shadow:none;

        border:1px solid #ddd;

    }

    .mp-popular-card{

        break-inside:avoid;

        page-break-inside:avoid;

    }

}