/* ============================================================
   08 - FEATURED CREATORS  (slug: partners)

   Four equal cards. ONE action each: the channel, or the server.

   Pass 4 is a contrast and density pass. The cards sat on
   --surface, which is white at 3.2%: against the page background
   that is close enough to nothing that three cards read as three
   floating text blocks rather than three objects, and the section
   looked unfinished next to the pricing tiers above it. They now
   sit on a near-solid panel with a faint accent wash falling off
   the top edge, which is the same baby blue the rest of the page
   is built from, so the surface reads as part of the theme rather
   than as generic grey transparency.

   Text was cut in the same pass: the per-creator focus tag (only
   one of the three had one, so the row never lined up) and the
   "Watch on" half of the button label are gone. What is left is
   who, how big, and where to find them.

   FOUR cards now, not three: the Ranked Bedwars Discord joined the
   three YouTube channels. Four across at 1040px leaves each cell
   about 246px, which is tight for a 56px avatar beside a name and
   a handle, so at 4-up the avatar and the type step down a notch.
   Everything else is shared, because a server and a channel should
   read as the same kind of object here.

   Prefix: .partners-
   ============================================================ */

/* ---------- head ----------
   A single centred title. The right-hand scope label was removed on request,
   and a left-edge title with nothing opposite it read as half a bar. No
   eyebrow and no sub here, so this is still not the full centred stamp that
   the middle of the page deliberately avoids.

   The bottom gap is the shared head gap, clamp(28px, 3.2vw, 40px), quoted
   rather than inherited because this is not a .section-head. If that number
   ever changes in site.css, change it here too. */
.partners-head {
  text-align: center;
  margin-bottom: clamp(28px, 3.2vw, 40px);
}
.partners-title { margin-inline: auto; max-width: 24ch; }

.partners-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.3vw, 15px);
}

/* ---------- card ----------
   Two layers: an accent wash that fades out by 45% of the height, over a
   near-opaque base. The base is what stops the card reading as a hole in the
   page; the wash is what stops it reading as a grey box. */
.partners-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px 18px;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-lg);
  background:
    linear-gradient(180deg, rgba(122,197,240,.055) 0%, rgba(122,197,240,0) 45%),
    rgba(13, 18, 28, .92);
  transition: border-color var(--t) var(--e-out), background var(--t) var(--e-out);
}
.partners-card:hover {
  border-color: rgba(122,197,240,.34);
  background:
    linear-gradient(180deg, rgba(122,197,240,.085) 0%, rgba(122,197,240,0) 45%),
    rgba(16, 22, 34, .95);
}

/* ---------- avatar + identity ---------- */
.partners-top {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
}

/* The image IS the circle. There is no wrapper span with a grey fill behind
   it any more: that fill is exactly what showed as an "empty grey circle"
   whenever the picture had not loaded. If a picture ever fails now, the alt
   text shows instead of a silent blank.

   The ring is a box-shadow rather than a second border so it sits outside the
   circle without changing its size, and it ties four avatars of four very
   different colours back to the page's accent. */
.partners-avatar {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--bg-2);
  border: 1px solid rgba(122,197,240,.28);
  box-shadow: 0 0 0 3px rgba(122,197,240,.07);
  font-size: 11px;          /* only ever seen if the file fails to decode */
  color: var(--text-mute);
}

.partners-id { min-width: 0; }
/* Wraps rather than truncating. "Ranked Bedwars" is two words and a 246px cell
   cannot hold it on one line beside an avatar; an ellipsis on a partner's name
   is worse than a second line. */
.partners-name {
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--text);
  overflow-wrap: break-word;
}
.partners-handle {
  display: inline-block;
  margin-top: 3px;
  max-width: 100%;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-mute);
  overflow-wrap: break-word;
  transition: color var(--t);
}
.partners-handle:hover { color: var(--accent); }

/* ---------- meta line: subscribers, or members ----------
   Instrument face, tabular, so four counts of different widths still line up
   across the row. */
.partners-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
}
.partners-subs { display: inline-flex; align-items: baseline; gap: 7px; white-space: nowrap; }
.partners-subs-n {
  font-family: var(--font-price);
  font-variant-numeric: tabular-nums;
  font-size: 14.5px; font-weight: 600; letter-spacing: -0.01em;
  color: var(--text);
}
.partners-subs-l { font-size: 12.5px; font-weight: 500; color: var(--text-mute); }

/* ---------- action: pinned to the card foot so all four line up ---------- */
.partners-actions {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--hairline);
}
/* Not .btn-ghost: on the new solid card a transparent button with a hairline
   was the third nested rectangle in 60px. This is a quiet filled control that
   picks up the accent on hover instead. */
.partners-watch {
  display: flex;
  width: 100%;
  gap: 8px;
  padding: 9px 12px;
  font-size: 13px;
  color: var(--text);
  background: rgba(255,255,255,.055);
  border: 1px solid transparent;
  transition: background var(--t) var(--e-out), color var(--t) var(--e-out), border-color var(--t) var(--e-out);
}
.partners-watch:hover {
  color: var(--blue-200);
  background: rgba(122,197,240,.12);
  border-color: rgba(122,197,240,.30);
}
.partners-watch svg { width: 17px; height: 17px; flex: 0 0 auto; }

/* ---------- responsive ----------
   Four across is too narrow below about 940px, so it halves to 2-up and the
   avatar and type step back up. Four is an even count, so 2-up needs no
   odd-card-out rule: the row never ends ragged on its own. */
@media (max-width: 940px) {
  .partners-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .partners-card { padding: 22px 20px; }
  .partners-avatar { width: 52px; height: 52px; }
  .partners-name { font-size: 17px; }
  .partners-handle { font-size: 13px; }
}
@media (max-width: 560px) {
  .partners-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .partners-card, .partners-watch { transition: none; }
}

/* .partners-note and .partners-scope are both gone. The note was a centred
   closing line under the cards reading "Partnered with people you trust",
   which is the section's actual claim and is now its heading. The scope label
   ("Competitive Minecraft, 1.8.9 PvP and Bedwars") was removed on request. */