/* =====================================================================
   3D-KONFIGURATOR · utkast 3 (lyst og midtstilt)
   Det meste kommer fra undersider.css. Her står bare det siden trenger
   i tillegg: «fra deg»-kortet med fire ting og bransjene som kort med
   status.
   ===================================================================== */

/* Sammensatte ord som ikke skal deles ved bindestreken («3D-modell») */
.hel { white-space: nowrap; }

/* ---------- Slik virker det (sidens ene mørke bånd) ---------- */
.mork-band { margin-inline: clamp(8px, 1.2vw, 16px); border-radius: 24px; }

/* ---------- Dette trenger vi: ett kort, fire ruter ---------- */
.k3-fra-deg {
  list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 1000px; margin-inline: auto;
  background: var(--flate); border: 1px solid var(--strek); border-radius: var(--radius);
}
.k3-fra-deg li { display: grid; justify-items: center; align-content: start; gap: 1.1rem; padding: 2.25rem 1.25rem 2rem; text-align: center; font-weight: 500; letter-spacing: -.01em; }
.k3-fra-deg li + li { border-left: 1px solid var(--strek); }
.k3-ikon { width: 38px; height: 38px; fill: none; stroke: var(--tekst); stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 760px) {
  .k3-fra-deg { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .k3-fra-deg li:nth-child(3) { border-left: 0; }
  .k3-fra-deg li:nth-child(n+3) { border-top: 1px solid var(--strek); }
}

/* ---------- Pris ---------- */
.prisboks li, .passer li { text-wrap: pretty; }

/* ---------- Passer for ---------- */
.k3-passer { max-width: 1000px; margin-inline: auto; }

/* ---------- Bransjer vi bygger for ----------
   Fire kort (ikke lenker): status i en liten pille øverst, navnet nederst.
   Én lenke til Aktuelt står under kortene. */
.k3-bransjer { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.k3-bransjer li {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; min-height: 9.5rem; padding: 1.4rem 1.4rem 1.3rem;
  background: var(--flate); border: 1px solid var(--strek); border-radius: var(--radius); color: var(--tekst);
}
.k3-navn { order: 2; margin-top: auto; font-size: 1.25rem; font-weight: 400; letter-spacing: -.025em; line-height: 1.2; }
.k3-status {
  order: 1; display: inline-flex; align-items: center; gap: .5em; min-height: 28px; padding: .2rem .75rem;
  border: 1px solid var(--strek-sterk); border-radius: var(--pille);
  font-size: .6875rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--svak);
}
.k3-status .prikk { width: 5px; height: 5px; }
.k3-status.k3-arbeid { background: var(--tekst); border-color: var(--tekst); color: var(--morkt); }
.k3-aktuelt { margin-top: clamp(1.25rem, 1rem + 1vw, 2rem); text-align: center; }
.k3-aktuelt .pil { width: 14px; height: 14px; transition: transform .5s var(--myk); }
.k3-aktuelt a:hover .pil { transform: translate(3px, -3px); }
@media (max-width: 1000px) { .k3-bransjer { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) {
  .k3-bransjer { grid-template-columns: minmax(0, 1fr); }
  .k3-bransjer li { min-height: 0; }
}