/* Mobiltilpasning.

   Designeksporten er bygget for skrivebord: all styling ligger som
   inline-attributter med faste pikselverdier, og eksporten hadde kun to
   media queries i hele stilarket. Paa 375px ble siden 745px bred og lot
   seg dra sidelengs.

   Hovedaarsaken er rutenettene: `repeat(3, 1fr)` krymper ikke under
   innholdets min-content-bredde, saa tre kort a ~220px tvinger fram
   horisontal overflyt. Derfor faller alle rutenett til én kolonne her.

   !important er noedvendig fordi kildestylingen er inline. */

@media (max-width: 820px) {

  /* --- rutenett og todelte rader faller til én kolonne --- */
  [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }

  /* --- typografi skalerer med skjermbredden --- */
  h1 { font-size: clamp(30px, 8.2vw, 46px) !important; line-height: 1.1 !important; }
  h2 { font-size: clamp(21px, 5.6vw, 30px) !important; line-height: 1.22 !important; }
  h3 { font-size: 17px !important; }

  /* --- ingenting skal skape horisontal bredde --- */
  html, body { max-width: 100% !important; overflow-x: hidden !important; }
  section, header, footer { overflow-x: clip; }
  img { max-width: 100%; height: auto; }

  /* dekorative bakgrunnsikoner: mindre, og aldri utenfor --- */
  section > img[style*="position:absolute"],
  section > img[style*="position: absolute"] {
    width: 220px !important; opacity: .05 !important;
  }

  /* --- toppmeny -------------------------------------------------
     Logoraden er `space-between` med gap 24. Paa 375px blir det 327px
     innhold, og logolenken krympes til 130px mens bildene inni beholder
     sin egen bredde og renner utenfor. Derfor: mindre bilder, mindre
     gap, og logolenken faar slippe aa krympe. */
  header > div, header > div > div {
    padding-left: 14px !important; padding-right: 14px !important;
    gap: 10px !important;
  }
  header a[href*="index"], header > div > a { flex-shrink: 0 !important; }
  header img[src*="wordmark"] { height: 14px !important; width: auto !important; }
  header img[src*="icon"] { height: 22px !important; width: auto !important; }

  /* --- luft: skrivebordsmarginene er for store paa mobil --- */
  section[style*="padding:80px"], section[style*="padding: 80px"] {
    padding-top: 44px !important; padding-bottom: 44px !important;
  }

  /* --- modaler (registrering/innlogging) ------------------------
     Toppmargen maa klarere den klebrige toppmenyen, ellers legger
     modaltittelen seg oppaa logoen. */
  [style*="position:fixed"][style*="z-index:100"],
  [style*="position: fixed"][style*="z-index: 100"] {
    padding: 84px 12px 24px !important;
  }
  [style*="position:fixed"][style*="z-index:100"] h2,
  [style*="position: fixed"][style*="z-index: 100"] h2 { font-size: 24px !important; }
  input, button { font-size: 16px !important; } /* hindrer at iOS zoomer inn */
}