/* =========================================================
   RECIPES – LISTE & OVERBLIK
   ========================================================= */

/* Page headers */
.page-header,
.page-title,
.page-subtitle{
    margin: 0 auto;
}

.page-container{
    margin: var(--section-spacing) 0;
}

.page-container h1{
    color: #00344E;
    padding-left: 20px;
    display: block;
    width: var(--content-width);
    margin: 0 auto;
}

/* =========================================================
   RECIPE LIST / GRID
   ========================================================= */

.recipes{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;

    max-width: 1130px;
    margin: 0 auto;
    padding-top: 20px;
}

.recipe-grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

/* Pagination */
.pagination-wrapper {
        text-align: center;
        margin: 40px 0 60px;
    }

    .pagination a {
        display: inline-block;
        padding: 8px 14px;
        margin: 0 4px;
        border: 1px solid #ccc;
        border-radius: 50%;
        text-decoration: none;
        color: #333;
    }

    .pagination a.active {
        background: #333;
        color: #fff;
    }

/* =========================================================
   SINGLE RECIPE – HERO IMAGE
   ========================================================= */

.recipe-image-wrapper{
    position: relative;
}

.recipe-image{
    flex: 1;
    min-width: 320px;
}

.recipe-image img{
    width: 100%;
    height: 600px;
    object-fit: cover;
    border-radius: 6px;
    display: block;
}

/* Season badge */
.season-badge{
    position: absolute;
    top: 8px;
    left: 8px;
    padding: 4px 7px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 4px;
    color: #fff;
}

.season-full    { background: #2e7d32; }
.season-partial { background: #f9a825; }
.season-none    { background: #c62828; }

/* =========================================================
   RECIPE CONTENT GRID
   ========================================================= */

.content-grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 18px;
    align-items: start;

    width: var(--content-width);
    margin: 0 auto;
}

/* Override card width ONLY in recipe view */
.content-grid .card{
    width: 100%;
}

.ingredients-card{
    background-color: #ecf2e4;
}

/* =========================================================
   INGREDIENTS & METHOD
   ========================================================= */

.info-text{
    margin: 0 auto;
    padding: 0 0 16px 0;
}

.actions{
    display: block;
    margin: 0 auto;
}

/* =========================================================
   MODAL IMAGE SAFETY
   ========================================================= */

.recipe-image-wrapper img{
    display: block;
}

/* =========================================================
   MOBIL – RECIPES
   ========================================================= */

@media (max-width: 768px){

    /* Grid → stack */
    .recipes,
    .recipe-grid{
        grid-template-columns: 1fr;
        gap: 16px;
    }

    /* Content grid → stack */
    .content-grid{
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .ingredients-card,
    .method-card{
        width: 100%;
        max-width: 100%;
    }

    .ingredients-card{ order: 1; }
    .method-card{ order: 2; }

    /* Ingredient list */
    .ingredient-list li{
        display: flex;
        flex-wrap: wrap;
        gap: 4px 8px;
        font-size: 14px;
    }

    .ingredient-qty{
        font-weight: 600;
        white-space: nowrap;
    }

    .ingredient-note{
        width: 100%;
        font-size: 13px;
        color: #666;
    }

    /* Method */
    .method-list{
        padding-left: 20px;
    }

    .method-list li{
        font-size: 14px;
        line-height: 1.5;
    }

    /* Hero image */
    .recipe-image img{
        height: 320px;
    }
}