/* ───────────────────────────────────────────────────────────
   kompetanse.css — kun det som er spesifikt for kompetanse.html.
   Delt designsystem ligger i sider.css, som må lastes først.
   ─────────────────────────────────────────────────────────── */

.page-hero {
  min-height: min(60vh, 560px);
  background:
    radial-gradient(115% 85% at 76% 14%, rgba(150,205,242,0.5) 0%, transparent 58%),
    linear-gradient(118deg, #0a4a92 0%, #0f5fb4 32%, #2b82cc 62%, #6cb0dd 100%);
}
.kp-hero { margin-top: auto; padding: 0 56px 58px; max-width: 820px; }
.kp-hero .ph-title { font-size: clamp(34px, 4vw, 58px); }


/* ═══════════════════════════════════════════════════════════
   DISIPLINENE — trekkspill bygget på <details>, ikke på JS.
   Den gamle siden hadde en egen accordion-motor i JavaScript;
   nettleseren gjør det samme gratis, og det virker uten skript.
   ═══════════════════════════════════════════════════════════ */
.komp2 { background: #fff; padding: 20px 0 120px; }
.kp-list {
  max-width: 1290px;
  margin: 0 auto;
  padding: 0 24px;
  border-top: 1px solid rgba(10,10,10,0.12);
}
.kp-item {
  border-bottom: 1px solid rgba(10,10,10,0.12);
  transition: background 0.22s;
}
.kp-item:hover { background: #fafaf8; }
.kp-item[open] { background: #f6f6f4; }

.kp-item summary {
  list-style: none;
  cursor: pointer;
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr) 34px;
  align-items: center;
  gap: 20px;
  padding: 28px 20px;
}
.kp-item summary::-webkit-details-marker { display: none; }
.kp-n {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11.5px;
  letter-spacing: 0.16em;
  color: rgba(10,10,10,0.4);
}
.kp-item[open] .kp-n { color: rgba(10,10,10,0.6); }
.kp-title {
  font-size: clamp(21px, 2.2vw, 30px);
  font-weight: 600;
  letter-spacing: -0.032em;
  line-height: 1.15;
  color: #0a0a0a;
}
.kp-plus {
  width: 34px; height: 34px;
  border-radius: 10px;
  background: var(--lime);
  color: #0a0a0a;
  font-size: 19px;
  font-weight: 400;
  line-height: 1;
  display: grid; place-items: center;
  transition: transform 0.28s cubic-bezier(0.22,1,0.36,1);
}
.kp-item[open] .kp-plus { transform: rotate(45deg); }

/* Samme grid-triks som FAQ-en på forsiden: 0fr → 1fr gir en myk
   åpning uten at høyden må måles i JavaScript. */
.kp-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s cubic-bezier(0.22,1,0.36,1);
}
.kp-item[open] .kp-body { grid-template-rows: 1fr; }
.kp-body-inner { overflow: hidden; }

.kp-cols {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: 56px;
  padding: 4px 20px 38px;
}
.kp-text p {
  font-size: 17px;
  line-height: 1.65;
  color: rgba(10,10,10,0.72);
  max-width: 62ch;
}
.kp-text p + p { margin-top: 16px; }

.kp-points {
  list-style: none;
  margin-top: 26px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.kp-points li {
  position: relative;
  padding-left: 28px;
  font-size: 16px;
  line-height: 1.5;
  color: rgba(10,10,10,0.82);
}
.kp-points li::before {
  content: "";
  position: absolute;
  left: 0; top: 7px;
  width: 13px; height: 7px;
  border-left: 2px solid var(--lime);
  border-bottom: 2px solid var(--lime);
  transform: rotate(-45deg);
}

.kp-tags-block { padding-top: 4px; }
.kp-tags-label {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(10,10,10,0.42);
  margin-bottom: 16px;
}
.kp-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.kp-tags span {
  background: #fff;
  border: 1px solid rgba(10,10,10,0.12);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 500;
  color: rgba(10,10,10,0.7);
  white-space: nowrap;
}

@media (max-width: 900px) {
  .komp2 { padding-bottom: 80px; }
  .kp-item summary {
    grid-template-columns: 44px minmax(0, 1fr) 30px;
    gap: 14px;
    padding: 22px 4px;
  }
  .kp-plus { width: 30px; height: 30px; font-size: 17px; }
  .kp-cols { grid-template-columns: 1fr; gap: 30px; padding: 4px 4px 32px; }
  .kp-text p { font-size: 16px; }
}


/* ═══════════════════════════════════════════════════════════
   HERO — bygget om. Sto identisk med priser og om-meg: samme
   blå gradient, samme tekstblokk nede til venstre. Tre sider
   som ikke var til å skille fra hverandre.

   Denne blir nettstedets eneste LYSE hero. Kompetanse er en
   oversiktsside — en rolig, lys flate passer innholdet, og
   den skiller seg fra alt annet uten å bli et triks.
   ═══════════════════════════════════════════════════════════ */
.page-hero {
  min-height: min(62vh, 580px);
  background: #f1f1ef;
}
/* Svakt rutenett så flaten ikke blir helt død */
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(rgba(10,10,10,0.032) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10,10,10,0.032) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(100% 80% at 20% 40%, #000 0%, transparent 74%);
  mask-image: radial-gradient(100% 80% at 20% 40%, #000 0%, transparent 74%);
}
.kp-hero .ph-kicker { color: rgba(10,10,10,0.5); }
.kp-hero .ph-title  { color: #0a0a0a; }
.kp-hero .ph-lead   { color: rgba(10,10,10,0.66); }
.kp-hero .ph-link   { background: #0a0a0a; color: #fff; }
.kp-hero .ph-link:hover { background: var(--lime); color: #0a0a0a; }

/* De sju disiplinene som en stille kolonne til høyre — sier hva
   siden handler om før man har scrollet en piksel. */
.kp-index {
  position: absolute;
  right: 56px;
  top: 50%;
  transform: translateY(-40%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 9px;
  text-align: right;
}
.kp-index span {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(10,10,10,0.34);
}
.kp-index span:nth-child(odd) { color: rgba(10,10,10,0.5); }

@media (max-width: 1080px) { .kp-index { display: none; } }