/* Versjon 7 — Gros bilder, 14.10.2026.
 * Kundens bekymring (Ingrid 12.10, punkt 9): tar bilder fokus fra budskapet? Derfor er bildene her
 * underordnet teksten: små, rolige, uten tekst oppå og uten egne overskrifter. Tre tilstander,
 * valgt i det røde banneret: Ingen (= versjon 6), A og B. Alle bildemål går gjennom tokens. */

.pic { display: none; margin: 0; }
html:not([data-bilder]) .pic--a,
html[data-bilder="a"] .pic--a,
html[data-bilder="b"] .pic--b { display: block; }
.pic img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: var(--r-card); }

/* A — lite bilde ved teksten. På tjenestesidene står det til høyre i toppfeltet, der det er luft,
   så sidehøyden ikke vokser. På forsiden står det over punktlista i «Hvem vi er». */
.page-hero__inner--pic { position: relative; }
.pic--hero { position: absolute; top: var(--sp-xl); right: var(--sp-lg); width: 12rem; aspect-ratio: 4 / 3; }
.pic--hero img { border: 1px solid var(--color-line-on-deep); }
html:not([data-bilder]) .page-hero__inner--pic > p,
html[data-bilder="a"] .page-hero__inner--pic > p { max-width: calc(100% - 14.5rem); }
.pic--side { width: 100%; max-width: 15rem; aspect-ratio: 4 / 3; margin-bottom: var(--sp-lg); }
.pic--side img { border: 1px solid var(--color-line-on-deep); }

/* C, D og E (bare forsiden). På undersidene viser de A, som er nærmeste variant. */
html[data-bilder="c"] .pic--c,
html[data-bilder="d"] .pic--d,
html[data-bilder="e"] .pic--e { display: block; }
html[data-bilder="c"] .pic--hero,
html[data-bilder="d"] .pic--hero,
html[data-bilder="e"] .pic--hero { display: block; }
html[data-bilder="c"] .page-hero__inner--pic > p,
html[data-bilder="d"] .page-hero__inner--pic > p,
html[data-bilder="e"] .page-hero__inner--pic > p { max-width: calc(100% - 14.5rem); }

/* C — bildet fyller det tomme feltet under «setning 2», ved siden av påslagsteksten. */
.pic--lede { grid-column: 2; grid-row: 2; align-self: stretch; min-height: 6rem; }
.pic--lede img { border: 1px solid var(--color-line-on-deep); }

/* D — et lavt bilde øverst i hver av de fire inngangene. Bildet er pynt, så alt er tom. */
.entry__pic { margin: calc(var(--sp-lg) * -1) calc(var(--sp-lg) * -1) var(--sp-sm); aspect-ratio: 16 / 7; overflow: hidden; border-radius: var(--r-card) var(--r-card) 0 0; }
.entry__pic img { border-radius: 0; }

/* E — dempet bilde bak «Hvem vi er». Teksten ligger over; bildet fades ut mot venstre. */
.texture > .pic--bg { position: absolute; inset: 0 0 0 auto; width: min(64%, 960px); z-index: 0; overflow: hidden; }
.pic--bg img { border-radius: 0; opacity: 0.14; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 55%); mask-image: linear-gradient(90deg, transparent 0%, #000 55%); }

/* F — versjon 8, bare forsiden (Ingrid 23.10): lammebildet dempet i heroen, kubildet som A ved «Hvem vi er».
   Litt sterkere enn E fordi heroen er mørkere og bildet er hovedstemningen. */
html[data-bilder="f"] .pic--f,
html[data-bilder="f"] .pic--a { display: block; }
.hero > .pic--bg-hero img { opacity: 0.3; } /* v10 (Ingrid 30.10): mer synlig stemningsbilde på forsiden */

/* B — smalt bildebånd. Ett bånd øverst i tekstkolonnen på tjenestesidene, tre små ruter under
   «Siste nytt» på forsiden. Hele båndet ligger i tekstkolonnens bredde. */
.pic--strip { aspect-ratio: 4 / 1; margin-bottom: var(--sp-lg); }
html[data-bilder="b"] .pic--tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-md); margin-top: var(--sp-xl); }
.pic--tiles img { aspect-ratio: 3 / 1; height: auto; }

@media (max-width: 1000px) {
  .pic--lede { grid-column: auto; grid-row: auto; aspect-ratio: 4 / 1; min-height: 0; }
  /* Én spalte: bildet over punktlista blir et lavt bånd i stedet for en høy rute. */
  .pic--side { max-width: none; aspect-ratio: 4 / 1; }
}
@media (max-width: 900px) {
  /* Smale flater: bildet i toppfeltet blir et lavt bånd over ingressen i stedet for å ligge ved siden av. */
  .pic--hero { position: static; width: 100%; aspect-ratio: 4 / 1; margin-bottom: var(--sp-md); }
  html:not([data-bilder]) .page-hero__inner--pic > p,
  html[data-bilder="a"] .page-hero__inner--pic > p { max-width: none; }
}
@media (max-width: 720px) {
  .texture > .pic--bg { width: 100%; }
  .entry__pic { aspect-ratio: 4 / 1; }
  .pic--strip { aspect-ratio: 3 / 1; }
  .pic--tiles img { aspect-ratio: 4 / 3; }
}

/* Valg av bildevariant i prototypebanneret */
.bildevalg { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.25rem 0.5rem; }
.bildevalg button {
  font: inherit;
  color: inherit;
  background: transparent;
  border: 1px solid currentColor;
  border-radius: 6px;
  padding: 0.25rem 0.625rem;
  cursor: pointer;
}
.bildevalg button[aria-pressed="true"] { background: #fff; color: var(--color-critical); font-weight: 700; }
.bildevalg button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* Bånd i bred kolonne (Kontakt): lavere, så det ikke vokser med bredden */
.wrap:not(.wrap--narrow) > .pic--strip { aspect-ratio: 6 / 1; }
@media (max-width: 720px) { .wrap:not(.wrap--narrow) > .pic--strip { aspect-ratio: 3 / 1; } }