/* ============================================================
   262-php-04-member-card — Personenkarte

   Eine Datei, fünf Varianten. Die gemeinsamen Regeln stehen oben,
   darunter nur das, was je Kontext wirklich abweicht.
   ============================================================ */

.x262-member-list {
    display: grid;
    gap: 1.5rem;
}

.x262-member {
    display: grid;
    min-width: 0;
}

.x262-member__media {
    overflow: hidden;
    background: var(--border-soft, #eceae5);
}
.x262-member__media > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.x262-member__initials {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-family: var(--font-body, Roboto, sans-serif);
    font-weight: var(--w-heading, 500);
    background: var(--brand-tint-2, #E6F2DC);
    color: var(--green-800, #0F5427);
}

.x262-member__body { display: grid; gap: .125rem; min-width: 0; }

.x262-member__name {
    margin: 0;
    font-family: var(--font-body, Roboto, sans-serif);
    font-weight: var(--w-heading, 500);
    line-height: 1.3;
    letter-spacing: -.006em;
    color: var(--text, #14171A);
}
.x262-member__name a { color: inherit; text-decoration: none; }
.x262-member__name a:hover { color: var(--brand-strong, #15703A); }

.x262-member__role {
    margin: 0;
    font-size: var(--fs-small, 1rem);
    line-height: 1.45;
    color: var(--text-2, #3d4247);
}

/* Kontaktangaben — nur in den Varianten inline und row. */
.x262-member__contact {
    margin: .375rem 0 0;
    font-size: var(--fs-small, 1rem);
    line-height: 1.7;
}
.x262-member__contact a { color: var(--link, #15703A); text-decoration: none; }
.x262-member__contact a:hover { text-decoration: underline; }

/* Redaktioneller Vermerk, z. B. „Rücktritt per …" */
.x262-member__note {
    margin: .375rem 0 0;
    font-size: var(--fs-meta, 1rem);
    line-height: 1.5;
    color: var(--text-muted, #6d7278);
    font-style: italic;
}

/* ---- Variante: tile — Verzeichnis-Kachel ------------------
   [7] Kontur + Fläche, damit die Kachel sich abhebt.          */
.x262-member-list--tile {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
}
.x262-member-list--tile[data-columns="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.x262-member-list--tile[data-columns="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.x262-member--tile {
    grid-template-rows: auto 1fr;
    overflow: hidden;
    background: var(--surface-2, #f4f2ee);
    border: 1px solid var(--border, #dfdbd4);
    border-radius: var(--radius-lg, 6px);
    transition: border-color .14s ease, background-color .14s ease;
}
.x262-member--tile:hover { background: #fff; border-color: var(--faint, #a4a8ac); }

.x262-member--tile .x262-member__media { aspect-ratio: 1 / 1; }
.x262-member--tile .x262-member__initials { font-size: 2rem; }
.x262-member--tile .x262-member__body { padding: 1rem 1.125rem 1.125rem; }
.x262-member--tile .x262-member__name { font-size: var(--fs-h4, 1.0625rem); }

/* ---- Variante: row — Listenzeile -------------------------- */
.x262-member-list--row { gap: 0; }
.x262-member--row {
    grid-template-columns: auto minmax(0, 1fr);
    gap: .875rem;
    align-items: center;
    padding: .75rem;
    border-radius: var(--radius, 3px);
    border-top: 1px solid var(--border-soft, #eceae5);
}
.x262-member--row:last-child { border-bottom: 1px solid var(--border-soft, #eceae5); }
.x262-member--row:hover { background: var(--surface-2, #f4f2ee); }
.x262-member--row .x262-member__media {
    width: 40px; height: 40px; border-radius: 50%; flex: none;
}
.x262-member--row .x262-member__initials { font-size: .875rem; }
.x262-member--row .x262-member__name { font-size: var(--fs-small, 1rem); font-weight: var(--w-heading, 500); }
.x262-member--row .x262-member__role { font-size: var(--fs-meta, 1rem); color: var(--text-muted, #6d7278); }

/* ---- Variante: inline — Autorenbox ------------------------ */
.x262-member--inline {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
    padding: 1.25rem;
    background: var(--surface-2, #f4f2ee);
    border: 1px solid var(--border, #dfdbd4);
    border-radius: var(--radius-lg, 6px);
}
.x262-member--inline .x262-member__media {
    width: 56px; height: 56px; border-radius: 50%; flex: none;
}
.x262-member--inline .x262-member__initials { font-size: 1.125rem; }
.x262-member--inline .x262-member__name { font-size: var(--fs-h4, 1.0625rem); }

/* ---- Varianten: organiser / mini — Personen-Chip ---------- */
.x262-member-list--organiser,
.x262-member-list--mini { gap: 1rem; grid-auto-flow: row; }

.x262-member--organiser,
.x262-member--mini {
    grid-template-columns: auto minmax(0, 1fr);
    gap: .75rem;
    align-items: center;
}
.x262-member--organiser .x262-member__media,
.x262-member--mini .x262-member__media {
    width: 36px; height: 36px; border-radius: 50%; flex: none;
}
.x262-member--mini .x262-member__media { width: 30px; height: 30px; }
.x262-member--organiser .x262-member__initials,
.x262-member--mini .x262-member__initials { font-size: .8125rem; }
.x262-member--organiser .x262-member__name,
.x262-member--mini .x262-member__name { font-size: var(--fs-small, 1rem); font-weight: var(--w-heading, 500); }
.x262-member--organiser .x262-member__role,
.x262-member--mini .x262-member__role { font-size: var(--fs-meta, 1rem); color: var(--text-muted, #6d7278); }

@media (max-width: 900px) {
    .x262-member-list--tile[data-columns="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
    .x262-member-list--tile,
    .x262-member-list--tile[data-columns="3"],
    .x262-member-list--tile[data-columns="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .x262-member--inline { grid-template-columns: minmax(0, 1fr); }
}