/*
  Icon list: facts with an icon each, e.g. date, time and place. Rules: zoznam-s-ikonami.html.

  <ul class="icon-list"><li><svg class="icon" viewBox="0 -960 960 960" aria-hidden="true">…</svg>Sobota 3. 10. 2026</li></ul>

  - Icon 28 px next to body text. .icon-list--small: small muted text with 24 px icons, e.g. in a card.
  - The icon aligns with the first line; wrapped lines start under the text, not under the icon.
  - Use the icons from the common list on ikony.html (calendar_month, schedule, location_on, call, mail…).
*/

.icon-list {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.icon-list > li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
}

.icon-list--small {
  gap: var(--space-1);
  font-size: var(--font-size-small);
  color: var(--fg-muted-neutral);
}

/* Muted grey is only for white and sand; on a strong background the list keeps the background's text colour */
:where(.bg-strong-green, .bg-strong-blue, .bg-strong-yellow, .bg-strong-red, .bg-strong-neutral) .icon-list--small {
  color: inherit;
}

.icon-list--small .icon {
  width: var(--icon-size-small);
  height: var(--icon-size-small);
}