@charset "UTF-8";

/* =========================================================
   OM OSS
   /administrasjon/om-oss.html

   Side-CSS. Bygger videre på ../css-nyside/styles.css
   ========================================================= */


/* =========================================================
   HERO – BILDEMOSAIKK
   ========================================================= */

.hero{
  position:relative;
  height:clamp(360px, 38vw, 470px);
  overflow:hidden;
  background:var(--brand2);
}


/* =========================
   MOSAIKK
   ========================= */

.hero-grid{
  position:absolute;
  inset:0;

  display:grid;
  grid-template-columns:1.2fr 1fr 1.15fr .9fr;
  grid-template-rows:1fr 1fr;

  gap:4px;
  background:#fff;
}


/* Fredsparken – stort hovedbilde */

.hero-a{
  grid-column:1 / 3;
  grid-row:1 / 3;
}


/* Tidsvitner – øverst */

.hero-b{
  grid-column:3 / 4;
  grid-row:1 / 2;
}


/* Fredshuset – høyre */

.hero-c{
  grid-column:4 / 5;
  grid-row:1 / 3;
}


/* Kontor / mennesker – nederst */

.hero-d{
  grid-column:3 / 4;
  grid-row:2 / 3;
}


/* =========================
   BILDER
   ========================= */

.hero-tile{
  margin:0;
  min-width:0;
  min-height:0;
  overflow:hidden;
}

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


/* =========================
   MØRK LEGGING

   Mest mørke over venstre del der teksten ligger.
   Nederst får vi litt ekstra kontrast til ingressen.
   ========================= */

.hero-shade{
  position:absolute;
  inset:0;
  z-index:1;

  background:
    linear-gradient(
      90deg,
      rgba(0,31,70,.32) 0%,
      rgba(0,31,70,.20) 28%,
      rgba(0,31,70,.07) 53%,
      rgba(0,31,70,0) 76%
    ),
    linear-gradient(
      0deg,
      rgba(0,20,45,.48) 0%,
      rgba(0,20,45,.20) 32%,
      rgba(0,20,45,0) 62%
    );

  pointer-events:none;
}


/* =========================================================
   HERO – INNHOLD
   ========================================================= */

/* Samme innholdsbredde som resten av siden */

.newsShell{
  width:min(var(--max), calc(100% - 32px));
  margin-inline:auto;
}


/*
   Viktig:
   Brødsmulene skal ligge øverst.
   Eyebrow + H1 + ingress skal ligge nederst.

   Derfor bruker vi margin-top:auto på eyebrow,
   i stedet for justify-content:flex-end på hele innholdet.
*/

.hero-copy{
  position:relative;
  z-index:2;

  height:100%;

  display:flex;
  flex-direction:column;

  padding-top:36px;
  padding-bottom:38px;

  color:#fff;
}


/* =========================
   BRØDSMULER
   ========================= */

.breadcrumb{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;

  margin:0;

  color:rgba(255,255,255,.76);

  font-size:13px;
  line-height:1.4;
}

.breadcrumb a{
  color:rgba(255,255,255,.88);
  text-decoration:none;
}

.breadcrumb a:hover{
  color:#fff;
  text-decoration:underline;
  text-underline-offset:3px;
}

.breadcrumb span[aria-hidden="true"]{
  color:rgba(255,255,255,.48);
}


/* =========================
   OVERLINJE
   ========================= */

.hero-copy .eyebrow{
  margin-top:auto;
  margin-bottom:8px;

  color:rgba(255,255,255,.90);

  font-size:12px;
  line-height:1.4;
  font-weight:600;

  letter-spacing:.08em;
  text-transform:uppercase;
}


/* =========================
   H1
   ========================= */

.hero-copy h1{
  margin:0 0 10px;

  color:#fff;

  font-size:clamp(36px, 4.5vw, 52px);
  line-height:1.06;

  font-weight:600;
  letter-spacing:-.6px;
}


/* =========================
   INGRESS / BUDSKAP
   ========================= */

.hero-copy > p:last-child{
  margin:0;

  max-width:650px;

  color:rgba(255,255,255,.96);

  font-size:17px;
  line-height:1.55;

  text-shadow:0 1px 8px rgba(0,0,0,.18);
}


/* =========================================================
   HOVEDINNHOLD
   ========================================================= */

.omoss-content{
  padding:28px 0 12px;
}


/* =========================================================
   DE TRE HOVEDKORTENE
   ========================================================= */

.omoss-grid,
.omoss-grid--simple{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:18px;
  align-items:stretch;
}


/* =========================
   KORT
   ========================= */

.omoss-card{
  display:flex;
  flex-direction:column;

  min-width:0;

  background:#fff;

  border:1px solid rgba(15,31,51,.11);
  border-radius:8px;

  overflow:hidden;

  transition:
    box-shadow .2s ease,
    transform .2s ease;
}

.omoss-card:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 26px rgba(10,25,45,.08);
}


/* =========================
   KORTBILDE
   ========================= */

.omoss-card__media{
  aspect-ratio:16 / 8.5;
  overflow:hidden;
  background:#e8ecef;
}

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


/* =========================
   KORTINNHOLD
   ========================= */

.omoss-card__body{
  display:flex;
  flex-direction:column;
  flex:1;

  padding:17px 18px 18px;
}

.omoss-card h2{
  margin:0 0 7px;

  color:var(--navy);

  font-size:18px;
  line-height:1.25;
  font-weight:600;

  letter-spacing:-.2px;
}

.omoss-card__intro{
  margin:0 0 15px;

  color:var(--muted);

  font-size:13.5px;
  line-height:1.55;
}


/* =========================================================
   VANLIGE LENKER I KORT
   ========================================================= */

.omoss-linklist{
  border-top:1px solid var(--line);
}

.omoss-linklist a{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:10px;
  align-items:center;

  padding:10px 1px;

  border-bottom:1px solid var(--line);

  color:var(--navy);

  font-size:13.5px;
  line-height:1.35;
  font-weight:550;

  transition:
    color .18s ease,
    padding-left .18s ease;
}

.omoss-linklist a:hover{
  color:var(--brand2);
  padding-left:5px;
}

.omoss-linklist a span:last-child{
  color:var(--navy);
  font-size:18px;
  line-height:1;
}


.omoss-card__more{
  display:inline-flex;
  align-items:center;
  gap:8px;

  margin-top:auto;
  padding-top:18px;

  color:var(--navy);

  font-size:13px;
  font-weight:600;
}

.omoss-card__more:hover{
  color:var(--brand2);
}


/* =========================================================
   ACCORDION – OM AKTIVE FREDSREISER
   ========================================================= */

.omoss-accordion{
  border-top:1px solid var(--line);
}

.omoss-accordion__item{
  border-bottom:1px solid var(--line);
}


/* =========================
   ACCORDION – OVERSKRIFT
   ========================= */

.omoss-accordion__item summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;

  padding:12px 2px;

  color:var(--navy);

  font-size:13.5px;
  line-height:1.4;
  font-weight:600;

  cursor:pointer;
  list-style:none;
}

.omoss-accordion__item summary::-webkit-details-marker{
  display:none;
}

.omoss-accordion__item summary:hover{
  color:var(--brand2);
}


/* =========================
   PLUSS / MINUS
   ========================= */

.omoss-accordion__icon{
  position:relative;

  flex:0 0 16px;

  width:16px;
  height:16px;
}

.omoss-accordion__icon::before,
.omoss-accordion__icon::after{
  content:"";

  position:absolute;
  top:50%;
  left:50%;

  width:12px;
  height:1.5px;

  background:var(--navy);

  transform:translate(-50%,-50%);
}

.omoss-accordion__icon::after{
  transform:
    translate(-50%,-50%)
    rotate(90deg);

  transition:transform .2s ease;
}

.omoss-accordion__item[open]
.omoss-accordion__icon::after{
  transform:
    translate(-50%,-50%)
    rotate(0deg);
}


/* =========================
   ACCORDION – LENKER
   ========================= */

.omoss-accordion__content{
  display:flex;
  flex-direction:column;

  padding:0 0 10px 12px;
}

.omoss-accordion__content a{
  position:relative;

  padding:7px 12px;

  color:var(--navy);

  font-size:13px;
  line-height:1.4;
}

.omoss-accordion__content a::before{
  content:"";

  position:absolute;
  left:0;
  top:14px;

  width:4px;
  height:4px;

  border-radius:50%;

  background:var(--navy);
}

.omoss-accordion__content a:hover{
  color:var(--brand2);
}


/* =========================================================
   NEDERSTE SNARVEIER
   ========================================================= */

.omoss-bottomlinks{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));

  margin-top:18px;

  overflow:hidden;

  background:#eef4f8;

  border:1px solid rgba(0,43,95,.08);
  border-radius:8px;
}

.omoss-bottomlink{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;

  padding:16px 18px;
}

.omoss-bottomlink + .omoss-bottomlink{
  border-left:1px solid rgba(0,43,95,.10);
}

.omoss-bottomlink div{
  display:flex;
  flex-direction:column;
  gap:2px;
}

.omoss-bottomlink strong{
  color:var(--navy);

  font-size:13.5px;
  font-weight:650;
}

.omoss-bottomlink div span{
  color:var(--muted);

  font-size:12.5px;
  line-height:1.45;
}

.omoss-bottomlink__arrow{
  color:var(--navy);

  font-size:18px;

  transition:transform .18s ease;
}

.omoss-bottomlink:hover .omoss-bottomlink__arrow{
  transform:translateX(4px);
}


/* =========================================================
   NETTBRETT
   ========================================================= */

@media (max-width:900px){

  /*
     HERO
     Beholder fire bilder, men gjør hovedbildet
     litt mer dominerende.
  */

  .hero{
    height:400px;
  }

  .hero-grid{
    grid-template-columns:1.25fr 1fr 1fr;
    grid-template-rows:1fr 1fr;
  }

  .hero-a{
    grid-column:1 / 2;
    grid-row:1 / 3;
  }

  .hero-b{
    grid-column:2 / 3;
    grid-row:1 / 2;
  }

  .hero-c{
    grid-column:3 / 4;
    grid-row:1 / 3;
  }

  .hero-d{
    grid-column:2 / 3;
    grid-row:2 / 3;
  }

  .hero-copy{
    padding-top:30px;
    padding-bottom:32px;
  }


  /*
     KORT
     På nettbrett får vi én kolonne.
     Bildet ligger til venstre og innholdet til høyre.
  */

  .omoss-grid,
  .omoss-grid--simple{
    grid-template-columns:1fr;
  }

  .omoss-card{
    display:grid;
    grid-template-columns:240px minmax(0,1fr);
  }

  .omoss-card__media{
    height:100%;
    aspect-ratio:auto;
  }

  .omoss-card__media img{
    min-height:100%;
  }

}


/* =========================================================
   MOBIL
   ========================================================= */

@media (max-width:640px){

  /* =========================
     HERO
     ========================= */

  .hero{
    height:370px;
  }

  /*
     På mobil bruker vi hovedbildet +
     de to mest relevante støttebildene.

     Fredshuset skjules for å unngå
     fire svært smale bildeflater.
  */

  .hero-grid{
    grid-template-columns:1.25fr .75fr;
    grid-template-rows:1fr 1fr;

    gap:3px;
  }

  .hero-a{
    grid-column:1 / 2;
    grid-row:1 / 3;
  }

  .hero-b{
    grid-column:2 / 3;
    grid-row:1 / 2;
  }

  .hero-c{
    display:none;
  }

  .hero-d{
    grid-column:2 / 3;
    grid-row:2 / 3;
  }


  /*
     Litt kraftigere gradient på mobil,
     fordi tekstområdet blir smalere.
  */

  .hero-shade{
    background:
      linear-gradient(
        90deg,
        rgba(0,31,70,.40) 0%,
        rgba(0,31,70,.22) 58%,
        rgba(0,31,70,.05) 100%
      ),
      linear-gradient(
        0deg,
        rgba(0,20,45,.58) 0%,
        rgba(0,20,45,.24) 38%,
        rgba(0,20,45,0) 68%
      );
  }


  /* =========================
     HERO-TEKST
     ========================= */

  .hero-copy{
    padding-top:24px;
    padding-bottom:24px;
  }

  .breadcrumb{
    gap:6px;
    font-size:12px;
  }

  .hero-copy .eyebrow{
    margin-bottom:6px;

    font-size:11px;
    letter-spacing:.07em;
  }

  .hero-copy h1{
    margin-bottom:8px;

    font-size:34px;
  }

  .hero-copy > p:last-child{
    max-width:92%;

    font-size:15px;
    line-height:1.48;
  }

  /*
     <br> i desktop-teksten skal ikke
     tvinge linjeskift på små skjermer.
  */

  .hero-copy > p:last-child br{
    display:none;
  }


  /* =========================
     INNHOLD
     ========================= */

  .omoss-content{
    padding-top:20px;
  }

  .omoss-grid,
  .omoss-grid--simple{
    grid-template-columns:1fr;
    gap:16px;
  }


  /* Kort tilbake til vanlig vertikal layout */

  .omoss-card{
    display:flex;
  }

  .omoss-card__media{
    height:auto;
    aspect-ratio:16 / 8.5;
  }

  .omoss-card__body{
    padding:16px;
  }

  .omoss-card h2{
    font-size:18px;
  }


  /* =========================
     ACCORDION
     ========================= */

  .omoss-accordion__item summary{
    padding:13px 2px;

    font-size:13.5px;
  }

  .omoss-accordion__content{
    padding-left:8px;
  }

  .omoss-accordion__content a{
    padding-top:8px;
    padding-bottom:8px;
  }


  /* =========================
     NEDERSTE SNARVEIER
     ========================= */

  .omoss-bottomlinks{
    grid-template-columns:1fr;
  }

  .omoss-bottomlink + .omoss-bottomlink{
    border-left:0;
    border-top:1px solid rgba(0,43,95,.10);
  }

}


/* =========================================================
   EKSTRA SMÅ SKJERMER
   ========================================================= */

@media (max-width:420px){

  .hero{
    height:390px;
  }

  .hero-copy h1{
    font-size:32px;
  }

  .hero-copy > p:last-child{
    max-width:100%;
    font-size:14.5px;
  }

}