/* =========================================
   INDIVIDUAL RECIPE PAGE
   ========================================= */


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

.recipe-header {

    width: 90%;
    max-width: 1200px;

    margin: 30px auto;

    display: flex;

    justify-content: space-between;
    align-items: center;

}

.recipe-header h1 {

    margin: 0;
    color: white;
    font-size: 1.8rem;

}

.back-button {

    color: white;

    text-decoration: none;

    font-size: 1rem;

}

.back-button:hover {

    text-decoration: underline;

}


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

main {

    width: 90%;

    max-width: 1100px;

    margin: 0 auto;

}


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

.recipe-hero {

    position: relative;

    min-height: 550px;

    overflow: hidden;

    display: flex;

    align-items: flex-end;

}


/* Main recipe image */

.recipe-hero-image {

    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    z-index: 0;

}


/* Dark gradient over image */

.recipe-hero::after {

    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            to top,
            rgba(0,0,0,0.9),
            rgba(0,0,0,0.15)
        );

    z-index: 1;

}


/* Text over image */

.recipe-hero-content {

    position: relative;

    z-index: 2;

    padding: 50px;

    max-width: 750px;

}


/* Category */

.recipe-category {

    margin: 0 0 10px;

    font-size: 1rem;

    text-transform: uppercase;

    letter-spacing: 2px;

}


/* Recipe title */

.recipe-hero-content h2 {

    margin: 0;
    color: white;
    font-size: clamp(2.5rem, 6vw, 5rem);

    line-height: 1;

}


/* Short introduction */

.recipe-introduction {

    font-size: 1.2rem;

    line-height: 1.6;

    margin-top: 20px;

}


/* =========================================
   RECIPE INFORMATION
   ========================================= */

.recipe-details {

    display: grid;

    grid-template-columns:
        repeat(5, 1fr);

    margin: 30px 0;

    background: #d9e7f4;

    color: #111;

}


/* Individual detail */

.detail {

    padding: 25px;

    text-align: center;

    border-right:
        1px solid rgba(0,0,0,0.15);

}


/* Remove border from final item */

.detail:last-child {

    border-right: none;

}


/* Detail heading */

.detail-label {

    display: block;

    font-size: 0.8rem;

    text-transform: uppercase;

    letter-spacing: 1px;

    margin-bottom: 8px;

}


/* Detail value */

.detail-value {

    font-size: 1.2rem;

    font-weight: bold;

}


/* =========================================
   GENERAL SECTIONS
   ========================================= */

.recipe-section {

    margin: 80px 0;

}


/* Section title */

.section-heading {

    display: flex;

    align-items: center;

    gap: 20px;

    margin-bottom: 30px;

}


.section-heading h2 {

    margin: 0;
    color: white;
    font-size: 2.2rem;

}


/* Section number */

.section-number {

    font-size: 1rem;

    letter-spacing: 2px;

    opacity: 0.5;

}


/* =========================================
   MY EXPERIENCE
   ========================================= */

.experience {

    max-width: 800px;

}


.experience p {

    font-size: 1.15rem;

    line-height: 1.8;

    color: #ddd;

}


/* =========================================
   INGREDIENTS
   ========================================= */

.ingredients {

    background: #d9e7f4;

    color: #111;

    padding: 50px;

}


/* Serves */

.serves {

    margin-top: -15px;

    margin-bottom: 30px;

    opacity: 0.7;

}


/* Ingredient list */

.ingredient-list {

    list-style: none;

    padding: 0;

    margin: 0;

    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap: 0 40px;

}


/* Individual ingredient */

.ingredient-list li {

    padding: 15px 0;

    border-bottom:
        1px solid rgba(0,0,0,0.15);

}


/* Quantity */

.ingredient-list li span {

    font-weight: bold;

    display: inline-block;

    min-width: 100px;

}


/* =========================================
   METHOD
   ========================================= */

.recipe-step {

    display: grid;

    grid-template-columns: 80px 1fr;

    gap: 30px;

    margin-bottom: 60px;

}


/* Step number */

.step-number {

    font-size: 2rem;

    font-weight: bold;

    opacity: 0.35;

}


/* Step content */

.step-content h3 {

    margin-top: 0;
    color: white;
    font-size: 1.6rem;

}


.step-content p {

    color: #ddd;

    font-size: 1.05rem;

    line-height: 1.7;

}


/* =========================================
   OPTIONAL STEP IMAGES
   ========================================= */

.step-content img {

    width: 100%;

    max-width: 700px;

    margin-top: 20px;

    display: block;

}


/* =========================================
   TIPS & TRICKS
   ========================================= */

.tips {

    background: #d9e7f4;

    color: #111;

    padding: 50px;

}


/* Individual tip */

.tip {

    display: flex;

    gap: 20px;

    margin: 30px 0;

}


/* Tip icon */

.tip-icon {

    font-size: 1.5rem;

}


/* Tip heading */

.tip h3 {

    margin: 0 0 5px;

}


/* Tip text */

.tip p {

    margin: 0;

    line-height: 1.6;

}


/* =========================================
   FOOTER
   ========================================= */

footer {

    width: 90%;

    max-width: 1100px;

    margin: 80px auto 40px;

    text-align: center;

}


footer a {

    color: white;

    text-decoration: none;

}


footer a:hover {

    text-decoration: underline;

}


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

@media (max-width: 700px) {


    /* Header */

    .recipe-header {

        flex-direction: column;

        align-items: flex-start;

        gap: 15px;

    }


    /* Hero */

    .recipe-hero {

        min-height: 450px;

    }


    .recipe-hero-content {

        padding: 30px;

    }


    .recipe-hero-content h2 {

        font-size: 3rem;

    }


    /* Recipe details */

    .recipe-details {

        grid-template-columns:
            repeat(2, 1fr);

    }


    .detail {

        border-right: none;

        border-bottom:
            1px solid rgba(0,0,0,0.15);

    }


    .detail:last-child {

        grid-column: span 2;

    }


    /* Ingredients */

    .ingredient-list {

        grid-template-columns: 1fr;

    }


    .ingredients,
    .tips {

        padding: 30px;

    }


    /* Method */

    .recipe-step {

        grid-template-columns:
            50px 1fr;

        gap: 15px;

    }


    .step-number {

        font-size: 1.5rem;

    }


}