/*
 * Layout for the plugin's own templates and its list shortcode.
 *
 * Deliberately thin: it lays cards out and keeps a photograph from breaking the
 * grid, and leaves every typographic and colour decision to the theme. Colours
 * here are currentColor and neutral greys only, so the cards inherit whatever
 * palette they are dropped into. A theme that wants its own look overrides the
 * templates; a theme that wants only different spacing overrides these classes.
 */

.ks-team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1.5rem;
    margin: 0 0 2rem;
}

/*
 * The column modifiers cap the count, they do not force it: below the
 * breakpoint the auto-fill rule above still decides, so a four-column list on a
 * phone is one column rather than four slivers.
 */
@media (min-width: 48em) {

    .ks-team-grid--cols-1 {
        grid-template-columns: minmax(0, 1fr);
    }

    .ks-team-grid--cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ks-team-grid--cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .ks-team-grid--cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* One column at any width, since one card cannot be narrower than the row. */
.ks-team-grid--cols-1 {
    grid-template-columns: minmax(0, 1fr);
}

.ks-team-card {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1.25rem;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 0.5rem;
}

.ks-team-card__photo {
    margin: 0;
}

/*
 * Photographs are uploaded at whatever crop the sitter had. A fixed ratio keeps
 * a row of cards level; object-fit is what stops the odd portrait stretching.
 */
.ks-team-card__image {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 0.375rem;
}

.ks-team-card__title {
    margin: 0;
}

.ks-team-card__role {
    margin: 0;
    opacity: 0.75;
}

.ks-team-card__bio {
    margin: 0;
}

/* The department card's lines; the card's own gap does the spacing. */
.ks-team-card__excerpt,
.ks-team-card__count {
    margin: 0;
}

.ks-team-archive__header {
    margin: 0 0 2rem;
}

.ks-team-archive__lead {
    margin: 0.5rem 0 0;
}

.ks-team-archive__empty {
    margin: 2rem 0;
}

.ks-team-member__photo {
    margin: 0 0 1.5rem;
}

.ks-team-member__photo img {
    max-width: 100%;
    height: auto;
}

.ks-team-member__lead {
    margin: 0.5rem 0 0;
}

.ks-team-member__bio {
    margin: 0.5rem 0 1.5rem;
}

/*
 * A row of profile marks. Sized here and coloured by inheritance: the drawings
 * carry currentColor, so a link in a dark footer comes out light unaided.
 */
.ks-team-social {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin: 1.5rem 0;
    padding: 0;
    list-style: none;
}

.ks-team-social__item {
    margin: 0;
}

.ks-team-social__link {
    display: inline-flex;

    /* Zeroed so the inline SVG does not sit on a text baseline it never uses. */
    line-height: 0;
    color: inherit;
}

.ks-team-social__icon {
    width: 20px;
    height: 20px;
}

/*
 * The network's name, for a screen reader and for anyone navigating by link
 * text: a row of marks with no words in it is a row of unnamed links. `clip` is
 * kept beside clip-path for the browsers that still read only the old one.
 */
.ks-team-social__label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* The card's row sits tight under the text; the card's own gap does the rest. */
.ks-team-card__social {
    margin: 0.25rem 0 0;
}

.ks-team-details {
    margin: 1.5rem 0;
}

/*
 * Label beside value rather than under it, and wrapping rather than truncating:
 * a detail is "Languages / Ukrainian, English", which is a line, not a column.
 */
.ks-team-details__row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0 0 0.25rem;
}

.ks-team-details__label {
    margin: 0;
    opacity: 0.75;
}

.ks-team-details__value {
    margin: 0;
}

.ks-team-member__specializations {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    margin: 1.5rem 0;
    padding: 0;
    list-style: none;
}

.ks-team-member__specialization {
    margin: 0;
}

.ks-team-member__file {
    margin: 1.5rem 0;
}

.ks-team-member__contacts {
    margin: 1.5rem 0;
}

.ks-team-member__contact {
    display: flex;
    gap: 0.5rem;
    margin: 0 0 0.25rem;
}

.ks-team-member__footer {
    margin: 1.5rem 0 0;
}