/* =========================
   HCS ORG CHART
   Organigramma in HTML/CSS: nodi di linea in riga sotto il genitore,
   nodi di staff su una barra laterale al tronco. Senza JS.
========================= */

.hcs-org {
    --hcs-org-node-w: 168px;
    --hcs-org-gap-h: 16px;
    --hcs-org-gap-v: 28px;
    --hcs-org-trunk-gap: 60px;
    --hcs-org-line: var(--e-global-color-primary, #006930);
    --hcs-org-line-w: 2px;
    --hcs-org-root-bg: var(--e-global-color-primary, #006930);
    --hcs-org-root-text: #ffffff;
    --hcs-org-line-bg: var(--e-global-color-accent, #EDEBDD);
    --hcs-org-staff-bg: #ffffff;
    --hcs-org-staff-border: var(--e-global-color-accent, #EDEBDD);
    --hcs-org-text: var(--e-global-color-text, #21211F);
    --hcs-org-code-bg: var(--e-global-color-primary, #006930);
    --hcs-org-code-text: #ffffff;
    --hcs-org-radius: 14px;
    --hcs-org-title-size: 14px;

    width: 100%;
    font-family: var(--e-global-typography-text-font-family, 'Nexa'), sans-serif;
    color: var(--hcs-org-text);
}

.hcs-org__scroll {
    overflow-x: auto;
    padding-bottom: 10px;
}

/* --- Struttura --- */

.hcs-org__row {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: var(--hcs-org-gap-h);
    position: relative;
    padding-top: var(--hcs-org-gap-v);
}

.hcs-org__row--root {
    padding-top: 0;
    width: max-content;
    min-width: 100%;
}

.hcs-org__node {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    flex: 0 0 auto;
    padding-top: var(--hcs-org-gap-v);
}

.hcs-org__row--root > .hcs-org__node {
    padding-top: 0;
}

.hcs-org__children {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.hcs-org__staff {
    display: flex;
    align-items: flex-start;
    gap: var(--hcs-org-trunk-gap);
    position: relative;
    padding-top: var(--hcs-org-gap-v);
    width: 100%;
}

.hcs-org__staff-side {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
}

.hcs-org__staff-side--left  { justify-content: flex-end; }
.hcs-org__staff-side--right { justify-content: flex-start; }

.hcs-org__group {
    display: flex;
    align-items: flex-start;
    gap: var(--hcs-org-gap-h);
    position: relative;
}

/* --- Connettori --- */

/* gambo dal genitore alla barra dei figli di linea */
.hcs-org__row:not(.hcs-org__row--root)::before,
.hcs-org__staff::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    width: var(--hcs-org-line-w);
    height: var(--hcs-org-gap-v);
    margin-left: calc(var(--hcs-org-line-w) / -2);
    background: var(--hcs-org-line);
}

/* tronco: attraversa la fascia di staff fino ai figli di linea */
.hcs-org__children.has-line > .hcs-org__staff::before {
    height: auto;
    bottom: 0;
}

/* discesa verticale su ogni nodo figlio */
.hcs-org__node:not(.hcs-org__node--root)::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    width: var(--hcs-org-line-w);
    height: var(--hcs-org-gap-v);
    margin-left: calc(var(--hcs-org-line-w) / -2);
    background: var(--hcs-org-line);
}

/* barra orizzontale tra fratelli */
.hcs-org__node:not(.hcs-org__node--root)::after {
    content: '';
    position: absolute;
    top: 0;
    left: calc(var(--hcs-org-gap-h) / -2);
    right: calc(var(--hcs-org-gap-h) / -2);
    height: var(--hcs-org-line-w);
    background: var(--hcs-org-line);
}

.hcs-org__row > .hcs-org__node:first-child::after { left: 50%; }
.hcs-org__row > .hcs-org__node:last-child::after  { right: 50%; }
.hcs-org__row > .hcs-org__node:only-child::after  { display: none; }

/* staff: la barra si prolunga fino al tronco */
.hcs-org__staff-side--left  .hcs-org__group > .hcs-org__node:first-child::after { left: 50%; }
.hcs-org__staff-side--left  .hcs-org__group > .hcs-org__node:last-child::after  { right: calc(var(--hcs-org-trunk-gap) / -2); }
.hcs-org__staff-side--right .hcs-org__group > .hcs-org__node:first-child::after { left: calc(var(--hcs-org-trunk-gap) / -2); }
.hcs-org__staff-side--right .hcs-org__group > .hcs-org__node:last-child::after  { right: 50%; }

/* --- Card --- */

.hcs-org__card {
    position: relative;
    box-sizing: border-box;
    width: var(--hcs-org-node-w);
    min-height: 72px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 12px;
    text-align: center;
    border-radius: var(--hcs-org-radius);
    background: var(--hcs-org-line-bg);
    border: 2px solid var(--hcs-org-line-bg);
    line-height: 1.25;
    z-index: 1;
}

.hcs-org__node--staff > .hcs-org__card {
    background: var(--hcs-org-staff-bg);
    border-color: var(--hcs-org-staff-border);
}

.hcs-org__node--root > .hcs-org__card {
    background: var(--hcs-org-root-bg);
    border-color: var(--hcs-org-root-bg);
    color: var(--hcs-org-root-text);
    min-height: 84px;
}

.hcs-org__code {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--hcs-org-code-bg);
    color: var(--hcs-org-code-text);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1.2;
}

.hcs-org__node--root > .hcs-org__card .hcs-org__code {
    background: var(--hcs-org-root-text);
    color: var(--hcs-org-root-bg);
}

.hcs-org__title {
    font-size: var(--hcs-org-title-size);
    font-weight: 700;
}

/* --- Albero verticale (schermi stretti) --- */
@media (max-width: 767px) {
    .hcs-org--stack-mobile .hcs-org__scroll { overflow: visible; padding-bottom: 0; }

    .hcs-org--stack-mobile .hcs-org__row,
    .hcs-org--stack-mobile .hcs-org__staff,
    .hcs-org--stack-mobile .hcs-org__staff-side,
    .hcs-org--stack-mobile .hcs-org__group,
    .hcs-org--stack-mobile .hcs-org__children,
    .hcs-org--stack-mobile .hcs-org__node {
        display: block;
        width: auto;
        min-width: 0;
        padding: 0;
        gap: 0;
    }

    .hcs-org--stack-mobile .hcs-org__row--root { width: 100%; }

    .hcs-org--stack-mobile .hcs-org__node { margin-top: 10px; }
    .hcs-org--stack-mobile .hcs-org__row--root > .hcs-org__node { margin-top: 0; }

    .hcs-org--stack-mobile .hcs-org__row::before,
    .hcs-org--stack-mobile .hcs-org__staff::before,
    .hcs-org--stack-mobile .hcs-org__row--root > .hcs-org__node::before,
    .hcs-org--stack-mobile .hcs-org__node::after { display: none; }

    .hcs-org--stack-mobile .hcs-org__children {
        margin-left: 18px;
        padding-left: 18px;
    }

    /* linea verticale del ramo: disegnata da ogni nodo, così termina sull'ultimo figlio */
    .hcs-org--stack-mobile .hcs-org__children .hcs-org__node::before {
        content: '';
        display: block;
        position: absolute;
        left: calc(-18px - var(--hcs-org-line-w));
        top: -10px;
        bottom: 0;
        width: var(--hcs-org-line-w);
        height: auto;
        margin: 0;
        background: var(--hcs-org-line);
    }

    /* ultimo nodo del gruppo: la linea si ferma a metà della sua card */
    .hcs-org--stack-mobile .hcs-org__children.has-line > .hcs-org__row > .hcs-org__node:last-child::before,
    .hcs-org--stack-mobile .hcs-org__children:not(.has-line) > .hcs-org__staff.has-right > .hcs-org__staff-side--right > .hcs-org__group > .hcs-org__node:last-child::before,
    .hcs-org--stack-mobile .hcs-org__children:not(.has-line) > .hcs-org__staff:not(.has-right) > .hcs-org__staff-side--left > .hcs-org__group > .hcs-org__node:last-child::before {
        display: none;
    }

    .hcs-org--stack-mobile .hcs-org__children.has-line > .hcs-org__row > .hcs-org__node:last-child > .hcs-org__card::after,
    .hcs-org--stack-mobile .hcs-org__children:not(.has-line) > .hcs-org__staff.has-right > .hcs-org__staff-side--right > .hcs-org__group > .hcs-org__node:last-child > .hcs-org__card::after,
    .hcs-org--stack-mobile .hcs-org__children:not(.has-line) > .hcs-org__staff:not(.has-right) > .hcs-org__staff-side--left > .hcs-org__group > .hcs-org__node:last-child > .hcs-org__card::after {
        content: '';
        position: absolute;
        left: calc(-18px - 2px - var(--hcs-org-line-w));
        top: -12px;
        height: calc(50% + 12px);
        width: var(--hcs-org-line-w);
        background: var(--hcs-org-line);
    }

    .hcs-org--stack-mobile .hcs-org__card {
        width: 100%;
        min-height: 0;
        flex-direction: row;
        justify-content: flex-start;
        gap: 10px;
        padding: 10px 14px;
        text-align: left;
    }

    /* tacca orizzontale dal ramo alla card */
    .hcs-org--stack-mobile .hcs-org__children .hcs-org__card::before {
        content: '';
        position: absolute;
        left: calc(-20px - var(--hcs-org-line-w));
        top: 50%;
        width: calc(18px + var(--hcs-org-line-w));
        height: var(--hcs-org-line-w);
        background: var(--hcs-org-line);
    }
}

@media (max-width: 1024px) {
    .hcs-org--stack-tablet .hcs-org__scroll { overflow: visible; padding-bottom: 0; }

    .hcs-org--stack-tablet .hcs-org__row,
    .hcs-org--stack-tablet .hcs-org__staff,
    .hcs-org--stack-tablet .hcs-org__staff-side,
    .hcs-org--stack-tablet .hcs-org__group,
    .hcs-org--stack-tablet .hcs-org__children,
    .hcs-org--stack-tablet .hcs-org__node {
        display: block;
        width: auto;
        min-width: 0;
        padding: 0;
        gap: 0;
    }

    .hcs-org--stack-tablet .hcs-org__row--root { width: 100%; }

    .hcs-org--stack-tablet .hcs-org__node { margin-top: 10px; }
    .hcs-org--stack-tablet .hcs-org__row--root > .hcs-org__node { margin-top: 0; }

    .hcs-org--stack-tablet .hcs-org__row::before,
    .hcs-org--stack-tablet .hcs-org__staff::before,
    .hcs-org--stack-tablet .hcs-org__row--root > .hcs-org__node::before,
    .hcs-org--stack-tablet .hcs-org__node::after { display: none; }

    .hcs-org--stack-tablet .hcs-org__children {
        margin-left: 18px;
        padding-left: 18px;
    }

    /* linea verticale del ramo: disegnata da ogni nodo, così termina sull'ultimo figlio */
    .hcs-org--stack-tablet .hcs-org__children .hcs-org__node::before {
        content: '';
        display: block;
        position: absolute;
        left: calc(-18px - var(--hcs-org-line-w));
        top: -10px;
        bottom: 0;
        width: var(--hcs-org-line-w);
        height: auto;
        margin: 0;
        background: var(--hcs-org-line);
    }

    /* ultimo nodo del gruppo: la linea si ferma a metà della sua card */
    .hcs-org--stack-tablet .hcs-org__children.has-line > .hcs-org__row > .hcs-org__node:last-child::before,
    .hcs-org--stack-tablet .hcs-org__children:not(.has-line) > .hcs-org__staff.has-right > .hcs-org__staff-side--right > .hcs-org__group > .hcs-org__node:last-child::before,
    .hcs-org--stack-tablet .hcs-org__children:not(.has-line) > .hcs-org__staff:not(.has-right) > .hcs-org__staff-side--left > .hcs-org__group > .hcs-org__node:last-child::before {
        display: none;
    }

    .hcs-org--stack-tablet .hcs-org__children.has-line > .hcs-org__row > .hcs-org__node:last-child > .hcs-org__card::after,
    .hcs-org--stack-tablet .hcs-org__children:not(.has-line) > .hcs-org__staff.has-right > .hcs-org__staff-side--right > .hcs-org__group > .hcs-org__node:last-child > .hcs-org__card::after,
    .hcs-org--stack-tablet .hcs-org__children:not(.has-line) > .hcs-org__staff:not(.has-right) > .hcs-org__staff-side--left > .hcs-org__group > .hcs-org__node:last-child > .hcs-org__card::after {
        content: '';
        position: absolute;
        left: calc(-18px - 2px - var(--hcs-org-line-w));
        top: -12px;
        height: calc(50% + 12px);
        width: var(--hcs-org-line-w);
        background: var(--hcs-org-line);
    }

    .hcs-org--stack-tablet .hcs-org__card {
        width: 100%;
        min-height: 0;
        flex-direction: row;
        justify-content: flex-start;
        gap: 10px;
        padding: 10px 14px;
        text-align: left;
    }

    /* tacca orizzontale dal ramo alla card */
    .hcs-org--stack-tablet .hcs-org__children .hcs-org__card::before {
        content: '';
        position: absolute;
        left: calc(-20px - var(--hcs-org-line-w));
        top: 50%;
        width: calc(18px + var(--hcs-org-line-w));
        height: var(--hcs-org-line-w);
        background: var(--hcs-org-line);
    }
}

@media (max-width: 1280px) {
    .hcs-org--stack-laptop .hcs-org__scroll { overflow: visible; padding-bottom: 0; }

    .hcs-org--stack-laptop .hcs-org__row,
    .hcs-org--stack-laptop .hcs-org__staff,
    .hcs-org--stack-laptop .hcs-org__staff-side,
    .hcs-org--stack-laptop .hcs-org__group,
    .hcs-org--stack-laptop .hcs-org__children,
    .hcs-org--stack-laptop .hcs-org__node {
        display: block;
        width: auto;
        min-width: 0;
        padding: 0;
        gap: 0;
    }

    .hcs-org--stack-laptop .hcs-org__row--root { width: 100%; }

    .hcs-org--stack-laptop .hcs-org__node { margin-top: 10px; }
    .hcs-org--stack-laptop .hcs-org__row--root > .hcs-org__node { margin-top: 0; }

    .hcs-org--stack-laptop .hcs-org__row::before,
    .hcs-org--stack-laptop .hcs-org__staff::before,
    .hcs-org--stack-laptop .hcs-org__row--root > .hcs-org__node::before,
    .hcs-org--stack-laptop .hcs-org__node::after { display: none; }

    .hcs-org--stack-laptop .hcs-org__children {
        margin-left: 18px;
        padding-left: 18px;
    }

    /* linea verticale del ramo: disegnata da ogni nodo, così termina sull'ultimo figlio */
    .hcs-org--stack-laptop .hcs-org__children .hcs-org__node::before {
        content: '';
        display: block;
        position: absolute;
        left: calc(-18px - var(--hcs-org-line-w));
        top: -10px;
        bottom: 0;
        width: var(--hcs-org-line-w);
        height: auto;
        margin: 0;
        background: var(--hcs-org-line);
    }

    /* ultimo nodo del gruppo: la linea si ferma a metà della sua card */
    .hcs-org--stack-laptop .hcs-org__children.has-line > .hcs-org__row > .hcs-org__node:last-child::before,
    .hcs-org--stack-laptop .hcs-org__children:not(.has-line) > .hcs-org__staff.has-right > .hcs-org__staff-side--right > .hcs-org__group > .hcs-org__node:last-child::before,
    .hcs-org--stack-laptop .hcs-org__children:not(.has-line) > .hcs-org__staff:not(.has-right) > .hcs-org__staff-side--left > .hcs-org__group > .hcs-org__node:last-child::before {
        display: none;
    }

    .hcs-org--stack-laptop .hcs-org__children.has-line > .hcs-org__row > .hcs-org__node:last-child > .hcs-org__card::after,
    .hcs-org--stack-laptop .hcs-org__children:not(.has-line) > .hcs-org__staff.has-right > .hcs-org__staff-side--right > .hcs-org__group > .hcs-org__node:last-child > .hcs-org__card::after,
    .hcs-org--stack-laptop .hcs-org__children:not(.has-line) > .hcs-org__staff:not(.has-right) > .hcs-org__staff-side--left > .hcs-org__group > .hcs-org__node:last-child > .hcs-org__card::after {
        content: '';
        position: absolute;
        left: calc(-18px - 2px - var(--hcs-org-line-w));
        top: -12px;
        height: calc(50% + 12px);
        width: var(--hcs-org-line-w);
        background: var(--hcs-org-line);
    }

    .hcs-org--stack-laptop .hcs-org__card {
        width: 100%;
        min-height: 0;
        flex-direction: row;
        justify-content: flex-start;
        gap: 10px;
        padding: 10px 14px;
        text-align: left;
    }

    /* tacca orizzontale dal ramo alla card */
    .hcs-org--stack-laptop .hcs-org__children .hcs-org__card::before {
        content: '';
        position: absolute;
        left: calc(-20px - var(--hcs-org-line-w));
        top: 50%;
        width: calc(18px + var(--hcs-org-line-w));
        height: var(--hcs-org-line-w);
        background: var(--hcs-org-line);
    }
}