/* Dynamisch aankoopsysteem: the intro on the home page (/) and its own page (/dynamisch-aankoopsysteem) --- */

/* The intro under the welcome card: copy with a link, and three facts. */
.das-intro {
  display: grid;
  gap: 1.5rem;
  padding: 1.5rem;
  border: 1px solid var(--civios-sage);
  border-left: 6px solid var(--civios-gold);
  border-radius: var(--civios-r-2xl);
  background: linear-gradient(150deg, var(--civios-sage-soft), #DCE6DF);
  color: var(--civios-teal);
}
.das-intro-tekst { display: grid; gap: .625rem; justify-items: start; }
.das-intro-titel { font-family: var(--civios-font-display); font-size: 1.375rem; font-weight: 700; line-height: 1.2; }
.das-intro-uitleg { max-width: 44rem; color: var(--civios-tekst); }
.das-intro-link { margin-top: .25rem; }
.das-intro-feiten { display: grid; gap: .625rem; align-content: center; }
.das-intro-feiten li { display: flex; align-items: center; gap: .75rem; padding: .625rem .875rem; border-radius: var(--civios-r-lg); background: var(--civios-wit); font-size: .875rem; color: var(--civios-tekst); }
.das-intro-feiten .bi { font-size: 1.125rem; color: var(--civios-teal); }
.das-intro-feiten strong { color: var(--civios-teal); }

/* The page: sections in the main column, a summary and contact in the side column. */
.das-hoofd { display: grid; gap: 2rem; min-width: 0; }
.das-sectie.civios-kaart { gap: .875rem; }
.das-sectie.civios-kaart p { line-height: 1.65; }

/* The steps of a purchase: numbered, the bestuur's own steps marked in gold. */
.das-stappen { margin-top: 1rem; display: grid; gap: .75rem; }
.das-stap { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); gap: 1rem; align-items: start; padding: 1rem 1.25rem; border: 1px solid var(--civios-line); border-radius: var(--civios-r-xl); background: var(--civios-wit); }
.das-stap > div { display: grid; gap: .25rem; }
.das-stap-nummer { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: var(--civios-r-lg); background: var(--civios-sage-soft); color: var(--civios-teal); font-family: var(--civios-font-mono); font-weight: 600; }
.das-stap.is-bestuur .das-stap-nummer { background: var(--civios-gold); color: var(--civios-deep); }

.das-voorwaarden { margin-top: 1rem; display: grid; gap: 1rem; }
.das-voorwaarden .civios-kaart { gap: .5rem; padding: 1.25rem; }

/* Beperkte waarde and DAS side by side. */
.das-vergelijking { margin-top: 1rem; display: grid; gap: 1rem; }
.das-vergelijking .civios-kaart { gap: .5rem; padding: 1.25rem; }
.das-vergelijking .civios-kaart.is-das { border-color: var(--civios-teal); }
.das-lijst { margin-top: .25rem; display: grid; gap: .5rem; padding-left: 1.125rem; list-style: disc; font-size: .875rem; }
.das-lijst li::marker { color: var(--civios-teal-mid); }

/* The history: a line with a dot per moment; today is gold. */
.das-tijdlijn { margin-top: 1rem; display: grid; gap: 1.25rem; padding-left: 1.5rem; border-left: 2px solid var(--civios-sage); }
.das-tijdlijn li { position: relative; display: grid; gap: .25rem; }
.das-tijdlijn li::before { content: ""; position: absolute; left: calc(-1.5rem - 7px); top: .25rem; width: 12px; height: 12px; border-radius: 50%; background: var(--civios-teal); }
.das-tijdlijn li.is-vandaag::before { border: 2px solid var(--civios-teal); background: var(--civios-gold); }
.das-tijdlijn-jaar { font-family: var(--civios-font-mono); font-size: .8125rem; font-weight: 600; color: var(--civios-teal); }

.das-disclaimer { font-style: italic; }

.das-zijkolom .civios-kaart { gap: .75rem; }
.das-cijfers { display: grid; }
.das-cijfers div { display: flex; justify-content: space-between; gap: 1rem; padding-block: .625rem; font-size: .875rem; }
.das-cijfers div + div { border-top: 1px solid var(--civios-line); }
.das-cijfers dt { color: var(--civios-muted); }
.das-cijfers dd { font-weight: 700; color: var(--civios-teal); text-align: right; white-space: nowrap; }

@media (min-width: 640px) {
  .das-voorwaarden, .das-vergelijking { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .das-intro { grid-template-columns: minmax(0, 1fr) 20rem; align-items: center; padding: 2rem; }
  .das-zijkolom { position: sticky; top: 1.5rem; }
}