/* SOCIAL LINKS
   Used by the Portfolio page (a labelled list) and the dashboard (a row of icons).
   The SVGs carry their own width and height attributes, so these rules are what keep
   them icon-sized */

/* LABELLED LIST (PORTFOLIO) */

.social-stack {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.social-stack-divider {
  height: 1px;
  margin: 0;
  background-color: var(--color-border);
  list-style: none;
}

.social-item a {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  border: 1px solid transparent;
}

.social-item a:hover {
  background-color: var(--color-surface-secondary);
  border-color: var(--color-border);
  border-radius: 8px;
  text-decoration: none;
}

.social-item__label,
.social-item__secondary-label {
  font-family: var(--font-family-body);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-m);
  letter-spacing: var(--letter-spacing-m);
  line-height: var(--line-height-s);
}

.social-item__label {
  color: var(--color-text-primary);
}

/* The email address or file type, pushed to the right-hand end of the row */
.social-item__secondary-label {
  color: var(--color-text-secondary);
  margin-left: auto;
  min-width: 0;
  overflow-wrap: anywhere;
  text-align: right;
}

.social-item__label-stack {
  display: flex;
  flex-direction: row;
  gap: 1rem;
  width: 100%;
  min-width: 0;
}

.social-item__icon {
  display: flex;
  flex-shrink: 0;
}

.social-item__icon svg {
  width: 20px;
  height: 20px;
  fill: var(--color-text-secondary);
}

/* COMPACT ROW OF ICON-ONLY LINKS (DASHBOARD) */

.social-row {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 1rem;
}

.card .social-row a.social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-surface-secondary);
}

.social-icon svg {
  width: 20px;
  height: 20px;
  fill: var(--color-text-secondary);
}

.card .social-row a.social-icon:hover {
  border-color: var(--color-accent-text);
}

.social-icon:hover svg {
  fill: var(--color-accent-text);
}