/*
 * Seksjonene på widgetsiden som CSS grid i stedet for flexbox + Bootstraps col-sm-N (steg 1–2 i
 * «Layoutmodell for widgetsiden»). Ingen synlig forskjell, målt på 32 sider / 24 domener 24.10.2026;
 * spenn per bredde og rekkefølge på mobil (steg 3) nederst. ?layout=flex gir den gamle renderingen.
 *
 * - Bare fra 768 px, der seksjonen i dag er en flex-rad (grid.less). Under 768 px er alt som før.
 * - Spennet leses fra col-sm-N, så admin (_admin.section.resize.js) kan endre bredden live.
 * - Gutteren er som i dag: padding på kolonnene (LayoutHelper.GetLayoutColumnStyle), gap 0.
 * - Bootstraps width på .col-sm-N og .row::before/::after nøytraliseres; i et grid ville
 *   width:50% gjelde cellen, og pseudo-elementene bli egne celler.
 * Lastes av WidgetPageLayout, og .row-layout får klassen layout-grid av BuildWidgetBootStrapPageComponent
 * (ikke når kolonnene summerer til mer enn 12: da beholdes flex, som krymper dem på én rad).
 */
/*
 * Steg 4: hver kolonne er en container (bloc-col), så widgetene kan bruke container queries mot
 * bredden de faktisk får: @container bloc-col (max-width: …) { … }. Gjelder alle kolonner og alle
 * bredder, også seksjoner som beholder flex. Endrer ingen geometri: målt 24.10.2026 på 31 sider /
 * 23 domener ved 400, 850 og 1400 px, også alle elementer inne i widgetene. Uten layout-grid.css
 * (?layout=flex) finnes ingen container, og widgetenes @container-regler slår ikke inn.
 */
.ui-layout-col {
    container: bloc-col / inline-size;
}

/* For widgets med Bootstrap-kolonner inni (col-sm-6, col-sm-4 …): klassen på widgetens .row stabler dem
   når kolonnen widgeten står i er smal, ikke bare når skjermen er under 768 px. Bare width: floaten må
   stå, ellers kollapser marger ut av kolonnene og høyden endres (målt på kolbotnil 59798). */
@container bloc-col (max-width: 539px) {
    .bloc-cq-stack > [class*="col-"] {
        width: 100%;
    }
}

@media (min-width: 768px) {
    .row-layout.layout-grid {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        grid-auto-flow: row;
    }

    .row-layout.layout-grid::before,
    .row-layout.layout-grid::after {
        content: none;
        display: none;
    }

    /* float:left fra .col-sm-N får stå: den virker ikke på grid-elementer (og gjorde det ikke på flex). */
    .row-layout.layout-grid > .ui-layout-col {
        width: auto;
    }

    .row-layout.layout-grid > .col-sm-1 { grid-column: span 1; }
    .row-layout.layout-grid > .col-sm-2 { grid-column: span 2; }
    .row-layout.layout-grid > .col-sm-3 { grid-column: span 3; }
    .row-layout.layout-grid > .col-sm-4 { grid-column: span 4; }
    .row-layout.layout-grid > .col-sm-5 { grid-column: span 5; }
    .row-layout.layout-grid > .col-sm-6 { grid-column: span 6; }
    .row-layout.layout-grid > .col-sm-7 { grid-column: span 7; }
    .row-layout.layout-grid > .col-sm-8 { grid-column: span 8; }
    .row-layout.layout-grid > .col-sm-9 { grid-column: span 9; }
    .row-layout.layout-grid > .col-sm-10 { grid-column: span 10; }
    .row-layout.layout-grid > .col-sm-11 { grid-column: span 11; }
    .row-layout.layout-grid > .col-sm-12 { grid-column: span 12; }
}

/*
 * Steg 3: valgfritt spenn per bredde og rekkefølge på mobil (BootStrapRowColumSize.colSpanTablet,
 * colSpanPhone, phoneOrder). Komponenten skriver dem som --span-t / --span-m / --order-m i style på
 * kolonnen, og bare når de er satt, så seksjoner uten dem rendres som over.
 */
@media (min-width: 768px) and (max-width: 991px) {
    .row-layout.layout-grid > .ui-layout-col[style*="--span-t"] {
        grid-column: span var(--span-t);
    }
}

/* Under 768 px blir seksjonen grid bare når en kolonne har spenn eller rekkefølge på mobil
   (klassen layout-grid-phone); komponenten setter da --span-m og --order-m på alle kolonnene,
   og regner om «snu rekkefølgen på mobil» til --order-m. .layout-canvas og .layout-grid er med for å
   slå frontend.css sin .layout-canvas .row-layout.section-vertical-align-* { display:flex } på mobil. */
@media (max-width: 767px) {
    .layout-canvas .row-layout.layout-grid.layout-grid-phone {
        display: grid;
        grid-template-columns: repeat(12, minmax(0, 1fr));
        grid-auto-flow: row;
    }

    .row-layout.layout-grid-phone::before,
    .row-layout.layout-grid-phone::after {
        content: none;
        display: none;
    }

    .row-layout.layout-grid-phone > .ui-layout-col {
        width: auto;
        grid-column: span var(--span-m, 12);
        order: var(--order-m, 0);
    }
}