/* ===========================================================================
   CleverScores — Transfer Centre
   assets/transfers/tc.css

   AUTHENTIC design system for /transfers. Gold-on-black, self-contained.

   Do NOT graft the cyan CleverScores base CSS into this file. That mistake
   cost three attempts on /mlb (see system map, 2026-07-04 handoff). The nav
   bar is the ONLY shared chrome; everything below it is this file's world.

   Cyan (--tc-cyan) appears in exactly one place: the nav bar. It has no
   other job here.
   =========================================================================== */

/* ---------- tokens ------------------------------------------------------- */
:root{
  /* surfaces — warm-shifted blacks, never pure #000 */
  --tc-ink:      #07070a;
  --tc-panel:    #0e0e13;
  --tc-panel-2:  #14141c;
  --tc-raise:    #1b1b24;

  /* the one accent that carries meaning */
  --tc-gold:     #f4b52a;
  --tc-gold-hi:  #ffd977;
  --tc-gold-lo:  #8a6413;

  /* section accents.
     Gold is the default and it means CONFIRMED sitewide (Golden Boot leader,
     ELO 2000+). Hot Moves is the ONE departure — it earns the heat. Free and
     Expiring go slate to read as quieter, curated lists.
     There is deliberately no green: the Confirmed art already carries it, and
     a green chip on a gold page is a second accent doing the first one's job. */
  --tc-heat:     #ff7a1a;   /* Hot Moves only  */
  --tc-slate:    #7d8595;   /* Free / Expiring */

  /* nav only */
  --tc-cyan:     #2ea8ff;

  --tc-white:    #f4f2ec;
  --tc-text:     #cdcbd3;
  --tc-mute:     #85838f;
  --tc-line:     rgba(244,181,42,.14);
  --tc-line-2:   rgba(255,255,255,.07);

  --tc-shadow:   0 24px 60px -20px rgba(0,0,0,.9);
  --tc-r:        14px;

  --tc-display:  'Archivo', system-ui, sans-serif;
  --tc-body:     'Inter', system-ui, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }

body.tc{
  margin:0;
  background:var(--tc-ink);
  color:var(--tc-text);
  font-family:var(--tc-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

/* ambient: a single warm bloom behind the fold. One effect, not five. */
body.tc::before{
  content:'';
  position:fixed; inset:0 0 auto 0; height:70vh;
  background:radial-gradient(120% 80% at 50% 0%, rgba(244,181,42,.10), transparent 62%);
  pointer-events:none; z-index:0;
}

.tc-wrap{ position:relative; z-index:1; max-width:1180px; margin:0 auto; padding:0 20px; }

a{ color:var(--tc-gold); text-decoration:none; }
a:focus-visible,button:focus-visible{
  outline:2px solid var(--tc-gold); outline-offset:3px; border-radius:4px;
}
img{ max-width:100%; display:block; }

.tc-sr{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}

/* ---------- nav (shared chrome — the ONLY cyan on this page) ------------- */
.tc-nav{
  position:relative; z-index:3;
  background:rgba(6,6,10,.92);
  border-bottom:1px solid var(--tc-line-2);
  backdrop-filter:saturate(140%) blur(8px);
}
.tc-nav-in{
  max-width:1180px; margin:0 auto; padding:14px 20px;
  display:flex; align-items:center; gap:26px; flex-wrap:wrap;
}
.tc-mark{
  font-family:var(--tc-display); font-weight:800; font-size:17px;
  letter-spacing:.02em; color:var(--tc-white); white-space:nowrap;
}
.tc-mark span{ color:var(--tc-cyan); }
.tc-nav-links{
  display:flex; gap:20px; flex-wrap:wrap;
  margin-left:auto; font-size:13px; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase;
}
.tc-nav-links a{ color:var(--tc-mute); transition:color .18s; }
.tc-nav-links a:hover{ color:var(--tc-white); }
.tc-nav-links a.on{
  color:var(--tc-gold);
  border:1px solid var(--tc-line);
  border-radius:999px; padding:5px 13px; margin:-5px 0;
}

/* ---------- hero -------------------------------------------------------- */
/* Titles are BAKED INTO the artwork (nba-hero.jpg precedent). We do not
   overlay an <h1>. The real <h1> is screen-reader-only so SEO still sees it. */
.tc-hero{ position:relative; }
.tc-hero-img{
  width:100%; aspect-ratio:1400/700; object-fit:cover;
  object-position:center;
}
/* Narrow screens: show the hero WHOLE.

   Every hero carries its title baked into the art, so cropping one is always
   wrong — there is no safe crop of an image whose left 45% is a wordmark.
   Dropping the fixed box means the banner simply gets shorter as the viewport
   narrows, and nothing is ever lost. It also makes the section immune to
   odd source ratios (tc-confirmed.webp is 1.5, not 2.0).

   Do NOT reintroduce aspect-ratio + object-fit here to "make it taller".
   That trades a guaranteed-whole title for a guessed-safe crop. */
@media(max-width:720px){
  .tc-hero-img{
    aspect-ratio:auto;
    height:auto;
    object-fit:fill;
  }
}
.tc-hero::after{
  content:''; position:absolute; inset:auto 0 -1px 0; height:38%;
  background:linear-gradient(to top,var(--tc-ink),transparent);
  pointer-events:none;
}
.tc-lede{
  max-width:660px; margin:-10px auto 0; position:relative; z-index:2;
  text-align:center; padding:0 20px 6px;
  font-size:17px; color:var(--tc-text);
}
.tc-lede strong{ color:var(--tc-white); font-weight:600; }

/* ---------- section rule ------------------------------------------------- */
.tc-eyebrow{
  display:flex; align-items:center; gap:18px;
  margin:64px 0 34px;
  font-family:var(--tc-display); font-weight:700; font-size:12px;
  letter-spacing:.34em; text-transform:uppercase; color:var(--tc-gold);
  white-space:nowrap;
}
.tc-eyebrow::before,.tc-eyebrow::after{
  content:''; height:1px; flex:1; min-width:0;
  background:linear-gradient(90deg,transparent,var(--tc-line),transparent);
}
/* "EXPLORE TRANSFER CENTRE" at .34em tracking is ~370px wide. Add the 40px of
   .tc-wrap padding and it overflows a 390px phone, which makes the whole
   document horizontally scrollable — and a viewport-wide hero then appears
   clipped on its left edge. Tighten the tracking and let it wrap. */
@media(max-width:560px){
  .tc-eyebrow{
    white-space:normal; letter-spacing:.2em; gap:12px;
    font-size:11px; margin:52px 0 28px;
  }
}

/* ---------- hub cards ---------------------------------------------------- */
.tc-grid{
  display:grid; gap:22px;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
}
.tc-card{
  position:relative; display:flex; flex-direction:column;
  background:var(--tc-panel);
  border:1px solid var(--tc-line-2);
  border-radius:var(--tc-r);
  overflow:hidden;
  transition:transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.tc-card:hover{
  transform:translateY(-4px);
  border-color:var(--tc-accent,var(--tc-gold));
  box-shadow:var(--tc-shadow);
}
/* the glow seam — bottom edge lights in the section's own colour */
.tc-card::after{
  content:''; position:absolute; left:14%; right:14%; bottom:0; height:1px;
  background:var(--tc-accent,var(--tc-gold));
  opacity:0; transition:opacity .22s;
  box-shadow:0 0 16px 1px var(--tc-accent,var(--tc-gold));
}
.tc-card:hover::after{ opacity:.75; }

.tc-card-art{ position:relative; aspect-ratio:3/2; overflow:hidden; }
.tc-card-art img{
  width:100%; height:100%; object-fit:cover;
  transform:scale(1.02); transition:transform .5s ease;
}
.tc-card:hover .tc-card-art img{ transform:scale(1.07); }
.tc-card-art::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(to top,var(--tc-panel) 2%,rgba(14,14,19,.35) 42%,transparent 75%);
}
.tc-chip{
  position:absolute; top:14px; left:14px; z-index:2;
  width:38px; height:38px; border-radius:10px;
  display:grid; place-items:center;
  background:rgba(7,7,10,.78);
  border:1px solid var(--tc-accent,var(--tc-gold));
  color:var(--tc-accent,var(--tc-gold));
  backdrop-filter:blur(4px);
}
.tc-chip svg{ width:18px; height:18px; }

.tc-card-body{ padding:20px 22px 24px; display:flex; flex-direction:column; flex:1; }
.tc-card h3{
  font-family:var(--tc-display); font-weight:800;
  font-size:26px; line-height:1.1; letter-spacing:-.01em;
  margin:0 0 10px; color:var(--tc-white);
}
.tc-card p{ margin:0 0 20px; font-size:14.5px; color:var(--tc-mute); }
.tc-open{
  margin-top:auto; align-self:flex-start;
  font-family:var(--tc-display); font-weight:700; font-size:12px;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--tc-accent,var(--tc-gold));
  display:inline-flex; align-items:center; gap:8px;
}
.tc-open::after{ content:'→'; transition:transform .22s; }
.tc-card:hover .tc-open::after{ transform:translateX(5px); }
.tc-stretch{ position:absolute; inset:0; z-index:3; } /* whole-card link target */

/* ---------- CTA band ----------------------------------------------------- */
.tc-band{
  position:relative; margin:70px 0 0; overflow:hidden;
  border:1px solid var(--tc-line-2); border-radius:var(--tc-r);
  background:var(--tc-panel);
  display:grid; grid-template-columns:1fr 1fr; align-items:center;
}
.tc-band-copy{ padding:52px 44px; position:relative; z-index:2; }
.tc-band-eyebrow{
  font-family:var(--tc-display); font-weight:700; font-size:11px;
  letter-spacing:.28em; text-transform:uppercase; color:var(--tc-gold);
  margin:0 0 14px;
}
.tc-band h2{
  font-family:var(--tc-display); font-weight:800; font-size:38px;
  line-height:1.02; letter-spacing:-.02em; margin:0 0 16px; color:var(--tc-white);
}
.tc-band h2 em{ font-style:normal; color:var(--tc-gold); display:block; }
.tc-band p{ margin:0 0 26px; font-size:15px; color:var(--tc-mute); max-width:38ch; }
.tc-btn{
  display:inline-flex; align-items:center; gap:10px;
  background:var(--tc-gold); color:#120d02;
  font-family:var(--tc-display); font-weight:800; font-size:13px;
  letter-spacing:.1em; text-transform:uppercase;
  padding:14px 24px; border-radius:8px;
  transition:transform .18s, box-shadow .18s;
}
.tc-btn:hover{ transform:translateY(-2px); box-shadow:0 12px 28px -10px var(--tc-gold); }
.tc-band-art{ position:absolute; inset:0 0 0 42%; }
.tc-band-art img{ width:100%; height:100%; object-fit:cover; }
.tc-band-art::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg,var(--tc-panel) 6%,rgba(14,14,19,.55) 44%,transparent);
}
@media(max-width:820px){
  .tc-band{ grid-template-columns:1fr; }
  .tc-band-art{ position:relative; inset:auto; height:200px; order:-1; }
  .tc-band-art::after{ background:linear-gradient(to top,var(--tc-panel) 4%,transparent 70%); }
  .tc-band-copy{ padding:32px 24px 40px; }
  .tc-band h2{ font-size:30px; }
}

/* ---------- sub-page: sub-nav ------------------------------------------- */
.tc-subnav{
  display:flex; gap:8px; flex-wrap:wrap;
  margin:28px 0 8px; padding-bottom:2px;
}
.tc-subnav a,.tc-subnav span{
  font-family:var(--tc-display); font-weight:700; font-size:12px;
  letter-spacing:.1em; text-transform:uppercase;
  padding:9px 15px; border-radius:999px;
  border:1px solid var(--tc-line-2); color:var(--tc-mute);
  transition:.18s;
}
.tc-subnav a:hover{ color:var(--tc-white); border-color:var(--tc-line); }
.tc-subnav a.on{ color:var(--tc-gold); border-color:var(--tc-gold); }
.tc-subnav span{ opacity:.4; cursor:default; }

/* ---------- SIGNATURE: the source-strength meter ------------------------- */
/* This is the page's one memorable device and the honest core of the whole
   section. A tier is a property of the SOURCE, stated up front — never a
   number invented per story. Ten segments, tier fills a fixed share. */
.tc-meter{ display:flex; align-items:center; gap:10px; }
.tc-meter-bars{ display:flex; gap:3px; }
.tc-meter-bars i{
  width:9px; height:14px; border-radius:1.5px;
  background:var(--tc-raise);
  transition:background .2s;
}
.tc-meter-bars i.lit{ background:var(--tc-meter-c,var(--tc-gold)); }
.tc-meter-label{
  font-family:var(--tc-display); font-weight:700; font-size:10.5px;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--tc-meter-c,var(--tc-gold));
}
/* A ramp, not a traffic light — same logic as the ELO tiers on /world-rankings.
   Brighter gold = stronger source. Red/amber/green would import a whole second
   palette to say something one colour already says. */
.tier-1{ --tc-meter-c:var(--tc-gold-hi); }
.tier-2{ --tc-meter-c:var(--tc-gold);    }
.tier-3{ --tc-meter-c:var(--tc-slate);   }

/* ---------- item rows (populated once the feed is wired) ---------------- */
.tc-items{ display:flex; flex-direction:column; gap:12px; margin:26px 0 0; }
.tc-item{
  display:grid; grid-template-columns:1fr auto; gap:18px; align-items:center;
  background:var(--tc-panel); border:1px solid var(--tc-line-2);
  border-left:3px solid var(--tc-accent,var(--tc-gold));
  border-radius:10px; padding:16px 20px;
  transition:border-color .2s, transform .2s;
}
.tc-item:hover{ transform:translateX(3px); border-color:var(--tc-line); }
.tc-item h3{
  margin:0 0 7px; font-size:16.5px; line-height:1.35;
  font-weight:600; color:var(--tc-white); font-family:var(--tc-body);
}
.tc-item h3 a{ color:inherit; }
.tc-item h3 a:hover{ color:var(--tc-gold); }
.tc-meta{
  display:flex; gap:10px; align-items:center; flex-wrap:wrap;
  font-size:12.5px; color:var(--tc-mute);
}
.tc-src{ color:var(--tc-text); font-weight:500; }
.tc-dot{ opacity:.4; }
@media(max-width:640px){
  .tc-item{ grid-template-columns:1fr; }
}

/* ---------- empty state — an invitation, not an apology ----------------- */
.tc-empty{
  margin:26px 0 0; padding:64px 32px; text-align:center;
  border:1px dashed var(--tc-line); border-radius:var(--tc-r);
  background:linear-gradient(180deg,var(--tc-panel),transparent);
}
.tc-empty-mark{
  width:52px; height:52px; margin:0 auto 20px; border-radius:13px;
  display:grid; place-items:center;
  border:1px solid var(--tc-line); color:var(--tc-gold);
  background:rgba(244,181,42,.05);
}
.tc-empty h2{
  font-family:var(--tc-display); font-weight:800; font-size:24px;
  margin:0 0 10px; color:var(--tc-white); letter-spacing:-.01em;
}
.tc-empty p{ margin:0 auto; max-width:44ch; font-size:15px; color:var(--tc-mute); }

/* ---------- disclosure strip -------------------------------------------- */
.tc-disclose{
  margin:34px 0 0; padding:14px 18px;
  border:1px solid var(--tc-line-2); border-radius:10px;
  background:var(--tc-panel);
  font-size:13px; color:var(--tc-mute);
}
.tc-disclose b{ color:var(--tc-text); font-weight:600; }

/* ---------- footer ------------------------------------------------------- */
.tc-foot{
  margin-top:90px; padding:40px 0 56px;
  border-top:1px solid var(--tc-line-2);
  background:#05050890;
}
.tc-foot-in{
  max-width:1180px; margin:0 auto; padding:0 20px;
  display:flex; gap:26px; flex-wrap:wrap; align-items:center;
  font-size:13px; color:var(--tc-mute);
}
.tc-foot-links{ display:flex; gap:20px; flex-wrap:wrap; }
.tc-foot-links a{ color:var(--tc-mute); }
.tc-foot-links a:hover{ color:var(--tc-white); }
.tc-foot-note{ margin-left:auto; max-width:42ch; text-align:right; }
@media(max-width:760px){ .tc-foot-note{ margin-left:0; text-align:left; } }

/* ---------- motion ------------------------------------------------------- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation:none !important;
    transition:none !important;
    scroll-behavior:auto !important;
  }
  .tc-card:hover{ transform:none; }
  .tc-card:hover .tc-card-art img{ transform:scale(1.02); }
  .tc-item:hover{ transform:none; }
  .tc-btn:hover{ transform:none; }
}