/* ============================================================
 * NIAMR organogram — branching tree with circular badges
 * (inspired by the user's reference images: org-chart with
 * colored circular nodes, dashed rings, and dotted connector
 * lines).
 *
 * Hierarchy: Advisory Board → CEIs Committee → Project Lead
 *            → Implementing Team (6 sub-teams).
 *
 * No individual Advisory Board member names (NIHR policy §15).
 *
 * Ported to HIRI token palette:
 *   #D4351C  (advisory board red)   → var(--accent-color)
 *   #005EB8  (project lead blue)    → var(--accent-color)
 *   #00A651  (CEIs committee green) → var(--primary-color)
 *   #1B1B3A  (team role nodes dark) → var(--primary-color)
 * ============================================================ */

.niamr-organogram {
    max-width: 960px;
    margin: 40px auto;
    padding: 0 16px;
    position: relative;
    text-align: center;
    font-family: "Manrope", sans-serif;
}

/* ---------- Level (row) ---------- */
.niamr-organogram__level {
    display: flex;
    justify-content: center;
    position: relative;
    padding-top: 36px;
}
.niamr-organogram__level--root { padding-top: 0; }

/* Dotted vertical connector between sequential levels */
.niamr-organogram__level:not(.niamr-organogram__level--root):not(.niamr-organogram__level--branch)::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 36px;
    background-image: radial-gradient(circle, rgba(27,27,58,0.35) 1px, transparent 1.5px);
    background-size: 2px 8px;
    background-repeat: repeat-y;
}

/* ---------- Branching level: 6 sub-team nodes in a row ---------- */
.niamr-organogram__level--branch {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
    padding-top: 100px;
}
/* Top vertical stub from parent to the horizontal bus */
.niamr-organogram__level--branch::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 40px;
    background-image: radial-gradient(circle, rgba(27,27,58,0.35) 1px, transparent 1.5px);
    background-size: 2px 8px;
    background-repeat: repeat-y;
}
/* Horizontal bus spanning the center of first-to-last columns */
.niamr-organogram__level--branch::after {
    content: "";
    position: absolute;
    top: 40px;
    left: 8.33%;            /* center of column 1 (100/6/2) */
    right: 8.33%;           /* center of column 6 */
    height: 2px;
    background-image: radial-gradient(circle, rgba(27,27,58,0.35) 1px, transparent 1.5px);
    background-size: 8px 2px;
    background-repeat: repeat-x;
}
/* Each child drops from bus to its own badge */
.niamr-organogram__level--branch .niamr-organogram__node::before {
    content: "";
    position: absolute;
    top: -60px;             /* 100 padding-top - 40 bus = 60 above node */
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 60px;
    background-image: radial-gradient(circle, rgba(27,27,58,0.35) 1px, transparent 1.5px);
    background-size: 2px 8px;
    background-repeat: repeat-y;
}

/* ---------- Node (badge + label) ---------- */
.niamr-organogram__node {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    text-decoration: none;
    color: inherit;
    transition: transform 200ms ease;
}
a.niamr-organogram__node:hover { transform: translateY(-3px); color: inherit; text-decoration: none; }

/* ---------- Inline variant: label sits beside the circle, not below ----------
   Absolute-positioned label so the badge stays at the node's center and the
   level's vertical dotted connector lines up with the badge (not with
   the middle of the whole node including label). */
.niamr-organogram__node--inline .niamr-organogram__label {
    position: absolute;
    left: calc(100% + 18px);
    top: 50%;
    transform: translateY(-50%);
    margin-top: 0;
    text-align: left;
    width: max-content;
    max-width: 400px;
}
.niamr-organogram__node--inline .niamr-organogram__label h5 {
    white-space: nowrap;
    font-size: 16px;
}
.niamr-organogram__node--inline .niamr-organogram__label p {
    white-space: normal;
    font-size: 13px;
}
@media (max-width: 767px) {
    /* Below tablet, fall back to label-below so side-label doesn't overflow */
    .niamr-organogram__node--inline .niamr-organogram__label {
        position: static;
        transform: none;
        margin-top: 14px;
        text-align: center;
        width: auto;
        max-width: 180px;
    }
    .niamr-organogram__node--inline .niamr-organogram__label h5 { white-space: normal; }
}

.niamr-organogram__badge {
    width: 100px; height: 100px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 36px;
    position: relative;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12);
}
/* Outer dashed ring — sits outside the badge (inset: -10px) */
.niamr-organogram__badge::before {
    content: "";
    position: absolute;
    inset: -10px;
    border: 2px dashed;
    border-radius: 50%;
    opacity: 0.35;
    pointer-events: none;
}

/* Photo variant — Project Lead circle renders the PI portrait */
.niamr-organogram__badge--photo { background: #ffffff; padding: 0; }
.niamr-organogram__badge--photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 20%;
    border-radius: 50%;
    display: block;
}

/* Label under the badge */
.niamr-organogram__label {
    margin-top: 18px;
    max-width: 160px;
    text-align: center;
}
.niamr-organogram__label h5 {
    font-family: "Manrope", sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: var(--primary-color);
    margin: 0 0 4px;
    line-height: 1.25;
}
.niamr-organogram__label p {
    font-size: 12px;
    font-weight: 500;
    color: rgba(27, 27, 58, 0.6);
    margin: 0;
    line-height: 1.4;
}

/* ---------- Node variants (sizes + tier colors) ---------- */
.niamr-organogram__node--advisory .niamr-organogram__badge {
    width: 140px; height: 140px; font-size: 48px;
    background: var(--accent-color);  /* was #D4351C advisory board red */
    color: #ffffff;
}
.niamr-organogram__node--advisory .niamr-organogram__badge::before { border-color: var(--accent-color); }

.niamr-organogram__node--ceis .niamr-organogram__badge {
    width: 110px; height: 110px; font-size: 40px;
    background: var(--primary-color);  /* was #00A651 CEIs committee green */
}
.niamr-organogram__node--ceis .niamr-organogram__badge::before { border-color: var(--primary-color); }

.niamr-organogram__node--lead .niamr-organogram__badge {
    width: 120px; height: 120px; font-size: 42px;
    background: var(--accent-color);  /* was #005EB8 project lead blue */
}
.niamr-organogram__node--lead .niamr-organogram__badge::before { border-color: var(--accent-color); }

.niamr-organogram__node--sm .niamr-organogram__badge { width: 80px; height: 80px; font-size: 30px; }
.niamr-organogram__node--team .niamr-organogram__badge {
    background: var(--primary-color);  /* was #1B1B3A team role nodes dark */
}
.niamr-organogram__node--team .niamr-organogram__badge::before { border-color: var(--primary-color); }

/* ---------- Advisory Board institution chips ---------- */
.niamr-organogram__chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    max-width: 540px;
    margin: 20px auto 0;
    padding-top: 16px;
}
.niamr-organogram__chip {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    background: rgba(27, 27, 58, 0.05);
    border: 1px solid rgba(27, 27, 58, 0.12);
    color: var(--primary-color);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.03em;
    cursor: help;
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
    .niamr-organogram__level--branch {
        grid-template-columns: repeat(3, 1fr);
        row-gap: 72px;
    }
    /* Drop the bus + drops — too complex to redraw cleanly on 2-row wrap */
    .niamr-organogram__level--branch::after { display: none; }
    .niamr-organogram__level--branch .niamr-organogram__node::before { display: none; }
    .niamr-organogram__level--branch::before { display: none; }
    .niamr-organogram__level--branch { padding-top: 56px; }
    /* Use a single dotted stem above the group so the visual flow remains */
    .niamr-organogram__level--branch {
        position: relative;
    }
    .niamr-organogram__level--branch::before {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 2px;
        height: 40px;
        background-image: radial-gradient(circle, rgba(27,27,58,0.35) 1px, transparent 1.5px);
        background-size: 2px 8px;
        background-repeat: repeat-y;
    }
}
@media (max-width: 575px) {
    .niamr-organogram__level--branch {
        grid-template-columns: repeat(2, 1fr);
    }
    .niamr-organogram__node--advisory .niamr-organogram__badge { width: 110px; height: 110px; font-size: 40px; }
    .niamr-organogram__node--ceis     .niamr-organogram__badge { width: 90px;  height: 90px;  font-size: 32px; }
    .niamr-organogram__node--lead     .niamr-organogram__badge { width: 100px; height: 100px; font-size: 36px; }
    .niamr-organogram__node--sm       .niamr-organogram__badge { width: 70px;  height: 70px;  font-size: 26px; }
    .niamr-organogram__label h5 { font-size: 13px; }
    .niamr-organogram__label p  { font-size: 11px; }
}