/**
 * hana+nils · Büro für Gestaltung
 * https://hananils.de · buero@hananils.de
 */

.index {
    display: grid;
    grid-template-rows: min-content 0 0;
    align-self: end;
    overflow: hidden;
    padding-top: 0;
    padding-right: var(--dynamic-spacing-inline-end);
    padding-left: var(--dynamic-spacing-inline-start);
    color: #fff;
    background-color: var(--color-background-highlighted);
}

.index.is-open {
    grid-template-rows: min-content min-content min-content;
}

.index h2 {
    margin: 0;
    font-size: var(--text-size-6);
}

.index button {
    display: flex;
    align-items: center;
    appearance: none;
    width: 100%;
    max-width: calc(160rem - var(--dynamic-spacing-inline-start));
    height: 6rem;
    margin: 0;
    padding: 0;
    color: #fff;
    font-size: inherit;
    font-weight: inherit;
    text-align: left;
    border: none;
    background: transparent;
}

.index button::after {
    content: '↓ expand';
    margin-left: auto;
    font-size: var(--text-size-fine);
    font-weight: var(--text-weight-bold);
    font-variant: small-caps;
    text-align: right;
    letter-spacing: 0.05em;
    text-transform: lowercase;
}

.index.is-open button::after {
    content: '↑ collapse';
}

.index button em {
    display: none;
    margin-left: 1.9rem;
    font-weight: 300;
    font-style: normal;
}

@media (min-width: 500px) {
    .index button em {
        display: block;
    }
}

.index nav {
    --tags-color: #fff;
    --tags-color-hover: #000;
    --tags-background: rgba(255, 255, 255, 0.08);
    --tags-background-hover: #fff;

    max-width: calc(160rem - var(--dynamic-spacing-inline-start) + 2rem);
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.index nav .not-filterable {
    --tags-color: rgba(255, 255, 255, 0.3);
    --tags-background: rgba(255, 255, 255, 0.08);
}

.index a {
    text-decoration: none;
}

/* Index items */

.index ol {
    --grid-columns: 1fr;

    display: grid;
    max-width: calc(
        160rem - var(--dynamic-spacing-inline-start) -
            var(--dynamic-spacing-inline-end)
    );
    margin-bottom: 5.4rem;
    padding: 0;
    font-size: var(--text-size-fine);
    font-weight: var(--text-weight);
    line-height: var(--text-line-small);
    list-style: none;
}

@media (min-width: 500px) {
    .index ol {
        --grid-columns: 1fr 1fr;
        --rows: var(--rows-by-two);
        grid-auto-flow: column;

        grid-template-rows: repeat(var(--rows), min-content);
    }
}

@media (min-width: 700px) {
    .index ol {
        --grid-columns: 1fr 1fr 1fr;
        --rows: var(--rows-by-three);
    }
}

@media (min-width: 1100px) {
    .index ol {
        --grid-columns: 2fr 2fr 2fr 3fr;
        --rows: var(--rows-by-four);
    }
}

.index ol li {
    display: flex;
    align-items: center;
    overflow: hidden;
    height: 3.2rem;
    margin: 0 -1rem;
}

.index ol li a {
    overflow: hidden;
    margin: 0.4rem 1rem 0.4rem 0;
    padding: 0 1rem;
    color: rgba(255, 255, 255, 0.4);
    white-space: nowrap;
    text-overflow: ellipsis;
    transition: color 0.15s ease-in;
}

.index ol li.is-associated a,
.index ol li a:hover {
    color: #fff;
}

.index ol li.is-related a {
    color: #fff;
    background-color: var(--color-poseidon);
}