/* KNMA Structure — Frontend Org Chart */

.knma-structure-wrap {
    padding: 20px 0;
    position: relative;
    overflow-x: auto;
    overflow-y: visible;
    --knma-line: #c8cef0;
    --knma-line-strong: #2E3F7F;
    --knma-trunk: #6E7BB8;
    --knma-group-bg: rgba(46, 63, 127, 0.04);
    --knma-group-border: rgba(46, 63, 127, 0.18);
    --knma-row-gap: 40px;
}

.knma-structure-wrap.is-scrollable::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 30px;
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.8));
    pointer-events: none;
}

.knma-structure-chart {
    width: max-content;
    min-width: 100%;
    margin: 0 auto;
}

/* ----------------------------------------------------------------
   Common: lists & nodes reset
   ---------------------------------------------------------------- */

.knma-structure-level {
    list-style: none;
    margin: 0;
    padding: 0;
}

.knma-structure-node {
    position: relative;
}

/* ----------------------------------------------------------------
   Level 1 (root): single centered card
   ---------------------------------------------------------------- */

.knma-structure-chart > .knma-structure-level {
    display: flex;
    justify-content: center;
}

/* Root node — centered column */
.knma-structure-chart > .knma-structure-level > .knma-structure-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0;
}

/* No connector lines on root */
.knma-structure-chart > .knma-structure-level > .knma-structure-node::before,
.knma-structure-chart > .knma-structure-level > .knma-structure-node::after {
    display: none;
}

/* ================================================================
   LEVEL 2 — direct children of the root node.
   PHP renders them inside a wrapper .knma-structure-root-children
   that contains:
     - one PRIMARY row (children that have their own subtree),
     - several SECONDARY rows (leaf children, chunked by N per row).
   A single vertical trunk runs through the whole wrapper, from the
   root card down to the last row, so every direct child is wired
   straight to the root.
   ================================================================ */

.knma-structure-root-children {
    position: relative;
    padding: 24px 0 0;
    width: 100%;
}

/* The shared vertical trunk dropping from the root card.
   It starts at the very top (right under the root) and stops just
   before the last row so it visually terminates on the last T-bar.
   Trunk uses a darker color than row T-bars so the "main artery"
   from the root reads as the dominant connector and rows look like
   branches off of it (not like a cable passing through a card). */
.knma-structure-root-children::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 3px;
    height: calc(100% - 24px);
    background: var(--knma-trunk);
    z-index: 3;
    border-radius: 2px;
    pointer-events: none;
}

/* Common row layout for both primary and secondary rows */
.knma-structure-root-children > .knma-structure-level {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    position: relative;
    padding: 24px 0 0;
    margin-bottom: var(--knma-row-gap);
}

.knma-structure-root-children > .knma-structure-level:last-child {
    margin-bottom: 0;
}

/* Connector dot where the row's T-bar meets the central trunk.
   Makes it crystal clear that this row branches OFF the trunk
   (i.e. straight from the root) rather than being a continuation
   of whatever card sits directly above. */
.knma-structure-root-children > .knma-structure-level::before {
    content: '';
    position: absolute;
    top: -3px;
    left: 50%;
    transform: translateX(-50%);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--knma-trunk);
    z-index: 4;
    pointer-events: none;
}

/* Each direct child of root: column with its own stub up to the row's T-bar */
.knma-structure-root-children > .knma-structure-level > .knma-structure-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 24px 8px 0;
    flex: 0 0 auto;
}

/* Vertical stub down from the row's horizontal T-bar to the card */
.knma-structure-root-children > .knma-structure-level > .knma-structure-node::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 24px;
    background: var(--knma-line);
    z-index: 1;
}

/* Horizontal connector along the top of each row */
.knma-structure-root-children > .knma-structure-level > .knma-structure-node::after {
    content: '';
    position: absolute;
    top: 0;
    height: 2px;
    background: var(--knma-line);
    left: 0;
    width: 100%;
    z-index: 1;
}

.knma-structure-root-children > .knma-structure-level > .knma-structure-node:first-child::after {
    left: 50%;
    width: 50%;
}

.knma-structure-root-children > .knma-structure-level > .knma-structure-node:last-child::after {
    width: 50%;
}

.knma-structure-root-children > .knma-structure-level > .knma-structure-node:only-child::after {
    display: none;
}

/* Make sure cards sit above the shared trunk */
.knma-structure-root-children > .knma-structure-level > .knma-structure-node > .knma-structure-card {
    position: relative;
    z-index: 5;
}

/* ================================================================
   LEVEL 3+ — horizontal layout for any node deeper than level 2.
   Targeted by data-depth (set in PHP) to avoid breakage from the
   .knma-structure-root-children wrapper that sits between root and
   level-2 lists.
   ================================================================ */

/* The <ul> at depth 3 or deeper (children list of any L2+ parent) */
.knma-structure-level[data-depth="3"],
.knma-structure-level[data-depth="4"],
.knma-structure-level[data-depth="5"],
.knma-structure-level[data-depth="6"] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    padding: 24px 0 0;
    width: 100%;
    position: relative;
    margin-top: 0;
}

/* Vertical stem from parent card down to its children row */
.knma-structure-level[data-depth="3"]::before,
.knma-structure-level[data-depth="4"]::before,
.knma-structure-level[data-depth="5"]::before,
.knma-structure-level[data-depth="6"]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 24px;
    background: var(--knma-line);
    z-index: 1;
}

/* Each child column at depth 3+ */
.knma-structure-level[data-depth="3"] > .knma-structure-node,
.knma-structure-level[data-depth="4"] > .knma-structure-node,
.knma-structure-level[data-depth="5"] > .knma-structure-node,
.knma-structure-level[data-depth="6"] > .knma-structure-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 24px 8px 0;
    margin-bottom: 16px;
    flex: 0 0 auto;
}

/* Vertical stub down from row's T-bar to the card */
.knma-structure-level[data-depth="3"] > .knma-structure-node::before,
.knma-structure-level[data-depth="4"] > .knma-structure-node::before,
.knma-structure-level[data-depth="5"] > .knma-structure-node::before,
.knma-structure-level[data-depth="6"] > .knma-structure-node::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 24px;
    background: var(--knma-line);
    z-index: 1;
}

/* Horizontal T-bar across siblings */
.knma-structure-level[data-depth="3"] > .knma-structure-node::after,
.knma-structure-level[data-depth="4"] > .knma-structure-node::after,
.knma-structure-level[data-depth="5"] > .knma-structure-node::after,
.knma-structure-level[data-depth="6"] > .knma-structure-node::after {
    content: '';
    position: absolute;
    top: 0;
    height: 2px;
    background: var(--knma-line);
    left: 0;
    width: 100%;
    z-index: 1;
}

.knma-structure-level[data-depth="3"] > .knma-structure-node:first-child::after,
.knma-structure-level[data-depth="4"] > .knma-structure-node:first-child::after,
.knma-structure-level[data-depth="5"] > .knma-structure-node:first-child::after,
.knma-structure-level[data-depth="6"] > .knma-structure-node:first-child::after {
    left: 50%;
    width: 50%;
}

.knma-structure-level[data-depth="3"] > .knma-structure-node:last-child::after,
.knma-structure-level[data-depth="4"] > .knma-structure-node:last-child::after,
.knma-structure-level[data-depth="5"] > .knma-structure-node:last-child::after,
.knma-structure-level[data-depth="6"] > .knma-structure-node:last-child::after {
    width: 50%;
}

.knma-structure-level[data-depth="3"] > .knma-structure-node:only-child::after,
.knma-structure-level[data-depth="4"] > .knma-structure-node:only-child::after,
.knma-structure-level[data-depth="5"] > .knma-structure-node:only-child::after,
.knma-structure-level[data-depth="6"] > .knma-structure-node:only-child::after {
    display: none;
}

/* Cards at depth 3+ should sit above their connector lines */
.knma-structure-level[data-depth="3"] > .knma-structure-node > .knma-structure-card,
.knma-structure-level[data-depth="4"] > .knma-structure-node > .knma-structure-card,
.knma-structure-level[data-depth="5"] > .knma-structure-node > .knma-structure-card,
.knma-structure-level[data-depth="6"] > .knma-structure-node > .knma-structure-card {
    position: relative;
    z-index: 2;
}

/* ----------------------------------------------------------------
   Group highlight: any non-root node WITH children gets a soft
   background + dashed outline so the parent card and its subtree
   read as one block.
   ---------------------------------------------------------------- */

.knma-structure-root-children .knma-structure-node:has(> .knma-structure-level) {
    /* background: var(--knma-group-bg);
    border: 1px dashed var(--knma-group-border); */
    border-radius: 12px;
    padding-bottom: 12px;
    position: relative;
    z-index: 4;
}

/* ----------------------------------------------------------------
   Card
   ---------------------------------------------------------------- */

.knma-structure-card {
    position: relative;
    z-index: 1;
    background: #fff;
    border: 1px solid #e2e5f1;
    border-top: 4px solid #2E3F7F;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(46, 63, 127, 0.08);
    padding: 14px;
    min-width: 180px;
    max-width: 240px;
    text-align: center;
    font-size: 14px;
    line-height: 1.4;
    color: #1C2539;
    transition: box-shadow 0.2s ease;
}

/* Highlight card on hover */
.knma-structure-card:hover {
    box-shadow: 0 4px 16px rgba(46, 63, 127, 0.16);
}

.knma-structure-card__photo {
    margin-bottom: 10px;
}

.knma-structure-card__photo-img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    margin: 0 auto;
}

.knma-structure-card__status {
    font-size: 0.78em;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #5D666F;
    margin-bottom: 6px;
}

.knma-structure-card__title {
    font-weight: 700;
    font-size: 1em;
    color: #2E3F7F;
    margin-bottom: 4px;
}

.knma-structure-card__position {
    font-size: 0.88em;
    color: #5D666F;
    margin-bottom: 4px;
}

.knma-structure-card__person {
    font-size: 0.92em;
    font-weight: 600;
    color: #1C2539;
    margin-bottom: 4px;
}

.knma-structure-card__contacts {
    font-size: 0.82em;
    color: #5D666F;
    margin-top: 8px;
    border-top: 1px solid #e2e5f1;
    padding-top: 8px;
}

.knma-structure-card__contacts a {
    color: #2E3F7F;
    text-decoration: none;
}

.knma-structure-card__contacts a:hover {
    text-decoration: underline;
}

/* ----------------------------------------------------------------
   Responsive: vertical stack on mobile
   ---------------------------------------------------------------- */

@media (max-width: 768px) {
    .knma-structure-wrap.is-scrollable::after {
        display: none;
    }

    .knma-structure-chart > .knma-structure-level {
        display: block;
        padding: 0;
    }

    .knma-structure-chart > .knma-structure-level > .knma-structure-node {
        display: block;
        padding: 0;
    }

    /* Collapse every child list to a left-bordered indented stack */
    .knma-structure-node .knma-structure-level {
        display: block;
        padding: 0;
        margin-top: 10px;
        border-left: 2px solid var(--knma-line);
        margin-left: 10px;
        padding-left: 15px;
    }

    /* Hide all desktop stems & T-connectors */
    .knma-structure-node .knma-structure-level::before,
    .knma-structure-node .knma-structure-node::before,
    .knma-structure-node .knma-structure-node::after {
        display: none !important;
    }

    /* Reset child node layout to plain block */
    .knma-structure-node .knma-structure-node {
        display: block;
        padding: 0;
        margin: 0 0 10px;
    }

    /* All cards full width on mobile */
    .knma-structure-card {
        max-width: 100%;
        min-width: 0;
        text-align: left;
    }

    .knma-structure-card__photo-img {
        margin: 0;
    }

    .knma-structure-root-children .knma-structure-node:has(> .knma-structure-level) {
        padding: 8px 8px 8px 0;
    }

    /* On mobile, collapse the root-children wrapper into a simple stack
       and hide the shared trunk + row T-bars. */
    .knma-structure-root-children {
        padding: 0;
    }

    .knma-structure-root-children::before {
        display: none;
    }

    .knma-structure-root-children > .knma-structure-level {
        display: block;
        padding: 0;
        margin: 10px 0 0;
        border-left: 2px solid var(--knma-line);
        margin-left: 10px;
        padding-left: 15px;
    }
}