/* =====================================================================
   Topic card (Figma set 1296:50019), Size=Row 592×96.
   Card surface + border + Elevation/Card; 40px round media (image, logo,
   avatar or initials); title text-xl Storica, sub text-sm, meta text-xs.
   Actions: See (Button Secondary Small, links to the topic page) + Follow
   (Button Secondary Small with plus icon; Following = gold accent fill).
   The whole card is a link via the stretched .topic-card__cover; the
   actions sit above it, so Follow never navigates.
   ===================================================================== */
.topic-card{position:relative;box-sizing:border-box;display:flex;align-items:center;gap:var(--space-12);min-height:96px;padding:var(--space-12);
  background:var(--card-bg-default);border:1px solid var(--border-subtle);border-radius:var(--radius-md);box-shadow:var(--shadow-card);
  transition:background-color .2s,border-color .2s,box-shadow .2s}
.topic-card:is(:hover,.is-hover){background:var(--card-bg-hover);border-color:var(--border-subtle);box-shadow:var(--shadow-card-hover)}
.topic-card:is(:active,.is-pressed){background:var(--card-bg-hover);border-color:var(--card-ring-pressed);box-shadow:var(--shadow-card-pressed)}
.topic-card:focus-within{border-color:var(--border-subtle)}

.topic-card__cover{position:absolute;inset:0;border-radius:inherit;z-index:1}
.topic-card__media,.topic-card__content,.topic-card__actions{position:relative}
.topic-card__actions{z-index:2}

.topic-card__media{flex:none;width:40px;height:40px;border:1px solid var(--border-default);border-radius:var(--radius-full);overflow:hidden;
  display:flex;align-items:center;justify-content:center;background:var(--surface-default)}
.topic-card__media img{width:100%;height:100%;object-fit:cover;border-radius:inherit}
.topic-card__media--logo img{object-fit:contain;padding:var(--space-4);box-sizing:border-box}
.topic-card__media--initials{background:var(--neutral-50)}
.topic-card__initials{font:var(--text-xs);color:var(--text-secondary);letter-spacing:.02em}

.topic-card__content{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--space-4);pointer-events:none}
.topic-card__title{font:var(--text-xl);color:var(--text-primary);text-decoration:none;text-transform:uppercase;
  overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}
.topic-card__sub{font:var(--text-sm);color:var(--card-text-secondary)}
.topic-card__meta{font:var(--text-xs);color:var(--card-text-secondary)}

.topic-card__actions{display:flex;align-items:center;gap:var(--space-8);flex:none}
.topic-card__follow .btn__icon{width:16px;height:16px}
.topic-card__title:focus-visible{outline:0}
.topic-card:has(.topic-card__title:focus-visible){box-shadow:var(--shadow-card),var(--shadow-focus-ring-accent)}

/* ---- Size=Row Mobile (Figma 1296:50019, used by Search: panel, tablet and phone results; 1824:78696): 10/12 padding, card-palette
   border-base border, Elevation/Card shadow, 40px initials/photo on badge/neutral-bg, 14/18 Storica title, 12/16 lines (2 apart),
   Follow only (Button Small, text only: Follow = white, Following = accent). ---- */
.topic-card--row{min-height:0;padding:var(--space-10) var(--space-12);border-color:var(--border-subtle);box-shadow:var(--shadow-card)}
.topic-card--row .topic-card__media{border:0;background:var(--image-placeholder)}
.topic-card--row .topic-card__initials{color:var(--text-primary);letter-spacing:0}
.topic-card--row .topic-card__content{gap:var(--space-2)}
.topic-card--row .topic-card__title{font:var(--text-card-title-sm);-webkit-line-clamp:2}
.topic-card--row :is(.topic-card__sub,.topic-card__meta){font:var(--text-xs)}
.topic-card--row .topic-card__actions>.btn--secondary{display:none}
/* Follow is text only in Search (handoff §2.7) */
.topic-card--row .topic-card__follow .btn__icon,.srp .topic-card__follow .btn__icon,.sp .topic-card__follow .btn__icon{display:none}

/* ---- Under 1024 every Topic card uses Size=Row Mobile (Search mobile spec, tablet-mobile-responsive-decisions): Follow only
   (the whole card is the link, so See is dropped), Storica 14/18 title on up to 2 lines, 12/16 lines (2026-10-25). ---- */
@media (max-width:1023px){
  .topic-card{min-height:0;padding:var(--space-10) var(--space-12)}
  .topic-card .topic-card__content{gap:var(--space-2)}
  .topic-card .topic-card__title{font:var(--text-card-title-sm);-webkit-line-clamp:2}
  .topic-card :is(.topic-card__sub,.topic-card__meta){font:var(--text-xs)}
  .topic-card .topic-card__actions>.btn--secondary{display:none}
}