/* Membri module styles. --m = colour of the Membro. */

.membro-avatar {
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
    border-radius: 22%; overflow: hidden; background: var(--m); color: var(--m-text);
    font-weight: 800; letter-spacing: 0.02em; box-shadow: var(--shadow-sm);
}
.membro-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* Overview */
.membri-intro { max-width: 60ch; margin-bottom: var(--space-5); }
.membri-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.membro-card {
    display: flex; gap: var(--space-4); align-items: flex-start; height: 100%;
    color: var(--text); text-decoration: none; border-top: 4px solid var(--m);
    transition: transform var(--transition), box-shadow var(--transition);
}
.membro-card:hover { color: var(--text); transform: translateY(-2px); box-shadow: var(--shadow); }
.membro-card-body { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.membro-card-name { font-size: var(--text-lg); }
.membro-card-text { color: var(--text-muted); font-size: var(--text-sm); }
.membro-card-members { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--text-muted); font-size: 0.8rem; margin-top: var(--space-1); }

/* Profile */
.membro-hero {
    background: linear-gradient(135deg, color-mix(in srgb, var(--m) 88%, #000) 0%, var(--m) 100%);
    color: var(--m-text, #fff);  /* dark text on a light colour (#41) */
}
.membro-hero-inner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-5); padding-block: var(--space-6); }
.membro-hero h1 { font-family: var(--font-serif); font-size: var(--text-3xl); margin: 0; color: inherit; }
.membro-hero .eyebrow { color: inherit; opacity: 0.8; }
.membro-hero .membro-avatar { box-shadow: 0 0 0 4px rgb(255 255 255 / 0.85), var(--shadow-lg); }
.membro-members { display: flex; align-items: center; gap: var(--space-2); margin: var(--space-2) 0 0; opacity: 0.92; }
.membro-edit { margin-left: auto; }
.membro-layout { display: grid; gap: var(--space-5); align-items: start; }
@media (min-width: 900px) { .membro-layout { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } }

/* Organisation page: one section per group (higher positions, Membri) */
.membri-row + .membri-row { margin-top: var(--space-7); }
/* Groups shown next to each other (#36): side by side from tablet width, each with its own card grid. */
.membri-row.is-shared { display: grid; gap: var(--space-7) var(--space-6); }
@media (min-width: 900px) { .membri-row.is-shared { grid-template-columns: repeat(var(--groups), minmax(0, 1fr)); } }
.membri-group-title { font-size: var(--text-xl); margin-bottom: var(--space-1); }
.membri-group-text { margin-bottom: var(--space-4); max-width: 70ch; }

/* Group form: one box per language */
.group-lang { border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-3) var(--space-4) var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); }
.group-lang legend { padding: 0 var(--space-2); margin-left: calc(-1 * var(--space-2)); }
.group-translations > summary { cursor: pointer; font-weight: 600; }
.group-translations[open] > summary { margin-bottom: var(--space-2); }
.group-translations .group-lang + .group-lang { margin-top: var(--space-3); }
.group-assign-hint { margin-top: var(--space-4); }