/* ==========================================================================
   Cards & chips — the beveled .custom-card, the identity .user-card, badges,
   and the news-attribution strip. Values resolve to tokens.css.
   ========================================================================== */

/* ---- ---- ---- ---- Custom card ---- ---- ---- ---- */

.custom-card {
  max-width: 100%;
  flex-grow: 1;
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  background: var(--surface-card);
  color: var(--text-strong);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.custom-card .card-header {
  height: 18px;
  font-size: var(--text-xs);
  font-family: var(--font-ui);
  color: var(--text-on-dark);
  background: linear-gradient(#c7d3e6 10%, #869ac0 40%, #8d9fc2 50%);
  border-bottom: 1px solid var(--border-strong);
}

.custom-card .card-header .header-content {
  background: linear-gradient(#6c7e9e 50%, #5b6c8e 50%);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  height: 100%;
  width: max-content;
  padding: 0 24px 0 var(--space-2);
  border-radius: 0 var(--radius-lg) var(--radius-sm) 0;
}

.custom-card .card-header img {
  height: 10px;
  width: 10px;
}

.custom-card .card-body {
  padding: var(--space-2);
}

.card-body > ul > li {
  display: flex;
  flex-direction: row;
  gap: var(--space-2);
  align-items: center;
  justify-content: left;
  width: 200px;
}

/* ---- ---- ---- ---- User card ---- ---- ---- ---- */

/* The identity column to the left of a topic or comment. */
.user-card {
  padding: var(--space-2);
  background-color: var(--surface-2);
  font: var(--text-xs) var(--font-ui);
  border: 1px solid var(--border-light);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.user-avatar {
  margin-bottom: 0;
}

.user-avatar .spacer {
  padding: var(--space-1) 0;
}

.avatar-image {
  aspect-ratio: 1 / 1;
  width: 100%;
  max-width: 128px;
  max-height: 256px;
  object-fit: cover;
  border-radius: var(--radius);
}

.user-info {
  width: 100%;
  text-align: left;
  padding: var(--space-2);
}

@media (max-width: 768px) {
  .user-card {
    width: 100%;
    flex-direction: row;
    align-items: center;
    text-align: left;
  }

  .user-avatar {
    margin-right: var(--space-3);
    margin-bottom: 0;
    flex-shrink: 0;
  }

  .user-avatar .spacer {
    padding: 0;
  }

  .avatar-image {
    width: 48px;
    height: 48px;
    object-fit: cover;
  }

  .user-info {
    flex: 1;
  }

  .user-info br:first-child {
    display: none;
  }
}

@media (min-width: 769px) {
  .user-card {
    max-width: 200px;
  }
}

/* ---- ---- ---- ---- Badge ---- ---- ---- ---- */

.badge {
  display: inline-flex;
  align-items: center;
  padding: 0 var(--space-2);
  border-radius: var(--radius-lg);
  font: var(--text-2xs) var(--font-ui);
  background-color: var(--surface-3);
  color: var(--text-strong);
}

/* ---- ---- ---- ---- News attribution ---- ---- ---- ---- */

.news-attribution {
  display: flex;
  flex-wrap: wrap;
  justify-content: right;
  align-items: center;
  gap: var(--space-2);
  background-color: var(--surface-news-meta);
  font: var(--text-xs) var(--font-ui);
  color: var(--text-strong);
}