/* Laag: framework. De rangorde staat in skeleton/templates/page.php:
 *   @layer framework, site, theme, type, item;
 * Alles wat het framework meestuurt zit in de onderste laag, zodat site-CSS en CMS-opmaak
 * ervan winnen zonder specificiteits-trucs. Binnen deze laag telt specificiteit gewoon, dus
 * de onderlinge verhouding tussen framework-bestanden verandert er niet door.
 *
 * Een bestand dat deze wikkel MIST staat buiten elke laag en wint daarmee van ALLES —
 * ook van het CMS. `tests/Framework/CodeStyle/ModuleCssIsLayeredTest.php` bewaakt dat. */
@layer framework {
/* Generieke opmaak voor opsommingen in tekstlagen en modulekolommen. */
.layer--text-enumerations {
  margin-block: var(--space-3, .75rem);
}

.layer--text-enumerations__intro {
  margin-block-end: var(--space-3, .75rem);
}

.layer--text-enumerations .enumerations {
  display: grid;
  grid-template-columns: 1fr;
  column-gap: var(--enum-col-gap, var(--space-3, .75rem));
  row-gap: var(--enum-row-gap, var(--space-2, .5rem));
  margin-block-start: var(--space-3, .75rem);
}

.layer--text-enumerations .enumeration {
  display: flex;
  align-items: flex-start;
  column-gap: .6em;
}

/* Format 1 centreert het icoon op de eerste titelregel. Formats 2 en 3
 * gebruiken respectievelijk de titel- en teksthoogte als uitlijningspunt. */
.layer--text-enumerations .enumerations[data-format="1"] .enumeration__media {
  margin-block-start: .125em;
}

.layer--text-enumerations .enumerations[data-format="2"] .enumeration {
  align-items: center;
}

.layer--text-enumerations .enumerations[data-format="3"] .enumeration__media {
  align-self: center;
}

.layer--text-enumerations .enumeration__media {
  display: flex;
  flex: 0 0 var(--enum-icon-size, 2rem);
  width: var(--enum-icon-size, 2rem);
  max-width: 100%;
  color: var(--theme-color-1, currentColor);
}

.layer--text-enumerations .enumeration__media .media,
.layer--text-enumerations .enumeration__media svg {
  display: block;
  width: 100%;
  height: auto;
}

.layer--text-enumerations .enumeration__media svg {
  fill: currentColor;
}

.layer--text-enumerations .enumeration__body {
  min-width: 0;
}

.layer--text-enumerations .enumeration__title {
  font-weight: 600;
}

.layer--text-enumerations .enumeration__subtitle {
  color: var(--muted, var(--color-fg-muted, currentColor));
  font-size: .9em;
}

.layer--text-enumerations .enumeration__text {
  margin-block-start: .25em;
}

.layer--text-enumerations .enumeration__link {
  margin-block-start: .5em;
}

.layer--text-enumerations .enumeration-table {
  width: 100%;
  border-collapse: collapse;
  margin-block-start: var(--space-3, .75rem);
}

.layer--text-enumerations .enumeration-table td {
  padding: .4rem .5rem;
  vertical-align: top;
  border-bottom: 1px solid var(--line, var(--color-border, #e2e8f0));
}

.layer--text-enumerations .enumeration-table tr:last-child td {
  border-bottom: 0;
}

@media (max-width: 40rem) {
  .layer--text-enumerations .enumerations[data-format] {
    grid-template-columns: 1fr;
  }
}
}