/*
==================================================
HOME
==================================================
*/

.bbw-home{

    background:var(--bbw-paper);

     padding:.5rem 0 4rem;

}

.bbw-hero{

    display:grid;

    grid-template-columns:1.9fr 1fr;

    gap:0;

    align-items:start;

    padding-inline:1.25rem;

}

/*
==================================================
FEATURE STORY
==================================================
*/

.bbw-feature-card{

    position:relative;

    overflow:hidden;

    min-height:740px;

    background:var(--bbw-paper-light);

    border:4px solid var(--bbw-teal);

    box-shadow:
        8px 8px 0 rgba(0,0,0,.14);

}

.bbw-feature-photo{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

}

.bbw-feature-placeholder{

    background:
        linear-gradient(
            135deg,
            var(--bbw-paper),
            var(--bbw-paper-dark)
        );

}

.bbw-feature-overlay{

    position:absolute;

    inset:0;

    display:flex;

    flex-direction:column;

    justify-content:space-between;

    padding:2rem;

    background:
        linear-gradient(
            to top,
            rgba(23,47,50,.92) 0%,
            rgba(23,47,50,.58) 38%,
            rgba(23,47,50,.12) 74%,
            rgba(23,47,50,0) 100%
        );

}

.bbw-feature-overlay--minimal{

    justify-content:flex-end;

    background:
        linear-gradient(
            to top,
            rgba(0,0,0,.55) 0%,
            rgba(0,0,0,.25) 45%,
            rgba(0,0,0,0) 80%
        );

}

.bbw-feature-header{

    display:flex;

    justify-content:flex-start;

}

.bbw-feature-category{

    display:inline-block;

    padding:.65rem 1.25rem;

    background:var(--bbw-red);

    color:var(--bbw-paper-light);

    border:3px solid var(--bbw-red-dark);

    font-family:
        Impact,
        Haettenschweiler,
        "Arial Narrow Bold",
        sans-serif;

    font-size:.95rem;

    letter-spacing:.12em;

    text-transform:uppercase;

}

.bbw-feature-body{

    max-width:72%;

}

.bbw-feature-title{

    margin-bottom:1rem;

    color:#fff;

    font-size:clamp(3rem,4vw,4.5rem);

    line-height:.92;

    text-shadow:
        3px 3px 8px rgba(0,0,0,.45);

}

.bbw-feature-excerpt{

    margin-bottom:2rem;

    color:#fff;

    font-size:1.2rem;

    line-height:1.6;

}

.bbw-feature-button{

    display:inline-block;

    padding:.95rem 1.8rem;

    background:var(--bbw-yellow);

    color:var(--bbw-teal-dark);

    border:3px solid var(--bbw-teal-dark);

    font-weight:800;

    text-decoration:none;

    text-transform:uppercase;

    box-shadow:
        5px 5px 0 rgba(0,0,0,.16);

    transition:.2s;

}

.bbw-feature-button:hover{

    transform:translate(-2px,-2px);

}

/*
==================================================
SIDEBAR
==================================================
*/

.bbw-sidebar{

    display:flex;

    flex-direction:column;

    background:var(--bbw-paper-light);

    border:3px solid var(--bbw-teal);

    box-shadow:
        4px 4px 0 rgba(0,0,0,.12);

}

.bbw-side-card{

    position:relative;

    display:flex;

    gap:1.1rem;

    align-items:flex-start;

    padding:1.4rem 1.6rem;

    background:
        radial-gradient(
            circle at 1px 1px,
            rgba(23,63,64,.09) 1px,
            transparent 1.3px
        ),
        url("../img/Background.png") repeat;

    background-size:6px 6px,480px 480px;

    border-bottom:2px solid var(--bbw-teal);

    transition:box-shadow .2s ease;

}

.bbw-side-card:last-child{

    border-bottom:none;

}

.bbw-side-card:hover{

    z-index:1;

    box-shadow:0 8px 16px rgba(16,41,45,.2);

}

.bbw-side-icon{

    flex:0 0 auto;

    width:2.75rem;

    height:2.75rem;

    color:var(--bbw-teal);

}

.bbw-side-icon .bbw-icon{

    display:block;

    width:100%;

    height:100%;

}

.bbw-side-icon svg{

    display:block;

    width:100%;

    height:100%;

}

.bbw-side-content{

    flex:1;

    min-width:0;

}

.bbw-side-title{

    color:var(--bbw-red);

    margin-bottom:.75rem;

}

.bbw-side-text{

    margin-bottom:1.2rem;

}

.bbw-side-link{

    display:inline-flex;

    align-items:center;

    gap:.4rem;

    font-weight:700;

    text-transform:uppercase;

    text-decoration:none;

}

.bbw-side-link::after{

    content:"";

    position:absolute;

    inset:0;

}

.bbw-side-link-arrow{

    display:inline-block;

    transition:transform .2s ease;

}

.bbw-side-link:hover .bbw-side-link-arrow,
.bbw-side-link:focus-visible .bbw-side-link-arrow{

    transform:translateX(4px);

}

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

@media (max-width:1024px){

    .bbw-hero{

        grid-template-columns:1fr;

        gap:1.5rem;

    }

    .bbw-feature-card{

        min-height:620px;

    }

    .bbw-feature-body{

        max-width:100%;

    }

}

@media (max-width:640px){

    .bbw-home{

        padding:1rem 0 2rem;

    }

    .bbw-feature-card{

        min-height:500px;

    }

    .bbw-feature-overlay{

        padding:1.25rem;

    }

    .bbw-feature-title{

        font-size:2.3rem;

    }

}