/* =====================================================================
   AKTUELT · utkast 3 (lyst og midtstilt)
   Tre deler, én per status, hver med midtstilt hode fra stil.css:
   1. Nylig levert: stort skjermbilde under hodet, teksten under.
   2. Under arbeid: et hvitt kort med bildet til venstre, teksten til høyre.
   3. Planlagt: tre hvite kort med store, tynne tall (01–03).
   Skjermbildene vises i farger, i den vanlige .nettleser-rammen.
   ===================================================================== */

/* Ord som skal holde sammen på én linje, som «ta kontakt for pris» */
.hel { white-space: nowrap; }

/* ---------- Sidehodet ---------- */
.oppdatert { font-size: var(--t-liten); color: var(--svakere); }
.status-piller ul { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-top: .4rem; }
.status-piller a {
  display: inline-flex; align-items: center; gap: .6rem; min-height: 40px; padding: .35rem 1.05rem;
  border: 1px solid var(--strek-sterk); border-radius: var(--pille);
  font-size: .875rem; font-weight: 500; color: var(--tekst); text-decoration: none; transition: border-color .25s;
}
.status-piller a:hover { border-color: var(--tekst); color: var(--tekst); }
/* Prikkene: fylt = levert, halv = under arbeid, tom = planlagt */
.prikk-halv { background: linear-gradient(90deg, currentColor 50%, transparent 50%); box-shadow: inset 0 0 0 1px currentColor; }
.prikk-tom { background: transparent; box-shadow: inset 0 0 0 1px currentColor; }

/* ---------- Sakene ----------
   Hver del har bare luft over seg, så avstanden ikke blir dobbel. Den
   første står tett under sidehodet. Den siste får luft under seg også,
   siden det ikke er noen kontaktdel nederst lenger. */
.sak { padding-bottom: 0; }
.sak:first-of-type { padding-top: clamp(1.5rem, 1rem + 2vw, 3rem); }
.sak:last-of-type { padding-bottom: var(--seksjon); }

/* 1. Stort skjermbilde */
.sak-bilde { max-width: 1040px; margin: 0 auto; }
.sak-bilde .nettleser { box-shadow: 0 40px 80px -50px rgba(9, 9, 11, .4); }
.sak-tekst { display: grid; justify-items: center; gap: 1.5rem; max-width: 38em; margin: clamp(2rem, 1.6rem + 1.5vw, 3rem) auto 0; text-align: center; color: var(--svak); }

/* 2. Kortet med bilde og tekst side om side */
.sak-kort {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; gap: clamp(1.5rem, 1rem + 2.5vw, 3.5rem);
  max-width: 1100px; margin-inline: auto; padding: clamp(.75rem, .5rem + .8vw, 1.25rem);
  background: var(--flate); border: 1px solid var(--strek); border-radius: calc(var(--radius) + 6px);
}
.sak-kort-bilde { display: grid; gap: .8rem; margin: 0; }
.sak-kort-bilde figcaption { font-size: .8125rem; color: var(--svak); padding-inline: .25rem; }
.sak-kort-tekst { display: grid; justify-items: start; gap: 1.1rem; padding: 1rem clamp(.5rem, 0rem + 1.5vw, 2rem) 1rem 0; color: var(--svak); }
.sak-kort-stor { font-size: clamp(1.25rem, 1.1rem + .5vw, 1.5rem); font-weight: 300; letter-spacing: -.02em; line-height: 1.35; color: var(--tekst); }
.sak-lenker { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.25rem; margin-top: .5rem; }

/* 3. De tre planlagte konfiguratorene, med tallet fra lista */
.planer { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; max-width: 1100px; margin-inline: auto; }
.planer > li {
  display: grid; align-content: start; gap: .75rem;
  padding: clamp(1.5rem, 1.1rem + 1.2vw, 2.1rem); background: var(--flate); border: 1px solid var(--strek); border-radius: var(--radius);
}
.planer p { color: var(--svak); font-size: .9375rem; }
/* Artikkelkortene: «Les artikkelen» står på samme høyde i alle tre, uansett hvor lang teksten er */
#artikler .planer > li { grid-template-rows: auto 1fr auto; justify-items: start; }

@media (max-width: 900px) {
  .sak-kort { grid-template-columns: minmax(0, 1fr); max-width: 640px; }
  .sak-kort-tekst { padding: .25rem .75rem 1rem; }
  .planer { grid-template-columns: minmax(0, 1fr); max-width: 560px; }
}