/* =====================================================================
   Topic page (one template, four types). Figma: Sport 1433:1146,
   League 1438:1390, Team 1438:52148, Editor 1439:621.
   Hero_Lead_Row 1435:55586: surface/elevated, 112px top (under the nav),
   28px bottom; breadcrumbs → 32px → identity row (96px media, 24px gap,
   H1 text-6xl + stats text-sm, 12px to the Follow pill) → 32px → text-lg
   description. Body: 64px top, sections 88px apart, 16px header → content.
   Grids: stories 3 × 384 (24 gap), videos 4 × 282 (24 gap),
   games 3 × 384 (24 gap), topic cards: .topics__grid (2 columns).
   ===================================================================== */
.topic{background:var(--surface-background)}
.topic__hero{background:var(--surface-elevated);padding:var(--space-112) var(--space-24) var(--space-28)}
.topic__hero-in{width:min(1200px,100%);margin-inline:auto;display:flex;flex-direction:column;gap:var(--space-32)}
.topic__id{display:flex;align-items:center;gap:var(--space-12);flex-wrap:wrap}
.topic__who{display:flex;align-items:center;gap:var(--space-24);min-width:0}
.topic__media{flex:none;width:96px;height:96px;box-sizing:border-box;border:1.5px solid var(--border-default);border-radius:var(--radius-full);overflow:hidden;
  display:flex;align-items:center;justify-content:center;background:var(--surface-default)}
.topic__media img{width:100%;height:100%;object-fit:cover}
.topic__media--logo img{object-fit:contain;padding:var(--space-12);box-sizing:border-box}
.topic__media--initials{background:var(--neutral-50)}
.topic__initials{font:var(--text-3xl);color:var(--text-secondary)}
.topic__name{display:flex;flex-direction:column;gap:var(--space-6);min-width:0}
.topic__title{margin:0;font:var(--text-6xl);color:var(--text-primary);text-transform:uppercase;overflow-wrap:anywhere}
.topic__stats{margin:0;font:var(--text-sm);color:var(--text-secondary)}
.topic__desc{margin:0;max-width:842px;font:var(--text-lg);color:var(--text-secondary)}

.topic__body{padding:var(--space-64) 0 var(--space-96)}
.topic__section + .topic__section,.topic__thin + .topic__section{margin-top:var(--space-88)}
.topic__section .section-header{margin-bottom:var(--space-16)}
.topic__grid{display:grid;gap:var(--space-24)}
.topic__grid--stories,.topic__grid--games{grid-template-columns:repeat(3,minmax(0,1fr))}
.topic__grid--videos{grid-template-columns:repeat(4,minmax(0,1fr))}

/* Thin topic: Empty State (783:9079) centered, then the one story if there is one */
.topic__thin .empty-state{position:static}
.topic__thin-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-12)}
.topic__one{margin-top:var(--space-48)}

/* Tablet (600–1023; no Figma frames yet, tablet-mobile-responsive-decisions): 2-column grids for stories, videos and games */
@media (max-width:1023px){
  .topic__grid--stories,.topic__grid--games,.topic__grid--videos{grid-template-columns:repeat(2,minmax(0,1fr))}
  .topic__grid{gap:var(--space-16)}
}
@media (max-width:899px){
  .topic__hero{padding-top:var(--space-128)}
}
/* Tablet + phone frames (Figma 2215:101394, 2217:69641): 40px between sections, 12px header → cards;
   tablet hides the third story and game so the 2-column rows stay even (videos 2 × 2) */
@media (max-width:1023px){
  .topic__body{padding-top:var(--space-40)}
  .topic__section + .topic__section,.topic__thin + .topic__section{margin-top:var(--space-40)}
  .topic__section .section-header{margin-bottom:var(--space-12)}
}
@media (min-width:600px) and (max-width:1023px){
  .topic__grid--stories>:nth-child(n+3),.topic__grid--games>:nth-child(n+3){display:none}
}
/* Phone (<600): stories (Story Card List) and games stack; videos become a rail with a peeking edge */
@media (max-width:599px){
  .topic__grid--stories,.topic__grid--games{grid-template-columns:minmax(0,1fr)}
  .topic__grid--videos{display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:280px;gap:var(--space-12);
    overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;
    margin-inline:calc(-1 * var(--space-16));padding-inline:var(--space-16);scroll-padding-inline:var(--space-16)}
  .topic__grid--videos::-webkit-scrollbar{display:none}
  .topic__grid--videos>*{scroll-snap-align:start}
}
/* Tablet: compact event cards at 332 wide let the title wrap to 2 lines instead of cutting it (no tablet frame yet; flagged) */
@media (min-width:600px) and (max-width:1023px){
  .topic__grid--games .event-card__title{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
}