/*
 * Matsnakk.no – fase 3H
 * Stabilisering av offentlig oppskriftsside + paginering.
 * Retter for høy/stretched hero, oppblåst bilde og tekst som går utenfor.
 * Bevarer skillet: editor/admin/kontrollpanel påvirkes ikke.
 */

/* Oppskriftsside skal ikke arve husmannskost-magasinlayout direkte på detaljvisning */
body.mn-phase3h-public-recipe-detail.mn-phase3g-husmannskost-page {
    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;
}

/* Stabil, begrenset hero for /recipes/{slug} */
body.mn-phase3h-public-recipe-detail .mn-recipe-detail {
    width: min(1180px, calc(100% - 32px)) !important;
    max-width: 1180px !important;
    margin: 0 auto 56px !important;
}

body.mn-phase3h-public-recipe-detail .mn-recipe-hero {
    width: 100% !important;
    max-width: 1180px !important;
    min-height: 0 !important;
    height: auto !important;
    display: grid !important;
    grid-template-columns: minmax(300px, .92fr) minmax(0, 1.08fr) !important;
    gap: clamp(18px, 2.6vw, 28px) !important;
    align-items: stretch !important;
    margin: 28px auto !important;
    padding: clamp(14px, 2vw, 18px) !important;
    border-radius: 30px !important;
    overflow: hidden !important;
    background: linear-gradient(135deg, rgba(35, 22, 16, .96), rgba(78, 45, 28, .94)) !important;
    color: #fff7e8 !important;
    box-shadow: 0 24px 65px rgba(29, 17, 11, .25) !important;
}

/* Bilde skal være kontrollert, ikke blåses opp vertikalt */
body.mn-phase3h-public-recipe-detail .mn-recipe-hero__image {
    min-height: 0 !important;
    height: clamp(280px, 38vw, 460px) !important;
    max-height: 460px !important;
    border-radius: 24px !important;
    overflow: hidden !important;
    background: rgba(255,255,255,.08) !important;
}

body.mn-phase3h-public-recipe-detail .mn-recipe-hero__image img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 460px !important;
    object-fit: cover !important;
    object-position: center center !important;
    border-radius: 0 !important;
}

/* Tekst skal holde seg inni høyre felt */
body.mn-phase3h-public-recipe-detail .mn-recipe-hero__content {
    min-width: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    padding: clamp(18px, 3vw, 34px) !important;
    color: #fff7e8 !important;
}

body.mn-phase3h-public-recipe-detail .mn-recipe-hero__content h1 {
    max-width: 100% !important;
    margin: 0 !important;
    color: #fff1d4 !important;
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: clamp(2rem, 3.7vw, 4.15rem) !important;
    line-height: 1.01 !important;
    letter-spacing: -.045em !important;
    text-shadow: 0 4px 24px rgba(0,0,0,.42) !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    hyphens: auto !important;
}

body.mn-phase3h-public-recipe-detail .mn-recipe-hero__intro {
    max-width: 62ch !important;
    margin: 18px 0 0 !important;
    color: rgba(255,247,232,.86) !important;
    font-size: clamp(.98rem, 1.2vw, 1.08rem) !important;
    line-height: 1.55 !important;
}

body.mn-phase3h-public-recipe-detail .mn-recipe-hero__meta,
body.mn-phase3h-public-recipe-detail .mn-recipe-hero__meta time {
    color: rgba(255,247,232,.78) !important;
}

body.mn-phase3h-public-recipe-detail .mn-v30-kicker {
    color: #d89454 !important;
}

/* Chips/fakta må være kompakte og ikke dra heroen nedover */
body.mn-phase3h-public-recipe-detail .mn-recipe-chip-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    margin-top: 22px !important;
}

body.mn-phase3h-public-recipe-detail .mn-recipe-chip {
    min-width: 112px !important;
    max-width: 160px !important;
    padding: 11px 13px !important;
    border-radius: 16px !important;
    background: rgba(255,255,255,.10) !important;
    border: 1px solid rgba(255,255,255,.18) !important;
    color: #fff7e8 !important;
}

/* Resten av oppskriften holdes ryddig */
body.mn-phase3h-public-recipe-detail .mn-recipe-overview,
body.mn-phase3h-public-recipe-detail .mn-recipe-main-grid {
    max-width: 1180px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

body.mn-phase3h-public-recipe-detail .mn-recipe-main-grid {
    grid-template-columns: minmax(280px, .86fr) minmax(360px, 1.14fr) !important;
}

/* Liste-/kortvisninger: 20 per side + paginering */
.mn-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    margin: 2rem auto 0;
    padding: 1rem;
}

.mn-pagination__link,
.mn-pagination__current,
.mn-pagination__ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.4rem;
    min-height: 2.4rem;
    padding: .52rem .72rem;
    border-radius: 999px;
    border: 1px solid rgba(92,58,34,.16);
    background: rgba(255,250,241,.92);
    color: #4a2e1f;
    font-weight: 850;
    text-decoration: none;
}

.mn-pagination__link:hover {
    background: #e8f4ee;
    color: #075642;
    border-color: rgba(7,86,66,.18);
}

.mn-pagination__current {
    background: linear-gradient(135deg, #075642, #0d6b53);
    color: #fff;
    border-color: rgba(255,255,255,.2);
}

.mn-pagination__summary {
    flex-basis: 100%;
    text-align: center;
    color: #6a594c;
    font-size: .92rem;
    margin-top: .25rem;
}

/* Offentlige oppskriftskort skal ikke bli lange/stretched */
body.mn-phase3h-public-list .mn-v22-content-grid {
    align-items: stretch !important;
}

body.mn-phase3h-public-list .mn-v22-content-card {
    min-height: 0 !important;
}

body.mn-phase3h-public-list .mn-v22-content-card__image {
    height: 220px !important;
    max-height: 220px !important;
    overflow: hidden !important;
}

body.mn-phase3h-public-list .mn-v22-content-card__image img {
    height: 100% !important;
    object-fit: cover !important;
}

@media (max-width: 860px) {
    body.mn-phase3h-public-recipe-detail .mn-recipe-hero {
        grid-template-columns: 1fr !important;
    }

    body.mn-phase3h-public-recipe-detail .mn-recipe-hero__image {
        height: clamp(240px, 58vw, 360px) !important;
        max-height: 360px !important;
    }

    body.mn-phase3h-public-recipe-detail .mn-recipe-hero__content h1 {
        font-size: clamp(2.1rem, 9vw, 3.4rem) !important;
        overflow-wrap: break-word !important;
    }

    body.mn-phase3h-public-recipe-detail .mn-recipe-main-grid {
        grid-template-columns: 1fr !important;
    }

    body.mn-phase3h-public-recipe-detail .mn-recipe-ingredients {
        position: static !important;
    }
}