/* Generische Icon-Liste in Spalten — ein Item pro Shortcode-Zeile, jedes
   mit Icon davor (Default: gefülltes Häkchen). Für Checklisten aller Art:
   Fahrzeug-Ausstattung, Leistungsumfang, Inklusive-Punkte, …
   (Format siehe IconListComponent). */
/* Section-Modus: der Standard-SectionHeader über dem Widget, beides auf
   Containerbreite. Vertikaler Rhythmus aus .d35-section, dunkles Band aus
   .d35-section-dark — gleiches Muster wie die VehicleSpecs-Section. */
.d35-icon-list-section__inner {
  width: min(100%, var(--d35-container));
  margin-inline: auto;
  padding-inline: var(--d35-gap);
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 2rem);
}

/* Das Widget ist eine Karte im Look des SectionHeaders — auch auf dem
   dunklen Band bleibt die Liste so auf heller Fläche lesbar. */
.d35-icon-list {
  border: 1px solid var(--d35-color-border);
  border-radius: var(--d35-radius);
  background: var(--d35-color-surface);
  padding: clamp(1.25rem, 3vw, 2rem);
}

/* auto-fill statt fester Spaltenzahl: die Liste trägt 5 wie 50 Items —
   Spaltenzahl wächst mit der Breite, Reihenfolge bleibt zeilenweise
   lesbar (kein CSS-columns-Umbruch mitten im Item). */
.d35-icon-list__items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
  gap: clamp(0.6rem, 1.5vw, 0.9rem) clamp(1rem, 3vw, 2rem);
}

.d35-icon-list__item {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  min-width: 0;
}

/* Icon in der Primary-Farbe als Akzent; an der ersten Textzeile
   ausgerichtet, damit zweizeilige Items nicht kippen. */
.d35-icon-list__icon {
  display: inline-flex;
  flex: 0 0 auto;
  color: var(--d35-color-primary, #000);
  margin-top: 0.15em;
}

.d35-icon-list__icon-svg {
  width: 1.25rem;
  height: 1.25rem;
}

.d35-icon-list__text {
  color: var(--d35-color-text, #000);
  line-height: 1.5;
  overflow-wrap: anywhere;
}

/* Dark variant: durchscheinende Kartenfläche + weiße Icons und gedämpfter
   Text (#fff 78%) statt der weißen Fläche — identischer Look wie die
   Feature-Showcase-Karten, damit die Fahrzeug-Sections auf dem dunklen Band
   einheitlich wirken. */
.d35-icon-list-section--dark .d35-icon-list {
  background: color-mix(in srgb, #fff 6%, transparent);
  border-color: color-mix(in srgb, #fff 28%, transparent);
}

.d35-icon-list-section--dark .d35-icon-list__icon {
  color: #fff;
}

.d35-icon-list-section--dark .d35-icon-list__text {
  color: color-mix(in srgb, #fff 78%, transparent);
}