/* ══════════════════════════════════════════════════════════════
   Profiel subblok-header demo — 5 varianten
   Alle varianten werken met --psd-color (de primaire kleur).
   ══════════════════════════════════════════════════════════════ */

.psd-page {
    max-width: 860px;
    margin: 0 auto;
    padding: 2rem 1rem 4rem;
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}

.psd-intro h1 { margin: 0 0 .4rem; }
.psd-intro p  { margin: 0; opacity: .7; }

.psd-concept-label {
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    opacity: .5;
    padding: 0 .25rem;
    margin-bottom: -.75rem;
}

/* ── gemeenschappelijke subblok-basis ───────────────────── */
.psd-block {
    border: none;
    border-radius: 0;
    overflow: hidden;
    box-shadow: none;
}

/* Statistieken-rij (identiek aan huidige nib-profiel-hero-stats) */
.psd-stats {
    display: flex;
    gap: 0;
    padding: 1.25rem 1.5rem;
    flex-wrap: wrap;
}
.psd-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .3rem;
    flex: 1;
    min-width: 80px;
    cursor: pointer;
    padding: .5rem;
    transition: background .2s;
}
.psd-stat:hover { background: rgba(0,0,0,.04); }
.psd-stat-val {
    font-size: 2rem;
    font-weight: 500;
    line-height: 1;
}
.psd-stat-lbl {
    font-size: .7rem;
    opacity: .65;
    text-align: center;
}

/* ── Variant A – vaste strip links, rest neutraal ───────── */
.psd-block--a .psd-header {
    display: flex;
    align-items: stretch;
}
.psd-block--a .psd-strip {
    width: 3.25rem;
    min-width: 3.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: color-mix(in oklab, var(--psd-color, #075082), black 16%);
}
.psd-block--a .psd-main {
    flex: 1;
    padding: .85rem 1rem;
    display: flex;
    flex-direction: column;
    gap: .2rem;
    background: color-mix(in oklab, var(--psd-color, #075082), white 88%);
}

/* ── Variant B – strip + volle kleur header met gradient ── */
.psd-block--b .psd-header {
    display: flex;
    align-items: stretch;
    background: linear-gradient(
        to right,
        color-mix(in oklab, var(--psd-color, #075082), black 10%) 0%,
        color-mix(in oklab, var(--psd-color, #075082), white 8%) 100%
    );
}
.psd-block--b .psd-strip {
    width: 3.25rem;
    min-width: 3.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,.9);
    background: rgba(0,0,0,.15);
}
.psd-block--b .psd-main {
    flex: 1;
    padding: .85rem 1rem;
    display: flex;
    flex-direction: column;
    gap: .2rem;
    color: #fff;
}
.psd-block--b .psd-main h2,
.psd-block--b .psd-main p { color: #fff; }
.psd-block--b .psd-main p { opacity: .72; }

/* ── Variant C – vervaagde kleur header, onderkant gradient → wit */
.psd-block--c .psd-header {
    display: flex;
    align-items: stretch;
    background: linear-gradient(
        to bottom,
        color-mix(in oklab, var(--psd-color, #075082), white 72%) 0%,
        color-mix(in oklab, var(--psd-color, #075082), white 92%) 100%
    );
}
.psd-block--c .psd-strip {
    width: 3.25rem;
    min-width: 3.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: var(--psd-color, #075082);
}
.psd-block--c .psd-main {
    flex: 1;
    padding: .85rem 1rem;
    display: flex;
    flex-direction: column;
    gap: .2rem;
    color: color-mix(in oklab, var(--psd-color, #075082), black 35%);
}
.psd-block--c .psd-main p { opacity: .7; }

/* ── Variant D – diagonale gradient, modern ─────────────── */
.psd-block--d .psd-header {
    display: flex;
    align-items: stretch;
    background: linear-gradient(
        120deg,
        color-mix(in oklab, var(--psd-color, #075082), black 5%)  0%,
        color-mix(in oklab, var(--psd-color, #075082), white 20%) 60%,
        color-mix(in oklab, var(--psd-color, #075082), white 35%) 100%
    );
}
.psd-block--d .psd-strip {
    width: 3.25rem;
    min-width: 3.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,.85);
    background: rgba(0,0,0,.18);
    backdrop-filter: blur(4px);
}
.psd-block--d .psd-main {
    flex: 1;
    padding: .85rem 1rem;
    display: flex;
    flex-direction: column;
    gap: .2rem;
    color: #fff;
}
.psd-block--d .psd-main h2,
.psd-block--d .psd-main p { color: #fff; }
.psd-block--d .psd-main p { opacity: .72; }

/* ── Variant E – subtiele tint, accent-lijn links ────────── */
.psd-block--e .psd-header {
    display: flex;
    align-items: stretch;
    border-left: 4px solid var(--psd-color, #075082);
    background: color-mix(in oklab, var(--psd-color, #075082), white 92%);
}
.psd-block--e .psd-strip {
    width: 3rem;
    min-width: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--psd-color, #075082);
    background: color-mix(in oklab, var(--psd-color, #075082), white 78%);
}
.psd-block--e .psd-main {
    flex: 1;
    padding: .85rem 1rem;
    display: flex;
    flex-direction: column;
    gap: .2rem;
    color: color-mix(in oklab, var(--psd-color, #075082), black 40%);
}
.psd-block--e .psd-main p { opacity: .7; }

/* ── Donker thema ────────────────────────────────────────── */
.rz-material-dark .psd-block--a .psd-main {
    background: color-mix(in oklab, var(--psd-color, #075082), black 62%);
}
.rz-material-dark .psd-block--c .psd-header {
    background: linear-gradient(
        to bottom,
        color-mix(in oklab, var(--psd-color, #075082), black 35%) 0%,
        color-mix(in oklab, var(--psd-color, #075082), black 52%) 100%
    );
}
.rz-material-dark .psd-block--c .psd-main {
    color: color-mix(in oklab, var(--psd-color, #075082), white 75%);
}
.rz-material-dark .psd-block--e .psd-header {
    background: color-mix(in oklab, var(--psd-color, #075082), black 58%);
}
.rz-material-dark .psd-block--e .psd-strip {
    color: color-mix(in oklab, var(--psd-color, #075082), white 70%);
    background: color-mix(in oklab, var(--psd-color, #075082), black 50%);
}
.rz-material-dark .psd-block--e .psd-main {
    color: color-mix(in oklab, var(--psd-color, #075082), white 80%);
}