/* =====================================================================
   Topic / Header (Figma set 2220:10647, 2026-10-25). Desktop 866 / Tablet 680 / Mobile 358.
   Column, 20px gaps (16 on phones): identity row (media 96, 20 gap, name text-6xl; 48px on tablet;
   phones: media 64, 16 gap, Mobile/04), info (descriptor text-base + stats text-sm, text/secondary, 4 apart),
   tags (Badge Neutral, 8 gap, wrap), actions row: Follow Button (200 wide; fills on phones) + Button group
   Compact Actions (12 gap), Button group Compact Social at the right end (own row under Follow on phones).
   ===================================================================== */
.topic-header{display:flex;flex-direction:column;gap:var(--space-20);max-width:866px}
.topic-header__identity{display:flex;align-items:center;gap:var(--space-20);min-width:0}
.topic-header__media{flex:none;width:96px;height:96px;box-sizing:border-box;border-radius:var(--radius-full);overflow:hidden;display:flex;align-items:center;justify-content:center;background:var(--surface-default);border:1.5px solid var(--border-default)}
.topic-header__media img{width:100%;height:100%;object-fit:cover}
.topic-header__media--logo img{object-fit:contain;padding:var(--space-12);box-sizing:border-box}
.topic-header__media--initials{border:0}
.topic-header__name{margin:0;min-width:0;font:var(--text-6xl);color:var(--text-primary);text-transform:uppercase;overflow-wrap:anywhere}
.topic-header__info{display:flex;flex-direction:column;gap:var(--space-4);margin-top:calc(var(--space-16) - var(--space-20))}
.topic-header__descriptor{margin:0;font:var(--text-base);color:var(--text-secondary)}
.topic-header__stats{margin:0;font:var(--text-sm);color:var(--text-secondary)}
.topic-header__tags{display:flex;flex-wrap:wrap;gap:var(--space-8);margin:0;padding:0;list-style:none}
.topic-header__actions{display:flex;align-items:center;gap:var(--space-16);flex-wrap:wrap}
.topic-header__main{display:flex;align-items:center;gap:var(--space-12);min-width:0}
.topic-header .topic-header__follow{width:200px}
@media (max-width:1023px){
  .topic-header__name{font:var(--text-5xl)}
  .topic-header__main{flex:1}   /* tablet: the actions fill the row, socials sit at the right end */
}
@media (max-width:599px){
  .topic-header{gap:var(--space-16)}
  .topic-header__identity{gap:var(--space-16)}
  .topic-header__media,.topic-header .avatar-initials--large{width:64px;height:64px}
  .topic-header .avatar-initials--large{font:var(--text-xl)}
  .topic-header__name{font:var(--text-6xl)}
  .topic-header__info{margin-top:0}
  .topic-header__actions{flex-direction:column;align-items:flex-start}
  .topic-header__main{width:100%}
  .topic-header .topic-header__follow{flex:1;width:auto}
}
.topic-header__tags .badge{text-transform:none}   /* tags keep their case (Figma Topic / Header; Badge Neutral used as a tag) */