/* =====================================================================
   cdp.css — Module 1.5 · deel 2: Klant-360 / CDP-profiel. Bouwt op
   tokens + bouwstenen.css. Kanaal-kleuren via cdp--* token-mapping.
===================================================================== */

.cdp--groend { --cdp-kleur: var(--c-groen-d); --cdp-tint: var(--c-groen-t); }
.cdp--groen  { --cdp-kleur: var(--c-groen);   --cdp-tint: var(--c-groen-t); }
.cdp--amber  { --cdp-kleur: var(--c-amber);   --cdp-tint: var(--c-amber-t); }
.cdp--terra  { --cdp-kleur: var(--c-terra);   --cdp-tint: var(--c-terra-t); }

/* Hero */
.cdp-hero { padding: 20px 22px; margin-bottom: 16px; }
.cdp-hero__wie { display: flex; gap: 16px; align-items: center; }
.cdp-avatar { width: 56px; height: 56px; flex: none; border-radius: 14px; background: var(--c-groen-t); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.3rem; color: var(--c-groen-d); }
.cdp-naam { margin: 0 0 5px; font-size: 1.5rem; font-weight: 800; letter-spacing: -.01em; }
.cdp-sub { font-size: .82rem; color: var(--c-ink-2); }
.cdp-idlabel { font-size: .68rem; color: var(--c-ink-3); margin-top: 4px; }

/* Grid + blokken */
.cdp-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 16px; align-items: start; margin-bottom: 16px; }
.cdp-grid--onder { grid-template-columns: 1.4fr 1fr; }
@media (max-width: 900px) { .cdp-grid, .cdp-grid--onder { grid-template-columns: 1fr; } }
.cdp-blok { padding: 20px 22px; margin-bottom: 0; }
.cdp-blok__kop { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.cdp-blok__meta { font-size: .68rem; color: var(--c-groen-d); font-weight: 700; }
.cdp-uitleg { font-size: .74rem; line-height: 1.5; color: var(--c-ink-3); margin: 3px 0 15px; }
.cdp > .kaart.cdp-blok { margin-bottom: 16px; }

/* Samengevoegde identiteiten */
.cdp-ids { display: flex; flex-direction: column; gap: 11px; }
.cdp-id { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 11px; background: var(--cdp-tint); border: var(--lijndikte) solid var(--c-lijn); }
.cdp-id__ic { width: 30px; height: 30px; flex: none; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: var(--cdp-kleur); background: #fff; border: var(--lijndikte) solid var(--c-lijn); }
.cdp-id__inhoud { flex: 1; min-width: 0; }
.cdp-id__kop { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cdp-id__bron { font-weight: 800; font-size: .82rem; }
.cdp-first-badge { font-family: var(--font-mono); font-size: .56rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--cdp-kleur, var(--c-groen-d)); background: #fff; border: var(--lijndikte) solid var(--c-lijn-2); border-radius: var(--radius-pill); padding: 2px 7px; }
.cdp-id__detail { font-size: .76rem; line-height: 1.45; color: var(--c-ink-2); margin-top: 3px; }
.cdp-id__meta { display: flex; gap: 10px; align-items: center; margin-top: 6px; flex-wrap: wrap; }
.cdp-kanaal { font-size: .62rem; font-weight: 700; color: var(--cdp-kleur, var(--c-ink-2)); }
.cdp-wanneer { font-size: .66rem; color: var(--c-ink-3); }
.cdp-match { font-size: .62rem; color: var(--c-groen-d); font-weight: 700; }

/* Herkomst & attributie */
.cdp-firsttouch { display: flex; align-items: center; gap: 10px; padding: 11px 13px; border-radius: 11px; background: var(--cdp-tint); border: var(--lijndikte) solid var(--c-lijn); margin-bottom: 16px; }
.cdp-firsttouch__ic { width: 30px; height: 30px; flex: none; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: var(--cdp-kleur); background: #fff; border: var(--lijndikte) solid var(--c-lijn); }
.cdp-firsttouch__label { font-weight: 800; font-size: .82rem; }
.cdp-touches { display: flex; flex-direction: column; gap: 12px; }
.cdp-touch__kop { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 5px; }
.cdp-touch__label { display: flex; align-items: center; gap: 7px; font-weight: 600; font-size: .78rem; }
.cdp-touch__ic { color: var(--cdp-kleur); }
.cdp-touch__gewicht { font-weight: 800; font-size: .78rem; }
.cdp-touch__rij { display: flex; align-items: center; gap: 9px; }
.cdp-touch__rij .rec-bar { flex: 1; height: 8px; }
.cdp-touch__rol { font-size: .64rem; font-weight: 700; color: var(--c-ink-3); white-space: nowrap; width: 76px; text-align: right; }

/* Tijdlijn */
.cdp-tijdlijn { display: flex; flex-direction: column; }
.cdp-event { display: flex; gap: 13px; align-items: flex-start; }
.cdp-event__spoor { display: flex; flex-direction: column; align-items: center; align-self: stretch; }
.cdp-event__dot { width: 28px; height: 28px; flex: none; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: .74rem; color: var(--cdp-kleur); background: var(--cdp-tint); border: var(--lijndikte) solid var(--c-lijn); }
.cdp-event__lijn { flex: 1; width: 2px; background: var(--c-lijn); min-height: 14px; }
.cdp-event__inhoud { padding-bottom: 16px; flex: 1; }
.cdp-event__meta { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.cdp-event__tekst { font-size: .82rem; line-height: 1.45; margin-top: 3px; }

/* Segmenten + consent */
.cdp-segmenten { display: flex; flex-wrap: wrap; gap: 9px; }
.cdp-segment { font-size: .74rem; font-weight: 700; padding: 6px 12px; border-radius: var(--radius-pill); }
.cdp-segment--stil { color: var(--c-ink-2); background: var(--c-paneel); }
.cdp-segment--groen { color: var(--c-groen-d); background: var(--c-groen-t); }
.cdp-segment--terra { color: var(--c-terra-d); background: var(--c-terra-t); }
.cdp-segment--amber { color: var(--c-amber); background: var(--c-amber-t); }
.cdp-consents { display: flex; flex-direction: column; gap: 8px; }
.cdp-consent { display: flex; align-items: center; gap: 9px; padding: 9px 12px; border-radius: 10px; background: var(--c-paneel); font-size: .78rem; color: var(--c-ink-3); }
.cdp-consent.is-aan { background: var(--c-groen-t); color: var(--c-ink); }
.cdp-consent__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--c-lijn-2); flex: none; }
.cdp-consent.is-aan .cdp-consent__dot { background: var(--c-groen); }
.cdp-consent__label { flex: 1; font-weight: 600; }
.cdp-consent__waarde { font-size: .62rem; }