/* Feature / benefits overview: a SectionHeader beside (split, default) or above
   (stacked) a grid of icon feature cards. Composes SectionHeader + CardIcon.
   Vertical rhythm comes from the shared .d35-section utility; the dark band from
   .d35-section-dark. */
.d35-feature-showcase__inner {
  width: min(100%, var(--d35-container));
  margin-inline: auto;
  padding-inline: var(--d35-gap);
  display: grid;
  gap: clamp(1.75rem, 4vw, 3rem);
}

/* Split: the header sits in its own (narrower) column next to the grid. */
.d35-feature-showcase--layout-split .d35-feature-showcase__inner {
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  align-items: start;
  gap: clamp(2rem, 5vw, 4.5rem);
}

.d35-feature-showcase__header {
  min-width: 0;
}

/* stretch: with a visible card surface, uneven heights per row look ragged. */
.d35-feature-showcase__grid {
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 2rem);
  align-items: stretch;
}

.d35-feature-showcase__grid--cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.d35-feature-showcase__grid--cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.d35-feature-showcase__grid--cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Feature cards sit on their own card surface (matching the SectionHeader
   card), icon stacked on top and everything left-aligned, regardless of the
   CardIcon default layout. The icon sits in a primary-tinted square. */
.d35-feature-showcase .d35-card-icon {
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.5rem;
  background: var(--d35-color-surface);
  border: 1px solid var(--d35-color-border);
  border-radius: var(--d35-radius);
  text-align: left;
}

.d35-feature-showcase .d35-card-icon__content {
  align-items: flex-start;
  text-align: left;
  gap: 0.5rem;
}

.d35-feature-showcase .d35-card-icon__icon {
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid color-mix(in srgb, var(--d35-color-primary) 30%, transparent);
  border-radius: var(--d35-radius);
  background: color-mix(in srgb, var(--d35-color-primary) 10%, transparent);
  color: var(--d35-color-primary);
}

/* Marken-Logo-Karten (name="brand:<slug>"): gleicher getönter, gerundeter
   Rahmen wie die Phosphor-Icons — Primärfarbe, Tint und Rand kommen aus der
   Basis-Regel oben, hier wird der Kasten nur auf Logo-Breite gezogen. Das
   mono-Logo folgt currentColor → dieselbe Primärfarbe wie die Icons. */
.d35-feature-showcase .d35-card-icon--brand .d35-card-icon__icon {
  width: auto;
  min-width: 2.75rem;
  height: 2.75rem;
  padding: 0 0.55rem;
}

/* Breite Wortmarken (ISUZU, Cadillac, Chevrolet) per max-width begrenzen,
   damit der Kasten nicht ausbricht; schmale Embleme (Opel, NIO) cappen über
   die Höhe. Uniform skaliert (SVG-viewBox), daher keine Verzerrung. */
.d35-feature-showcase .d35-card-icon--brand .d35-card-icon__brand svg {
  width: auto;
  height: auto;
  max-height: 1.5rem;
  max-width: 7rem;
}

.d35-feature-showcase .d35-card-icon__heading {
  font-size: clamp(1.125rem, 1.6vw, 1.375rem);
}

.d35-feature-showcase .d35-card-icon__text {
  color: var(--d35-color-muted);
}

/* Lange Wörter (z. B. „Leasingmodelle,“) dürfen neben dem Grid umbrechen.
   Die frühere Größenreduktion ist in die globale SectionHeader-Skala
   gewandert — ein eigener Wert hier würde sie inzwischen vergrößern. */
.d35-feature-showcase .d35-section-header__heading {
  overflow-wrap: anywhere;
  hyphens: auto;
}

/* Dark variant: translucent card surface plus recoloured icon frame and text
   so the cards stay readable on the dark band. The primary-tinted icon would
   drown on dark, so it stays white there. */
.d35-feature-showcase--dark .d35-card-icon {
  background: color-mix(in srgb, #fff 6%, transparent);
  border-color: color-mix(in srgb, #fff 28%, transparent);
}

.d35-feature-showcase--dark .d35-card-icon,
.d35-feature-showcase--dark .d35-card-icon__heading {
  color: #fff;
}

.d35-feature-showcase--dark .d35-card-icon__icon {
  border-color: color-mix(in srgb, #fff 28%, transparent);
  background: color-mix(in srgb, #fff 10%, transparent);
  color: #fff;
}

.d35-feature-showcase--dark .d35-card-icon__text {
  color: color-mix(in srgb, #fff 78%, transparent);
}

@media (max-width: 1024px) {
  .d35-feature-showcase--layout-split .d35-feature-showcase__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(1.75rem, 4vw, 3rem);
  }

  .d35-feature-showcase__grid--cols-3,
  .d35-feature-showcase__grid--cols-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .d35-feature-showcase__grid--cols-2,
  .d35-feature-showcase__grid--cols-3,
  .d35-feature-showcase__grid--cols-4 {
    grid-template-columns: minmax(0, 1fr);
  }
}