/*
 * Matsnakk.no – fase 3F universell offentlig oppskriftslayout
 * Gjelder offentlige oppskriftsflater: /recipes, /recipes/{slug}, kategori-/oppskriftskort.
 * Ekskluderer opprett/rediger/admin/kontrollpanel via JS-scope.
 */

body.mn-phase3f-public-recipes {
    background:
        radial-gradient(circle at 12% 8%, rgba(224, 189, 102, .12), transparent 28rem),
        radial-gradient(circle at 88% 14%, rgba(7, 86, 66, .08), transparent 32rem),
        linear-gradient(180deg, #fffaf1, #f7f2ea) !important;
    color: #241913;
}

body.mn-phase3f-public-recipes .mn-main {
    background: transparent !important;
}

body.mn-phase3f-public-recipes .mn-recipe-detail,
body.mn-phase3f-public-recipes .mn-recipe-page,
body.mn-phase3f-public-recipes .mn-recipe-shell,
body.mn-phase3f-public-recipes .mn-recipes-page,
body.mn-phase3f-public-recipes .mn-v22-page,
body.mn-phase3f-public-recipes .mn-content-page {
    max-width: 1220px;
    margin-left: auto;
    margin-right: auto;
}

body.mn-phase3f-public-recipes .mn-page-hero,
body.mn-phase3f-public-recipes .mn-v22-page-hero,
body.mn-phase3f-public-recipes .mn-recipe-hero,
body.mn-phase3f-public-recipes .mn-recipe-detail__hero {
    max-width: 1220px;
    margin-left: auto;
    margin-right: auto;
    padding: clamp(2rem, 4vw, 3.5rem) clamp(1rem, 3vw, 1.4rem);
    color: #241913 !important;
}

body.mn-phase3f-public-recipes h1,
body.mn-phase3f-public-recipes .mn-page-hero h1,
body.mn-phase3f-public-recipes .mn-v22-page-hero h1,
body.mn-phase3f-public-recipes .mn-recipe-hero h1,
body.mn-phase3f-public-recipes .mn-recipe-detail__hero h1 {
    color: #241913 !important;
    letter-spacing: -.04em;
    text-shadow: none !important;
}

body.mn-phase3f-public-recipes .mn-page-hero p,
body.mn-phase3f-public-recipes .mn-v22-page-hero p,
body.mn-phase3f-public-recipes .mn-recipe-hero p,
body.mn-phase3f-public-recipes .mn-recipe-detail__hero p {
    color: #625246 !important;
}

body.mn-phase3f-public-recipes .mn-recipe-info-card,
body.mn-phase3f-public-recipes .mn-recipe-section,
body.mn-phase3f-public-recipes .mn-recipe-card,
body.mn-phase3f-public-recipes .mn-v22-content-card,
body.mn-phase3f-public-recipes .mn-content-card,
body.mn-phase3f-public-recipes .mn-card {
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,250,241,.93)) !important;
    border: 1px solid rgba(92, 58, 34, .15) !important;
    box-shadow: 0 16px 38px rgba(43, 28, 18, .08) !important;
}

body.mn-phase3f-public-recipes .mn-recipe-detail__grid,
body.mn-phase3f-public-recipes .mn-recipe-layout,
body.mn-phase3f-public-recipes .mn-recipe-public-grid,
body.mn-phase3f-public-recipes .mn-phase3f-recipe-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(300px, .85fr);
    gap: 1.2rem;
    align-items: start;
}

body.mn-phase3f-public-recipes .mn-recipe-detail__sidebar,
body.mn-phase3f-public-recipes .mn-recipe-sidebar,
body.mn-phase3f-public-recipes .mn-phase3f-recipe-sidebar {
    position: sticky;
    top: 5.5rem;
    display: grid;
    gap: 1rem;
}

body.mn-phase3f-public-recipes .mn-recipe-detail img,
body.mn-phase3f-public-recipes .mn-recipe-page img,
body.mn-phase3f-public-recipes .mn-recipe-shell img,
body.mn-phase3f-public-recipes .mn-v22-content-card__image img,
body.mn-phase3f-public-recipes .mn-recipe-card img {
    border-radius: 20px;
    filter: saturate(1.035) contrast(1.025);
}

body.mn-phase3f-public-recipes .mn-recipe-image,
body.mn-phase3f-public-recipes .mn-recipe-hero-image,
body.mn-phase3f-public-recipes .mn-recipe-detail__image {
    overflow: hidden;
    border-radius: 22px;
    box-shadow: 0 18px 44px rgba(43, 28, 18, .12);
    border: 1px solid rgba(92, 58, 34, .14);
    background: #eadfce;
}

body.mn-phase3f-public-recipes .mn-recipe-meta,
body.mn-phase3f-public-recipes .mn-recipe-facts,
body.mn-phase3f-public-recipes .mn-phase3f-recipe-facts {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
    margin: 1rem 0;
}

body.mn-phase3f-public-recipes .mn-recipe-meta > *,
body.mn-phase3f-public-recipes .mn-recipe-facts > *,
body.mn-phase3f-public-recipes .mn-phase3f-recipe-facts > *,
body.mn-phase3f-public-recipes .mn-meta-chip,
body.mn-phase3f-public-recipes .mn-recipe-tag,
body.mn-phase3f-public-recipes .mn-taxonomy-chip,
body.mn-phase3f-public-recipes .mn-chip {
    display: inline-flex;
    align-items: center;
    gap: .38rem;
    min-height: 2rem;
    padding: .38rem .72rem;
    border-radius: 999px;
    background: #e8f4ee !important;
    color: #075642 !important;
    border: 1px solid rgba(7, 86, 66, .14) !important;
    font-weight: 850;
}

body.mn-phase3f-public-recipes .mn-recipe-ingredients ul,
body.mn-phase3f-public-recipes .recipe-ingredients ul,
body.mn-phase3f-public-recipes .mn-ingredients-list {
    list-style: none;
    padding-left: 0;
    display: grid;
    gap: .45rem;
}

body.mn-phase3f-public-recipes .mn-recipe-ingredients li,
body.mn-phase3f-public-recipes .recipe-ingredients li,
body.mn-phase3f-public-recipes .mn-ingredients-list li {
    padding: .58rem .72rem;
    border-radius: 13px;
    background: rgba(255,255,255,.72);
    border: 1px solid rgba(92,58,34,.10);
}

body.mn-phase3f-public-recipes .mn-recipe-steps ol,
body.mn-phase3f-public-recipes .recipe-steps ol,
body.mn-phase3f-public-recipes .mn-steps-list {
    counter-reset: mn-step;
    list-style: none;
    padding-left: 0;
    display: grid;
    gap: .75rem;
}

body.mn-phase3f-public-recipes .mn-recipe-steps li,
body.mn-phase3f-public-recipes .recipe-steps li,
body.mn-phase3f-public-recipes .mn-steps-list li {
    counter-increment: mn-step;
    position: relative;
    padding: .85rem .9rem .85rem 3.25rem;
    border-radius: 15px;
    background: rgba(255,255,255,.75);
    border: 1px solid rgba(92,58,34,.10);
}

body.mn-phase3f-public-recipes .mn-recipe-steps li::before,
body.mn-phase3f-public-recipes .recipe-steps li::before,
body.mn-phase3f-public-recipes .mn-steps-list li::before {
    content: counter(mn-step);
    position: absolute;
    left: .85rem;
    top: .78rem;
    width: 1.85rem;
    height: 1.85rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: linear-gradient(135deg, #a8663a, #c28755);
    color: #fff;
    font-weight: 950;
}

body.mn-phase3f-public-recipes .mn-allergens,
body.mn-phase3f-public-recipes .mn-recipe-allergens,
body.mn-phase3f-public-recipes .mn-recipe-notes,
body.mn-phase3f-public-recipes .mn-recipe-history,
body.mn-phase3f-public-recipes .mn-recipe-drink-pairing {
    background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,250,241,.9));
    border: 1px solid rgba(92,58,34,.14);
    border-radius: 18px;
    padding: 1rem;
    box-shadow: 0 12px 28px rgba(43, 28, 18, .06);
}

body.mn-phase3f-public-recipes .mn-v22-content-card,
body.mn-phase3f-public-recipes .mn-recipe-card,
body.mn-phase3f-public-recipes .mn-content-card {
    overflow: hidden;
    transition: transform .18s ease, box-shadow .18s ease;
}

body.mn-phase3f-public-recipes .mn-v22-content-card:hover,
body.mn-phase3f-public-recipes .mn-recipe-card:hover,
body.mn-phase3f-public-recipes .mn-content-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 44px rgba(43,28,18,.13) !important;
}

body.mn-phase3f-public-recipes .mn-v22-content-card h2,
body.mn-phase3f-public-recipes .mn-v22-content-card h3,
body.mn-phase3f-public-recipes .mn-recipe-card h2,
body.mn-phase3f-public-recipes .mn-recipe-card h3,
body.mn-phase3f-public-recipes .mn-content-card h2,
body.mn-phase3f-public-recipes .mn-content-card h3 {
    color: #21160f !important;
    letter-spacing: -.02em;
}

body.mn-phase3f-public-recipes .mn-v22-content-card p,
body.mn-phase3f-public-recipes .mn-recipe-card p,
body.mn-phase3f-public-recipes .mn-content-card p {
    color: #5e5148 !important;
}

@media (max-width: 980px) {
    body.mn-phase3f-public-recipes .mn-recipe-detail__grid,
    body.mn-phase3f-public-recipes .mn-recipe-layout,
    body.mn-phase3f-public-recipes .mn-recipe-public-grid,
    body.mn-phase3f-public-recipes .mn-phase3f-recipe-grid {
        grid-template-columns: 1fr;
    }

    body.mn-phase3f-public-recipes .mn-recipe-detail__sidebar,
    body.mn-phase3f-public-recipes .mn-recipe-sidebar,
    body.mn-phase3f-public-recipes .mn-phase3f-recipe-sidebar {
        position: static;
    }
}