/* assets/css/org-hierarchy.css
   Ansvarskedjan — vertikal organisationsöversikt. Alla nivårader delar
   samma grid-container (samma kolumnbredd/gap) rakt igenom sidan, så
   korten alltid linjerar exakt, oavsett hur många kort en nivå har.
*/

.org-hierarchy-section {
    max-width: 900px;
    margin: 0 auto var(--space-6);
    padding: 0 var(--space-3);
}

.org-level-label {
    text-align: center;
    margin: var(--space-4) 0 var(--space-2);
}
.org-level-label span {
    display: inline-block;
    background: var(--color-bg-alt);
    border: 1px solid var(--color-surface-border);
    color: var(--color-accent-soft);
    font-weight: 700;
    font-size: .85rem;
    letter-spacing: .02em;
    padding: .45rem 1.1rem;
    border-radius: var(--radius-pill);
}

.org-connector {
    text-align: center;
    color: var(--color-text-faint);
    font-size: 1.4rem;
    margin: var(--space-1) 0;
}

/* Gemensam grid för ALLA nivårader — detta är fixen på Cenna-buggen
   där sista nivåerna inte var i linje med resten. Samma minmax/gap
   oavsett antal kort i raden. */
.org-level-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-3);
    justify-content: center;
}

.org-card {
    padding: var(--space-3);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.org-card h3 { margin: var(--space-2) 0 .2rem; }
.org-card-role {
    color: var(--color-accent-soft);
    font-size: .85rem;
    font-weight: 600;
    margin-bottom: .5rem;
}
.org-card-bio {
    color: var(--color-text-muted);
    font-size: .88rem;
}

.org-card-photo {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: var(--color-bg-alt);
    border: 2px solid var(--color-surface-border);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}
.org-card-photo img { width: 100%; height: 100%; object-fit: cover; }
.org-card-initials {
    font-family: var(--font-heading);
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--color-accent-soft);
}

/* Grundarkortet: störst, mest framträdande — högst upp i hierarkin. */
.org-card--founder {
    padding: var(--space-4) var(--space-3);
    max-width: 340px;
    margin: 0 auto;
    border-color: var(--color-accent);
    box-shadow: var(--shadow-glow);
}
.org-card--founder .org-card-photo {
    width: 140px;
    height: 140px;
    border: 3px solid var(--color-accent);
}
.org-card--founder .org-card-initials { font-size: 2.2rem; }
.org-card--founder h3 { font-size: 1.4rem; }

/* Öppna platser — samma "professionell ledig plats"-princip som
   .sponsor-tile--placeholder redan använder på sponsorsidan. */
.org-card--open {
    border-style: dashed;
    opacity: .92;
}
.org-card-photo--open {
    background: transparent;
    border-style: dashed;
}
.org-card-plus {
    font-size: 2rem;
    color: var(--color-text-faint);
    font-weight: 300;
}
.org-card--open h3 { color: var(--color-text-muted); }
.org-card-cta { margin-top: .6rem; }

@media (max-width: 480px) {
    .org-level-row { grid-template-columns: 1fr; }
}

/* ---------- Rekryteringssidan ---------- */
.recruitment-card {
    display: flex;
    flex-direction: column;
    gap: .4rem;
}
.recruitment-seats {
    display: inline-block;
    align-self: flex-start;
    background: rgba(124,110,242,.14);
    color: var(--color-accent-soft);
    font-size: .78rem;
    font-weight: 700;
    padding: .2rem .6rem;
    border-radius: var(--radius-pill);
}
.recruitment-expects {
    margin: .3rem 0 .8rem;
    padding-left: 1.1rem;
    color: var(--color-text-muted);
    font-size: .85rem;
}
.recruitment-expects li { margin-bottom: .3rem; }
.recruitment-cta { margin-top: auto; }

/* ---------- Dynamiska volontärfält i kontaktformuläret ---------- */
.pro-field--volunteer {
    border-top: 1px dashed var(--color-surface-border);
    padding-top: var(--space-2);
    margin-top: var(--space-1);
}
.pro-field-hint {
    color: var(--color-text-faint);
    font-size: .78rem;
    margin-top: .2rem;
}