/* === Global layout (sticky footer) === */
html, body{ height: 100%; 
overflow-x: hidden;
}

body.theme{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.site-main{
  background: #fff;
  position: relative;
  z-index: 1;
}
.site-footer{
  margin-top: auto;
  padding: 24px 16px 32px;
  font-size: 13px;
  background: #000;
  color: #fff;
}

.site-footer .footer-inner{
  max-width: var(--container, 1200px);
  margin: 0 auto;
}

.site-footer a{
  color: inherit;
  text-decoration: none;
}

.site-footer a:hover{
  text-decoration: underline;
}


:root{
  --black:#000; --white:#fff; --gray40:#666; --container:1200px; --header-h:56px;
  --hero-url: none;
}
*{box-sizing:border-box;}
html, body{margin:0;padding:0;height:100%;scroll-behavior:smooth;}
body.theme{font-family:Helvetica, Arial, sans-serif;color:var(--black);background:var(--white);line-height:1.4;}

/* ================================
   GLOBAL HEADER
   ================================ */

.site-header{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: #fff;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}

/* Indre wrapper matcher sidens bredde */
.header-inner{
  max-width: var(--container);
  margin: 0 auto;
  padding: 10px 16px;

  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo img{
  height: 28px;
  width: auto;
  display: block;
}

.nav{
  display: flex;
  gap: 24px;
}

.nav-link{
  text-decoration: none;
  color: #000;
  font-size: 15px;
}
@media (max-width: 700px){
  .header-inner{
    padding: 10px 12px;
  }

  .nav{
    gap: 12px;
  }
}


/* Sticky stack + z-layers */
.scroll-sections{position:relative; z-index:0;}
.sticky-section{position:relative;height:auto;display:block;}
.hero{
  position: sticky;
  top: 0;
  height: 100vh;
  z-index: 1;
  overflow: hidden;     /* viktig */
}

.hero::before,
.hero::after{
  content:"";
  position: absolute;   /* <- bytt */
  inset: 0;             /* nå innenfor hero */
  z-index: -1;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: opacity 250ms ease-in-out;
}

/* ::before bruker --hero-url-a, ::after bruker --hero-url-b */
.hero::after {
  background-image: var(--hero-url-b);
}

/* Hvilket lag som er synlig */
.hero.hero-show-a::before {
  opacity: 1;
}

.hero.hero-show-b::after {
  opacity: 1;
}

.sek1{z-index:2;background-color:#fff;}
.sek1 {
  padding-top: 4rem;   /* mer luft – juster tallet fritt */
}

.sek2{z-index:3;background-color:#fff;
 padding: 40px 0;   /* luft over og under ALT innholdet */ 
}
.sek3{z-index:4;background-color:#fff;
padding: 40px 0;   /* luft over og under ALT innholdet */}

.video-wrapper {
  margin: 0;          /* fjerner 40px margin på venstre/høyre */
  width: 100%;
}

.standard-width video {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 0; /* Hvis du vil ha hjørner */
}

.sek3 .text-col {
  max-width: none;      /* lar teksten følge container-bredden */
  margin: 40px 40;     /* fjern auto-centering */
  padding: 0;           /* hvis noe eksisterte fra før */
}
/* Fjern maks-bredde på paragrafene i denne seksjonen */
.sek3 .text-col p {
  max-width: none;
}

.sek4{z-index:5;background-color:#fff;}

/* Two-column */
.container{width:min(var(--container),92%);margin:0 auto;}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;padding-bottom:80px;}
.text-col p{max-width:56ch;}
.image-col img{width:100%;height:auto;max-height:80vh;object-fit:cover;}

c

/* =========================
   OM-SIDE (egen layout)
   ========================= */
.page-om .om-section .container{
  max-width: var(--container, 1200px);
  margin: 0 auto;
  padding-left: 16px;
  padding-right: 16px;
  box-sizing: border-box;
}

.page-om{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Innholdet tar tilgjengelig høyde */
.page-om .om-section{
  flex: 1 0 auto;
  padding-top: 4rem;
}


/* Desktop: pen størrelse, ikke prøv å løse footer her */
.page-om .om-section .image-col img{
  max-height: 70vh;
  width: 100%;
  height: auto;
  object-fit: cover;   /* cover ser ofte bedre ut på om-bilde */
  display: block;
}
@media (max-width: 700px){
  .om-section .two-col{
    display: flex;
    flex-direction: column;
    gap: 24px;
	  margin-bottom: 32;
  }

  .om-section .image-col{
    order: 1;
  }

  .om-section .text-col{
    order: 2;
  }

  .om-section .image-col img{
    width: 100%;
    height: auto;
    max-height: 70vh;
    object-fit: contain;
  }
}


/* Sticky Kontakt one sheet */
.contact-sticky{
  z-index:6;
  height:100vh;
  background:#f9f9f9;
  display:flex;flex-direction:column;justify-content:space-between;align-items:center;
  padding:0;
}
.contact-wrapper{width:100%;height:100%;display:flex;flex-direction:column;justify-content:space-between;}
.contact-card{
  width:min(600px,92%);margin:80px auto 0 auto;background:#fff;border:1px solid #eee;border-radius:12px;
  padding:32px;box-shadow:0 4px 20px rgba(0,0,0,0.05);
}
.contact-card h2{text-align:center;margin-bottom:24px;}
.contact-card label{display:block;margin-bottom:6px;font-weight:700;}
.contact-card input,.contact-card textarea{width:100%;padding:12px;margin-bottom:16px;border:1px solid #ccc;border-radius:6px;font-family:Helvetica,Arial,sans-serif;}
.contact-card button{display:block;width:100%;background:#000;color:#fff;border:0;border-radius:6px;padding:12px;cursor:pointer;font-weight:700;}
.contact-card button:hover{background:#333;}
.contact-info{text-align:center;margin-top:12px;}
.contact-info a{text-decoration:none;color:#000;}


/* Håndskrift-overskrifter som bilde */
.h-handwritten {
  display: block;
  max-width: 360px;     /* Endre størrelsen her */
  width: 100%;          /* Holder proporsjoner */
  margin: 0 0 30px;  /* Plasserer midtstilt + luft under */
  height: auto;
}
/* Tablet */
@media (max-width: 1024px) {
  .h-handwritten {
    max-width: 240px;   /* litt mindre */
    margin-bottom: 25px;
  }
}

/* Mobil */
@media (max-width: 600px) {
  .h-handwritten {
    max-width: 180px;   /* mye mindre */
    margin-bottom: 18px;
  }
}


/* Lightbox */
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,0.92);display:flex;align-items:center;justify-content:center;z-index:9999;}
.lightbox.hidden{display:none;}
.lightbox-inner{max-width:92vw;max-height:88vh;display:flex;flex-direction:column;gap:10px;align-items:center;}
.lightbox-img{max-width:92vw;max-height:80vh;object-fit:contain;}
.lightbox-cap{color:#fff;font-size:14px;opacity:0.8;}
.lightbox-next,.lightbox-prev,.lightbox-close{
  position:fixed;top:50%;transform:translateY(-50%);background:transparent;border:0;color:#fff;
  font-size:42px;cursor:pointer;line-height:1;padding:8px 14px;
}
.lightbox-next{right:20px;}
.lightbox-prev{left:20px;}
.lightbox-close{top:20px;right:20px;transform:none;font-size:32px;}

/* Responsive */
@media (max-width:700px){
  .two-col{grid-template-columns:1fr;gap:20px;}
  .carousel{height:52vh;}
  .grid-4{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:700px){
 /* .grid-4{grid-template-columns:1fr;}*/
  .carousel{height:46vh;}
}
/* MOBILOPPSETT FOR SEK1–SEK4 */
@media (max-width: 700px) {

  /* Stack kolonner og gi luft på sidene */
  .sek1 .container.two-col,
  .sek2 .container.two-col,
  .sek3 .container.two-col,
  .sek4 .container.two-col {
    display: flex;
    flex-direction: column;
    padding-left: 24px;
    padding-right: 24px;
  }

  /* Bildesiden (karusell) sentreres innenfor seksjonen */
  .sek1 .image-col,
  .sek2 .image-col,
  .sek3 .image-col,
  .sek4 .image-col {
    width: 100%;
    display: flex;
    justify-content: center;
  }

  /* Karusell-/bildebredden på mobil */
  .sek1 .carousel,
  .sek2 .carousel,
  .sek3 .carousel,
  .sek4 .carousel {
    width: 100%;
    max-width: 420px;      /* juster bredde her for alle seksjoner */
    margin-left: auto;
    margin-right: auto;
  }

  /* Tekstkolonnen matcher bredden til bildet */
  .sek1 .text-col,
  .sek2 .text-col,
  .sek3 .text-col,
  .sek4 .text-col {
    width: 100%;
    max-width: 420px;      /* samme som .carousel */
    margin: 24px auto 0 auto;
    text-align: left;
  }

  .sek1 .text-col p,
  .sek2 .text-col p,
  .sek3 .text-col p,
  .sek4 .text-col p {
    margin-top: 0;
  }

  /* Håndskrift-overskrifter inni tekstkolonnene */
  .sek1 .h-handwritten,
  .sek2 .h-handwritten,
  .sek3 .h-handwritten,
  .sek4 .h-handwritten {
    display: block;
    max-width: 260px;      /* juster hvis de føles store på mobil */
    height: auto;
    margin-bottom: 12px;
  }
}
/* Tving alltid bilde over tekst på mobil */
@media (max-width: 700px) {

  .sek1 .image-col,
  .sek2 .image-col,
  .sek3 .image-col,
  .sek4 .image-col {
    order: 0;
  }

  .sek1 .text-col,
  .sek2 .text-col,
  .sek3 .text-col,
  .sek4 .text-col {
    order: 1;
  }
}
/* Prosjekt-kategorier – konsistent forhold */
.prosjekt-kategori-cover {
  width: 100%;
  aspect-ratio: 4.5 / 1;   /* samme ratio som 1200x300 */
  height: auto;
  overflow: hidden;
  border: none;
  padding: 0;
  margin: 0;
  background: none;
  cursor: pointer;
}

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


/* ================================
   GLOBAL PROSJEKT-SPACING
   ================================ */

:root{
  /* Header */
  --header-h: 64px;

  /* Padding */
  --proj-pad-desktop: 16px;
  --proj-pad-mobile: 8px;

  /* Vertikal spacing */
  --proj-top-desktop: 32px;
  --proj-top-mobile: 16px;
  --proj-gap-desktop: 32px;
  --proj-gap-mobile: 16px;
  --proj-bottom: 96px;
}

/* Kategori-side (prosjekter.html) */
/* prosjekter.html */
.proj{
  padding-top: calc(var(--header-h) + var(--proj-top-desktop));
  padding-left: var(--proj-pad-desktop);
  padding-right: var(--proj-pad-desktop);
  padding-bottom: var(--proj-bottom);
}

@media (max-width: 700px){
  .proj{
    padding-top: calc(var(--header-h) + var(--proj-top-mobile));
    padding-left: var(--proj-pad-mobile);
    padding-right: var(--proj-pad-mobile);
  }
}


/* Wrapper styrer stack + mellomrom */
.prosjekt-kategorier-wrapper{
  display: flex;
  flex-direction: column;
  gap: var(--proj-gap-desktop);
}

@media (max-width: 700px){
  .prosjekt-kategorier-wrapper{
    gap: var(--proj-gap-mobile);
  }
}



/* Prosjekt-side (prosjekt.html) */
.proj-detail{
  padding-top: calc(var(--header-h) + var(--proj-top-desktop));
  padding-bottom: var(--proj-bottom);
}

.proj-detail section.cat-project{
  margin-bottom: var(--proj-gap);
}

/* Mobil */
@media (max-width: 700px){
  .proj{
    padding-left: var(--proj-pad-mobile);
    padding-right: var(--proj-pad-mobile);
  }

  .proj-detail{
    padding-top: calc(var(--header-h) + var(--proj-top-mobile));
  }
}

/* Samme “ytterramme” for hele index */
.site-main .container{
  max-width: var(--container, 1200px);
  margin: 0 auto;
  padding-left: 16px;
  padding-right: 16px;
  box-sizing: border-box;
}

/* To-kolonne layout: ingen skjult padding på kolonner */
.two-col{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;              /* juster */
}

.two-col > *{
  padding: 0 !important;  /* fjerner “mystisk” padding på kolonnene */
  margin: 0;
  box-sizing: border-box;
}

/* Bildet skal ikke legge til egen “luft” */
.image-col img{
  display: block;
  width: 100%;
  height: auto;
}
/* Index: carousel override (må ligge nederst) */
.site-main .carousel{
  position: relative;
  width: 100%;
  height: 80vh;
  max-height: 800px;
  overflow: hidden;
  background: #fff;
}

.site-main .carousel > img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none !important;
}

.site-main .carousel > img.is-active{
  display: block !important;
}
@media (max-width: 700px){
  #projPage{
    grid-template-columns: 1fr;
    gap: 48px;
  }
}
.thumb-strip{
  max-width: 100%;
  overflow-x: auto;
}

.thumb{
  flex: 0 0 auto;
}
@media (max-width: 700px){
  .page-prosjekt{ overflow-x: visible; }
}
@media (max-width: 700px){
  *{ outline: none; }
  img, video, svg, canvas{ max-width: 100%; height: auto; }
}