/* ============================================================
   Social Media — Page-specific styles only.
   Shared tokens & components live in style.css.
   ============================================================ */

/* ── Text block ── */
.sm-info {
  flex: 1;
  min-width: 0;
}

.sm-handle {
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  color: var(--color-text);
  margin: 0 0 0.15rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sm-cta {
  font-size: 0.78rem;
  font-weight: var(--fw-semibold);
  color: var(--color-primary);
  margin: 0.2rem 0 0;
}

/* ── Arrow icon ── */
.sm-arrow {
  color: var(--color-border-strong);
  font-size: var(--fs-md);
  flex-shrink: 0;
  transition:
    color var(--transition-base),
    transform var(--transition-base);
}

.card--hoverable:hover .sm-arrow {
  color: var(--color-text);
  transform: translateX(3px);
}