/* Admin-managed client project showcase.
   Kept fully separate from the existing "header_gallery" marquee so that
   gallery's images/animation/mouse behavior are never touched. */

.client-showcase {
  background-color: var(--background-color--background-primary, #060606);
  padding: 4rem 0;
}

/* The template's own demo partner-logo wall (5four, Radial Path, Underbelly,
   etc.) sits right after this section — hidden per client request, they only
   want their own added clients shown. */
.section_logo {
  display: none !important;
}

.client-showcase_heading {
  text-align: center;
  margin-bottom: 2.5rem;
}

.client-showcase_heading h2 {
  font-family: Brockmann, Arial, sans-serif;
  color: var(--text-color--text-primary, #f0f0f0);
  font-size: 2.5rem;
  font-weight: 500;
  margin: 0 0 0.5rem;
}

.client-showcase_heading p {
  color: var(--text-color--text-secondary, #aaa);
  font-size: 1rem;
  margin: 0;
}

/* Text-link wall: 4 per row on wide screens, wraps to a new row once full.
   Flexbox (not grid) so each row — including a lone item, or a partial
   final row — is genuinely centered, not just left-aligned in a centered
   track set. */
.client-showcase_grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.75rem 3rem;
  max-width: 992px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.client-showcase_item {
  flex: 0 0 200px;
  font-family: Brockmann, Arial, sans-serif;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--text-color--text-primary, #f0f0f0);
  text-decoration: none;
  opacity: 0.8;
  transition: opacity 0.2s ease;
  text-align: center;
}

@media (max-width: 700px) {
  .client-showcase_item {
    flex-basis: 45%;
  }
}

.client-showcase_item:hover {
  opacity: 1;
  text-decoration: underline;
}

.client-showcase_empty {
  text-align: center;
  color: var(--text-color--text-secondary, #aaa);
  font-size: 0.9rem;
}