/*
 * Matsnakk.no - Phase 3R v3: topp- og bunnflukt for ingrediens/metode-kort
 * Pakke: matsnakk_phase3r_recipe_columns_top_align_v3_20260611
 * Formål:
 * - Ytterkortet "Ingredienser / Dette trenger du" og ytterkortet "Slik gjør du / Fremgangsmåte"
 *   skal starte på samme linje og slutte på samme linje på desktop.
 * - Allergenkortet skjules visuelt i denne offentlige oppskriftslayouten uten at data slettes.
 * - Overstyrer den tidligere v2-løsningen som fikk bunnflukt riktig, men ikke toppflukt.
 */

/* MN_PHASE3R_RECIPE_COLUMNS_TOP_ALIGN_V3_20260611 */

@media (min-width: 901px) {
    .mn-recipe-detail .mn-recipe-main-grid {
        display: grid !important;
        align-items: stretch !important;
        grid-auto-rows: auto !important;
    }

    .mn-recipe-detail .mn-recipe-main-grid > .mn-recipe-ingredients,
    .mn-recipe-detail .mn-recipe-main-grid > .mn-recipe-method {
        align-self: stretch !important;
        box-sizing: border-box !important;
        display: flex !important;
        flex-direction: column !important;
        height: 100% !important;
        min-height: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        transform: none !important;
        position: relative !important;
        top: auto !important;
        inset: auto !important;
        justify-content: flex-start !important;
    }

    .mn-recipe-detail .mn-recipe-main-grid > .mn-recipe-ingredients {
        grid-column: 1 !important;
        grid-row: 1 !important;
    }

    .mn-recipe-detail .mn-recipe-main-grid > .mn-recipe-method {
        grid-column: 2 !important;
        grid-row: 1 !important;
    }

    .mn-recipe-detail .mn-recipe-main-grid > .mn-recipe-ingredients > .mn-recipe-panel-head,
    .mn-recipe-detail .mn-recipe-main-grid > .mn-recipe-method > .mn-recipe-panel-head,
    .mn-recipe-detail .mn-recipe-main-grid > .mn-recipe-ingredients > .mn-recipe-ingredient-section,
    .mn-recipe-detail .mn-recipe-main-grid > .mn-recipe-method > .mn-recipe-method-section,
    .mn-recipe-detail .mn-recipe-main-grid > .mn-recipe-ingredients > .mn-recipe-empty,
    .mn-recipe-detail .mn-recipe-main-grid > .mn-recipe-method > .mn-recipe-empty {
        flex: 0 0 auto !important;
    }

    .mn-recipe-detail .mn-recipe-main-grid > .mn-recipe-ingredients > .mn-recipe-panel-head,
    .mn-recipe-detail .mn-recipe-main-grid > .mn-recipe-method > .mn-recipe-panel-head {
        margin-top: 0 !important;
    }
}

/* Allergener skjules visuelt her. Allergen-data og serverlogikk beholdes uendret. */
.mn-recipe-detail .mn-recipe-main-grid > .mn-recipe-ingredients > .mn-recipe-allergens {
    display: none !important;
    visibility: hidden !important;
}

@media (max-width: 900px) {
    .mn-recipe-detail .mn-recipe-main-grid {
        align-items: start !important;
    }

    .mn-recipe-detail .mn-recipe-main-grid > .mn-recipe-ingredients,
    .mn-recipe-detail .mn-recipe-main-grid > .mn-recipe-method {
        align-self: auto !important;
        display: block !important;
        height: auto !important;
        min-height: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 1rem !important;
        transform: none !important;
        position: static !important;
        top: auto !important;
        inset: auto !important;
    }
}