:root {
    /* Gallery */
    --cb-sub-persons-columns: 3;
    --cb-sub-persons-gap: 2rem;

    /* Persons */
    --cb-sub-persons-card-padding: 2rem;
    --cb-sub-persons-card-bg: var(--bg-greyblue);
    --cb-sub-persons-card-border-radius: 1rem;
    --cb-sub-persons-shadow: none;
}

.cb-sub-persons {
    container: cb-sub-persons / inline-size;
}
.cb-sub-persons__grid {
    gap: var(--cb-sub-persons-gap);
    grid-template-columns: repeat(var(--cb-sub-persons-columns), 1fr);

    display: grid;
    grid-auto-rows: min-content;
}

.cb-sub-persons__grid.has-2-cols,
.cb-sub-persons__grid:has(> :only-child),
.cb-sub-persons__grid:has(> :nth-child(2):last-child),
.cb-sub-persons__grid:has(> :nth-child(4):last-child) {
    --cb-sub-persons-columns: 2;
}

/* Cards */
.cb-sub-persons__card {
    background-color: var(--cb-sub-persons-card-bg);
    border-radius: var(--cb-sub-persons-card-border-radius);
    font-style: normal; /* address tag content would be displayed italic most of the time */

    >:last-child {
        margin-block-end: 0;
    }
}

@container cb-sub-persons (width < 55rem) {
    .cb-sub-persons__grid {
        --cb-sub-persons-columns: 1;
    }
    .cb-sub-persons__grid:has(:only-child),
    .cb-sub-persons__grid:has(> :nth-child(2):last-child),
    .cb-sub-persons__grid:has(> :nth-child(4):last-child) {
        --cb-sub-persons-columns: 1;
    }
}

/* Maxi Cards */
.cb-sub-persons__grid .cb-sub-persons__card {
    box-shadow: var(--cb-sub-persons-shadow);
    padding: var(--cb-sub-persons-card-padding);
}

.cb-sub-persons__function,
.cb-sub-persons__address,
.cb-sub-persons__phone,
.cb-sub-persons__email,
.cb-sub-persons__gro-id,
.cb-sub-persons__orcid-id {
    margin-bottom: 0;
}

:where(.cb-sub-persons__phone, .cb-sub-persons__email):not(:has(a))::before,
:where(.cb-sub-persons__phone, .cb-sub-persons__email) a::before {
    content: '';
    display: inline-block;
    vertical-align: middle;
    width: 1em;
    height: 1em;
    margin-right: .5em;
    background-repeat: no-repeat;
    background-size: contain;
}

.cb-sub-persons__phone {
    &:not(:has(a))::before {
        background-image: url("./phone-icon.svg");
    }

    a::after {
        display: none !important;
    }

    a::before {
        background-image: url("./phone-icon-link.svg");
    }

    a:hover::before {
        background-image: url("./phone-icon-link-hover.svg");
    }
}

.cb-sub-persons__email {
    &:not(:has(a))::before {
        background-image: url("./mail-icon.svg");
    }

    a::before {
        background-image: url("./mail-icon-link.svg");
    }

    a:hover::before {
        background-image: url("./mail-icon-link-hover.svg");
    }
}