/* Kinks Page Styles
   ––––––––––––––––––––––––––––––––––––––––––––––––––
   Used by kinks.html. A kink-profile layout (profile card, stat chips,
   kinks by role and category) on top of style.css tokens and the
   .container-left layout used by the privacy page. */

/* Profile card
   –––––––––––––––––––––––––––––––––––––––––––––––––– */
.kp-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--spacing-s) var(--spacing-m);
  align-items: center;
  margin: var(--spacing-l) 0 var(--spacing-xl) 0;
  padding: var(--spacing-m);
  background: #121212;
  border: 1px solid #2a2a2a;
  border-radius: 1rem;
}
.kp-avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
}
.kp-name {
  margin: 0;
  font-size: var(--scale-3);
  line-height: 1.1;
}
.container-left .kp-meta {
  margin: 0.25rem 0 var(--spacing-xs) 0;
  opacity: 0.7;
  font-size: 0.9375rem;
}
.kp-socials {
  display: flex;
  gap: var(--spacing-xs);
}
.kp-socials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: #262626;
  transition: opacity 0.15s ease;
}
.kp-socials a:hover {
  opacity: 0.75;
}
.kp-socials img {
  width: 1rem;
  height: 1rem;
}
.container-left .kp-bio {
  grid-column: 1 / -1;
  margin: 0;
  line-height: 1.5;
}

/* Sections
   –––––––––––––––––––––––––––––––––––––––––––––––––– */
.kp-section {
  margin: 0 0 var(--spacing-xl) 0;
}
.kp-section h2 {
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.65;
  margin: 0 0 var(--spacing-s) 0;
}
.container-left .kp-legend {
  display: flex;
  gap: var(--spacing-xs);
  margin: 0 0 var(--spacing-s) 0;
}

/* Role blocks and categories
   –––––––––––––––––––––––––––––––––––––––––––––––––– */
.kp-role {
  padding: var(--spacing-m);
  background: #121212;
  border: 1px solid #2a2a2a;
  border-radius: 1rem;
  margin-bottom: var(--spacing-s);
}
.kp-role-title {
  margin: 0 0 var(--spacing-m) 0;
  font-size: var(--scale-1);
  font-weight: 800;
}
.kp-role-title span {
  font-weight: 400;
  opacity: 0.6;
}
.kp-cat + .kp-cat {
  margin-top: var(--spacing-m);
  padding-top: var(--spacing-m);
  border-top: 1px solid #2a2a2a;
}
.kp-cat h4 {
  margin: 0 0 var(--spacing-xs) 0;
  font-size: 0.9375rem;
  font-weight: 700;
}

/* Chips
   –––––––––––––––––––––––––––––––––––––––––––––––––– */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
  margin: 0;
}
.chip {
  display: inline-block;
  margin: 0;
  padding: 0.375rem 0.875rem;
  background: #1f1f1f;
  border: 1px solid #333;
  border-radius: 999px;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.3;
}
.chip--fav {
  background: rgba(215, 38, 56, 0.15);
  border-color: #D72638;
}
.chip--fav::before {
  content: "🔥 ";
}
.chip--limit {
  color: #FF6B78;
  background: transparent;
  border-color: #FF6B78;
}
.chip--limit::before {
  content: "🚫 ";
}
.chip--curious {
  background: transparent;
  border-style: dashed;
  border-color: #777;
}
.chip--curious::before {
  content: "👀 ";
}
.chip--sm {
  padding: 0.125rem 0.625rem;
  font-size: 0.8125rem;
}

.container-left .kp-foot {
  margin: 0 0 var(--spacing-xxl) 0;
}

/* Responsive
   –––––––––––––––––––––––––––––––––––––––––––––––––– */
@media (max-width: 34.375rem) {
  .kp-card,
  .kp-role {
    padding: var(--spacing-s);
  }
  .kp-avatar {
    width: 72px;
    height: 72px;
  }
}