/* =========================================================
   bielskis occupation list
   Uses variables from Complexion 28 / grundlagen.css.
   ========================================================= */

.bol-shell {
    width: min(100% - (2 * var(--space-l)), var(--content-max));
    margin: var(--space-xl) auto var(--space-xxl);
}

.bol-navigation {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    margin-bottom: var(--space-m);
    padding-bottom: var(--space-s);
    border-bottom: 1px solid var(--hairline);
}

.bol-navigation a,
.bol-shell button {
    padding: var(--btn-padding);
    border: 1px solid var(--hairline-strong);
    color: var(--paper);
    background: var(--tbl-main);
    font: var(--btn-font) var(--txtsmall)/1 var(--fliesstext);
    letter-spacing: .08em;
    text-transform: uppercase;
    cursor: pointer;
}

.bol-navigation a:hover,
.bol-shell button:hover {
    border-color: var(--design);
    color: var(--design-light);
}

.bol-masthead {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-l);
    align-items: end;
    padding: var(--space-xl) 0 var(--space-l);
    border-top: 1px solid var(--hairline-strong);
    border-bottom: 1px solid var(--hairline-strong);
}

.bol-masthead h1,
.bol-section h2,
.bol-workplace-card h2,
.bol-position h3,
.bol-my-card h3,
.bol-profile h3 {
    margin: 0;
    color: var(--paper);
    font-family: var(--akzenttext);
    font-weight: 500;
}

.bol-masthead h1 {
    font-size: clamp(var(--txtxxl), 7vw, var(--txtxxxl));
    line-height: .95;
}

.bol-kicker,
.bol-label,
.bol-status {
    display: block;
    color: var(--design-light);
    font-size: var(--txtxsmall);
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.bol-meta {
    display: grid;
    gap: var(--space-xxs);
    justify-items: end;
    color: var(--txtcol-soft);
    font-size: var(--txtsmall);
}

.bol-filters,
.bol-form {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-s);
    margin: var(--space-l) 0;
    padding: var(--space-m);
    border: 1px solid var(--hairline);
    background: var(--tbl-main-tr);
}

.bol-filters label,
.bol-form label,
.bol-join-form {
    display: grid;
    gap: var(--space-xxs);
}

.bol-filters label span,
.bol-form label span {
    color: var(--txtcol-soft);
    font-size: var(--txtxsmall);
    letter-spacing: .12em;
    text-transform: uppercase;
}

.bol-shell input,
.bol-shell select,
.bol-shell textarea {
    width: 100%;
    padding: var(--space-xs);
    border: 1px solid var(--hairline);
    color: var(--txtcol);
    background: var(--bg-deep);
    font: inherit;
}

.bol-shell input:focus,
.bol-shell select:focus,
.bol-shell textarea:focus {
    outline: 1px solid var(--design);
    border-color: var(--design);
}

.bol-form__wide {
    grid-column: 1 / -1;
}

.bol-form__actions {
    grid-column: 1 / -1;
}

.bol-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-m);
}

.bol-workplace-card,
.bol-position,
.bol-my-card,
.bol-profile {
    border: 1px solid var(--hairline);
    background: var(--tbl-main-tr);
}

.bol-workplace-card {
    display: grid;
    gap: var(--space-s);
    padding: var(--space-m);
}

.bol-workplace-card__meta,
.bol-workplace-card footer {
    display: flex;
    justify-content: space-between;
    gap: var(--space-s);
    color: var(--txtcol-soft);
    font-size: var(--txtxsmall);
    letter-spacing: .08em;
    text-transform: uppercase;
}

.bol-workplace-card h2 a {
    color: inherit;
}

.bol-description,
.bol-section {
    padding: var(--space-l) 0;
    border-bottom: 1px solid var(--hairline);
}

.bol-section > header {
    margin-bottom: var(--space-m);
}

.bol-position-list,
.bol-my-list {
    display: grid;
    gap: var(--space-s);
}

.bol-position {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 320px);
    gap: var(--space-l);
    padding: var(--space-m);
}

.bol-position aside {
    display: grid;
    gap: var(--space-s);
    align-content: start;
}

.bol-capacity {
    padding-bottom: var(--space-xs);
    border-bottom: 1px solid var(--hairline);
    color: var(--signal-light);
    font-size: var(--txtsmall);
    text-transform: uppercase;
}

.bol-people {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-xs);
}

.bol-person {
    display: grid;
    gap: var(--space-xxs);
    padding: var(--space-s);
    border-left: 2px solid var(--design);
    background: var(--tbl-main-tr2);
}

.bol-person span {
    color: var(--txtcol-soft);
    font-size: var(--txtsmall);
}

.bol-my-card {
    display: flex;
    justify-content: space-between;
    gap: var(--space-m);
    padding: var(--space-m);
}

.bol-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    align-items: center;
}

.bol-inline-form {
    display: inline;
}

.bol-status--active { color: var(--akzent-green-soft); }
.bol-status--pending { color: var(--signal-light); }
.bol-status--former { color: var(--txtcol-soft); }

.bol-empty {
    padding: var(--space-l);
    border: 1px dashed var(--hairline-strong);
    color: var(--txtcol-soft);
}

.bol-profile {
    margin-top: var(--space-m);
}

.bol-profile__header,
.bol-profile__primary,
.bol-profile__secondary,
.bol-profile__entry {
    display: grid;
    gap: var(--space-xxs);
    padding: var(--space-s) var(--space-m);
    border-bottom: 1px solid var(--hairline);
}

.bol-profile__more {
    margin-top: var(--space-xs);
    border-top: 1px solid var(--hairline);
}

.bol-toggle {
    justify-self: start;
    margin-top: var(--space-xs);
}

@media (max-width: 1000px) {
    .bol-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bol-filters, .bol-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bol-people { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
    .bol-shell { width: min(100% - (2 * var(--space-s)), var(--content-max)); }
    .bol-masthead, .bol-position { grid-template-columns: 1fr; }
    .bol-meta { justify-items: start; }
    .bol-grid, .bol-filters, .bol-form, .bol-people { grid-template-columns: 1fr; }
}


/* Archived / unavailable positions */
.bol-archive {
    margin-top: var(--space-m);
    border-top: 1px solid var(--hairline);
}

.bol-archive summary {
    display: flex;
    justify-content: space-between;
    gap: var(--space-s);
    padding: var(--space-s) 0;
    color: var(--txtcol-soft);
    font-size: var(--txtsmall);
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    cursor: pointer;
}

.bol-archive summary::marker {
    color: var(--design);
}

.bol-archive[open] summary {
    color: var(--paper-muted);
}

.bol-position--inactive {
    opacity: .72;
    background: var(--tbl-main-tr3);
}

.bol-notice {
    margin-top: var(--space-m);
    padding: var(--space-s) var(--space-m);
    border-left: 2px solid var(--signal);
    background: var(--tbl-main-tr3);
    color: var(--paper-muted);
}

.bol-workplace-card--inactive {
    opacity: .72;
    background: var(--tbl-main-tr3);
}

.bol-archive--workplaces {
    margin-top: var(--space-l);
}


/* =========================================================
   DOSSIER / OCCUPATION REGISTER
   ========================================================= */

.dossier-profile .bol-profile {
    display: grid;
    grid-template-columns:
        minmax(150px, 0.7fr)
        minmax(220px, 1.25fr)
        minmax(220px, 1.25fr);

    margin: var(--space-m) 0 var(--space-l);

    background: var(--tbl-main-tr3);

    border-top: 1px solid var(--hairline-strong);
    border-bottom: 1px solid var(--hairline-strong);
}

.dossier-profile .bol-profile__header,
.dossier-profile .bol-profile__primary,
.dossier-profile .bol-profile__secondary {
    min-width: 0;
    padding: var(--space-m);

    border-bottom: 0;
}

.dossier-profile .bol-profile__header {
    align-content: center;

    background: var(--akzent-dkl);

    border-right: 1px solid var(--hairline);
}

.dossier-profile .bol-profile__header .bol-kicker {
    color: var(--txtcol-soft);

    font-size: var(--txtxsmall);
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.dossier-profile .bol-profile__header h3 {
    margin: var(--space-xxs) 0 0;

    color: var(--paper);

    font-size: var(--txtl);
    letter-spacing: 0.08em;
}

.dossier-profile .bol-profile__primary {
    border-right: 1px solid var(--hairline);
}

.dossier-profile .bol-profile__primary,
.dossier-profile .bol-profile__secondary {
    position: relative;

    align-content: center;
}

.dossier-profile .bol-label {
    color: var(--txtcol-soft);

    font-size: var(--txtxsmall);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.dossier-profile .bol-profile__primary > strong,
.dossier-profile .bol-profile__secondary > strong,
.dossier-profile .bol-profile__entry > strong {
    color: var(--design-light);

    font-family: var(--akzenttext);
    font-size: var(--txtbase);
    font-weight: 500;
    letter-spacing: 0.035em;
    text-transform: uppercase;
}

.dossier-profile .bol-profile__primary > span:last-child,
.dossier-profile .bol-profile__secondary > span:not(.bol-label),
.dossier-profile .bol-profile__entry > span {
    color: var(--paper-muted);

    font-size: var(--txtm);
}

.dossier-profile .bol-toggle {
    position: absolute;
    top: 50%;
    right: var(--space-m);

    display: grid;
    place-items: center;

    min-width: 34px;
    min-height: 34px;
    margin: 0;
    padding: var(--space-xxs) var(--space-xs);

    color: var(--signal-light);
    background: transparent;

    font-family: var(--akzenttext);
    font-size: var(--txtm);
    font-weight: 600;

    border: 1px solid var(--hairline-strong);

    transform: translateY(-50%);

    cursor: pointer;
}

.dossier-profile .bol-toggle:hover,
.dossier-profile .bol-toggle[aria-expanded="true"] {
    color: var(--paper);
    background: var(--akzent-dkl);

    border-color: var(--design);
}

.dossier-profile .bol-toggle[aria-expanded="true"] {
    transform:
        translateY(-50%)
        rotate(45deg);
}

.dossier-profile .bol-profile__secondary:has(.bol-toggle) {
    padding-right: calc(var(--space-xl) + var(--space-m));
}

.dossier-profile .bol-profile__more {
    grid-column: 1 / -1;

    margin: var(--space-m) 0 0;

    border-top: 1px solid var(--hairline);
}

.dossier-profile .bol-profile__entry {
    display: grid;
    grid-template-columns:
        minmax(160px, 0.8fr)
        minmax(180px, 1.2fr);

    gap: var(--space-s);

    padding:
        var(--space-s)
        0
        0;

    border-bottom: 0;
}

.dossier-profile .bol-profile__entry + .bol-profile__entry {
    margin-top: var(--space-s);
}

@media (max-width: 900px) {

    .dossier-profile .bol-profile {
        grid-template-columns: 1fr 1fr;
    }

    .dossier-profile .bol-profile__header {
        grid-column: 1 / -1;

        border-right: 0;
        border-bottom: 1px solid var(--hairline);
    }
}

@media (max-width: 620px) {

    .dossier-profile .bol-profile {
        grid-template-columns: 1fr;
    }

    .dossier-profile .bol-profile__primary {
        border-right: 0;
        border-bottom: 1px solid var(--hairline);
    }

    .dossier-profile .bol-profile__entry {
        grid-template-columns: 1fr;
        gap: var(--space-xxs);
    }
}