/**
 * =============================================================================
 * MultiPress Hero Slider v2.1
 * =============================================================================
 */

:root{

    --mp-hero-height:650px;
    --mp-hero-radius:16px;

    --mp-hero-shadow:
        0 20px 50px rgba(0,0,0,.15);

    --mp-hero-overlay:
        linear-gradient(
            to top,
            rgba(0,0,0,.92) 0%,
            rgba(0,0,0,.62) 38%,
            rgba(0,0,0,.18) 72%,
            rgba(0,0,0,.05) 100%
        );

}

/* ==========================================================================
   HERO
========================================================================== */

.mp-hero{

    position:relative;

    width:100%;

    height:var(--mp-hero-height);

    overflow:hidden;

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

    background:#111;

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

}

/* ==========================================================================
   VIEWPORT
========================================================================== */

.mp-hero__viewport{

    position:relative;

    width:100%;

    height:100%;

    overflow:hidden;

}

/* ==========================================================================
   TRACK
========================================================================== */

.mp-hero__track{

    position:relative;

    width:100%;

    height:100%;

}

/* ==========================================================================
   SLIDES
========================================================================== */

.mp-hero__slide{

    position:absolute;

    inset:0;

    opacity:0;

    visibility:hidden;

    pointer-events:none;

    transition:
        opacity .65s ease,
        visibility .65s ease;

}

.mp-hero__slide.is-active{

    opacity:1;

    visibility:visible;

    pointer-events:auto;

    z-index:5;

}

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

.mp-hero__image{

    display:block;

    width:100%;

    height:100%;

}

.mp-hero__img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

    transform:scale(1);

    transition:transform 10s linear;

}

.mp-hero__slide.is-active .mp-hero__img{

    transform:scale(1.08);

}

/* ==========================================================================
   OVERLAY
========================================================================== */

.mp-hero__overlay{

    position:absolute;

    inset:0;

    display:flex;

    align-items:flex-end;

    background:var(--mp-hero-overlay);

}

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

.mp-hero__content{

    width:min(90%,900px);

    padding:48px;

    padding-bottom:88px;

    color:#fff;

    position:relative;

    z-index:20;

}

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

.mp-hero__category{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:8px 18px;

    margin-bottom:18px;

    background:#d40000;

    color:#fff;

    border-radius:999px;

    text-decoration:none;

    text-transform:uppercase;

    letter-spacing:.08em;

    font-size:.72rem;

    font-weight:700;

    transition:background .25s;

}

.mp-hero__category:hover{

    background:#a90000;

}

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

.mp-hero__title{

    margin:0 0 18px;

    font-size:clamp(2rem,3vw,3.2rem);

    line-height:1.12;

    font-weight:800;

}

.mp-hero__title a{

    color:#fff;

    text-decoration:none;

}

.mp-hero__title a:hover{

    text-decoration:underline;

}

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

.mp-hero__excerpt{

    max-width:760px;

    margin-bottom:24px;

    color:rgba(255,255,255,.9);

    font-size:1.05rem;

    line-height:1.75;

}

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

.mp-hero__meta{

    display:flex;

    flex-wrap:wrap;

    align-items:center;

    gap:10px;

    font-size:.9rem;

    color:rgba(255,255,255,.82);

}

.mp-hero__separator{

    opacity:.45;

}

/* ==========================================================================
   NAVIGATION
========================================================================== */

.mp-hero__nav{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    width:56px;

    height:56px;

    display:flex;

    align-items:center;

    justify-content:center;

    border:none;

    border-radius:50%;

    background:rgba(255,255,255,.14);

    backdrop-filter:blur(14px);

    -webkit-backdrop-filter:blur(14px);

    color:#fff;

    cursor:pointer;

    z-index:100;

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

}

.mp-hero__nav:hover{

    background:#d40000;

    transform:translateY(-50%) scale(1.08);

}

.mp-hero__nav span{

    font-size:28px;

    line-height:1;

    font-weight:700;

}

.mp-hero__prev{

    left:18px;

}

.mp-hero__next{

    right:18px;

}

/* ==========================================================================
   PAGINATION
========================================================================== */

.mp-hero__pagination{

    position:absolute;

    left:50%;

    bottom:20px;

    transform:translateX(-50%);

    display:flex;

    align-items:center;

    gap:10px;

    z-index:120;

}

.mp-hero__dot{

    width:12px;

    height:12px;

    border:none;

    border-radius:999px;

    background:rgba(255,255,255,.45);

    cursor:pointer;

    padding:0;

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

}

.mp-hero__dot:hover{

    background:#fff;

    transform:scale(1.2);

}

.mp-hero__dot.is-active{

    width:38px;

    background:#d40000;

}

/* ==========================================================================
   ANIMATION
========================================================================== */

@keyframes mpHeroFade{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}

.mp-hero__slide.is-active{

    animation:mpHeroFade .6s ease;

}

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

@media (max-width:1200px){

    :root{

        --mp-hero-height:560px;

    }

    .mp-hero__content{

        padding:40px;

        padding-bottom:80px;

    }

}

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

@media (max-width:992px){

    :root{

        --mp-hero-height:500px;

    }

    .mp-hero__content{

        padding:32px;

        padding-bottom:72px;

    }

    .mp-hero__title{

        font-size:2.3rem;

    }

    .mp-hero__excerpt{

        font-size:1rem;

    }

    .mp-hero__nav{

        width:48px;

        height:48px;

    }

}

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

@media (max-width:768px){

    :root{

        --mp-hero-height:420px;

    }

    .mp-hero{

        border-radius:12px;

    }

    .mp-hero__content{

        width:100%;

        padding:22px;

        padding-bottom:64px;

    }

    .mp-hero__title{

        font-size:1.65rem;

        line-height:1.25;

    }

    .mp-hero__excerpt{

        display:none;

    }

    .mp-hero__meta{

        font-size:.8rem;

        gap:6px;

    }

    .mp-hero__nav{

        width:42px;

        height:42px;

    }

    .mp-hero__prev{

        left:12px;

    }

    .mp-hero__next{

        right:12px;

    }

}

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

@media (max-width:480px){

    :root{

        --mp-hero-height:340px;

    }

    .mp-hero__category{

        font-size:.65rem;

        padding:6px 12px;

    }

    .mp-hero__title{

        font-size:1.35rem;

    }

    .mp-hero__separator{

        display:none;

    }

    .mp-hero__meta{

        display:grid;

        gap:4px;

    }

}

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

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

    .mp-hero__slide,
    .mp-hero__img,
    .mp-hero__nav,
    .mp-hero__dot{

        transition:none !important;

        animation:none !important;

    }

}

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

@media print{

    .mp-hero{

        height:auto;

        overflow:visible;

        box-shadow:none;

    }

    .mp-hero__slide{

        position:relative;

        opacity:1;

        visibility:visible;

    }

    .mp-hero__nav,
    .mp-hero__pagination{

        display:none;

    }

}