/* --- Personen (epi/personen) ---------------------------------------------
   Gleichrangige Porträts „wie aufgeklebt“: weisser Abzug mit Papierschatten
   (tokens elevation.papier), alternierende Schraeglage im Bereich von
   components.papierSchraeglage (hoechstens 2,5 Grad), ein Klebestreifen in
   Orange 50. Jede zweite Spalte sitzt tiefer, damit keine starre Reihe
   entsteht. Name und Funktion stehen gerade darunter und bleiben gut lesbar.
   Die Fotos sind „geklebt“ und bewegen sich unter dem Zeiger nicht; mit
   der Maus lassen sie sich verschieben (siehe unten). Porträts kommen aus
   tools/portraet.sh. */

.epi-personen {
    row-gap: var(--wp--preset--spacing--lg);
    align-items: start;
}

@media screen and (max-width: 639px) {
    .epi-grid--4.epi-personen {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--wp--preset--spacing--lg) var(--wp--preset--spacing--md);
    }
}

/* Versatz: zweite und vierte Spalte (mobil die rechte) sitzen tiefer. */
.epi-personen > .epi-person:nth-child(even) {
    margin-block-start: var(--wp--preset--spacing--xl);
}

/* Die ganze Karte ist der Abzug, wie ein Sofortbild: Foto oben, Name und
   Funktion im breiten weissen Rand darunter. So wandert der Name beim
   Verschieben mit und liegt nie lose ueber einem anderen Foto. */
.epi-person {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    padding: 0.5rem 0.5rem 1rem;
    background-color: var(--color-base);
    border-radius: 2px;
    box-shadow: 0 6px 14px 0 rgb(120 92 40 / 0.22), 0 1px 2px 0 rgb(120 92 40 / 0.18);
    text-align: center;
    rotate: -2deg;
    transition: scale 0.15s ease, box-shadow 0.15s ease;
}

.epi-person > * {
    margin: 0;
}

.epi-person:nth-child(4n+2) { rotate: 1.5deg; }
.epi-person:nth-child(4n+3) { rotate: -1deg; }
.epi-person:nth-child(4n+4) { rotate: 2.5deg; }

.epi-person__bild {
    margin-block-end: 0.75rem;
}

/* Klebestreifen oben mittig, flach und halbtransparent. */
.epi-person::before {
    content: "";
    position: absolute;
    z-index: 1;
    inset-block-start: -0.75rem;
    inset-inline-start: 50%;
    inline-size: 38%;
    block-size: 1.5rem;
    translate: -50% 0;
    rotate: -3deg;
    background-color: color-mix(in srgb, var(--color-primary-50) 80%, transparent);
    box-shadow: 0 1px 2px rgb(120 92 40 / 0.18);
}

.epi-person:nth-child(odd)::before {
    rotate: 2deg;
}

.epi-person__bild img {
    display: block;
    inline-size: 100%;
    block-size: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
}

/* Verschieben (assets/js/personen.js, nur mit Maus): das Skript setzt
   .ist-ziehbar und verschiebt die ganze Karte per translate. Beim Ziehen hebt
   sich der Abzug leicht an, beim Loslassen liegt er wieder flach. */
.ist-ziehbar .epi-person {
    position: relative;
    cursor: grab;
    user-select: none;
}

.ist-ziehbar .epi-person img {
    -webkit-user-drag: none;
    pointer-events: none;
}

.ist-ziehbar .epi-person.wird-gezogen {
    cursor: grabbing;
}

.epi-person.wird-gezogen {
    scale: 1.03;
    box-shadow: 0 10px 20px 0 rgb(120 92 40 / 0.28), 0 2px 4px 0 rgb(120 92 40 / 0.2);
}

@media (prefers-reduced-motion: reduce) {
    .epi-person {
        transition: none;
    }
}

.epi-person__name {
    color: var(--color-text);
    font-family: var(--font-primary);
    font-size: 1rem;
    font-weight: 700;
    line-height: var(--line-height-ui);
}

.epi-person__funktion {
    font-size: 0.875rem;
    line-height: 1.4;
    color: var(--color-secondary);
}

/* Unbekannte Funktion bleibt leer und nimmt keinen Platz ein. */
.epi-person__funktion:empty {
    display: none;
}