/* =========================================================
   MISS CHIEF COLLECTION
   RESPONSIVE FULL-WIDTH HERO
========================================================= */

.bf-hero{
    position:relative;
    width:100%;
    height:min(80vh, 820px);
    min-height:620px;
    overflow:hidden;
    background:#0a0a0a;
}

.bf-hero-bg{
    position:absolute;
    inset:0;
    z-index:1;
}

.bf-hero-bg img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center 8%;
    transform:scale(1.04);
    animation:bfHeroZoom 14s ease-out forwards;
}

@keyframes bfHeroZoom{
    from{
        transform:scale(1.04);
    }

    to{
        transform:scale(1);
    }
}

.bf-hero-bg::after{
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,.62) 0%,
            rgba(0,0,0,.34) 42%,
            rgba(0,0,0,.04) 80%
        ),
        linear-gradient(
            0deg,
            rgba(0,0,0,.46) 0%,
            rgba(0,0,0,0) 48%
        );
    pointer-events:none;
}

.bf-hero-copy{
    position:relative;
    z-index:3;

    width:min(100%, 1280px);
    height:100%;

    margin:0 auto;
    padding:0 64px;

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:flex-start;

    color:#fff;
}

.bf-hero-copy > *{
    max-width:650px;
}

.bf-hero-copy .bf-eyebrow{
    margin:0 0 18px;
    color:#e5be82;
    font-size:13px;
    font-weight:600;
    letter-spacing:.20em;
    text-transform:uppercase;
}

.bf-hero-copy h1{
    margin:0;
    max-width:700px;

    font-family:Georgia, "Times New Roman", serif;
    font-size:clamp(52px, 5.4vw, 82px);
    line-height:.98;
    font-weight:500;
    letter-spacing:-.035em;
}

.bf-hero-copy p{
    margin:24px 0 0;
    max-width:570px;

    color:rgba(255,255,255,.92);
    font-size:17px;
    line-height:1.7;
}

.bf-hero-actions{
    display:flex;
    flex-wrap:wrap;
    gap:14px;
    margin-top:30px;
}

.bf-hero-actions a{
    min-width:138px;
    min-height:50px;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:13px 24px;
    border:1px solid #fff;

    color:#111;
    background:#fff;

    font-size:14px;
    font-weight:700;
    text-decoration:none;

    transition:
        background .2s ease,
        color .2s ease,
        border-color .2s ease,
        transform .2s ease;
}

.bf-hero-actions a:hover{
    transform:translateY(-2px);
}

.bf-hero-actions a.is-outline{
    color:#fff;
    background:rgba(0,0,0,.20);
    backdrop-filter:blur(6px);
}

.bf-hero-actions a.is-outline:hover{
    color:#111;
    background:#fff;
}

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

@media (max-width:1024px){

    .bf-hero{
        height:680px;
        min-height:680px;
    }

    .bf-hero-copy{
        padding:0 42px;
    }

    .bf-hero-copy h1{
        max-width:580px;
        font-size:58px;
    }

    .bf-hero-copy p{
        max-width:510px;
    }
}

/* =========================================================
   MOBILE HERO FIX
========================================================= */

@media (max-width:768px){

    .bf-hero{
        height:560px;
        min-height:560px;
        max-height:none;
    }

    .bf-hero-bg img{
        object-position:62% center;
        transform:none;
        animation:none;
    }

    .bf-hero-bg::after{
        background:
            linear-gradient(
                90deg,
                rgba(0,0,0,.58) 0%,
                rgba(0,0,0,.30) 60%,
                rgba(0,0,0,.08) 100%
            ),
            linear-gradient(
                0deg,
                rgba(0,0,0,.62) 0%,
                rgba(0,0,0,.12) 58%,
                rgba(0,0,0,0) 100%
            );
    }

    .bf-hero-copy{
        height:100%;
        min-height:0;
        max-height:none;

        padding:42px 22px 52px;
        justify-content:flex-end;
    }

    .bf-hero-copy > *{
        max-width:100%;
    }

    .bf-hero-copy .bf-eyebrow{
        margin-bottom:12px;
        font-size:11px;
        letter-spacing:.18em;
    }

    .bf-hero-copy h1{
        max-width:380px;
        font-size:clamp(38px, 10vw, 48px);
        line-height:1;
        letter-spacing:-.025em;
    }

    .bf-hero-copy p{
        max-width:350px;
        margin-top:16px;
        font-size:14px;
        line-height:1.55;
    }

    .bf-hero-actions{
        width:100%;
        flex-wrap:nowrap;
        gap:10px;
        margin-top:22px;
    }

    .bf-hero-actions a{
        min-width:0;
        min-height:46px;
        flex:1;
        padding:11px 14px;
        font-size:13px;
        white-space:nowrap;
    }
}

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

@media (max-width:480px){

    .bf-hero{
        height:510px;
        min-height:510px;
    }

    .bf-hero-bg img{
        object-position:64% center;
    }

    .bf-hero-copy{
        padding:34px 20px 38px;
    }

    .bf-hero-copy h1{
        max-width:330px;
        font-size:38px;
    }

    .bf-hero-copy p{
        max-width:310px;
        font-size:13.5px;
    }

    .bf-hero-actions a{
        min-height:44px;
        padding:10px 11px;
        font-size:12px;
    }
}

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

@media (max-width:380px){

    .bf-hero{
        height:490px;
        min-height:490px;
    }

    .bf-hero-copy{
        padding:30px 17px 34px;
    }

    .bf-hero-copy h1{
        font-size:34px;
    }

    .bf-hero-actions{
        gap:8px;
    }

    .bf-hero-actions a{
        padding:9px 8px;
        font-size:11px;
    }
}

/* Disable motion when requested */
@media (prefers-reduced-motion:reduce){

    .bf-hero-bg img{
        animation:none;
        transform:none;
    }
}

@media only screen and (max-width: 768px) {

    body .bf-hero {
        width: 100% !important;
        height: 500px !important;
        min-height: 500px !important;
        max-height: 500px !important;
        overflow: hidden !important;
    }

    body .bf-hero-bg {
        height: 500px !important;
    }

    body .bf-hero-bg img {
        width: 100% !important;
        height: 500px !important;
        min-height: 0 !important;
        max-height: 500px !important;
        object-fit: cover !important;
        object-position: 62% center !important;
        transform: none !important;
        animation: none !important;
    }

    body .bf-hero-copy {
        width: 100% !important;
        height: 500px !important;
        min-height: 0 !important;
        max-height: 500px !important;
        padding: 30px 22px 38px !important;
        justify-content: flex-end !important;
    }

    body .bf-hero-copy h1 {
        max-width: 330px !important;
        margin: 0 !important;
        font-size: 38px !important;
        line-height: 1 !important;
    }

    body .bf-hero-copy p {
        max-width: 320px !important;
        margin: 15px 0 0 !important;
        font-size: 14px !important;
        line-height: 1.5 !important;
    }

    body .bf-hero-actions {
        margin-top: 20px !important;
    }
}