/* layout.css — containere og struktur */

.ramme {
  width: 100%;
  max-width: var(--bredde-maks);
  margin-inline: auto;
  padding-inline: var(--side-luft);
}

/* Seksjon: rolig vertikal luft. Faste viewport-hoyder slippes paa mobil. */
.seksjon {
  padding-block: var(--rom-7);
}

.seksjon-tett {
  padding-block: var(--rom-6);
}

/* Moerke seksjoner (redaksjonelle flater) */
.seksjon-mork {
  background-color: var(--signatur-dyp);
  color: var(--tekst-lys);
}

.seksjon-oliven {
  background-color: var(--signatur);
  color: var(--tekst-lys);
}

.seksjon-flate {
  background-color: var(--flate);
}

/* Rutenett */
.rad {
  display: grid;
  gap: var(--rom-3);
}

.rad-2 {
  grid-template-columns: 1fr;
}

.rad-3 {
  grid-template-columns: 1fr;
}

.rad-4 {
  grid-template-columns: 1fr 1fr;
}

.midtstilt {
  text-align: center;
}

.smal {
  max-width: 60ch;
}

.smal-midt {
  max-width: 62ch;
  margin-inline: auto;
}

/* Delt seksjon: tekst + bilde */
.delt {
  display: grid;
  gap: var(--rom-4);
  align-items: center;
  grid-template-columns: 1fr;
}

/* --- Desktop --- */
@media (min-width: 720px) {
  :root {
    --side-luft: var(--rom-4);
  }

  .rad-2 {
    grid-template-columns: 1fr 1fr;
  }

  .rad-3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .rad-4 {
    grid-template-columns: repeat(4, 1fr);
  }

  .delt {
    grid-template-columns: 1fr 1fr;
    gap: var(--rom-6);
  }

  .delt-omvendt .delt-tekst {
    order: 2;
  }
}

/* Mobil: seksjoner fyller minst én skjerm under menyen, sentrert; vokser ved behov */
@media (max-width: 999px) {
  body.hjem .seksjon,
  body.om-oss .seksjon,
  .seksjon-fullhoyde {
    min-height: calc(100svh - var(--header-h));
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  body.hjem .halv-seksjon,
  body.om-oss .halv-seksjon {
    min-height: calc(100svh - var(--header-h));
  }

  body.hjem .seksjon.auto-hoyde,
  body.om-oss .seksjon.auto-hoyde,
  body.hjem .halv-seksjon.auto-hoyde,
  body.om-oss .halv-seksjon.auto-hoyde {
    min-height: 0;
    display: block;
  }
}

@media (min-width: 1000px) {
  .seksjon {
    padding-block: var(--rom-8);
  }

  /* Enkeltseksjoner som skal fylle synlig flate under sticky meny */
  .seksjon-fullhoyde {
    height: calc(100svh - var(--header-h));
    padding-block: var(--rom-5);
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
  }

  /* Kontakt: innholdet starter oppe til venstre, ikke vertikalt midtstilt */
  body.kontakt .seksjon-fullhoyde {
    justify-content: flex-start;
    padding-block: var(--rom-7) var(--rom-5);
  }

  /* Forsiden og Om oss: seksjoner uten .auto-hoyde fyller synlig flate under sticky meny */
  body.hjem .seksjon,
  body.om-oss .seksjon {
    height: calc(100svh - var(--header-h));
    padding-block: var(--rom-5);
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
  }

  body.hjem .halv-seksjon,
  body.om-oss .halv-seksjon {
    height: calc(100svh - var(--header-h));
    overflow: hidden;
  }

  body.hjem .halv-seksjon.auto-hoyde,
  body.om-oss .halv-seksjon.auto-hoyde {
    height: auto;
    overflow: visible;
  }

  body.hjem .seksjon.auto-hoyde,
  body.om-oss .seksjon.auto-hoyde {
    height: auto;
    display: block;
    overflow: visible;
    padding-block: var(--rom-8);
  }

  /* Tak paa store skjermer: fullhoyde-seksjoner vokser aldri forbi 60rem */
  body.hjem .seksjon,
  body.om-oss .seksjon,
  body.hjem .halv-seksjon,
  body.om-oss .halv-seksjon,
  .seksjon-fullhoyde {
    max-height: 60rem;
  }

  body.hjem .seksjon.auto-hoyde,
  body.om-oss .seksjon.auto-hoyde,
  body.hjem .halv-seksjon.auto-hoyde,
  body.om-oss .halv-seksjon.auto-hoyde {
    max-height: none;
  }
}