/* REFACTOR-WHEN: a fourth list renders entity cards → a shared list class takes the spacing rule */
.entity-card {
    container-type: normal;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 1rem;
    padding: 0.75rem 1rem;
    color: var(--text-on-field);
    background: var(--surface-raised);
    border-block-start: 2px solid var(--card-entity);

    &:last-child { border-block-end: 1px solid var(--border-subtle) }

    &[data-state="past"] h2 { color: var(--text-on-field-subtle) }

    &:hover h2 a,
    &:has(h2 a:focus-visible) h2 a { text-decoration: underline }

    &:has(h2 a:focus-visible) {
        outline: var(--focus-outline-width) solid var(--border-focus);
        outline-offset: calc(-1 * var(--focus-outline-width));
    }

    h2 {
        flex-basis: 100%;
        margin: 0;
        overflow-wrap: anywhere;
        font-family: var(--font-body);
        font-size: var(--font-size-body);
        font-weight: 400;
        text-transform: none;

        a::after {
            content: "";
            position: absolute;
            inset: 0;
            z-index: 1;
        }

        a:focus-visible { outline: 0 }
    }

    .properties {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    > .properties + p,
    > p:last-child {
        max-inline-size: none;
        margin: 0;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.5rem;
        font-size: var(--font-size-body-sm);
        color: var(--text-secondary);
    }

    > p:last-child {
        flex-basis: 100%;

        .status { margin-inline-start: auto }
    }

    > p:last-child span:not(.status) > svg { display: none }

    @container (min-inline-size: 30rem) {
        padding: 1rem;
        border: 1px solid var(--border-strong);
        border-radius: 0.25rem;
        box-shadow: inset 0 4px 0 var(--card-entity);

        &:last-child { border: 1px solid var(--border-strong) }

        h2 {
            font-family: var(--font-display);
            font-size: var(--font-size-title-sm);
            font-weight: 700;
            line-height: 1.1;
            text-transform: uppercase;
        }

        > .properties + p {
            font-weight: 700;
            color: var(--text-on-field);
            margin-inline-start: auto;
        }

        > p:last-child span:not(.status) {
            font-style: italic;
        }

        > p:last-child span:not(.status) > svg {
            display: inline-block;
            block-size: 1.25em;
        }
    }
}

.entity-card--event { --card-entity: var(--entity-event) }

.entity-card--activity { --card-entity: var(--entity-activity) }

.entity-card--organization {
    --card-entity: var(--entity-organization);

    > .properties + p { margin-inline-start: auto }
    > p:last-child { justify-content: flex-end }
}