/* Wall of Fame: lichtkrant met lezers, strook met gezichten en de volledige muur. */

.fame {
  background: var(--night-950);
  overflow: hidden;
}

.fame__count {
  margin-bottom: var(--space-l);
  font-size: var(--step-1);
  color: var(--paper-dim);
}

.fame__count strong {
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 120%;
  color: var(--paper);
}

/* ---------- Lichtkrant ---------- */

.marquee {
  display: grid;
  gap: 4px;
  max-width: none;
  margin-inline: calc(-1 * var(--gutter));
  padding: 14px 0;
  background:
    radial-gradient(circle at center, oklch(0.2 0.03 40) 0 1px, transparent 1.5px) 0 0 / 5px 5px,
    oklch(0.09 0.02 30);
  box-shadow: inset 0 12px 20px -12px oklch(0 0 0), inset 0 -12px 20px -12px oklch(0 0 0);
}

.marquee__row {
  display: flex;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.marquee__track {
  display: flex;
  flex: none;
  gap: 2.5rem;
  padding-right: 2.5rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 120%;
  font-size: clamp(1.3rem, 1rem + 1.4vw, 2.2rem);
  line-height: 1.35;
  white-space: nowrap;
  color: var(--amber);
  text-shadow: 0 0 6px var(--amber), 0 0 22px oklch(0.85 0.15 78 / 0.5);
}

.marquee__track li span {
  margin-left: 0.6rem;
  font-weight: 500;
  font-stretch: 70%;
  font-size: 0.55em;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sunset);
  text-shadow: 0 0 10px oklch(0.72 0.19 40 / 0.6);
  vertical-align: 0.35em;
}

.marquee__row--2 .marquee__track {
  color: var(--sunset);
  text-shadow: 0 0 6px var(--sunset), 0 0 22px oklch(0.72 0.19 40 / 0.5);
}

.marquee__row--2 .marquee__track li span {
  color: var(--amber);
}

.js-motion .marquee__track {
  animation: marquee 140s linear infinite;
}

.js-motion .marquee__row--2 .marquee__track {
  animation-duration: 170s;
  animation-direction: reverse;
}

.js-motion .marquee__row--3 .marquee__track {
  animation-duration: 120s;
}

.marquee:hover .marquee__track {
  animation-play-state: paused;
}

@keyframes marquee {
  to {
    transform: translateX(-100%);
  }
}

/* ---------- Gezichten ---------- */

.faces {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 6px;
  margin-top: var(--space-l);
}

.faces__item img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius-s);
  filter: grayscale(1) contrast(1.1) brightness(0.8);
  transition: filter var(--duration-slow) var(--ease-out);
}

.faces__item:hover img {
  filter: none;
}

.fame__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-s) var(--space-l);
  margin-top: var(--space-l);
}

/* ---------- Volledige muur ---------- */

.wall {
  padding-top: calc(var(--header-height) + var(--space-xl));
}

.wall__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr));
  gap: var(--space-m) var(--space-s);
}

.wall__reader {
  display: grid;
  gap: 0.6rem;
}

.wall__reader img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius-m);
  background: var(--night-800);
}

.wall__name {
  display: grid;
  font-weight: 600;
  line-height: 1.3;
}

.wall__name span {
  font-family: var(--font-display);
  font-stretch: 70%;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sunset);
}

/* ---------- Responsief ---------- */

@media (max-width: 980px) {
  .faces {
    grid-template-columns: repeat(6, 1fr);
  }

  .faces__item:nth-child(n + 13) {
    display: none;
  }
}

@media (max-width: 640px) {
  .faces {
    grid-template-columns: repeat(4, 1fr);
  }

  .faces__item:nth-child(n + 9) {
    display: none;
  }
}

@media (max-width: 420px) {
  .faces {
    grid-template-columns: repeat(3, 1fr);
  }

  .faces__item:nth-child(n + 7) {
    display: none;
  }

  .wall__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}