/* ============================================
   Kabal Design AS — layout.css
   Én fast bredde, viewport-seksjoner, Forhave-formen:
   midtstilt akse, kapitler i farge, bilderekker.
   Mobil først.
   ============================================ */

/* ---------- Container ---------- */
.container {
  width: 100%;
  max-width: var(--bredde-side);
  margin-inline: auto;
  padding-inline: var(--rom-3);
}

/* ---------- Seksjoner ---------- */
.seksjon {
  padding-block: var(--rom-8);
}

/* Fullhøyde på desktop, alltid samme definisjon */
@media (min-width: 768px) {
  .seksjon {
    height: calc(100svh - var(--header-h));
    max-height: var(--seksjon-maks-h);
    box-sizing: border-box;
    padding-block: var(--rom-8);
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
  }

  .seksjon.auto-hoyde {
    height: auto;
    max-height: none;
    overflow: visible;
  }
}

@media (max-width: 767px) {
  .seksjon {
    min-height: calc(100svh - var(--header-h));
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .seksjon.auto-hoyde {
    min-height: 0;
    display: block;
  }
}

/* ---------- Kapittelflater ---------- */
.kapittel-mork {
  background: var(--bg-kapittel-mork);
}

.kapittel-dempet {
  background: var(--bg-kapittel-dempet);
}

.kapittel-te {
  background: var(--bg-kort);
}

.kapittel-papir-dyp {
  background: var(--papir-dyp);
}

/* ---------- Forhave: midtstilt innhold ---------- */
.midtstilt {
  text-align: center;
}

.midtstilt .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--rom-3);
}

/* Smal tekstblokk for utsagn og manifest */
.tekstblokk-smal {
  width: 100%;
  max-width: 40rem;
  margin-inline: auto;
}

@media (min-width: 768px) {
  .tekstblokk-smal {
    max-width: var(--bredde-tekst);
  }
}

/* ---------- Bilderekker (grid, aldri kolonner) ---------- */
.bilderekke {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--rom-2);
  width: 100%;
}

@media (min-width: 768px) {
  .bilderekke {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--rom-3);
  }

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

.bilderekke-celle {
  height: 11.25rem;
  overflow: hidden;
  border-radius: var(--radius);
}

.bilderekke-celle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (min-width: 768px) {
  .bilderekke-celle {
    height: min(32svh, 24rem);
  }
}

/* ---------- Stort midtstilt bilde ---------- */
.bilde-stort {
  width: 100%;
  height: 16.25rem;
  overflow: hidden;
  border-radius: var(--radius);
}

.bilde-stort img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (min-width: 768px) {
  .bilde-stort {
    height: min(50svh, 42rem);
  }
}

/* ---------- Halvt tekst / halvt bilde ---------- */
.halvdeling {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--rom-4);
  align-items: center;
}

@media (min-width: 768px) {
  .halvdeling {
    grid-template-columns: 1fr 1fr;
    gap: var(--rom-8);
  }

  .halvdeling.bilde-forst .halvdeling-bilde {
    order: -1;
  }
}

.halvdeling-bilde {
  height: 15rem;
  width: 100%;
  overflow: hidden;
  border-radius: var(--radius);
}

.halvdeling-bilde img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Produktbilder i halvdeling: aldri beskåret, følger bildets eget format */
.halvdeling-bilde-produkt {
  width: fit-content;
  max-width: 100%;
  justify-self: center;
}

.halvdeling-bilde-produkt img {
  height: 100%;
  width: auto;
  object-fit: contain;
}

@media (min-width: 768px) {
  .halvdeling-bilde {
    height: min(55svh, 46rem);
  }
}

/* ---------- Avstandsklasser ---------- */
.rom-over-2 { margin-top: var(--rom-2); }
.rom-over-3 { margin-top: var(--rom-3); }
.rom-over-4 { margin-top: var(--rom-4); }
.rom-over-6 { margin-top: var(--rom-6); }