/* ===========================================================================
   Modelljernbanenytt — det som er særegent for nyhetssiden.

   Bygger PÅ mjf.css og gjentar ingenting derfra. Variabler, fonter, topplinje,
   bunn, `.kort`, `.ingress` og `.dempet` kommer allerede derfra.

   ⚠️ INGEN BILDESTØRRELSER, INGEN KORTGALLERI-RUTENETT. Målt 18.09.2026: 3 av
   189 elementer hadde bilde i feeden sin. Stilarket er laget for tekst, fordi
   det er det innholdet faktisk er.
   =========================================================================== */

/* --- Innledning ----------------------------------------------------------- */

.innledning { max-width: 46rem; margin-bottom: 2rem; }
.innledning h1 { margin-bottom: .5rem; }
.innledning .ingress { font-size: 1.08rem; margin-bottom: 0; }

/* --- Norsk og nordisk ------------------------------------------------------ */

.bolk-nordisk {
  background: var(--mjf-100);
  border: 1px solid var(--mjf-200);
  padding: 1.35rem 1.5rem 1.6rem;
  margin-bottom: 2.25rem;
}
.bolk-nordisk > h2 { margin: 0; font-size: 1.5rem; }
.bolk-under { color: var(--dempet); font-size: .92rem; margin: .15rem 0 1.1rem; }

/* auto-fit gjør at seks saker blir tre spalter på bred skjerm, to på nettbrett
   og én på telefon — uten et eneste mediespørsmål. */
.nordisk-rutenett {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1rem;
}
.nordisk-rutenett .sak {
  background: var(--flate);
  border: 1px solid var(--ramme-svak);
  padding: .9rem 1rem;
  margin: 0;
}
.nordisk-rutenett .sak-tittel { font-size: 1.05rem; }

/* ⚠️ INGRESSEN KLIPPES TIL TRE LINJER HER, og bare her. I et rutenett strekker
   hele raden seg etter det høyeste kortet, og én sak med lang ingress ved
   siden av to uten ga 250 px tomrom under naboene. Nede i strømmen står
   sakene under hverandre, og der gjør lengden ingen skade. */
.nordisk-rutenett .sak-ingress {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --- To spalter ------------------------------------------------------------ */

.spalter {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 19rem;
  gap: 2.5rem;
  align-items: start;
}

@media (max-width: 860px) {
  .spalter { grid-template-columns: 1fr; gap: 2rem; }
}

/* --- Filterrad ------------------------------------------------------------- */

.stromm-topp { margin-bottom: 1.25rem; }
.stromm-topp h2 { margin: 0 0 .85rem; }

.filter { display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: center; }
.filter-knapper { display: flex; flex-wrap: wrap; gap: .4rem; }

.chip {
  font-family: var(--brodtekst);
  font-size: .88rem;
  line-height: 1;
  padding: .48rem .85rem;
  border: 1px solid var(--ramme);
  background: var(--flate);
  color: var(--tekst);
  border-radius: 999px;
  cursor: pointer;
}
.chip:hover { border-color: var(--mjf); color: var(--mjf-mork); }
.chip.valgt {
  background: var(--mjf);
  border-color: var(--mjf);
  color: #fff;
}

.filter-sok { flex: 1 1 11rem; min-width: 11rem; }
.filter-sok input {
  width: 100%;
  font-family: var(--brodtekst);
  font-size: .9rem;
  padding: .45rem .7rem;
  border: 1px solid var(--ramme);
  background: var(--flate);
  color: var(--tekst);
}
.filter-sok input:focus-visible { outline: 2px solid var(--mjf); outline-offset: 1px; }

/* Skjult for øyet, lest av skjermlesere. */
.skjult {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.ingen-treff {
  color: var(--dempet);
  padding: 1.5rem 0;
  border-top: 1px solid var(--ramme-svak);
}

/* --- Strømmen -------------------------------------------------------------- */

.dagskille {
  font-family: var(--overskrift);
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--dempet);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin: 1.9rem 0 .35rem;
  padding-bottom: .35rem;
  border-bottom: 1px solid var(--ramme-svak);
}
.dagskille:first-child { margin-top: 0; }

.sak {
  padding: .85rem 0;
  border-bottom: 1px solid var(--ramme-svak);
}
.stromm-liste .sak:last-child { border-bottom: none; }

.sak-tittel {
  font-family: var(--brodtekst);
  font-size: 1.06rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0;
  margin: 0 0 .2rem;
}
.sak-tittel a { color: var(--tekst); text-decoration: none; }
.sak-tittel a:hover { color: var(--mjf-hover); text-decoration: underline; }

.sak-ingress {
  color: var(--dempet);
  font-size: .93rem;
  line-height: 1.5;
  margin: .2rem 0 .35rem;
}

.sak-fot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem .6rem;
  margin: .25rem 0 0;
  font-size: .84rem;
  color: var(--dempet);
}
.sak-utgiver { font-weight: 600; color: var(--tekst); }
.sak-fot time { font-variant-numeric: tabular-nums; }

/* ⚠️ INGEN «·» FORAN TIDEN. Den stod her først, som ::before på <time>, og så
   riktig ut på bred skjerm. På mobil brytes merkelappene til ny linje, og da
   ble punktumet stående HELT ALENE først på linja under. Et skilletegn som
   ikke vet hva det skiller, er verre enn ingenting — mellomrommet i .sak-fot
   holder elementene fra hverandre uansett bredde. */

.merke {
  font-size: .74rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: .16rem .45rem;
  border-radius: 3px;
  white-space: nowrap;
}
.merke-produkt { background: var(--ok-bg); color: var(--ok-kant); }
.merke-sprak   { background: var(--ramme-svak); color: var(--dempet); }

/* En løftet sak er redaksjonens valg, ikke datoens. Den skal synes at den er
   plassert der med vilje. */
.sak-loftet { border-left: 3px solid var(--mjf); padding-left: .85rem; }

/* --- Sidespalte ------------------------------------------------------------ */

.sidespalte .kort:last-child { margin-bottom: 0; }
.sidespalte p { font-size: .93rem; line-height: 1.55; }
.sidespalte p:last-child { margin-bottom: 0; }

.enkel-liste { list-style: none; margin: 0; padding: 0; }
.enkel-liste li {
  padding: .55rem 0;
  border-bottom: 1px solid var(--ramme-svak);
  font-size: .93rem;
  line-height: 1.45;
}
.enkel-liste li:last-child { border-bottom: none; padding-bottom: 0; }
.enkel-liste .dempet { display: block; font-size: .82rem; margin-top: .15rem; }

/* --- Bla mellom sider ------------------------------------------------------ */

.blaing {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--ramme);
  font-size: .95rem;
}

/* --- Kildelista på om.php --------------------------------------------------- */

.kildetabell { width: 100%; border-collapse: collapse; font-size: .93rem; }
.kildetabell th, .kildetabell td {
  text-align: left;
  padding: .6rem .75rem .6rem 0;
  border-bottom: 1px solid var(--ramme-svak);
  vertical-align: top;
}
.kildetabell th { font-family: var(--overskrift); font-size: 1rem; }
.kildetabell td:last-child { text-align: right; padding-right: 0; font-variant-numeric: tabular-nums; }
.kilde-feil { color: var(--feil-kant); font-weight: 600; }
.kilde-ok   { color: var(--dempet); }

.tomt { max-width: 34rem; }

/* --- Redaksjonen ------------------------------------------------------------
   Bare på rediger.php, som ingen lenke peker til. */

.red-knapper { display: flex; gap: .4rem; margin: .5rem 0 0; }
.red-knapper button {
  font-family: var(--brodtekst);
  font-size: .82rem;
  padding: .3rem .7rem;
  border: 1px solid var(--ramme);
  background: var(--flate);
  color: var(--tekst);
  cursor: pointer;
}
.red-knapper button:hover { border-color: var(--mjf); color: var(--mjf-mork); }

/* En skjult sak skal se avslått ut, men fortsatt være lesbar — man må kunne
   se hva man skjulte for å kunne angre. */
.sak-avslatt { opacity: .45; }
.sak-avslatt .sak-tittel a { text-decoration: line-through; }



.red-topp { display: flex; flex-wrap: wrap; gap: .6rem; margin: .75rem 0 .5rem; }
.red-topp button {
  font-family: var(--brodtekst);
  font-size: .9rem;
  padding: .5rem 1rem;
  border: 1px solid var(--ramme);
  background: var(--flate);
  color: var(--tekst);
  cursor: pointer;
}
.knapp-hent { background: var(--mjf) !important; border-color: var(--mjf) !important; color: #fff !important; }
.knapp-hent:hover { background: var(--mjf-hover) !important; }

.melding {
  padding: .7rem 1rem;
  border-left: 3px solid;
  margin: 0 0 .75rem;
  font-size: .95rem;
}
.melding-ok   { background: var(--ok-bg);   border-color: var(--ok-kant); }
.melding-feil { background: var(--feil-bg); border-color: var(--feil-kant); }

/* --- Originaltittel under en oversatt overskrift -----------------------------
   ⚠️ ÉN LINJE MED AVKORTING, ikke fri flyt. 146 av 187 saker er oversatt, og
   en original som brytes over to linjer ville doblet høyden på nesten hele
   strømmen. Den skal kunne etterprøves, ikke konkurrere med overskrifta. */

.sak-original {
  margin: 0 0 .3rem;
  font-size: .85rem;
  line-height: 1.4;
  color: var(--dempet);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* I rutenettet er kortene smale, og da sier en avkortet original nesten
   ingenting. Der får den bryte over to linjer i stedet. */
.nordisk-rutenett .sak-original {
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}