/* ============================================================
   innhold.css — public visning av GBEditor-innhold (CMS-sider).
   Speiler editorens blokkspråk (p, h2–h4, lister, datatabeller,
   blockquote, hr, justering) i nettstedets typografi (base.css-tokens).
   Full innholdsbredde — ingen smal lesespalte.
   ============================================================ */

.innhold {
  font-family: var(--font-body);
  color: var(--ink-700);
  font-size: 1.02rem;
  line-height: 1.7;
}

/* Innholdssoner (Områder-modulen). BJØRNS REGEL: sonen bidrar selv med maks
   ~10px luft over/under — vil eieren ha mer, lages det i editoren. Naboenes
   egenluft kanselleres derfor EKSAKT per plassering (verdiene speiler
   .section clamp(56,8vw,104) / .section--tight clamp(40,5vw,64) / .footer 64). */
.omrade-sone { padding-block: 0; }
.omrade-sone--forside-over-nyheter {
  margin-top: 10px; /* hurtigvalgene har ingen egen bunnluft */
  margin-bottom: calc(10px - clamp(56px, 8vw, 104px));
}
.omrade-sone--forside-under-nyheter {
  margin-top: calc(10px - clamp(56px, 8vw, 104px));
  margin-bottom: calc(10px - clamp(56px, 8vw, 104px));
}
.omrade-sone--forside-bunn {
  margin-top: calc(10px - clamp(40px, 5vw, 64px));
  /* 10px til footerens KANT — negativ verdi her trakk footerflaten opp over bildeteksten */
  margin-bottom: 10px;
}

/* Innholdssider (CMS-sider og modelldetaljer): strammere luft mellom
   sidehodet (H1/undertittel) og eierens innhold enn designseksjonenes
   flush-top (Bjørns tilbakemelding: 28–40px var for mye her) */
.section--innhold { padding-top: 14px; }

.innhold p { margin: 0 0 1em; }

.innhold h2,
.innhold h3,
.innhold h4 {
  font-family: var(--font-head);
  color: var(--ink-900);
  line-height: 1.25;
  margin: 1.6em 0 .5em;
}
.innhold h2 { font-size: clamp(1.35rem, 2.6vw, 1.7rem); }
.innhold h3 { font-size: clamp(1.15rem, 2.2vw, 1.35rem); }
.innhold h4 { font-size: 1.05rem; }
.innhold > h2:first-child,
.innhold > h3:first-child,
.innhold > h4:first-child { margin-top: 0; }

.innhold a {
  color: var(--red-600);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.innhold a:hover { color: var(--red-700); }

.innhold ul,
.innhold ol { margin: 0 0 1em; padding-left: 1.7em; }
.innhold li { margin-bottom: .35em; }

.innhold blockquote {
  margin: 0 0 1em;
  padding: .5em 0 .5em 18px;
  border-left: 3px solid var(--red-600);
  color: var(--ink-500);
  font-style: italic;
}

.innhold hr {
  border: 0;
  border-top: 1.5px solid var(--line);
  margin: 1.6em 0;
}

/* Datatabeller (limt fra Excel/Word i editoren): rene linjer, sebrastriper,
   vannrett rull i egen boks på smale skjermer — siden ruller aldri sideveis */
.innhold table {
  border-collapse: collapse;
  margin: 0 0 1em;
  font-size: .95rem;
  display: block;
  overflow-x: auto;
  max-width: 100%;
}
.innhold th,
.innhold td {
  border: 1px solid var(--line);
  padding: .5em .8em;
  text-align: left;
  white-space: nowrap;
}
.innhold th { background: var(--surface); font-weight: 600; color: var(--ink-900); }
.innhold tbody tr:nth-child(even) { background: var(--surface); }

/* Figurer fra bildevelgeren (bilder fra mediebiblioteket) */
.innhold figure { margin: 0 0 1em; }
.innhold figure img {
  display: block;
  width: 100%;
  height: auto;
  /* INGEN border-radius her: hjørnene styres av bildevelgeren (inline style) —
     en CSS-standard ville maskert admin-valget (admin-styrbare-attributter) */
}
.innhold figcaption {
  font-size: .88rem;
  color: var(--ink-500);
  margin-top: .45em;
}
.innhold .fig--75 { width: 75%; }
.innhold .fig--50 { width: 50%; }
.innhold .fig--33 { width: 33%; }
.innhold .fig--midt { margin-left: auto; margin-right: auto; }
.innhold .fig--venstre { float: left; margin: 0 22px 10px 0; }
.innhold .fig--hoyre { float: right; margin: 0 0 10px 22px; }
@media (max-width: 700px) {
  /* smal skjerm: brede nok bilder — flyt og delbredder gir frimerker */
  .innhold .fig--75, .innhold .fig--50, .innhold .fig--33 { width: 100%; }
  .innhold .fig--venstre, .innhold .fig--hoyre { float: none; margin: 0 0 1em; }
}
/* flytende figurer skal aldri lekke ut av innholdsflaten */
.innhold::after { content: ""; display: table; clear: both; }

.innhold > :last-child { margin-bottom: 0; }