/*
 * 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);
    }
}

/*
 * [dev] Kolonnebredde-editoren (_admin.section.resize.js / admin.bundle.js). Alt under virker bare med klassene
 * editoren setter (body.bloc-colspans …) og på seksjoner med data-colspans-dev, som bare rendres for dev-admin
 * i redigeringsmodus. For besøkende har det ingen virkning.
 *
 * Forhåndsvisningen smalner lerretet (#content). Media-spørringene følger vinduet og ikke lerretet, så breddene
 * per enhet settes her fra --pv-span / --pv-order, som skriptet regner ut. Container queries i widgetene følger
 * kolonnebredden og slår derfor inn live; regler i widgetene som følger vinduet, viser fortsatt desktop.
 */
body.ui-admin-mode.bloc-preview-tablet #content,
body.ui-admin-mode.bloc-preview-phone #content {
    margin-left: auto;
    margin-right: auto;
    outline: 1px dashed #94a3b8;
    outline-offset: 0;
}
body.ui-admin-mode.bloc-preview-tablet #content { max-width: 820px; }
body.ui-admin-mode.bloc-preview-phone #content { max-width: 390px; }

body.ui-admin-mode.bloc-preview-tablet .row-layout.layout-grid[data-colspans-dev] > .ui-layout-col,
body.ui-admin-mode.bloc-preview-phone .row-layout.layout-grid[data-colspans-dev] > .ui-layout-col {
    grid-column: span var(--pv-span, 12);
    order: var(--pv-order, 0);
}

/* En enhet uten egne verdier (nettbrett som på datamaskin, mobil under hverandre) vises nedtonet. */
body.ui-admin-mode .row-layout.bloc-colspans-inherited > .ui-layout-col { opacity: .55; }

/* De 12 kolonnelinjene, bare når verktøyet er slått på og man drar. ::after er ellers slått av på grid-seksjoner. */
body.ui-admin-mode.bloc-colspans-on .row-layout[data-colspans-dev].bloc-colspans-dragging::after {
    content: "";
    display: block;
    position: absolute;
    inset: 0;
    z-index: 1007;
    pointer-events: none;
    background: repeating-linear-gradient(to right,
        transparent 0, transparent calc(100% / 12 - 2px),
        rgba(37, 99, 235, .85) calc(100% / 12 - 2px), rgba(37, 99, 235, .85) calc(100% / 12));
    -webkit-mask-image: repeating-linear-gradient(to bottom, #000 0 8px, transparent 8px 12px);
    mask-image: repeating-linear-gradient(to bottom, #000 0 8px, transparent 8px 12px);
}

/* Kanthåndtaket: større, i seksjonsrødt (som seksjonsknappene), og litt luft til slå sammen-knappen under. */
body.ui-admin-mode.bloc-colspans .row-layout[data-colspans-dev] .ui-grid-resize-handle {
    width: 30px;
    height: 44px;
    margin-bottom: 8px;
    border: 2px solid #fff;
    border-radius: 15px;
    background: #eb2121;
    color: #fff;
    font-size: 15px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
    cursor: ew-resize;
}

/* Kantsonen langs hele kolonnekanten: ew-resize overalt, en rød strek når man peker på den. */
.bloc-colspans-edge {
    position: absolute;
    top: 0;
    bottom: 0;
    right: -10px;
    width: 20px;
    z-index: 1008;
    cursor: ew-resize;
    touch-action: none;
}
body:not(.ui-admin-mode) .bloc-colspans-edge { display: none; }
.bloc-colspans-edge::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 8px;
    width: 4px;
    border-radius: 2px;
    background: #eb2121;
    opacity: 0;
    transition: opacity .15s;
}
.bloc-colspans-edge:hover::before,
.bloc-colspans-dragging .bloc-colspans-edge::before { opacity: .8; }

/* Mobil: kolonnene står under hverandre og kanten er lerretskanten, så håndtaket og kantsonen legges innenfor.
   Håndtaket står midt på kolonnen, for oppe står widgetenes knapper (repositionLayoutOptions kan sette top inline).
   Slå sammen gjelder ikke når kolonnene står under hverandre. */
body.ui-admin-mode.bloc-preview-phone .row-layout[data-colspans-dev] .ui-layout-options { right: 4px; top: 50% !important; transform: translateY(-50%); background: transparent; }
body.ui-admin-mode.bloc-preview-phone .row-layout[data-colspans-dev] .ui-grid-merge-toggle { display: none; }
body.bloc-preview-phone .bloc-colspans-edge { right: 0; }
body.ui-admin-mode.bloc-preview-phone .row-layout.layout-grid[data-colspans-dev] > .ui-layout-col { cursor: grab; }
body.ui-admin-mode.bloc-preview-phone .row-layout.layout-grid[data-colspans-dev] > .ui-layout-col * { -webkit-user-drag: none; user-select: none; }

/* Nettbrett og mobil: bare layoutverktøyene. Widget- og seksjonsknappene og «Ny seksjon» skjules til man går
   tilbake til Datamaskin eller trykker Ferdig. */
body.ui-admin-mode.bloc-preview-tablet #content .ui-admin-btn,
body.ui-admin-mode.bloc-preview-phone #content .ui-admin-btn,
body.ui-admin-mode.bloc-preview-tablet #content .text-center > .btn.admin-toggle,
body.ui-admin-mode.bloc-preview-phone #content .text-center > .btn.admin-toggle { display: none !important; }

.bloc-colspans-toolbar {
    position: fixed;
    bottom: 64px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 999990;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px;
    border-radius: 12px;
    background: #1e293b;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .3);
    font: 600 15px/1 system-ui, sans-serif;
    color: #cbd5e1;
}
/* Under admin-panelet (#bottombar, z-index 999999), og skjult mens det er åpent (seksjons- og widgetinnstillinger). */
body.ui-admin-bottombar-open .bloc-colspans-toolbar,
body:not(.ui-admin-mode) .bloc-colspans-toolbar,
body:not(.ui-admin-mode) .bloc-colspans-spacer,
body:not(.ui-admin-mode) .bloc-colspans-toast { display: none; }
.bloc-colspans-toolbar span { padding: 0 10px; }
.bloc-colspans-toolbar button {
    border: 0;
    border-radius: 8px;
    padding: 11px 18px;
    background: transparent;
    color: #e2e8f0;
    font: inherit;
    cursor: pointer;
}
.bloc-colspans-toolbar button:hover { background: #334155; }
.bloc-colspans-toolbar button[aria-pressed="true"],
.bloc-colspans-toolbar button[data-open] { background: #2563eb; color: #fff; }
.bloc-colspans-toolbar button:disabled { opacity: .4; cursor: default; background: transparent; }
/* Plass under siden, så verktøylinja ikke dekker det nederste innholdet. */
.bloc-colspans-spacer { height: 110px; }

/* «Lagret · Angre» i noen sekunder etter hver lagring. */
.bloc-colspans-toast {
    position: fixed;
    bottom: 132px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 999991;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 10px 10px 20px;
    border-radius: 12px;
    background: #166534;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .3);
    color: #fff;
    font: 600 16px/1.2 system-ui, sans-serif;
}
.bloc-colspans-toast button {
    border: 2px solid #fff;
    border-radius: 8px;
    padding: 10px 22px;
    background: #fff;
    color: #166534;
    font: inherit;
    cursor: pointer;
}

.bloc-colspans-badge,
.bloc-colspans-label {
    padding: 4px 10px;
    border-radius: 6px;
    background: #1e293b;
    color: #fff;
    font: 600 13px/1.4 system-ui, sans-serif;
    white-space: nowrap;
    pointer-events: none;
}
/* Nede i seksjonen: oppe står seksjonens og widgetenes egne knapper. */
.bloc-colspans-badge { position: absolute; bottom: 4px; left: 4px; z-index: 1009; }
.bloc-colspans-label { position: fixed; z-index: 999992; transform: translate(14px, -140%); font-size: 15px; }

/* Mobil: flytt kolonnen opp / ned (phoneOrder). Pilen som ikke kan brukes, skjules. */
.bloc-colspans-order {
    position: absolute;
    bottom: 6px;
    right: 44px;
    z-index: 1009;
    display: flex;
    gap: 8px;
}
.bloc-colspans-order button {
    width: 38px;
    height: 38px;
    border: 2px solid #fff;
    border-radius: 8px;
    background: #2563eb;
    color: #fff;
    font: 700 18px/1 system-ui, sans-serif;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
    cursor: pointer;
}
.bloc-colspans-order button:disabled { visibility: hidden; }

/* Touch: kanten skal dras, ikke scrolle siden. Tastatur: synlig fokus (piltastene flytter kanten). */
.ui-grid-resize-handle { touch-action: none; }
.ui-grid-resize-handle:focus-visible { outline: 2px solid #eb2121; outline-offset: 2px; }
body.ui-admin-mode .ui-layout-col.bloc-colspans-moving { opacity: .5; }
body.ui-admin-mode .ui-layout-col.bloc-colspans-drop { outline: 3px dashed #2563eb; outline-offset: -3px; }

/* Admin: hver kolonne er en container (over), og container-type gir den egen stablingskontekst. Kanthåndtaket og
   slå sammen-knappen (.ui-layout-options, right:-15px) står over kanten til neste kolonne, og neste kolonne ble
   da malt over høyre halvdel av dem. Synkende z-index legger hver kolonne over den neste; kolonnen med en widget
   som dras (jQuery UI-hjelperen blir i kolonnen sin) legges øverst. */
body.ui-admin-mode .layout-canvas .row-layout > .ui-layout-col:nth-of-type(1) { z-index: 12; }
body.ui-admin-mode .layout-canvas .row-layout > .ui-layout-col:nth-of-type(2) { z-index: 11; }
body.ui-admin-mode .layout-canvas .row-layout > .ui-layout-col:nth-of-type(3) { z-index: 10; }
body.ui-admin-mode .layout-canvas .row-layout > .ui-layout-col:nth-of-type(4) { z-index: 9; }
body.ui-admin-mode .layout-canvas .row-layout > .ui-layout-col:nth-of-type(5) { z-index: 8; }
body.ui-admin-mode .layout-canvas .row-layout > .ui-layout-col:nth-of-type(6) { z-index: 7; }
body.ui-admin-mode .layout-canvas .row-layout > .ui-layout-col:nth-of-type(7) { z-index: 6; }
body.ui-admin-mode .layout-canvas .row-layout > .ui-layout-col:nth-of-type(8) { z-index: 5; }
body.ui-admin-mode .layout-canvas .row-layout > .ui-layout-col:nth-of-type(9) { z-index: 4; }
body.ui-admin-mode .layout-canvas .row-layout > .ui-layout-col:nth-of-type(10) { z-index: 3; }
body.ui-admin-mode .layout-canvas .row-layout > .ui-layout-col:nth-of-type(11) { z-index: 2; }
body.ui-admin-mode .layout-canvas .row-layout > .ui-layout-col:has(.ui-sortable-helper) { z-index: 20; }
/* Kolonnen med en åpen nedtrekksmeny (widgetknappene, Bootstrap .dropdown.open) over alt, også kolonnene i seksjonene
   under, som ellers ville dekket menyen. */
body.ui-admin-mode .layout-canvas .row-layout > .ui-layout-col:has(.dropdown.open) { z-index: 40; }