/* Profile UI fragments */
.author-card-container { display: flex; justify-content: center; padding: 2rem 1rem; }
.author-card { display: flex; gap: 1rem; padding: 1.5rem; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: 12px; max-width: 600px; width: 100%; transition: all 0.2s ease; }
.author-card-clickable:hover { border-color: var(--color-primary); background: var(--color-bg-elevated); transform: translateY(-1px); }
.author-card-clickable:active { transform: translateY(0); }
.author-card-avatar { flex-shrink: 0; width: 60px; height: 60px; border-radius: 50%; overflow: hidden; background: var(--color-bg-elevated); display: flex; align-items: center; justify-content: center; color: var(--color-text-muted); }
.author-card-avatar img { width: 100%; height: 100%; object-fit: cover; }
.author-card-avatar svg { font-size: 2.5rem; }
.author-card-content { flex: 1; min-width: 0; text-align: left; }
.author-card-name { font-size: 1rem; font-weight: 600; color: var(--color-text); margin-bottom: 0.5rem; text-align: left; }
.author-card-bio { font-size: 0.9rem; color: var(--color-text-secondary); line-height: 1.5; margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; text-align: left; }

@media (max-width: 768px) {
  .author-card-container { 
    padding: 1.5rem 1rem; 
    margin: 0 1rem; /* Add horizontal margin to prevent bleeding */
    max-width: calc(100vw - 2rem); /* Ensure it doesn't exceed screen width */
    box-sizing: border-box;
  }
  .author-card { 
    padding: 1rem; 
    max-width: 100%; /* Ensure card doesn't exceed container */
    box-sizing: border-box;
  }
  .author-card-avatar { width: 48px; height: 48px; }
  .author-card-avatar svg { font-size: 2rem; }
  .author-card-name { font-size: 0.95rem; }
  .author-card-bio { font-size: 0.85rem; -webkit-line-clamp: 2; }
}