/* ==========================================================================
   Innholds-CSS — ÉN sannhet for hvordan GBEditor-innhold ser ut.
   Lastes av BÅDE redigeringsflaten (.be-flate, injiseres av gb-editor.js)
   og publikumssonene (.omrade-innhold, lenket i _Layout). Endres en regel
   her, endres den begge steder — det er hele poenget: WYSIWYG holder bare
   når editoren og nettsiden leser samme stilark.
   Vokabularet speiler serverens sanitizer-hvitliste (InnholdsSanitizer).
   ========================================================================== */

.omrade-innhold a,
.be-flate a { color: var(--aksent); }
.omrade-innhold a:hover,
.be-flate a:hover { color: var(--aksent-hover); }

.omrade-innhold blockquote,
.be-flate blockquote {
    border-left: 3px solid var(--aksent);
    margin: 0 0 1em;
    padding: 0.2em 0 0.2em 1em;
    color: var(--tekst-dempet);
}

.omrade-innhold table,
.be-flate table { width: 100%; border-collapse: collapse; margin: 0 0 1em; }
.omrade-innhold th, .omrade-innhold td,
.be-flate th, .be-flate td {
    border: 1px solid var(--kant);
    padding: 0.5em 0.8em;
    text-align: left;
}
.omrade-innhold th,
.be-flate th { background: var(--flate-hev); }

.omrade-innhold hr,
.be-flate hr { border: 0; border-top: 1.5px solid var(--kant); margin: 1em 0; }

/* Figurer fra bildevelgeren (bilder fra mediebiblioteket).
   Størrelse/plassering = klassene under; margin/ramme/hjørner/padding =
   inline-stil satt i bildevelgeren — CSS-en skal aldri maskere admin-valget. */
.omrade-innhold figure,
.be-flate figure { margin: 0 0 1em; }
.omrade-innhold figure img,
.be-flate figure img {
    display: block;
    width: 100%;
    height: auto;
}
.omrade-innhold figcaption,
.be-flate figcaption {
    font-size: var(--storrelse-s);
    color: var(--tekst-dempet);
    margin-top: 0.45em;
}
.omrade-innhold .fig--75, .be-flate .fig--75 { width: 75%; }
.omrade-innhold .fig--50, .be-flate .fig--50 { width: 50%; }
.omrade-innhold .fig--33, .be-flate .fig--33 { width: 33%; }
.omrade-innhold .fig--midt, .be-flate .fig--midt { margin-left: auto; margin-right: auto; }
.omrade-innhold .fig--venstre, .be-flate .fig--venstre { float: left; margin: 0 22px 10px 0; }
.omrade-innhold .fig--hoyre, .be-flate .fig--hoyre { float: right; margin: 0 0 10px 22px; }

@media (max-width: 700px) {
    /* smal skjerm: brede nok bilder — flyt og delbredder gir frimerker */
    .omrade-innhold .fig--75, .omrade-innhold .fig--50, .omrade-innhold .fig--33,
    .be-flate .fig--75, .be-flate .fig--50, .be-flate .fig--33 { width: 100%; }
    .omrade-innhold .fig--venstre, .omrade-innhold .fig--hoyre,
    .be-flate .fig--venstre, .be-flate .fig--hoyre { float: none; margin: 0 0 1em; }
}

/* flytende figurer skal aldri lekke ut av innholdsflaten */
.omrade-innhold::after,
.be-flate::after { content: ""; display: table; clear: both; }
.omrade-innhold > :last-child,
.be-flate > :last-child { margin-bottom: 0; }

/* Trinnkort-blokken: <ul class="trinnrad"> med h3 + p i hvert punkt.
   Tallsirkelen tegnes av telleren — kort nummer fire nummererer seg selv. */
.omrade-innhold ul.trinnrad,
.be-flate ul.trinnrad {
    list-style: none;
    padding: 0;
    margin: 0 0 1em;
    counter-reset: trinn;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--rom-3);
}
.omrade-innhold ul.trinnrad > li,
.be-flate ul.trinnrad > li {
    background: var(--flate);
    border: 1px solid var(--kant);
    border-radius: var(--radius);
    padding: var(--rom-3);
    counter-increment: trinn;
}
.omrade-innhold ul.trinnrad > li::before,
.be-flate ul.trinnrad > li::before {
    content: counter(trinn);
    display: inline-grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--aksent);
    color: var(--aksent-kontrast);
    font-weight: 700;
}
.omrade-innhold ul.trinnrad > li > h3,
.be-flate ul.trinnrad > li > h3 {
    margin: 0.6em 0 0.3em;
    font-size: 1.05rem;
}
.omrade-innhold ul.trinnrad > li > p,
.be-flate ul.trinnrad > li > p {
    margin: 0;
    color: var(--tekst-dempet);
    font-size: var(--storrelse-s);
}

/* Spalter-blokken: <ul class="spalter"> — innhold side om side, uten pynt.
   Kolonnene stables av seg selv på smal skjerm. */
.omrade-innhold ul.spalter,
.be-flate ul.spalter {
    list-style: none;
    padding: 0;
    margin: 0 0 1em;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--rom-3);
}
.omrade-innhold ul.spalter > li,
.be-flate ul.spalter > li { min-width: 0; }

/* Faktisk størrelse: bildet vises piksel for piksel — ALDRI oppskalert.
   For små bilder (ikoner, tallsirkler); krymper likevel på skjermer
   smalere enn bildet. */
.omrade-innhold .fig--naturlig, .be-flate .fig--naturlig { width: fit-content; }
.omrade-innhold .fig--naturlig img,
.be-flate .fig--naturlig img { width: auto; max-width: 100%; }