*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Inter', sans-serif;
}

body{
    background:#ffffff;
    color:#333;
}

/* ================= HERO ================= */
.recipe-hero{
    position:relative;
    height:65vh;
    background:url('images/bread.jpg') center/cover no-repeat;
    display:flex;
    align-items:center;
}

.overlay{
    position:absolute;
    inset:0;
    background:rgba(7, 7, 7, 0.55);
}

.recipe-hero-content{
    position:relative;
    color:#fff;
    max-width:1200px;
    margin:auto;
    padding:0 20px;
}

.recipe-category{
    background:#D62828;
    padding:6px 16px;
    border-radius:20px;
    font-size:14px;
    display:inline-block;
    margin-bottom:14px;
}

.recipe-hero h1{
    font-size:48px;
    margin-bottom:18px;
}

.recipe-info{
    display:flex;
    gap:20px;
    font-size:15px;
}

/* ================= MAIN ================= */
.recipe-detail{
    padding:90px 20px;
}

.recipe-container{
    max-width:1200px;
    margin:auto;
    display:grid;
    grid-template-columns:2fr 1fr;
    gap:40px;
}

/* Left */
.recipe-box{
    margin-bottom:40px;
}

.recipe-box h2{
    font-size:26px;
    margin-bottom:14px;
    color:#2F6B3C;
}

.recipe-box p{
    font-size:16px;
    line-height:1.7;
}

.ingredients-list,
.steps-list{
    padding-left:20px;
}

.ingredients-list li,
.steps-list li{
    margin-bottom:10px;
    font-size:15px;
}

.note-box{
    background:#f8f8f8;
    padding:18px;
    border-left:4px solid #D62828;
}

/* Sidebar */
.recipe-sidebar img{
    width:100%;
    border-radius:12px;
}

.sidebar-box{
    background:#fff;
    padding:22px;
    border-radius:12px;
    margin-bottom:30px;
    box-shadow:0 8px 25px rgba(0,0,0,0.06);
}

.sidebar-box h3{
    margin-bottom:14px;
    color:#2F6B3C;
}

.nutrition-list{
    list-style:none;
}

.nutrition-list li{
    font-size:14px;
    margin-bottom:8px;
}

/* Buttons */
.print-btn,
.save-btn{
    display:block;
    text-align:center;
    padding:12px;
    border-radius:6px;
    text-decoration:none;
    font-weight:600;
    margin-bottom:12px;
}

.print-btn{
    background:#2F6B3C;
    color:#fff;
}

.save-btn{
    background:#D62828;
    color:#fff;
}

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

@media(max-width:992px){
    .recipe-container{
        grid-template-columns:1fr;
    }

    .recipe-hero h1{
        font-size:36px;
    }
}

@media(max-width:600px){
    .recipe-hero{
        height:55vh;
    }

    .recipe-info{
        flex-direction:column;
        gap:8px;
    }

    .recipe-hero h1{
        font-size:30px;
    }
}