/* ============================================================
   TEKST, MÆRKER OG KORT — blokken digirehab/model
   Label, H2 og tekst; overskrift og grønne mærker med flueben; op til tre
   spørgsmål med svar, hver med en tynd streg over. Lys baggrund.
   ============================================================ */

.model-section {
  background-color: var(--color-bg-card);
}

.model-section__inner {
  padding: var(--space-3xl);
}

.model-section__header {
  max-width: 1000px;
  /* Samme luft mellem grupperne som sektionens kant, så hver gruppe står for sig */
  margin-bottom: var(--space-3xl);
}

.model-section__heading {
  margin-bottom: var(--space-lg);
}

.model-section__text {
  max-width: var(--max-width-text);
  color: var(--color-text-secondary);
}

/* ── Mærkerne (fx hvad partneren betaler for) ──
   Uden ramme: overskrift og en række grønne mærker med lysegrønne flueben.
   Kontrast: hvid tekst på grøn 8:1, lysegrønt flueben 3,1:1 (krav for ikoner: 3:1). */
.model-box {
  margin-bottom: var(--space-3xl);
}

.model-box__heading {
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-h4);
  margin-bottom: var(--space-md);
}

.model-box__badges {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm-plus);
}

.model-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm-plus) var(--space-lg) var(--space-sm-plus) var(--space-md);
  background-color: var(--color-primary);
  border-radius: var(--radius-pill);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-medium);
  line-height: 1.3;
  color: var(--color-text-white);
}

.model-badge svg,
.model-badge .digirehab-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  stroke-width: 2.25;
  color: var(--color-primary-light);
}

/* ── Spørgsmålskortene ── */
.model-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-xl) var(--space-2xl);
}

.model-cards--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.model-cards--1 {
  grid-template-columns: minmax(0, 1fr);
}

/* Uden ramme: en tynd streg over hvert spørgsmål, som fluebenslisten i Forløb */
.model-card {
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-lg);
}

.model-card__title {
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-h4);
  margin-bottom: var(--space-sm);
}

.model-card__text {
  color: var(--color-text-secondary);
}


@media (max-width: 1024px) {
  .model-section__inner {
    padding: var(--space-3xl) var(--space-xl);
  }

  .model-cards,
  .model-cards--2 {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 640px) {
  .model-section__inner {
    padding: var(--space-2xl) var(--space-xl);
  }

  .model-section__header,
  .model-box {
    margin-bottom: var(--space-2xl);
  }

  /* Lidt mindre mærker, så de længste står på én linje. Brydes et alligevel
     (smalle telefoner), får det blødere hjørner end en kapsel */
  .model-badge {
    padding: var(--space-sm-plus) var(--space-md);
    font-size: 15px;
    border-radius: var(--radius-md);
  }

  .model-badge svg,
  .model-badge .digirehab-icon {
    width: 18px;
    height: 18px;
  }
}