/* ==========================================================================
   Profile Page
   Basic layout, typography, and spacing for the profile/settings page
   ========================================================================== */

.profile {
  padding: var(--space-6) var(--space-4);
  max-width: 560px;
}

/* --- Sections --- */

.profile-section {
  margin-bottom: var(--space-8);
  padding-bottom: var(--space-8);
  border-bottom: var(--border-normal) var(--np-color-outline-variant);
}

.profile-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.profile-section h2 {
  font-family: var(--font-primary);
  font-size: var(--type-headline-sm-size);
  font-weight: var(--type-headline-sm-weight);
  line-height: var(--type-headline-sm-line-height);
  letter-spacing: var(--type-headline-sm-tracking);
  color: var(--np-color-on-surface);
  margin: 0 0 var(--space-4) 0;
}

/* --- Static form values (e.g. Username display) --- */

.form-value {
  font-family: var(--font-primary);
  font-size: var(--text-normal-size);
  line-height: var(--text-normal-line-height);
  color: var(--np-color-on-surface);
}

/* --- User lists (following, followers, blocked, requests) --- */

.user-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.user-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-bottom: var(--border-normal) var(--np-color-outline-variant);
}

.user-list li:last-child {
  border-bottom: none;
}

.user-name {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.user-link {
  font-family: var(--font-primary);
  font-size: var(--text-normal-size);
  font-weight: var(--font-weight-medium);
  color: var(--np-color-on-surface);
  text-decoration: none;
}

.user-link:hover {
  text-decoration: underline;
}

.user-handle {
  font-family: var(--font-primary);
  font-size: var(--type-body-sm-size);
  line-height: var(--type-body-sm-line-height);
  color: var(--np-color-on-surface-variant);
}

/* --- Empty state --- */

.empty-list {
  font-family: var(--font-primary);
  font-size: var(--text-normal-size);
  color: var(--np-color-on-surface-variant);
  font-style: italic;
  margin: 0;
}

/* --- Mobile --- */

@media (max-width: 480px) {
  .profile {
    padding: var(--space-4) var(--space-3);
  }
}