/* ===========================================================================
   Forsida — forsideveggen med kortet midt på

   Lastes BARE på forsida, og ETTER mjf.css (se `mal_hode()`), så reglene her
   vinner over de felles når spesifisiteten er lik. Variablene er mjf.css sine.

   ⚠️ INGEN INLINE-STIL. CSP-en er `style-src 'self'`, og et `style="…"` blir
   blokkert STILLE. Fart og retning per rad er derfor klasser, aldri
   `style="--n: 11"` fra PHP.

   Grunnlaget er MJB-forside-overlevering.md, avsnitt 4. Der denne fila
   avviker, står det hvorfor — alle avvikene er målt i nettleseren 28.09.2026.
   =========================================================================== */

/* --- Forsidevegg ---------------------------------------------------------- */

/* Én rad à 240 px med 20 px luft over og under. To rader à 200 px var 452 px
   høyt og «litt urolig», sa Morten 02.10.2026. */
.mjb-helt {
  position: relative;
  height: 280px;
  overflow: hidden;
  background: #e4e6e8;
}
.mjb-rad { position: absolute; inset: 20px 0 auto 0; overflow: hidden; }

/* ⚠️ TRE KOPIER OG EN TREDEL — IKKE TO KOPIER OG −50 %.
   Løkka ser sømløs ut bare hvis kopiene etter den første dekker skjermen, for
   i det øyeblikket sporet hopper tilbake, er det de som synes. Med 142 px
   forsider var 11 à 154 px = 1694 px, og med to kopier sto det en tom grå
   stripe på 217 px til høyre ved 1920 px. Nå er én kopi 11 à 182 = 2002 px,
   og tre kopier holder for skjermer opp mot 4000 px uten ett bilde mer å
   laste: det er de samme 11 adressene, og nettleseren henter hver én gang.

   ⚠️ MARGIN, IKKE GAP. Med `gap` blir sporet en gap kortere enn N hele
   perioder, og en tredel av det treffer ikke én periode. Løkka hoppet 6 px
   hver runde. Margin til høyre på hvert bilde gjør alle periodene like
   lange. */
/* 106 s for 2002 px: samme fart i piksler som den øverste av de to radene
   hadde (90 s for 1694). */
.mjb-spor {
  display: flex; width: max-content;
  animation: mjb-venstre 106s linear infinite;
}
.mjb-spor > a { display: block; flex: none; margin-right: 12px; }

@keyframes mjb-venstre { from { transform: translateX(0); } to { transform: translateX(calc(-100% / 3)); } }

/* Pause: med musa over, når noe i veggen har fokus (tabulering til knappene),
   og med pauseknappen for dem som verken har mus eller «Reduser bevegelse».
   WCAG 2.2.2 krever en måte å stoppe bevegelse som varer over fem sekunder,
   og hover alene hjelper ingen på tastatur eller berøringsskjerm. */
.mjb-helt:hover .mjb-spor,
.mjb-helt:focus-within .mjb-spor { animation-play-state: paused; }

/* ⚠️ EGEN REGEL, IKKE SLÅTT SAMMEN MED DEN OVER. En nettleser som ikke
   kjenner `:has()`, forkaster hele selektorlista den står i — og da ville
   også hover-pausen forsvunnet. */
.mjb-helt:has(.mjb-pause input:checked) .mjb-spor { animation-play-state: paused; }

.mjb-omslag {
  display: block; width: 170px; height: 240px; object-fit: cover;
  border: 1px solid var(--ramme); background: var(--flate);
}

/* --- Pauseknappen --------------------------------------------------------- */

/* En avkrysningsboks bak en etikett: ren CSS, ingen JavaScript. Boksen er
   skjult for øyet (`.skjul`), men nås med Tab og mellomrom, og en skjermleser
   sier «Pause, avkrysset» når veggen står. Ikonet er tegnet med rammer, ikke
   med tegn, så det ikke blir lest opp. */
/* Nede i hjørnet, oppå raden. Lufta under raden er bare 20 px, for lav til
   knappen. */
.mjb-pause {
  position: absolute; right: 16px; bottom: 28px;
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .1rem .65rem;
  font-size: .8rem; color: var(--tekst);
  background: rgba(255, 255, 255, .88);
  border: 1px solid var(--ramme);
  cursor: pointer; user-select: none;
}
.mjb-pause::before {
  content: "";
  width: 9px; height: 10px;
  border-left: 3px solid currentColor;
  border-right: 3px solid currentColor;
}
.mjb-pause:hover { background: var(--flate); }
.mjb-pause:has(input:focus-visible) { outline: 2px solid var(--mjf); outline-offset: 2px; }
.mjb-pause:has(input:checked) { background: var(--mjf); border-color: var(--mjf); color: #fff; }

/* --- Kortet midt på ------------------------------------------------------- */

/* ⚠️ MINDRE OG LITT GJENNOMSIKTIG, etter prøving på serveren 28.09.2026:
   overleveringens kort på 640 px dekket for mye av to rader. Forsidene skal
   skimtes gjennom det, og den lette uskarpheten bak holder teksten lesbar når
   en mørk forside glir forbi. Nettlesere uten `backdrop-filter` får bare
   gjennomsiktigheten.

   ⚠️ LAVERE ENN FORSIDENE. Morten 02.10.2026: «Boksen må ikke være større
   enn forsidene.» Knappene er derfor borte, og paddingen er strammet inn.
   Kommer det noe nytt i kortet, mål høyden mot `.mjb-omslag` igjen. */
.mjb-helt-kort {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(500px, calc(100% - 32px));
  padding: 20px 32px 22px;
  background: rgba(255, 255, 255, .84);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  border: 1px solid rgba(255, 255, 255, .7);
  box-shadow: 0 16px 40px rgba(29, 31, 32, .22);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  text-align: center;
}

/* ⚠️ ORDMERKET ER BILDET, IKKE TEKST. `merke/tekst.png` er det ekte merket,
   der J-en og B-en er flettet i hverandre. Satt i Barlow Condensed ble det en
   etterligning i andre farger enn merket har (#383a3c og #009dda). */
.mjb-ordmerke { margin: 0; line-height: 0; }
.mjb-ordmerke img { display: block; width: min(290px, 70vw); height: auto; }

.mjb-slagord { margin: 0; font-size: 1.05rem; font-style: italic; color: #4a4d4f; }

/* ⚠️ MØRKERE ENN `--dempet` HER. Bak et kort som slipper gjennom 16 % av det
   som ligger bak, er verste bakgrunn en mørk forside: omtrent #d6d6d6. Der
   gir `--dempet` 3,5:1, under kravet på 4,5:1 for liten tekst. #4a4d4f gir
   5,9:1 også da (regnet ut 28.09.2026). Gjøres kortet mer gjennomsiktig enn
   .84, må dette regnes på nytt: ved .80 er det 5,3:1. */
.mjb-tall {
  margin: 2px 0 0; font-size: .8rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: #4a4d4f;
}

/* --- Siste utgave --------------------------------------------------------- */

/* `.kort` gir flata og rammen. Paddingen ligger på hvert kort i banen, ikke
   her: ellers glir kortene inn og ut et stykke innenfor kanten. forside.css
   lastes etter mjf.css, så lik spesifisitet holder. */
.mjb-siste { position: relative; padding: 0; }

/* ⚠️ SCROLL-SNAP, IKKE TRANSFORM. Banen er en vanlig rullbar flate, så
   sveiping med finger og styreflate er nettleserens egen og virker uten
   skript. `scroll-snap-stop: always` gjør at et kraftig sveip flytter ett
   nummer, ikke tre. `overscroll-behavior-x: contain` hindrer at et sveip forbi
   siste nummer blir «tilbake» i nettleseren.

   Banen blir like høy som det høyeste kortet. Det er med vilje: da står
   pilene stille, og sida under hopper ikke når man blar. */
.mjb-siste-bane {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.mjb-siste-bane::-webkit-scrollbar { display: none; }

.mjb-siste-utgave {
  flex: 0 0 100%; min-width: 0;
  scroll-snap-align: start; scroll-snap-stop: always;
  display: flex; gap: 40px; align-items: flex-start; padding: 32px;
}

/* --- Pilene og prikkene --------------------------------------------------- */

/* Øverst til høyre, på høyde med etiketten. Der er kortet tomt i alle
   bredder over mobil: overskriften under er kort («MJ-bladet 3/2026»). */
.mjb-siste-styring {
  position: absolute; top: 24px; right: 24px; z-index: 1;
  display: flex; align-items: center; gap: 2px;
}
.mjb-siste-styring[hidden] { display: none; }

/* Pilen er tegnet med to rammer, ikke et tegn, så den ikke blir lest opp —
   navnet står i aria-label. Firkantet som `.knapp`. */
.mjb-pil {
  width: 38px; height: 38px; padding: 0;
  display: grid; place-items: center;
  background: var(--flate); color: var(--mjf-mork);
  border: 1px solid var(--mjf);
  cursor: pointer;
}
.mjb-pil::before {
  content: "";
  width: 9px; height: 9px;
  border-left: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateX(2px) rotate(45deg);
}
.mjb-pil--eldre::before { transform: translateX(-2px) rotate(-135deg); }
.mjb-pil--nyere { margin-right: 6px; }
.mjb-pil--eldre { margin-left: 6px; }
.mjb-pil:hover { background: var(--mjf-100); }

/* ⚠️ aria-disabled, IKKE disabled. En knapp som blir `disabled` mens den har
   fokus, mister fokuset — og den som blar med tastaturet, havner øverst på
   sida etter siste nummer. */
.mjb-pil[aria-disabled="true"] { opacity: .35; cursor: default; }
.mjb-pil[aria-disabled="true"]:hover { background: var(--flate); }

/* Knappen er 24 px, prikken 10: liten prikk, men et treffpunkt som holder
   WCAG 2.5.8. */
.mjb-prikk {
  width: 24px; height: 24px; padding: 0;
  display: grid; place-items: center;
  background: none; border: 0; cursor: pointer;
}
.mjb-prikk::before {
  content: "";
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--ramme);
  transition: background .2s, transform .2s;
}
.mjb-prikk:hover::before { background: var(--mjf-200); }
.mjb-prikk[aria-current="true"]::before { background: var(--mjf); transform: scale(1.2); }

.mjb-pil:focus-visible,
.mjb-prikk:focus-visible { outline: 2px solid var(--mjf); outline-offset: 2px; }

.mjb-siste-omslag {
  flex: 0 0 300px; display: block; border: 1px solid var(--ramme);
  transition: transform .2s, box-shadow .2s;
}
/* ⚠️ `height: auto`. Uten den blir høydeattributtet på bildet CSS-høyden, og
   `aspect-ratio` ignoreres: forsida ble 108 × 424 px på mobil (målt). */
.mjb-siste-omslag img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 210 / 297; object-fit: cover;
}
.mjb-siste-omslag:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(29, 31, 32, .22); }

/* `min-width: 0`: ellers kan en lang tittel i spaltene presse tekstsida ut av
   kortet, for et flex-barn krymper ikke under innholdets bredde. */
.mjb-siste-tekst { flex: 1 1 auto; min-width: 0; }

.mjb-etikett {
  margin: 0 0 .35rem;
  font-size: .875rem; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--mjf-mork);
}
.mjb-siste h2 { margin: 0; font-size: 2.9rem; color: var(--tekst); }
.mjb-meta { margin: .35rem 0 1rem; color: var(--dempet); }
.mjb-ingress { margin: 0 0 1.4rem; font-size: 1.05rem; }

/* mjf.css gir ikke h3 noen størrelse, så uten denne ble den nettleserens
   1,17em i Barlow Condensed. */
.mjb-underoverskrift {
  margin: 0 0 .35rem;
  font-size: 1.35rem; color: var(--mjf-mork);
}

/* ⚠️ SPALTER, IKKE RUTENETT. Overleveringen la artiklene i et rutenett med to
   kolonner, som leses bortover: side 3 og 4 på første linje, 10 og 16 på
   neste. En innholdsfortegnelse leses nedover, spalte for spalte, og
   `columns` gjør det uten å måtte vite hvor mange rader det blir — det
   varierer fra én til åtte, og CSP-en stenger for å sende tallet som stil. */
.mjb-artikler {
  list-style: none; margin: 0 0 1.4rem; padding: 0;
  columns: 2; column-gap: 20px;
}
.mjb-artikler li { break-inside: avoid; }

.mjb-artikkel {
  display: flex; gap: 12px; align-items: baseline;
  padding: 8px; border-top: 1px solid var(--ramme-svak);
  text-decoration: none; color: var(--tekst);
}
.mjb-artikkel:hover { background: var(--mjf-100); color: var(--tekst); }
.mjb-side   { flex: 0 0 26px; text-align: right; font-family: var(--tallfont); font-size: .875rem; color: var(--dempet); }
.mjb-tittel { display: block; font-weight: 600; color: var(--mjf-mork); }
.mjb-tittel em { font-weight: 400; }
.mjb-forf   { display: block; font-size: .875rem; color: var(--dempet); }

.mjb-siste-knapper { display: flex; flex-wrap: wrap; gap: 10px; }

/* --- Fra arkivet ---------------------------------------------------------- */

.mjb-arkiv {
  display: flex; align-items: center; gap: 32px;
  padding: 24px 32px; margin-bottom: 1.25rem;
  background: var(--mjf-100); border: 1px solid var(--mjf-200);
}
.mjb-vifte { display: flex; flex-shrink: 0; padding: 6px 4px; }
.mjb-vifte img {
  display: block; width: 84px; height: auto; aspect-ratio: 210 / 297; object-fit: cover;
  border: 1px solid var(--ramme); box-shadow: 0 6px 14px rgba(29, 31, 32, .2);
  background: var(--flate);
}
.mjb-vifte img:nth-child(1) { transform: rotate(-5deg); }
.mjb-vifte img:nth-child(2) { transform: rotate(2deg); margin-left: -28px; }
.mjb-vifte img:nth-child(3) { transform: rotate(6deg); margin-left: -28px; }

/* Det valgte nummeret øverst. Senere søsken tegnes over tidligere, og uten
   dette lå det i midten under nabonummeret til høyre. */
.mjb-vifte img.mjb-vifte-valgt { position: relative; z-index: 1; }

.mjb-arkiv-tekst { flex: 1 1 auto; min-width: 0; }
.mjb-arkiv h2 { margin: 0; font-size: 1.75rem; }
.mjb-arkiv p { margin: .3rem 0 0; }
.mjb-arkiv .knapp { flex-shrink: 0; margin-left: auto; }

/* --- Nettbrett og smale vinduer ------------------------------------------- */

/* Målt ved 798 px: med forsida på 300 px ble tekstsida så smal at de fleste
   titlene brakk over to og tre linjer. */
@media (max-width: 960px) {
  .mjb-siste-utgave { gap: 28px; padding: 24px; }
  /* ⚠️ MINDRE OG HØYERE OPP. Med 38 px og 16 px fra kanten traff pilene
     overskriften ved 720 px (målt): tekstsida er så smal at «MJ-bladet
     1/2026» rekker inn under dem. */
  .mjb-siste-styring { top: 10px; right: 12px; }
  .mjb-pil { width: 32px; height: 32px; }
  .mjb-siste-omslag { flex-basis: 210px; }
  .mjb-siste h2 { font-size: 2.4rem; }
}

/* --- Mobil ---------------------------------------------------------------- */

@media (max-width: 700px) {
  /* Én rad à 169 px med 14 px luft over og under. */
  .mjb-helt { height: 197px; }
  .mjb-rad { inset: 14px 0 auto 0; }
  .mjb-spor > a { margin-right: 8px; }

  /* Samme fart i piksler som på PC: en periode er 11 à 128 = 1408 px her. */
  .mjb-spor { animation-duration: 75s; }

  .mjb-omslag { width: 120px; height: 169px; }

  /* ⚠️ SMALT, så pauseknappen får plass ved siden av. Kortet er lavere enn
     forsidene, og det er ingen stripe over eller under det å legge knappen
     i. Med 100 % − 32 px dekket kortet nesten hele raden. */
  .mjb-helt-kort { width: min(290px, calc(100% - 96px)); padding: 14px 16px 16px; gap: 6px; }
  .mjb-ordmerke img { width: min(200px, 100%); }
  .mjb-slagord { font-size: .9rem; }
  .mjb-tall { display: none; }

  /* Bare ikonet. Ordet står igjen for skjermlesere. */
  .mjb-pause { right: 8px; bottom: 22px; padding: .3rem .55rem; }
  .mjb-pause-tekst {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0, 0, 0, 0); white-space: nowrap;
  }

  .mjb-siste-utgave { flex-direction: column; padding: 18px; gap: 16px; }
  .mjb-siste-omslag { flex-basis: auto; width: 110px; }

  /* ⚠️ ØVERST TIL HØYRE OGSÅ HER, ved den lille forsida. Under kortene ble
     prøvd først: kortet er nær 1000 px høyt på mobil, og pilene kom ikke til
     syne før man hadde rullet forbi alt sammen. Plassen er knapp: 174 px
     styring mot 180 px ledig ved 360 px skjerm, derfor de smale margene. */
  .mjb-siste-styring { top: 12px; right: 12px; }
  .mjb-pil--nyere { margin-right: 2px; }
  .mjb-pil--eldre { margin-left: 2px; }
  .mjb-siste h2 { font-size: 2.2rem; }
  .mjb-artikler { columns: 1; }

  .mjb-arkiv { flex-direction: column; align-items: flex-start; padding: 16px 18px; gap: 12px; }
  .mjb-arkiv .knapp { margin-left: 0; }
}

/* Under 360 px er det bare plass til pilene. Prikkene er en bekvemmelighet;
   pilene og sveipet når alle fire numrene. */
@media (max-width: 359px) {
  .mjb-prikk { display: none; }
}

/* --- Tilgjengelighet ------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .mjb-spor { animation: none; }
  .mjb-pause { display: none; }
  .mjb-siste-omslag { transition: none; }
  .mjb-siste-omslag:hover { transform: none; }
  .mjb-prikk::before { transition: none; }
}

/* «Ny her?»-linja under karusellen (kom-i-gang.php). Tekstlinje, ikke knapp. */
.mjb-komigang { margin: 0 0 1.25rem; }