/* ============================================================
   CAPELY: creator partners

   Four partnered channels, Blissolic always first since it is the owner's own
   account. Subscriber counts are a real, dated measurement (source and date
   are recorded in the HTML comment in sections/06-creators.html), not a live
   figure, so the markup only ever prints a plain static number, never a
   counter, a "live" label or an animation.

   Rebuilt 2026-08-31 on the owner's brief: simplycapes.com's partner row, but
   in Capely's own type and colour. What was taken from it is the SHAPE - a
   circle-cropped avatar with a ring, a name, a subscriber line, and nothing
   else. What was dropped is the card: a bordered panel around four portraits
   fought with the portraits' own rings and made the row read as four more
   product tiles. These are people, so they are just a face and a name on the
   page, and the only chrome is the ring and the light behind it.

   The eyebrow went too. The heading already says "Partnered with Minecraft
   creators"; a "Creator partners" label above it said the same thing twice.
   ============================================================ */

.creators-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(14px, 2.2vw, 28px);
  max-width: 880px;
  margin: 0 auto;
}

/* Stays 2-across all the way to 320px on purpose. Four single-file
   rows would read as a plain list, not a lineup of partners. */
@media (max-width: 640px) {
  .creators-grid { grid-template-columns: repeat(2, 1fr); }
}

.creator {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 2px;
  padding: 8px 4px;
  color: inherit;
  text-decoration: none;
}

.creator-avatar {
  display: block;
  width: clamp(92px, 21vw, 128px);
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  margin-bottom: 16px;
  /* Ring and glow in one property. Two inset-free shadows: a hairline ring
     hugging the crop, then a wide, soft mint bloom with a negative spread so
     the light sits close to the circle instead of washing the row. Both
     colours are tokens (css/theme.css), never literals. */
  box-shadow:
    0 0 0 2px var(--accent-line),
    0 10px 34px -14px var(--glow-mint);
  transition:
    transform var(--t) var(--e-out),
    box-shadow var(--t) var(--e-out);
}
.creator-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The whole tile is one link, so the hover state has to be one movement:
   the portrait rises and its light comes up with it, and the name takes the
   accent. Nothing else moves. */
.creator:hover .creator-avatar,
.creator:focus-visible .creator-avatar {
  transform: translateY(-5px);
  box-shadow:
    0 0 0 2px var(--accent),
    0 16px 44px -12px var(--glow-mint);
}

.creator-name {
  font-family: 'Outfit', sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text);
  overflow-wrap: anywhere;
  transition: color var(--t-fast);
}
.creator:hover .creator-name,
.creator:focus-visible .creator-name { color: var(--accent); }

.creator-subs {
  color: var(--text-mute);
  font-size: 13px;
  line-height: 1.4;
}

@media (prefers-reduced-motion: reduce) {
  .creator-avatar { transition: box-shadow var(--t-fast); }
  .creator:hover .creator-avatar,
  .creator:focus-visible .creator-avatar { transform: none; }
}