/* Локальні змінні тільки в межах секції */
.dept-section{
    --avatar-size: 160px;   /* за потреби міняєш у одному місці */
    --muted: #8d8d8d;
}

/* Фото особи */
.dept-avatar{
    width: var(--avatar-size);
    height: var(--avatar-size);
    object-fit: cover;
    display: block;
}
/* Ім'я */
.dept-name {
    display: block;
    white-space: pre-wrap;
    word-spacing: 100vw; /* величезний відступ після слова */
}


/* Посада (сірим) */
.dept-role{ color: var(--muted);
    font-family: var(--e-ukraine-font), Arial, sans-serif;
    font-weight: 300;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0;
}

/* Контактні блоки */
.dept-contact__label{
    font-size: .8rem;
    font-weight: 300;
    color: var(--muted);
    margin-bottom: .25rem;
    line-height: 1rem;

}
.dept-contact__value {
    /*font-family: e-Ukraine;*/
    font-weight: 300;
    font-size: 18px;
    line-height: 24px;

}
.dept-contact__value a{
    color: inherit;
    text-decoration: none;
}
.dept-contact__value a:hover,
.dept-contact__value a:focus{
    text-decoration: underline;
    outline: 2px solid transparent; /* типографіка/фокус — на твій смак */
}

/* Невеликий адаптив для дуже вузьких екранів */
@media (max-width: 420px){
    .dept-section{ --avatar-size: 128px; }
}




/* Керовані змінні секції (можеш підкрутити під макет) */
.unit-list {
    --unit-gap-y: 1.25rem;      /* вертикальний відступ між рядками */
    --unit-pad-y: 1.0rem;       /* вертикальний паддінг всередині рядка */
    --unit-border: 2px solid #E6E6EA;
    --unit-muted: #959595;
}

/* Глобально вже є Bootstrap; ці стилі — лише для грід-таблиці */
.unit-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Рядок-елемент: грід-область */
.unit-row {
    display: grid;
    grid-template-columns: 1fr minmax(220px, 280px) minmax(220px, 280px);
    grid-template-areas:
    "title  title  title"
    "person phone  email";
    gap: 1.3rem 2rem;
    padding: var(--unit-pad-y) 0;
}

.unit-row ~ .unit-row {
    border-top: var(--unit-border);
}

/* Області */
.unit-title  { grid-area: title;  margin: 0; }
.unit-person { grid-area: person; }
.unit-phone  { grid-area: phone; }
.unit-email  { grid-area: email; }

/* Типографіка (піджену під твій макет) */
.unit-title {
    font-weight: 300;
    font-size: 1.25rem;
    line-height: 1.5rem;
    letter-spacing: 0;
}

.unit-name {
    font-size: 1.125rem;
    line-height: 1.3;
    font-weight: 300;
    letter-spacing: 0;
}

.unit-role {
    color: var(--unit-muted);
    font-size: 0.9375rem;
    line-height: 1.35;
    margin-top: .25rem;
}

.unit-label {
    color: var(--unit-muted);
    font-size: 0.875rem;
    line-height: 1.2;
    margin-bottom: 0.25rem;
}

.unit-link {
    color: inherit;
    display: inline-block;
    font-size: 1.0625rem;
    line-height: 1.35;
    text-decoration: none;
    overflow-wrap: anywhere; /* довгі email не ламають сітку */
}

.unit-link:hover {
    text-decoration: underline;
}

.unit-link:focus {
    outline: 2px solid #4C6FFF; /* доступність */
    outline-offset: 2px;
    border-radius: 3px;
}

/* Респонсив: на < xl — в один стовпчик у правильному порядку */
@media (max-width: 1199.98px) {
    .unit-row {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
          "title title"
          "person person"
          "phone email";
        gap: 1.2rem 1rem;
        padding: calc(var(--unit-pad-y) + .25rem) 0;
    }
}

/* Респонсив: на < md — в один стовпчик у правильному порядку */
@media (max-width: 991.98px) {
    .unit-row {
        grid-template-columns: 1fr;
        grid-template-areas:
      "title"
      "person"
      "phone"
      "email";
        gap: .75rem 0;
    }

    .unit-title {
        font-size: 1.25rem;
    }

    .unit-name {
        font-size: 1.0625rem;
    }
}

/* Мікротриммінг відступів між записами */
.unit-row + .unit-row { margin-top: var(--unit-gap-y); }




/* ЛИСТ співробітників (з квадратиками) */

ul.styled-list {
    padding-left: min(2rem, 1vw );
}

.styled-list li {
    list-style: none;
    position: relative;
    padding-left:  min(3rem, 4vw );
    padding-bottom: 2.5rem;
    font-weight: 400
}

@media (max-width: 767.98px) {
    ul.styled-list{
        padding-left: 0;
    }

    .styled-list li {
        position: relative;
        padding-left:  0;
        padding-bottom: 2.5rem;
        font-weight: 400;
    }
}

.styled-list li p {
    color: rgba(0,0,0,.5)
}

.styled-list li:before {
    left: 0;
    top: 0;
    width: 1.5rem;
    height: 1.5rem
}

.styled-list li:after,.styled-list li:before {
    content: "";
    position: absolute;
    background-color: #c5e1e7
}

@media (max-width: 767.98px) {
    .styled-list li:after,.styled-list li:before {
        content: none;
    }
}

.styled-list li:after {
    left: 12px;
    transform: translateX(-50%);
    bottom: 4px;
    width: 3px;
    height: calc(100% - 24px - 4px - 4px)
}

.styled-list li:last-child:after {
    display: none
}





/* Колонки документів */

.doc-columns {
    columns: 2;
    column-gap: 2rem;
}
@media (max-width: 1199.98px) {
    .doc-columns { columns: 1; }
}
.doc-columns--single { columns: 1 !important; }

.doc-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.doc-item {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    margin-bottom: 1rem;
    position: relative;
    padding-left: 1.75rem; /* місце під іконку */
    min-height: 1.5rem;
}

/* Іконка документа в псевдоелементі */
.doc-item::before {
    content: "";
    position: absolute;
    top: 0.15rem;
    left: 0;
    width: 1.25rem;
    height: 1.25rem;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6'%3E%3Cpath d='M7 3h7l5 5v13a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1z'/%3E%3Cpath d='M14 3v6h6'/%3E%3C/svg%3E") no-repeat center/contain;
}

/* Посилання */
.doc-link {
    text-decoration: none;
    color: #1a1a1a;
    line-height: 1.35;
    display: inline-block;
}
.doc-link:hover { text-decoration: underline; }
.doc-link:focus {
    outline: 2px solid #4C6FFF;
    outline-offset: 2px;
    border-radius: 2px;
}