/* Curated card showcase: a centered SectionHeader above a grid of hand-picked
   CardPost items, with an optional footer button. Composes SectionHeader +
   CardPost + Button. Vertical rhythm comes from the shared .d35-section utility;
   the dark band from .d35-section-dark. */
.d35-card-showcase__inner {
  width: min(100%, var(--d35-container));
  margin-inline: auto;
  padding-inline: var(--d35-gap);
  display: grid;
  gap: clamp(1.75rem, 4vw, 3rem);
}

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

.d35-card-showcase__grid {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: start;
}

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

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

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

.d35-card-showcase__footer {
  display: flex;
  justify-content: center;
}

/* In the dark variant, non-overlay cards would merge into the section; render
   them light (white surface, dark text), mirroring the dark slider showcase.
   Overlay cards keep their own image + white-on-scrim treatment. */
.d35-card-showcase--dark .d35-card-post:not(.d35-card-post--layout-overlay) {
  background: var(--d35-color-surface);
  color: var(--d35-color-text);
}

.d35-card-showcase--dark
  .d35-card-post:not(.d35-card-post--layout-overlay)
  .d35-card-post__preheading,
.d35-card-showcase--dark
  .d35-card-post:not(.d35-card-post--layout-overlay)
  .d35-card-post__hint {
  color: color-mix(in srgb, var(--d35-color-text) 62%, transparent);
}

.d35-card-showcase--dark
  .d35-card-post:not(.d35-card-post--layout-overlay)
  .d35-card-post__body {
  color: color-mix(in srgb, var(--d35-color-text) 82%, transparent);
}

.d35-card-showcase--dark
  .d35-card-post:not(.d35-card-post--layout-overlay)
  .d35-card-post__footer {
  border-top-color: color-mix(in srgb, var(--d35-color-text) 12%, transparent);
}

/* 4 Spalten stufen früher herunter, damit die Karten nicht zu schmal werden. */
@media (max-width: 1200px) {
  .d35-card-showcase__grid--cols-4 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

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

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