/* =============================================================================
   GKMB Staff

   Zurückhaltender Standard, der in jedem Projekt tragfähig ist. Alle Farben,
   Abstände und Schriftgrößen kommen aus der variables.css des Sitepackages,
   damit sich das Aussehen dort zentral steuern lässt. Projektspezifische
   Anpassungen gehören nach
   gkmb_template/Resources/Public/Css/Extensions/staff.css – diese Datei wird
   danach geladen und überschreibt die Regeln hier.
   ========================================================================== */

/* -----------------------------------------------------------------------------
   Liste
   -------------------------------------------------------------------------- */
.staff__list {
    display: grid;
    grid-gap: var(--g-gap);
    gap: var(--g-gap);
    align-items: start;
}

.staff__group {
    margin-bottom: var(--p);
}

.staff__group > .headline {
    margin-bottom: var(--g-gap);
}

.staff__notfound {
    color: rgb(var(--c-neutral-dark));
}

/* -----------------------------------------------------------------------------
   Einzelner Mitarbeiter
   -------------------------------------------------------------------------- */
.staff {
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-gap: var(--g-gap);
    gap: var(--g-gap);
    align-items: start;
}

.staff__textwrap > * {
    margin-bottom: 0.5rem;
}

.staff__textwrap > *:last-child {
    margin-bottom: 0;
}

/* Bild */
.staff__media {
    display: block;
}

.staff__media img {
    display: block;
    width: 100%;
    height: auto;
}

/* Name und Überschriftenblock */
.staff__headline {
    margin-bottom: 0.75rem;
}

.staff__name,
.staff__firstname,
.staff__lastname {
    margin: 0;
}

/* Angaben mit vorangestelltem Label (Position, Land, Sprachen) */
.staff__positions,
.staff__country,
.staff__languages {
    display: flex;
    flex-wrap: wrap;
    grid-gap: 0 0.4rem;
    gap: 0 0.4rem;
}

.staff__label {
    margin: 0;
    font-weight: var(--f-weight-sb);
}

/* Angaben ohne Label, als leise Zusatzinformation über dem Namen */
.staff__locations,
.staff__categories,
.staff__departments {
    font-size: var(--f-size-s-1);
    color: rgb(var(--c-neutral-dark));
}

.staff__bodytext > *:first-child {
    margin-top: 0;
}

.staff__bodytext > *:last-child {
    margin-bottom: 0;
}

.staff__link {
    display: inline-block;
    font-weight: var(--f-weight-sb);
}

/* -----------------------------------------------------------------------------
   Layout 2 – Bild und Name, mittig gesetzt
   -------------------------------------------------------------------------- */
.staff__list.-layout2 .staff {
    grid-template-columns: 1fr;
    text-align: center;
}

.staff__list.-layout2 .staff__positions {
    justify-content: center;
    font-size: var(--f-size-s-1);
    color: rgb(var(--c-neutral-dark));
}

/* -----------------------------------------------------------------------------
   Layout 3 – reine Textausgabe, durch eine feine Linie getrennt
   -------------------------------------------------------------------------- */
.staff__list.-layout3 .staff {
    grid-template-columns: 1fr;
    padding-bottom: var(--g-gap);
    border-bottom: 1px solid rgb(var(--c-neutral-light));
}

/* -----------------------------------------------------------------------------
   Filter
   -------------------------------------------------------------------------- */
.staff__filter {
    margin-bottom: 2rem;

    & .filter__options {
        display: flex;
        flex-wrap: wrap;
        grid-gap: var(--g-gap);
        gap: var(--g-gap);
        align-items: center;
    }

    & .filter__option {
        position: relative;
        cursor: pointer;
        display: inline-block;
    }

    & .filter__headline {
        position: relative;
        cursor: pointer;
        display: inline-block;
        padding-right: 28px;
        background-image: url("data:image/svg+xml;utf8,<svg width='15' height='9' viewBox='0 0 15 9' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M6.53906 7.76953L13.4486 0.859994' stroke='%23000000' stroke-width='2'/><path d='M7.69238 7.76953L0.782846 0.859994' stroke='%23000000' stroke-width='2'/></svg>");
        background-size: 18px;
        background-position: right center;
        background-repeat: no-repeat;
        line-height: 1.4;
        font-weight: var(--f-weight-n);
        white-space: nowrap;
    }

    & ul.filter__items {
        display: none;
        padding: 0;
        margin: 0;
        position: absolute;
        top: 100%;
        left: 0;
        min-width: 100%;
        max-height: 60vh;
        overflow-y: auto;
        background: rgb(var(--c-neutral-lightest));
        box-shadow: 0 4px 12px rgba(var(--c-neutral-darkest), 0.15);
        z-index: 10;
    }

    & ul.filter__items.-visible {
        display: block;
    }

    & ul.filter__items li {
        display: flex;
        align-items: center;
        list-style: none;
        margin: 0;
        padding: 0;
        white-space: nowrap;
    }

    & ul.filter__items li input[type="checkbox"] {
        margin: 0 0.5rem 0 1rem;
        cursor: pointer;
        flex: none;
    }

    & ul.filter__items li + li {
        border-top: 1px solid rgb(var(--c-neutral-light));
    }

    & ul.filter__items li label {
        flex: 1;
        padding: 0.4rem 1rem;
        cursor: pointer;
        border: 0;
        border-radius: 0;
        color: rgb(var(--c-neutral-dark));
        font-weight: var(--f-weight-n);
    }

    & ul.filter__items li,
    & ul.filter__items li label {
        transition: background-color ease 0.2s, color ease 0.2s;
    }

    & input.filter__submit {
        margin: 0;
        background-color: transparent;
        padding: 0;
        color: rgb(var(--c-primary));
        line-height: inherit;
        font-weight: var(--f-weight-b);
    }

    & .filter__reset button {
        background-color: transparent;
        padding: 0;
        color: rgb(var(--c-neutral-dark));
        line-height: inherit;
        border-bottom: 2px solid transparent;
    }

    & .search__option ul.filter__items {
        padding: 0.5rem;
        min-width: calc(240px + 1rem);
    }

    & .search__option ul.filter__items li {
        display: block;
    }

    & .search__option input.filter__text {
        box-sizing: border-box;
        width: 100%;
        margin: 0;
    }

    & .filter__selected {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        grid-gap: var(--g-gap-s);
        gap: var(--g-gap-s);
    }

    & .selected__object button {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        background: rgb(var(--c-neutral-dark));
        color: rgb(var(--c-neutral-lightest));
        padding: 0.2rem 0.5rem;
        transition: background-color ease 0.3s;
    }

    & .selected__remove::before {
        content: '\f00d';
        font-family: 'FaRegular', sans-serif;
        font-size: var(--f-size-s-2);
        line-height: 1;
    }

    & button.selected__reset {
        background: transparent;
        padding: 0;
        color: rgb(var(--c-neutral-dark));
        line-height: inherit;
        text-decoration: underline;
        text-underline-offset: 4px;
    }

}


@media (hover: hover) {
    .staff__filter {
        & ul.filter__items li:hover {
            background: rgb(var(--c-primary));
        }

        & ul.filter__items li:hover label {
            color: rgb(var(--c-neutral-lightest));
        }

        & input.filter__submit:hover {
            background-color: transparent;
            color: rgb(var(--c-primary));
            text-decoration: underline;
            text-underline-offset: 4px;
            text-decoration-thickness: 2px;
        }

        & .filter__reset button:hover {
            background-color: transparent;
            color: rgb(var(--c-neutral-dark));
            border-bottom: 2px solid rgb(var(--c-neutral-dark));
        }

        & .search__option ul.filter__items li:hover {
            background: transparent;
            color: inherit;
        }

        & .selected__object button:hover {
            background: rgb(var(--c-neutral-darkest));
            color: rgb(var(--c-neutral-lightest));
        }

        & button.selected__reset:hover {
            background: transparent;
            color: rgb(var(--c-neutral-darkest));
        }
    }
}

/* Während der Filter nachlädt */
.gkmb__staff.-loading .staff__list,
.gkmb__staff.-loading .staff__group,
.gkmb__staff.-loading .staff__slider {
    opacity: 0.5;
    transition: opacity ease 0.3s;
}

/* =============================================================================
   Media Queries
   ========================================================================== */

@media (min-width: 640px) {

    .staff__list[data-columns="4"],
    .staff__list[data-columns="5"],
    .staff__list[data-columns="6"] {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Ab hier ist die Liste mehrspaltig, das Bild sitzt über dem Text */
    .staff {
        grid-template-columns: 1fr;
    }

}

@media (min-width: 900px) {

    .staff__list[data-columns="3"],
    .staff__list[data-columns="5"],
    .staff__list[data-columns="6"] {
        grid-template-columns: repeat(3, 1fr);
    }

}

@media (min-width: 1280px) {

    .staff__list[data-columns="4"] {
        grid-template-columns: repeat(4, 1fr);
    }

    .staff__list[data-columns="5"] {
        grid-template-columns: repeat(5, 1fr);
    }

    .staff__list[data-columns="6"] {
        grid-template-columns: repeat(6, 1fr);
    }

}