/* ==========================================================================
   SPECIAL THANKS — credits page (Special Thanks / Collaborators / Friends)
   Extends css/style.css + css/content-cards.css (.content-card grid).
   Tabs use the site data-tab-link JS, styled locally.
   ========================================================================== */

.st-tabs{
  display:flex; gap:4px; flex-wrap:wrap; justify-content:center;
  border-bottom:1px solid var(--border);
  max-width:1100px; margin:36px auto 0; padding:0 5%;
}
.st-tabs a{
  display:inline-flex; align-items:center; gap:8px;
  padding:13px 20px; font-family:var(--font-display);
  font-size:0.78rem; letter-spacing:1.4px; text-transform:uppercase;
  color:var(--text-dim); border-bottom:2px solid transparent;
  transition:color .2s ease, border-color .2s ease;
}
.st-tabs a:hover{color:var(--text);}
.st-tabs a.active{color:var(--frost-glow); border-bottom-color:var(--frost);}
.st-tabs a img{width:17px; height:17px; object-fit:contain; filter:drop-shadow(0 0 2px rgba(111,216,255,0.55));}

.st-panel{max-width:1100px; margin:0 auto; padding:40px 5% var(--block-gap);}
.st-intro{
  text-align:center; max-width:640px; margin:0 auto 34px;
  color:var(--text-dim); font-size:0.92rem; line-height:1.8;
}

/* featured (World of Warcraft / Blizzard) */
.st-featured{
  display:flex; gap:26px; align-items:center; flex-wrap:wrap;
  border:1px solid var(--frost-dim); border-radius:16px; padding:30px 32px;
  background:linear-gradient(135deg, rgba(111,216,255,0.08), var(--bg-alt));
  margin-bottom:26px;
}
.st-featured .st-logo{width:58px; height:58px;}
.st-featured .st-logo img{filter:drop-shadow(0 0 11px rgba(111,216,255,0.5));}
.st-featured h3{font-family:var(--font-display); font-size:1.4rem; margin:6px 0 10px;}
.st-featured p{color:var(--text-dim); font-size:0.92rem; line-height:1.8; margin:0;}

.st-role{
  font-family:var(--font-display); font-size:0.66rem; letter-spacing:1.8px;
  text-transform:uppercase; color:var(--frost-glow);
}

/* logo holder — no box; real logos sit transparent with a frost glow.
   Letter placeholders (Collaborators / Friends, no art yet) keep a soft tile. */
.st-logo{
  width:56px; height:56px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
}
.st-logo img{
  width:100%; height:100%; object-fit:contain;
  filter:drop-shadow(0 0 9px rgba(111,216,255,0.45));
}
.st-logo span{
  width:100%; height:100%; border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--border); background:rgba(8,13,24,0.6);
  font-family:var(--font-display); font-weight:700; font-size:1.15rem; color:var(--frost-glow);
}

/* card grid rows */
.st-card{
  border:1px solid var(--border); border-radius:14px; padding:24px;
  background:linear-gradient(160deg, var(--panel), var(--bg-alt));
  display:flex; flex-direction:column; gap:14px;
  transition:border-color .25s ease, transform .25s ease;
}
.st-card:hover{border-color:var(--frost-dim); transform:translateY(-3px);}
.st-card-head{display:flex; align-items:center; gap:14px;}
.st-card h3{font-family:var(--font-display); font-size:1.05rem; margin:0;}
.st-card .st-role{margin-top:3px; display:block;}
.st-card p{color:var(--text-dim); font-size:0.88rem; line-height:1.75; margin:0;}
.st-tba{
  align-self:flex-start; font-size:0.66rem; letter-spacing:1px; text-transform:uppercase;
  color:var(--text-dim); border:1px dashed var(--border); border-radius:20px; padding:3px 10px;
}

.st-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:20px;}
@media(max-width:820px){ .st-grid{grid-template-columns:1fr;} }