/*  Vib-blokken på modellens profil.
 *
 *  Den afløser en tabel med én kolonne pr. enhed i hele kataloget. Den her viser
 *  kun de enheder hun HAR, som brikker der bryder om på flere linjer, så blokken
 *  aldrig kan blive bredere end den spalte den står i.
 *
 *  ALT er scopet under .pvib. Profil-siden deler stylesheet med resten af sitet,
 *  og én global selector rammer alt.
 *
 *  FARVERNE ER SIDENS EGNE, ikke modelområdets designsystem. Profilen er den gamle
 *  flade med blå stjernebjælker, og en blok i et andet formsprog ville stikke ud
 *  præcis som footeren gjorde i sit første forsøg. Værdierne er taget fra
 *  styles.css frem for gættet: #0e7c9b er bjælkens blå, #e8f3f7 dens lyse felt.
 */

.pvib {
  font-family: inherit;
  font-size: 12px;
  margin: 0 0 10px;

  /*  Boksen havde ingen baggrund, saa den stod som loest indhold mellem to bokse
      der havde en. Denices ord: "der mangler boks bagrund paa boksen BIB -
      Ligesom der er paa de andre bokse paa profilen".
      Vaerdien er ikke valgt, den er maalt: `.box` i styles.css er intet andet end
      background-color: #fff, saa den her matcher resten af profilen. */
  background: #fff;

  /*  Ingen vandret polstring paa selve boksen. Raekkerne polstrer sig selv, saa
      zebraen naar helt ud til kanten praecis som tabellerne ovenfor gør. Med
      polstring paa boksen ville der staa hvide render langs siderne, og saa flugter
      den ikke med resten af profilen alligevel. */
  padding: 0 0 4px;
}

.pvib * { box-sizing: border-box; }

/*  Enhederne under hinanden, og tilbuddene under hver enhed. Ikke en tabel:
    en tabel med en kolonne pr. tilbud var netop det der gjorde siden bredere end
    skærmen, og en liste kan ikke gøre det.

    MEN DEN SKAL LÆSE SOM EN PRISLISTE. Marks kald 9/9: der kunne godt gøres noget
    for at priserne og informationen i boksen stod pænere. Den stod som løbende
    tekst, hvor prisen blev skubbet til højre af `margin-left: auto`. Det giver en
    højrekant, men ikke en kolonne: mønsternavnet fylder forskelligt fra linje til
    linje, så tallene landede forskellige steder og der var intet at følge med øjet
    ned gennem listen. Prisen er lige præcis det felt kunden sammenligner.

    FARVERNE ER MÅLT OG IKKE VALGT. `styles.min.css` på klonen 9/9:
    `.box,.box_fade,tr.even{background-color:#fff}`, `tr.odd{background-color:#f1f1f2}`
    og `.pad{padding:2px 15px}`. Blokken bruger de to farver og den samme venstrekant
    som tabellen lige over sig, så den læser som en del af profilen frem for som en ø
    med sit eget formsprog. */
.pvib-intro {
  margin: 0;
  padding: 8px 15px;
  color: #4a5b67;
}

.pvib-liste {
  list-style: none;
  margin: 0;
  padding: 0;
}

.pvib-enhed {
  padding: 0;
}

/*  Enhedsnavnet som sin egen linje med bund, ikke som fed tekst i strømmen. Det er
    det der skiller to enheder fra hinanden, og hun kan have flere. Den lyse blå er
    bjælkens eget felt, så navnet hører tydeligt til overskriften ovenfor. */
.pvib-navn {
  display: block;
  padding: 5px 15px;
  font-weight: 700;
  color: #0b5d74;
  background: #e8f3f7;
  border-top: 1px solid #d7e7ee;
}
.pvib-enhed:first-child .pvib-navn { border-top: 0; }

/*  Tilbuddene. Tre felter paa en linje: mønster, varighed, pris. */
.pvib-tilbud {
  list-style: none;
  margin: 0;
  padding: 0;
}
.pvib-tilbud li {
  display: flex;
  align-items: baseline;
  gap: 2px 12px;
  padding: 4px 15px;
  background: #fff;
}

/*  Zebra som profilens egne tabeller. Med syv tilbud paa en enhed er det forskellen
    paa at kunne følge en linje tværs over og at skulle sigte. */
.pvib-tilbud li:nth-child(even) { background: #f1f1f2; }

/*  `min-width: 0` er det der lader et langt mønsternavn bryde inde i sit eget felt
    frem for at skubbe prisen ud af kolonnen. Uden den har en flex-boks en implicit
    mindstebredde paa sit indhold, og saa flytter højrekanten sig paa netop de linjer
    hvor navnet er langt. */
.pvib-moenster {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 600;
  overflow-wrap: break-word;
}
.pvib-tid {
  flex: 0 0 auto;
  color: #6b7c88;
  white-space: nowrap;
}

/*  Prisen i en egen kolonne med fast mindstebredde og højrestillet tekst, og
    `tabular-nums` saa cifrene har samme bredde. Det er det der faar kronerne til at
    staa under hinanden i stedet for at vandre efter hvor mange cifre der er. */
.pvib-pris {
  flex: 0 0 auto;
  min-width: 72px;
  text-align: right;
  font-weight: 700;
  color: #0b5d74;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/*  En enhed uden priser er en tilstand der findes i dag: registrerer hun enhed
    nummer to, oprettes der ingen standardpriser til den. Den skal kunne ses frem
    for at forsvinde, ellers ligner det at enheden ikke er registreret. */
.pvib-uden {
  display: block;
  color: #7a5c00;
  background: #fdf6e3;
  padding: 5px 15px;
}

/*  Den tomme tilstand. Dæmpet, fordi den ikke er en fejl: de fleste modeller har
    ikke en Vib-enhed, og blokken skal ikke råbe om noget der er normalt. */
.pvib-tom {
  margin: 0;
  padding: 8px 15px 4px;
  color: #4a5b67;
}

.pvib-veje {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin: 0;
  padding: 0 15px 6px;
}

.pvib-vej {
  color: #0e7c9b;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .12s ease;
}
.pvib-vej:hover,
.pvib-vej:focus-visible { border-bottom-color: #b9d9e4; }

.pvib :focus-visible { outline: 2px solid #0e7c9b; outline-offset: 2px; }

/*  TELEFONEN. Brikkerne er tekst og ikke noget man trykker på, så de skal ikke
    være større. Linkene i den tomme tilstand ER noget man trykker på, og de får
    derfor en trykflade der kan rammes med en finger.

    Den vandrette polstring gaar fra 15 til 10 px, fordi 15 er maalt paa desktoppens
    `.pad` og telefonens spalte er smallere. Zebraen naar stadig ud til kanten, saa
    raekkerne bliver ved med at kunne følges. */
@media (max-width: 760px) {
  .pvib-intro,
  .pvib-navn,
  .pvib-tilbud li,
  .pvib-uden { padding-left: 10px; padding-right: 10px; }
  .pvib-tom { padding-left: 10px; padding-right: 10px; }
  .pvib-veje { padding-left: 10px; padding-right: 10px; }
  .pvib-vej { display: inline-block; padding: 6px 0; }
}