/**
 * @file profile-card.css
 * Profile Card component — profielkaart met afbeelding, naam, bio en social links.
 *
 * Kleurvarianten zijn gedefinieerd als CSS custom properties bovenaan dit bestand.
 * Pas ze aan om het kleurschema te wijzigen.
 */

/* ─── Kleurvarianten ─────────────────────────────────────── */
:root {
  /* Paars */
  --nnn-profile-purple-header-bg:   #4e4a9e;
  --nnn-profile-purple-header-text: #ffffff;
  --nnn-profile-purple-body-bg:     #9d9ac9;
  --nnn-profile-purple-body-text:   #ffffff;

  /* Geel */
  --nnn-profile-yellow-header-bg:   #ffd633;
  --nnn-profile-yellow-header-text: #1a1a1a;
  --nnn-profile-yellow-body-bg:     #fff4c2;
  --nnn-profile-yellow-body-text:   #1a1a1a;

  /* Blauw */
  --nnn-profile-blue-header-bg:     #0c6cb3;
  --nnn-profile-blue-header-text:   #ffffff;
  --nnn-profile-blue-body-bg:       #c5e0f2;
  --nnn-profile-blue-body-text:     #1a1a1a;
}

/* ─── Basis structuur ────────────────────────────────────── */
.nnn-profile-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--nnn-radius-sm);
  box-shadow: var(--nnn-shadow-sm);
  background: var(--nnn-color-background);
}

/* ─── Afbeelding ─────────────────────────────────────────── */
.nnn-profile-card__media {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--nnn-color-background-alt);
}

.nnn-profile-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ─── Header ─────────────────────────────────────────────── */
.nnn-profile-card__header {
  padding: var(--nnn-space-md) var(--nnn-space-lg);
}

.nnn-profile-card__name {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.2;
}

/* ─── Body ───────────────────────────────────────────────── */
.nnn-profile-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--nnn-space-lg);
  padding: var(--nnn-space-lg);
}

.nnn-profile-card__bio {
  font-size: var(--nnn-font-size-base);
  line-height: var(--nnn-line-height-base);
}

/* ─── Social links ───────────────────────────────────────── */
.nnn-profile-card__social {
  list-style: none;
  padding: 0;
  margin: auto 0 0;
  display: flex;
  gap: var(--nnn-space-sm);
}

.nnn-profile-card__social-item {
  margin: 0;
}

.nnn-profile-card__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--nnn-radius-sm);
  background: var(--nnn-color-primary);
  color: var(--nnn-color-white);
  text-decoration: none;
  transition: background var(--nnn-transition-fast), transform var(--nnn-transition-fast);
}

.nnn-profile-card__social-link:hover,
.nnn-profile-card__social-link:focus-visible {
  background: var(--nnn-color-primary-hover);
  transform: translateY(-1px);
}

.nnn-profile-card__social-link svg {
  display: block;
}

/* ─── Variant: paars ─────────────────────────────────────── */
.nnn-profile-card--purple .nnn-profile-card__header {
  background: var(--nnn-profile-purple-header-bg);
  color: var(--nnn-profile-purple-header-text);
}

.nnn-profile-card--purple .nnn-profile-card__body {
  background: var(--nnn-profile-purple-body-bg);
  color: var(--nnn-profile-purple-body-text);
}

/* ─── Variant: geel ──────────────────────────────────────── */
.nnn-profile-card--yellow .nnn-profile-card__header {
  background: var(--nnn-profile-yellow-header-bg);
  color: var(--nnn-profile-yellow-header-text);
}

.nnn-profile-card--yellow .nnn-profile-card__body {
  background: var(--nnn-profile-yellow-body-bg);
  color: var(--nnn-profile-yellow-body-text);
}

/* ─── Variant: blauw ─────────────────────────────────────── */
.nnn-profile-card--blue .nnn-profile-card__header {
  background: var(--nnn-profile-blue-header-bg);
  color: var(--nnn-profile-blue-header-text);
}

.nnn-profile-card--blue .nnn-profile-card__body {
  background: var(--nnn-profile-blue-body-bg);
  color: var(--nnn-profile-blue-body-text);
}
/* Rich Text Block binnen een profielkaart: geen eigen achtergrond/kaderstijl */
.nnn-profile-card .rich-text-block,
.nnn-profile-card .rich-text-block--bg-white,
.nnn-profile-card .rich-text-block--bg-light,
.nnn-profile-card .rich-text-block__content {
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

/* Titel van het rich text block verbergen in profielkaart (kaart heeft eigen header) */
.nnn-profile-card .rich-text-block__title {
  display: none;
}
/* Footer/divider van het rich text block verbergen in profielkaart */
.nnn-profile-card .rich-text-block__footer,
.nnn-profile-card .rich-text-block hr {
  display: none !important;
}

/* Tekstkleur binnen de bio: wit */
.nnn-profile-card .rich-text-block,
.nnn-profile-card .rich-text-block__content,
.nnn-profile-card .rich-text-block p,
.nnn-profile-card .rich-text-block li,
.nnn-profile-card__bio,
.nnn-profile-card__bio p,
.nnn-profile-card__bio li {
  color: #ffffff;
}

/* Zwarte rand om het hele kaartje */
.nnn-profile-card {
  border: 2px solid #000000;
}
/* Tekstkleur paars: wit */
.nnn-profile-card--purple .rich-text-block,
.nnn-profile-card--purple .rich-text-block__content,
.nnn-profile-card--purple .rich-text-block p,
.nnn-profile-card--purple .rich-text-block li,
.nnn-profile-card--purple .nnn-profile-card__bio,
.nnn-profile-card--purple .nnn-profile-card__bio p,
.nnn-profile-card--purple .nnn-profile-card__bio li {
  color: #ffffff;
}

/* Geel en blauw: zwarte tekst (al via tokens, deze overrules de algemene) */
.nnn-profile-card--yellow .rich-text-block,
.nnn-profile-card--yellow .rich-text-block p,
.nnn-profile-card--blue .rich-text-block,
.nnn-profile-card--blue .rich-text-block p {
  color: #1a1a1a;
}

/* Lijn tussen header en body (één enkele lijn, geen dubbele) */
.nnn-profile-card__header {
  border-top: 2px solid #000000;
  border-bottom: 2px solid #000000;
}
/* Zorg dat profielkaartjes de volledige hoogte van hun grid-cel pakken */
.nnn-profile-card {
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* De body groeit mee om de kaart te vullen */
.nnn-profile-card__body {
  flex: 1;
}