/* ==========================================================================
   kopibogen.dk — funktionsvejledning (billedserier pr. rolle)
   Arver variabler, top-frame og kort fra landing.css + vilkaar.css.
   Denne fil dækker KUN selve billedserierne.
   ========================================================================== */

/* Bredere kolonne end vilkår — striberne er 3 paneler brede og bliver
   ulæselige i en 820 px tekstkolonne. */
.vejl-indhold { max-width: 1180px; }

.vejl-intro {
  color: var(--tekst-dim);
  font-size: 15px;
  line-height: 1.6;
  margin: 0 0 26px;
}

/* Én serie = én rolle. */
.vejl-serie { margin: 0 0 34px; }
.vejl-serie:last-of-type { margin-bottom: 6px; }

.vejl-serie h2 {
  color: var(--blaa);
  font-size: 19px;
  font-weight: 800;
  margin: 0 0 2px;
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
/* Trin-nummeret i flowet — svend → formand → PL → PL-chef. */
.vejl-trin {
  flex: 0 0 auto;
  background: var(--blaa);
  color: #fff;
  font-size: 12.5px;
  font-weight: 800;
  border-radius: 999px;
  padding: 3px 11px;
}
.vejl-serie p.vejl-hvad {
  color: var(--tekst-dim);
  font-size: 14.5px;
  line-height: 1.55;
  margin: 0 0 12px;
}

/* Oplysning om noget der ikke er bygget endnu, eller en alternativ vej.
   BLÅ = info — samme alarm-niveau som ».alarm-info« på dashboardet
   (gul = noget venter på dig, rød = det koster penge). Gør den gul eller rød,
   og folk holder op med at tro på de farver. Se KONTAKTER.md. */
.vejl-note {
  margin: 0 0 12px;
  padding: 9px 14px;
  background: #eef4fd;
  border-left: 3px solid var(--blaa);
  border-radius: 0 6px 6px 0;
  color: var(--tekst);
  font-size: 14px;
  line-height: 1.55;
}

/* Huske-reglen for formand og PL. Skal skille sig ud fra beskrivelsen —
   det er en instruks, ikke en forklaring — men må ikke råbe som en fejl.
   Rød venstrekant er samme greb som .vilkaar-frem. */
.vejl-husk {
  margin: 0 0 12px;
  padding: 8px 14px;
  background: #fdf6f6;
  border-left: 3px solid var(--roed);
  border-radius: 0 6px 6px 0;
  color: var(--tekst);
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.5;
}

/* Selve striben. Klik åbner billedet alene, så telefonen kan zoome med
   sine egne fingre — ingen egen billedviser at vedligeholde. */
.vejl-billede {
  display: block;
  border: 1px solid var(--kant);
  border-radius: 10px;
  overflow: hidden;
  background: #f4efe6;
  line-height: 0;
}
.vejl-billede img {
  display: block;
  width: 100%;
  height: auto;
}
.vejl-billede:hover { border-color: var(--blaa); }

.vejl-zoom {
  font-size: 12.5px;
  color: var(--tekst-dim);
  margin: 6px 0 0;
}

@media (max-width: 860px) {
  .vejl-serie h2 { font-size: 17px; }
  /* På telefon er teksten i striben lille — sig det, i stedet for at
     lade folk knibe øjnene sammen forgæves. */
  .vejl-zoom { color: var(--roed); font-weight: 700; }
}