/**
 * @file
 * Member profile re-theme — DESIGN.md editorial register applied to
 * /user/<uid>. Sits on top of style.css to override the legacy
 * blue-sans treatment without touching the user--full template's
 * structural classes.
 *
 * The self-view dashboard (3 catch-up cards) is rendered above the
 * profile header by neopoet_member_dashboard; this file styles the
 * profile *body* (header, sections, role badges, stats, lists).
 */

/* -----------------------------------------------------------------------
 * 1. Container & header
 * --------------------------------------------------------------------- */
.user-profile {
  max-width: var(--np-container-default);
  margin: 0 auto;
}

.user-profile .profile-container {
  background: var(--np-bg-primary);
  padding: 0;
}

.user-profile .profile-header {
  display: grid;
  grid-template-columns: 96px 1fr auto;
  gap: var(--np-space-5);
  align-items: start;
  padding: var(--np-space-6) 0;
  border-bottom: var(--np-border-hairline) solid var(--np-border-tertiary);
  margin-bottom: var(--np-space-8);
}

.user-profile .profile-image {
  grid-column: 1;
}

.user-profile .profile-image {
  width: 96px;
  height: 96px;
}

.user-profile .profile-image img,
.user-profile .user-avatar-label {
  width: 96px;
  height: 96px;
  border-radius: var(--np-radius-circle);
  background: var(--np-bg-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--np-font-serif);
  font-size: var(--np-text-xl);
  color: var(--np-text-primary);
  object-fit: cover;
  border: none;
  overflow: hidden;
}

/* Broken-image fallback — when the user's profile picture 404s the
   browser renders the alt text in the IMG slot. Without this rule the
   alt text wraps and overflows the circle. Hide the alt by setting
   font-size: 0 inside the IMG, then the box stays circular & empty. */
.user-profile .profile-image img {
  font-size: 0;
  text-indent: -9999px;
  color: transparent;
}

.user-profile .profile-info {
  grid-column: 2;
  display: flex;
  flex-direction: column;
  gap: var(--np-space-2);
}

.user-profile .profile-name {
  font-family: var(--np-font-serif) !important;
  font-weight: var(--np-weight-regular) !important;
  font-size: clamp(28px, 3.6vw, 36px) !important;
  line-height: var(--np-leading-snug);
  letter-spacing: var(--np-tracking-snug);
  color: var(--np-text-primary) !important;
  margin: 0;
  font-feature-settings: "kern", "liga", "onum";
}

.user-profile .member-info {
  display: flex;
  flex-wrap: wrap;
  gap: var(--np-space-2) var(--np-space-3);
  font-family: var(--np-font-sans);
  font-size: var(--np-text-sm);
  color: var(--np-text-tertiary);
  margin: 0;
}

.user-profile .member-info p {
  margin: 0;
}

/* Action strip on the right side — Follow / Message / Edit profile. */
.user-profile .profile-buttons {
  grid-column: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--np-space-2);
}

.user-profile .profile-buttons a,
.user-profile .profile-buttons .button,
.user-profile .profile-buttons input[type="submit"] {
  font-family: var(--np-font-sans);
  font-weight: var(--np-weight-medium);
  font-size: var(--np-text-sm);
  background: var(--np-bg-primary);
  color: var(--np-text-primary);
  border: var(--np-border-width) solid var(--np-border-secondary);
  border-radius: var(--np-radius-md);
  padding: var(--np-space-2) var(--np-space-4);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--np-duration-base) var(--np-ease-standard),
              border-color var(--np-duration-base) var(--np-ease-standard);
  white-space: nowrap;
}

.user-profile .profile-buttons a:hover,
.user-profile .profile-buttons .button:hover {
  background: var(--np-bg-secondary);
  border-color: var(--np-text-primary);
}

/* -----------------------------------------------------------------------
 * 2. Role badges — text-only, muted role colors per DESIGN.md.
 *    No background fill, no capsule shape, no uppercase shouting.
 *    Surfaced as a quiet inline list next to the membership meta.
 * --------------------------------------------------------------------- */
.user-profile .profile-roles {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--np-space-3);
  margin: var(--np-space-1) 0 0;
  padding: 0;
  border-top: none;
  font-family: var(--np-font-sans);
  font-size: var(--np-text-xs);
  letter-spacing: var(--np-tracking-wide);
  text-transform: uppercase;
  font-weight: var(--np-weight-medium);
}

.user-profile .profile-roles .role {
  display: inline-block;
  padding: 0;
  margin: 0;
  border-radius: 0;
  background: transparent !important;
  color: var(--np-role-member) !important;
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  letter-spacing: inherit !important;
  text-transform: inherit !important;
  border: none;
}

/* DESIGN.md role palette mappings, plus the additional role names
   this site uses (administrative-council-member, ac-chair, etc.). */
.user-profile .profile-roles .role[data-role="administrative-council-member"],
.user-profile .profile-roles .role[data-role="ac-chair"],
.user-profile .profile-roles .role[data-role="director"],
.user-profile .profile-roles .role[data-role="trustee"],
.user-profile .profile-roles .role[data-role="cofounder"] {
  color: var(--np-role-administrative) !important;
}

.user-profile .profile-roles .role[data-role="premium"] {
  color: var(--np-role-premium) !important;
}

.user-profile .profile-roles .role[data-role="advocate"],
.user-profile .profile-roles .role[data-role="guide"] {
  color: var(--np-role-guide) !important;
}

.user-profile .profile-roles .role[data-role="workshop-leaders"],
.user-profile .profile-roles .role[data-role="workshop-coordinator"] {
  color: var(--np-role-workshop-leader) !important;
}

.user-profile .profile-roles .role[data-role="member"],
.user-profile .profile-roles .role[data-role="authenticated-user"] {
  color: var(--np-role-member) !important;
}

.user-profile .profile-roles .role[data-role="new-member"],
.user-profile .profile-roles .role[data-role="recent-new-member"] {
  color: var(--np-role-new-member) !important;
}

/* Roles that should never surface — system roles, audit flags, default
   buckets. Mirrors the legacy hide list from style.css. */
.user-profile .profile-roles .role[data-role="anonymous-user"],
.user-profile .profile-roles .role[data-role="securelogin"],
.user-profile .profile-roles .role[data-role="newsletter"],
.user-profile .profile-roles .role[data-role="chat"],
.user-profile .profile-roles .role[data-role="memorialized"],
.user-profile .profile-roles .role[data-role="potential-spammer"],
.user-profile .profile-roles .role[data-role="administrator"],
.user-profile .profile-roles .role[data-role="content-editor"] {
  display: none;
}

/* -----------------------------------------------------------------------
 * 3. Stats — sans tabular numerics in muted graphite, comma-divided
 *    inline rather than colored vertical tiles.
 * --------------------------------------------------------------------- */
.user-profile .profile-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--np-space-5);
  margin: var(--np-space-3) 0 0;
  padding: 0;
  font-family: var(--np-font-sans);
  font-size: var(--np-text-sm);
  color: var(--np-text-secondary);
}

.user-profile .profile-stats .stat {
  display: inline-flex;
  align-items: baseline;
  gap: var(--np-space-2);
  text-align: left;
}

.user-profile .profile-stats .stat-value {
  font-family: var(--np-font-sans);
  font-weight: var(--np-weight-medium);
  font-size: var(--np-text-base);
  color: var(--np-text-primary);
  font-variant-numeric: tabular-nums lining-nums;
  background: transparent !important;
}

.user-profile .profile-stats .stat-label {
  font-family: var(--np-font-sans);
  font-weight: var(--np-weight-regular);
  font-size: var(--np-text-sm);
  color: var(--np-text-tertiary);
  text-transform: lowercase;
  letter-spacing: 0;
}

/* -----------------------------------------------------------------------
 * 4. Profile content sections — hairline-divided cards, serif headings.
 * --------------------------------------------------------------------- */
.user-profile .profile-content {
  display: flex;
  flex-direction: column;
  gap: var(--np-space-10);
}

.user-profile .profile-content > .card,
.user-profile .profile-content > .about-me,
.user-profile .profile-content > .recent-work,
.user-profile .profile-content > .contest-wins,
.user-profile .profile-content > .workshops,
.user-profile .profile-content > .followed-by {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.user-profile .profile-content h2 {
  font-family: var(--np-font-sans) !important;
  font-weight: var(--np-weight-medium) !important;
  font-size: 13px !important;
  text-transform: uppercase !important;
  letter-spacing: var(--np-tracking-wide) !important;
  color: var(--np-text-secondary) !important;
  border-top: var(--np-border-hairline) solid var(--np-border-tertiary);
  padding-top: var(--np-space-3);
  margin: 0 0 var(--np-space-4) 0 !important;
}

.user-profile .profile-content p,
.user-profile .profile-content .field {
  font-family: var(--np-font-serif);
  font-size: var(--np-text-base);
  line-height: var(--np-leading-normal);
  color: var(--np-text-primary);
  margin: 0 0 var(--np-space-3);
}

.user-profile .profile-content strong {
  font-family: var(--np-font-sans);
  font-size: var(--np-text-sm);
  font-weight: var(--np-weight-medium);
  color: var(--np-text-secondary);
  text-transform: uppercase;
  letter-spacing: var(--np-tracking-wide);
  display: block;
  margin-bottom: var(--np-space-1);
}

/* About-me text override — earlier theme code colored this in
   persimmon (link color). On a profile body it should be ink. */
.user-profile .profile-content .field--name-profile-aboutme,
.user-profile .profile-content .field--name-profile-aboutme p,
.user-profile .profile-content .field--name-profile-aboutme a {
  color: var(--np-text-primary);
}

/* Favorite-poets list as an indented serif column. */
.user-profile .field--name-profile-favoritepoets .field__items,
.user-profile .field--name-profile-favoritepoets {
  font-family: var(--np-font-serif);
  font-size: var(--np-text-base);
  line-height: var(--np-leading-relaxed);
  color: var(--np-text-primary);
}

.user-profile .field--name-profile-favoritepoets .field__item {
  padding: 0;
  margin: 0;
}

/* -----------------------------------------------------------------------
 * 5. Recent-work table — hairline list_row pattern, no heavy borders.
 * --------------------------------------------------------------------- */
.user-profile .recent-work table,
.user-profile .recent-work .views-table {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100%;
  border-collapse: collapse;
  font-family: var(--np-font-sans);
  font-size: var(--np-text-sm);
}

.user-profile .recent-work th {
  font-family: var(--np-font-sans);
  font-weight: var(--np-weight-medium);
  font-size: var(--np-text-xs);
  text-transform: uppercase;
  letter-spacing: var(--np-tracking-wide);
  color: var(--np-text-secondary);
  text-align: left;
  padding: var(--np-space-3) var(--np-space-3);
  border-bottom: var(--np-border-hairline) solid var(--np-border-tertiary);
  background: transparent;
}

.user-profile .recent-work th a {
  color: inherit;
  text-decoration: none;
}

.user-profile .recent-work td {
  padding: var(--np-space-3) var(--np-space-3);
  border-bottom: var(--np-border-hairline) solid var(--np-border-tertiary);
  color: var(--np-text-primary);
  font-family: var(--np-font-sans);
  font-size: var(--np-text-sm);
  font-variant-numeric: oldstyle-nums;
  vertical-align: top;
}

.user-profile .recent-work td a {
  font-family: var(--np-font-serif);
  font-size: var(--np-text-base);
  color: var(--np-text-primary);
  text-decoration: none;
  font-feature-settings: "kern", "liga", "onum";
}

.user-profile .recent-work td a:hover {
  color: var(--np-text-link);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.user-profile .recent-work tbody tr:hover {
  background: var(--np-bg-secondary);
}

/* Pager — sans, persimmon link color. */
.user-profile .pager {
  margin-top: var(--np-space-5);
}

.user-profile .pager__items {
  display: flex;
  flex-wrap: wrap;
  gap: var(--np-space-3);
  list-style: none;
  margin: 0;
  padding: 0;
}

.user-profile .pager__item {
  list-style: none;
}

.user-profile .pager__item a,
.user-profile .pager__item.is-active span {
  font-family: var(--np-font-sans);
  font-size: var(--np-text-sm);
  color: var(--np-text-tertiary);
  text-decoration: none;
}

.user-profile .pager__item.is-active span {
  color: var(--np-text-primary);
  font-weight: var(--np-weight-medium);
}

.user-profile .pager__item a:hover {
  color: var(--np-text-link);
}

/* -----------------------------------------------------------------------
 * 6. Followed-by — compact comma-separated row of usernames.
 * --------------------------------------------------------------------- */
.user-profile .followed-by .views-row,
.user-profile .followed-by .view-content > div {
  display: inline;
}

.user-profile .followed-by .view-content {
  font-family: var(--np-font-sans);
  font-size: var(--np-text-sm);
  line-height: var(--np-leading-relaxed);
  color: var(--np-text-secondary);
}

.user-profile .followed-by .view-content a {
  color: var(--np-text-secondary);
  text-decoration: none;
}

.user-profile .followed-by .view-content a:hover {
  color: var(--np-text-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.user-profile .followed-by .views-row + .views-row::before,
.user-profile .followed-by .view-content > div + div::before {
  content: " · ";
  color: var(--np-text-tertiary);
}

/* -----------------------------------------------------------------------
 * 7. Workshops section table — same hairline list_row treatment as
 *    Recent Work but typically smaller/single-row.
 * --------------------------------------------------------------------- */
.user-profile .workshops table {
  background: transparent !important;
  border: none !important;
  border-collapse: collapse;
  width: 100%;
  margin: 0;
  font-family: var(--np-font-sans);
  font-size: var(--np-text-sm);
}

.user-profile .workshops th,
.user-profile .workshops td {
  padding: var(--np-space-3) var(--np-space-3);
  border-bottom: var(--np-border-hairline) solid var(--np-border-tertiary);
  text-align: left;
  color: var(--np-text-primary);
  background: transparent;
}

.user-profile .workshops th {
  font-family: var(--np-font-sans);
  font-weight: var(--np-weight-medium);
  font-size: var(--np-text-xs);
  text-transform: uppercase;
  letter-spacing: var(--np-tracking-wide);
  color: var(--np-text-secondary);
}

.user-profile .workshops td a {
  color: var(--np-text-link);
  text-decoration: none;
}

.user-profile .workshops td a:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* -----------------------------------------------------------------------
 * 8. Mobile — collapse the 3-column header to a single column.
 * --------------------------------------------------------------------- */
@media (max-width: 767px) {
  .user-profile .profile-header {
    grid-template-columns: 64px 1fr;
    grid-template-areas:
      "image info"
      "buttons buttons";
  }
  .user-profile .profile-image { grid-area: image; }
  .user-profile .profile-info { grid-area: info; }
  .user-profile .profile-buttons {
    grid-area: buttons;
    flex-direction: row;
    align-items: stretch;
    flex-wrap: wrap;
  }
  .user-profile .profile-image img,
  .user-profile .user-avatar-label {
    width: 64px;
    height: 64px;
  }
  .user-profile .profile-name {
    font-size: 24px !important;
  }
}