/* ============================================================
   Booking (produktside) supplement til forside.css + hjemmesider.css.
   Genbruger brand-tokens og komponentmoenstre: .pitch, .pakker/.pris,
   .specs, .proces, .cta, .titleblock. Kun det der ikke fandtes i
   forvejen staar her. Ingen JS, ingen inline styles, ingen eksterne
   domaener (CSP-ren).
   ============================================================ */

/* faelles indledning under en sektionsoverskrift */
.pris-lead,
.fravalg-lead,
.opstart-lead {
  margin: 0 0 34px;
  max-width: 62ch;
  color: var(--ink-soft);
  text-wrap: pretty;
}

/* ============================================================
   Afgraensningen: to spalter i ét felt, samme 1px-net som .punkter.
   Venstre spalte er arceret som et udeladt felt paa en tegning, saa
   fravalget kan ses og ikke kun laeses. Rangordenen er semantisk:
   hver spalte har sin egen overskrift, og markoererne er dekoration.
   ============================================================ */
.fravalg {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.fravalg > div {
  background: var(--paper);
  padding: 26px 28px 28px;
  display: flex;
  flex-direction: column;
}

/* det udeladte felt: diskret arcering, samme vinkel som skitsepanelet.
   Skrives som .fravalg > .fravalg-ude, saa den vinder over faellesreglen
   ovenfor uden !important. */
.fravalg > .fravalg-ude {
  background:
    repeating-linear-gradient(45deg, transparent 0 9px, var(--grid-major) 9px 10px),
    var(--paper);
}
@media (prefers-color-scheme: dark) {
  .fravalg > .fravalg-ude {
    background:
      repeating-linear-gradient(45deg, transparent 0 9px, rgba(232, 232, 230, 0.06) 9px 10px),
      var(--paper);
  }
}

.fravalg h3 {
  font-size: 1.08rem;
  margin-bottom: 18px;
}

/* markoeren i det udeladte felt er en streget linje i blaek, ikke det
   rustfarvede kvadrat: feltet er maalt op, men ikke taget med. */
.specs-ude li::before {
  border: none;
  height: 1px;
  width: 11px;
  left: 3px;
  background: var(--ink-soft);
}

.fravalg .specs { margin-bottom: 22px; }

.fravalg-note {
  margin: auto 0 0;
  font-family: var(--mono);
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 46ch;
  text-wrap: pretty;
}

/* prisvilkaarene staar alene i arket uden pakkekort omkring sig, saa
   styklisten faar en laeselig bredde i stedet for hele arkets. */
.vilkaar { max-width: 52ch; }

/* grundstammen: de fire ting ethvert hus skal bruge. Den staar under det
   todelte felt og ikke inde i det, saa ude/med-kontrasten bliver ved med at
   veje 4 mod 6 og arket ikke tipper. Sat som to spalter, saa fire punkter
   fylder to raekker og ikke fire.
   Spalteskellet ligger paa 50 %, samme sted som skellet i feltet ovenover,
   og luften mellem spalterne laves med polstring i punkterne selv. Saa
   loeber styklistens streger ubrudt hen over skellet, praecis som i
   feltet. Bundlinjen tegnes af listen og ikke af sidste punkt, saa den
   ogsaa gaar hele vejen igennem uden dobbelt streg. */
.grundstamme { margin-top: 30px; }
.grundstamme h3 { font-size: 1.08rem; margin-bottom: 18px; }
.specs-grund {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: 0;
  border-bottom: 1px solid var(--line-faint);
}
.specs-grund li { padding-right: 30px; }
.specs-grund li:last-child { border-bottom: none; }

/* ============================================================
   Kontakt: vejen ud af siden.
   ============================================================ */
.kontakt-valg {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-bottom: 14px;
}

/* ============================================================
   Responsivt
   ============================================================ */
@media (max-width: 860px) {
  .fravalg { grid-template-columns: 1fr; }
  .specs-grund { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .fravalg > div { padding: 22px 20px 24px; }
  .kontakt-valg .cta { width: 100%; justify-content: space-between; }
}