/*
 * Matsnakk.no – Phase 3U v1c
 * Offentlige card-grids: lik radrytme, lik card-høyde og fast intern plassering av
 * tittel, intro, taksonomi/tagg-slot og footer. Gir kortene en ryddig 4x5 presentasjon
 * uten å endre data, router, terminal eller oppskriftssidekolonnene.
 */

:root {
    --mn-3u-card-image-height: 210px;
    --mn-3u-card-title-slot: 4.35rem;
    --mn-3u-card-intro-slot: 4.75rem;
    --mn-3u-card-tag-slot: 2.45rem;
    --mn-3u-card-footer-slot: 2.55rem;
    --mn-3u-card-gap: .68rem;
}

.mn-v22-content-shell .mn-v22-content-grid,
.mn-phase3t-foundation-bed .mn-v22-content-grid,
.mn-main .mn-v22-content-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 1.25rem !important;
    align-items: stretch !important;
    grid-auto-flow: row !important;
}

.mn-v22-content-shell .mn-v22-content-card,
.mn-phase3t-foundation-bed .mn-v22-content-card,
.mn-main .mn-v22-content-card {
    height: 100% !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-rows: auto 1fr !important;
    overflow: hidden !important;
}

.mn-v22-content-shell .mn-v22-content-card__image,
.mn-phase3t-foundation-bed .mn-v22-content-card__image,
.mn-main .mn-v22-content-card__image {
    height: var(--mn-3u-card-image-height) !important;
    max-height: var(--mn-3u-card-image-height) !important;
    overflow: hidden !important;
}

.mn-v22-content-shell .mn-v22-content-card__image img,
.mn-phase3t-foundation-bed .mn-v22-content-card__image img,
.mn-main .mn-v22-content-card__image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

.mn-v22-content-shell .mn-v22-content-card__body,
.mn-phase3t-foundation-bed .mn-v22-content-card__body,
.mn-main .mn-v22-content-card__body {
    min-height: 0 !important;
    height: 100% !important;
    display: grid !important;
    grid-template-rows:
        minmax(var(--mn-3u-card-title-slot), auto)
        minmax(var(--mn-3u-card-intro-slot), auto)
        minmax(var(--mn-3u-card-tag-slot), auto)
        minmax(var(--mn-3u-card-footer-slot), auto) !important;
    gap: var(--mn-3u-card-gap) !important;
    align-content: stretch !important;
}

.mn-v22-content-shell .mn-v22-content-card__body h2,
.mn-v22-content-shell .mn-v22-content-card__body h3,
.mn-phase3t-foundation-bed .mn-v22-content-card__body h2,
.mn-phase3t-foundation-bed .mn-v22-content-card__body h3,
.mn-main .mn-v22-content-card__body h2,
.mn-main .mn-v22-content-card__body h3 {
    grid-row: 1 !important;
    margin: 0 !important;
    min-height: var(--mn-3u-card-title-slot) !important;
    line-height: 1.08 !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 3 !important;
    overflow: hidden !important;
}

.mn-v22-content-shell .mn-v22-content-card__body > p,
.mn-phase3t-foundation-bed .mn-v22-content-card__body > p,
.mn-main .mn-v22-content-card__body > p {
    grid-row: 2 !important;
    margin: 0 !important;
    min-height: var(--mn-3u-card-intro-slot) !important;
    max-height: var(--mn-3u-card-intro-slot) !important;
    line-height: 1.52 !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 3 !important;
    overflow: hidden !important;
}

.mn-v22-content-shell .mn-v22-content-card__body .mn-phase3j-taxonomy-chips,
.mn-phase3t-foundation-bed .mn-v22-content-card__body .mn-phase3j-taxonomy-chips,
.mn-main .mn-v22-content-card__body .mn-phase3j-taxonomy-chips {
    grid-row: 3 !important;
    min-height: var(--mn-3u-card-tag-slot) !important;
    margin: 0 !important;
    align-content: flex-start !important;
    align-self: stretch !important;
}

.mn-v22-content-shell .mn-v22-content-card__body footer,
.mn-phase3t-foundation-bed .mn-v22-content-card__body footer,
.mn-main .mn-v22-content-card__body footer,
.mn-v22-content-shell .mn-v22-content-card__body .mn-card-footer,
.mn-phase3t-foundation-bed .mn-v22-content-card__body .mn-card-footer,
.mn-main .mn-v22-content-card__body .mn-card-footer {
    grid-row: 4 !important;
    min-height: var(--mn-3u-card-footer-slot) !important;
    margin: 0 !important;
    align-self: end !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: .55rem !important;
    flex-wrap: nowrap !important;
}

/* Andre offentlige card-familier følger samme radstrekk der de bruker grid. */
.mn-v30-categories-grid,
.mn-v30-featured-grid,
.mn-v30-section-grid,
.mn-v30-story-grid {
    align-items: stretch !important;
}

.mn-v30-category-card,
.mn-v30-featured-card,
.mn-v30-story-card,
.mn-card,
.mn-recipe-card {
    height: 100% !important;
}

@media (max-width: 1120px) {
    .mn-v22-content-shell .mn-v22-content-grid,
    .mn-phase3t-foundation-bed .mn-v22-content-grid,
    .mn-main .mn-v22-content-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 840px) {
    .mn-v22-content-shell .mn-v22-content-grid,
    .mn-phase3t-foundation-bed .mn-v22-content-grid,
    .mn-main .mn-v22-content-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 560px) {
    .mn-v22-content-shell .mn-v22-content-grid,
    .mn-phase3t-foundation-bed .mn-v22-content-grid,
    .mn-main .mn-v22-content-grid {
        grid-template-columns: 1fr !important;
    }

    .mn-v22-content-shell .mn-v22-content-card__body,
    .mn-phase3t-foundation-bed .mn-v22-content-card__body,
    .mn-main .mn-v22-content-card__body {
        display: flex !important;
        flex-direction: column !important;
    }

    .mn-v22-content-shell .mn-v22-content-card__body h2,
    .mn-v22-content-shell .mn-v22-content-card__body h3,
    .mn-v22-content-shell .mn-v22-content-card__body > p,
    .mn-phase3t-foundation-bed .mn-v22-content-card__body h2,
    .mn-phase3t-foundation-bed .mn-v22-content-card__body h3,
    .mn-phase3t-foundation-bed .mn-v22-content-card__body > p,
    .mn-main .mn-v22-content-card__body h2,
    .mn-main .mn-v22-content-card__body h3,
    .mn-main .mn-v22-content-card__body > p {
        min-height: unset !important;
        max-height: none !important;
        -webkit-line-clamp: unset !important;
    }
}