/* ═══════════════════════════════════════════════════════════════
   LWServers V2 — partners.css
   Featured creator cards (/partners grid + home strip).
   Requires base.css.
═══════════════════════════════════════════════════════════════ */

/* ── Full cards (/partners) ── */
.creator-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 10px;
}
@media (min-width: 560px) {
  .creator-grid { grid-template-columns: 1fr 1fr; }
}

.creator-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--r-lg);
  border: 1px solid var(--border-2);
  background: var(--glass-bg);
}

.creator-avatar,
.creator-avatar-fallback {
  width: 48px;
  height: 48px;
  border-radius: var(--r-md);
  flex: none;
}
.creator-avatar { object-fit: cover; border: 1px solid var(--border-2); display: block; }
.creator-avatar-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-glow-2);
  border: 1px solid var(--accent-border);
  color: var(--accent);
  font-family: var(--font-ui);
  font-size: 17px;
  font-weight: 700;
}

.creator-info { min-width: 0; flex: 1; }

.creator-name {
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 700;
  color: var(--text-1);
  display: flex;
  align-items: center;
  gap: 8px;
}
.creator-lang {
  font-family: var(--font-data);
  font-size: 9px;
  letter-spacing: 1px;
  color: var(--text-3);
  border: 1px solid var(--border-2);
  border-radius: 999px;
  padding: 1px 7px;
}
.creator-focus {
  font-size: 12px;
  color: var(--text-2);
  line-height: 1.4;
  margin-top: 2px;
}
.creator-watch { flex: none; }

/* ── Apply form (/partners) ── */
.pa-apply-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 12px;
}
.pa-apply-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 520px) {
  .pa-apply-row { grid-template-columns: 1fr 1fr; }
}
.pa-apply-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.pa-apply-label {
  font-family: var(--font-data);
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-3);
}
.pa-apply-opt { color: var(--text-3); opacity: 0.7; letter-spacing: 0.5px; }
.pa-apply-field .input { width: 100%; }
.pa-apply-form .btn { margin-top: 4px; }
.pa-apply-status {
  font-size: 13px;
  color: var(--text-2);
  min-height: 16px;
}
.pa-apply-status.is-ok  { color: var(--accent); }
.pa-apply-status.is-err { color: var(--red); }

/* ── Compact strip (home) ── */
.creator-row {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 6px;
  scrollbar-width: thin;
  scrollbar-color: var(--border-2) transparent;
}

.creator-mini {
  flex: none;
  width: 160px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 14px 10px;
  border-radius: var(--r-lg);
  border: 1px solid var(--border-2);
  background: var(--glass-bg);
  text-decoration: none;
  text-align: center;
  transition: border-color var(--t-base) var(--ease);
}
.creator-mini:hover { border-color: var(--border-3); }

.creator-mini-name {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 700;
  color: var(--text-1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.creator-mini-focus {
  font-family: var(--font-ui);
  font-size: 11px;
  line-height: 1.35;
  color: var(--text-3);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-width: 100%;
}
.creator-mini.is-open .creator-mini-focus {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}
.creator-mini-more {
  font-family: var(--font-data);
  font-size: 10px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-3);
  padding: 4px 8px;
  margin: -2px 0;
  cursor: pointer;
}
.creator-mini-more:hover { color: var(--text-2); }
.creator-mini-cta {
  font-family: var(--font-data);
  font-size: 10px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--accent);
  margin-top: auto;
}

/* ─────────────────────────────────────────────────────────────
   PARTNER SMALL PRINT + SECOND CTA
   `note` carries a partner's OWN claims (giveaways, prizes, entry
   conditions) and who is responsible for them. Deliberately readable —
   muted, not hidden — because small print that can't be read is the
   same as no small print.
───────────────────────────────────────────────────────────── */

/* --text-2, NOT --text-3: measured on the dark theme, --text-3 gives a
   2.5:1 contrast ratio against the card, under the 4.5 AA floor and
   worse than the ordinary blurb next to it (6.23). The one line on the
   card carrying someone else's prize claim must not be the hardest to
   read. --text-2 measures 6.23 here. */
.creator-note {
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-2);
  border-left: 2px solid var(--border-2);
  padding-left: 8px;
}

.creator-ctas { display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; }
.creator-watch-2 {
  background: transparent;
  border: 1px solid var(--border-2);
  color: var(--text-2);
}
.creator-watch-2:hover { color: var(--text-1); border-color: var(--border-3); }

/* On the strip this is now a POINTER to the terms, not the terms — see
   stripCard(). Small and quiet is right for a link; it was wrong for the
   disclaimer itself, which is why the full text lives on the card. */
.creator-mini-note {
  display: block;
  margin-top: 5px;
  font-family: var(--font-data);
  font-size: 9.5px;
  letter-spacing: 0.3px;
  line-height: 1.4;
  color: var(--text-3);
}

/* Narrow screens: the card must WRAP, not compress.
   It is a flex row (avatar · text · buttons). Left as a row on a phone,
   two side-by-side buttons claimed ~190px and the text column collapsed
   to ~110px — the disclaimer then rendered as a tall ribbon about three
   words wide. Now the buttons drop to their own full-width line and the
   text keeps the rest of the card. */
@media (max-width: 560px) {
  .creator-card { flex-wrap: wrap; align-items: flex-start; }
  /* basis 0, NOT auto: with auto the column starts at its content width,
     which no longer fits beside the 48px avatar, so it wrapped to its own
     line and left the avatar sitting alone above it. */
  .creator-info { flex: 1 1 0; min-width: 0; }
  .creator-ctas {
    flex: 1 1 100%;
    flex-direction: row;
    gap: 8px;
    margin-top: 2px;
  }
  .creator-ctas .creator-watch { flex: 1 1 0; }
  /* The avatar shouldn't sit half-way down a tall card.
     SCOPED to .creator-card: unscoped, this also caught the hero promo's
     avatar, and in that centred column flex-start shoved it to the left
     edge instead of centring it. */
  .creator-card > .creator-avatar,
  .creator-card > .creator-avatar-fallback { align-self: flex-start; }
}

/* Two-CTA strip card. The tile stops being one big anchor here (see
   stripCard()), so the links have to look and behave like real targets
   rather than the single flat label a one-link card uses. */
.creator-mini-ctas {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: auto;
  padding-top: 10px;
  width: 100%;
}
.creator-mini-ctas .creator-mini-cta {
  margin-top: 0;
  padding: 7px 8px;
  border-radius: var(--r-md);
  border: 1px solid var(--accent-border);
  background: var(--accent-glow-2);
  text-align: center;
  text-decoration: none;
  transition: all var(--t-fast);
}
.creator-mini-ctas .creator-mini-cta:hover { border-color: var(--accent); }
/* Secondary reads quieter than the primary but is still unmistakably a
   button — it is the survey link, and it was unreachable before. */
.creator-mini-ctas .creator-mini-cta-2 {
  color: var(--text-2);
  border-color: var(--border-2);
  background: var(--glass-bg-3);
}
.creator-mini-ctas .creator-mini-cta-2:hover { color: var(--text-1); border-color: var(--border-3); }

/* The card is a div now, so it needs the hover lift the anchor had. */
.creator-mini-multi { cursor: default; }

/* Let each tile take its own height. The row is flex, so it defaulted to
   `stretch` and ONE long disclaimer dragged every sibling to 444px —
   including partners with two lines of text. Ragged bottoms in a
   horizontal scroller are the better trade than three tiles of dead
   space, and it means a long note costs only its own card. Tiles stay
   uniform in practice because the hero partner's tile is kept plain (see
   stripCard()), so the offer/terms never bloat one card past the rest. */
.creator-row { align-items: flex-start; }

/* ─────────────────────────────────────────────────────────────
   HEADLINE OFFER — the hook (giveaway, prize, drop)
   Gold and loud: this is the reason someone clicks, and it was
   previously buried inside the grey small print where nobody read it.
   The "by <partner>" line is part of the badge, not a footnote, so
   making it prominent never makes it read as an LWServers offer.
───────────────────────────────────────────────────────────── */

.creator-offer {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin-top: 7px;
}

.creator-offer-tag {
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.2px;
  padding: 5px 11px;
  border-radius: 999px;
  color: #1c1204;
  background: linear-gradient(120deg, #ffd98a, #f0b445);
  border: 1px solid rgba(240, 180, 69, 0.7);
  box-shadow: 0 4px 14px rgba(240, 180, 69, 0.22);
}

.creator-offer-by {
  font-family: var(--font-data);
  font-size: 10px;
  letter-spacing: 0.4px;
  color: var(--text-3);
}

/* Landing strip */
.creator-mini-offer {
  display: block;
  margin-top: 6px;
  font-family: var(--font-ui);
  font-size: 11.5px;
  font-weight: 800;
  line-height: 1.3;
  padding: 5px 8px;
  border-radius: var(--r-md);
  color: #1c1204;
  background: linear-gradient(120deg, #ffd98a, #f0b445);
}