/*
 * Cards of the roster module.
 *
 * The number of cards next to each other is set with --roster-columns. The cards wrap as soon as there is not enough
 * room, because the room of the content area (not the width of the window) decides how many fit.
 */
.roster {
    --roster-gap: 1.25rem;
    --roster-photo-width: 8rem;
}

.roster-section + .roster-section {
    margin-top: 2rem;
}

.roster-section__title {
    margin-bottom: 1rem;
    padding-bottom: .4rem;
    border-bottom: 1px solid rgba(128, 128, 128, .4);
}

.roster-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--roster-gap);
}

.roster-card {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    box-sizing: border-box;
    flex: 0 1 calc((100% - (var(--roster-columns, 2) - 1) * var(--roster-gap)) / var(--roster-columns, 2));
    min-width: min(100%, 15rem);
}

.roster-photo {
    position: relative;
    flex: 0 0 var(--roster-photo-width);
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: rgba(128, 128, 128, .15);
}

.roster-photo--square {
    border-radius: 0;
}

.roster-photo--rounded {
    border-radius: .75rem;
}

.roster-photo--circle {
    aspect-ratio: 1;
    border-radius: 50%;
}

.roster-photo__img,
.roster-photo__frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.roster-photo__img {
    object-fit: cover;
}

/* The frame picture is stretched over the whole photo, so it should have the same proportions (3:4, 1:1 if round). */
.roster-photo__frame {
    object-fit: fill;
    pointer-events: none;
}

.roster-card__body {
    flex: 1 1 auto;
    min-width: 0;
}

.roster-card__name {
    margin: 0 0 .25rem;
    font-size: 1.1rem;
    overflow-wrap: anywhere;
}

.roster-card__role {
    margin: 0;
    opacity: .85;
    overflow-wrap: anywhere;
}

.roster-card--vacant .roster-card__name {
    font-style: italic;
    opacity: .7;
}

.roster-card__fields {
    margin: .5rem 0 0;
}

.roster-field {
    display: flex;
    flex-wrap: wrap;
    column-gap: .4rem;
}

.roster-field dt {
    font-weight: normal;
    opacity: .75;
}

.roster-field dt::after {
    content: ':';
}

.roster-field dd {
    margin: 0;
    overflow-wrap: anywhere;
}

/*
 * The design chosen in the settings. A rule only applies if its value is set, otherwise the layout of the website
 * decides. The double class beats the rules of the layouts, which are often loaded later.
 */
.roster.roster-has-pageBackground {
    padding: 1rem;
    border-radius: .5rem;
    background: var(--roster-pageBackground);
}

.roster.roster-has-linkColor a {
    color: var(--roster-linkColor);
}

.roster.roster-has-pageTitleColor .roster-page-title {
    color: var(--roster-pageTitleColor);
}

.roster.roster-has-pageTitleSize .roster-page-title {
    font-size: var(--roster-pageTitleSize);
}

.roster.roster-has-titleColor .roster-section__title,
.roster.roster-has-titleColor .roster-section__title a {
    color: var(--roster-titleColor);
}

.roster.roster-has-titleSize .roster-section__title {
    font-size: var(--roster-titleSize);
}

.roster.roster-has-lineColor .roster-section__title {
    border-bottom-color: var(--roster-lineColor);
}

.roster.roster-has-nameColor .roster-card__name,
.roster.roster-has-nameColor .roster-card__name a {
    color: var(--roster-nameColor);
}

.roster.roster-has-nameSize .roster-card__name {
    font-size: var(--roster-nameSize);
}

/* After the colors of headings and names, so that their links change on hover as well. */
.roster.roster-has-linkHoverColor a:hover,
.roster.roster-has-linkHoverColor a:focus {
    color: var(--roster-linkHoverColor);
}

/* A chosen color is shown as it is, so without the transparency of the role and the labels. */
.roster.roster-has-textColor .roster-card__role,
.roster.roster-has-textColor .roster-field dt,
.roster.roster-has-textColor .roster-field dd {
    color: var(--roster-textColor);
    opacity: 1;
}

.roster.roster-has-textSize .roster-card__role,
.roster.roster-has-textSize .roster-field dt,
.roster.roster-has-textSize .roster-field dd {
    font-size: var(--roster-textSize);
}

/* A card with a background or a border needs some room inside. */
.roster.roster-has-cardBackground .roster-card,
.roster.roster-has-cardBorderColor .roster-card {
    padding: .75rem;
}

.roster.roster-has-cardBackground .roster-card {
    background: var(--roster-cardBackground);
}

.roster.roster-has-cardBorderColor .roster-card {
    border: 1px solid var(--roster-cardBorderColor);
}

.roster.roster-has-cardRadius .roster-card {
    border-radius: var(--roster-cardRadius);
}

@media (max-width: 400px) {
    .roster {
        --roster-photo-width: 6rem;
    }
}