/* css/members.css
 *
 * The Member Directory: the filter panel down the left and the wall of members
 * on the right.
 *
 * WHAT IS NOT IN HERE, AND WHY
 *
 * The page's whole layout -- .mk-wrap, .mk-filters, .mk-facet, .mk-list-head,
 * .mk-pager, .mk-empty, the loading dim, the phone breakpoints -- is
 * css/marketplace.css's, used verbatim by includes/memberdir.php rather than
 * copied here under new names.
 *
 * That is deliberate and it is the whole point of the file being this short.
 * The Directory IS the Script Library pointed at people: same panel, same 24 to
 * a page, same pager top and bottom, same grid/rows switch. Two stylesheets
 * describing that layout would be two things to keep in step, and they would
 * not stay in step -- the first time one of them got a padding nudge the pages
 * would start to look like cousins rather than siblings.
 *
 * The card furniture is the dashboard's for the same reason: .dash-card,
 * .dash-grid, .dash-rows and .dash-chip come from css/dashboard.css, so a
 * member card sits on the same wall as a screenplay card and answers to hover
 * the same way.
 *
 * So what IS here is only what a person has that a screenplay does not: a face,
 * a town, a distance, and a set of roles.
 */

/* ---- the wall ----------------------------------------------------------- */

/* Members are narrower than screenplays. A script card carries a poster, a
   logline and a synopsis; this carries a name, a town and a row of chips, and
   at the Library's 360px minimum a directory reads as a lot of white space with
   writing in the corner. Three to a row where the Library gets two. */
.md-wrap .dash-grid {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

.md-card {
    gap: 6px;
}

/* ---- the head: face, name, where ---------------------------------------- */

.md-card-head {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.md-card-headtext {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1 1 auto;
}

/* Bigger than the byline avatar on a Library card, and deliberately so: there
   the face is a footnote to a screenplay, here it is the thing being looked
   for. A directory is scanned by face before it is read by name. */
.md-avatar {
    width: 52px;
    height: 52px;
    flex: none;
    border-radius: 50%;
    overflow: hidden;
    background: var(--primary-dim);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 700;
}

.md-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* A long name ellipsises rather than wrapping to a second line and pushing the
   town and the chips down -- cards in a grid row are as tall as the tallest of
   them, so one three-line name costs every card beside it. */
.md-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.md-where {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.md-where i {
    font-size: 11px;
    flex: none;
}

/* ---- the headline: distance, and what they have in the Library ---------- */

/* The two facts worth a size of their own, on one line under the name.

   Same argument as the coverage score on a Library card: somebody scanning a
   wall of two dozen members for a reason to click is scanning for "how near"
   and "have they written anything", and those should not have to be found among
   the small print. */
.md-headline {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 2px;
}

.md-distance,
.md-scripts {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 15px;
    font-weight: 700;
    color: var(--primary);
}

.md-distance i,
.md-scripts i {
    font-size: 13px;
    color: var(--text-soft);
}

/* The screenplay count goes somewhere; the distance does not. */
.md-scripts {
    cursor: pointer;
    transition: color .15s;
}

.md-scripts:hover {
    color: var(--gold-dark, #8a6f21);
}

/* ---- roles and biography ------------------------------------------------ */

/* The chips are .dash-chip and .dash-chip-click from css/dashboard.css, so a
   role here looks and behaves like a genre on a Library card -- clicking it
   ticks its own box in the panel. Only the spacing is this file's. */
.md-jobs {
    margin-top: 2px;
}

/* Two lines of an About Me and no more. Some of them are eighteen hundred
   characters, and a card four times the height of its neighbours breaks the
   row it is in rather than telling anybody more than the first sentence does. */
.md-about {
    margin: 2px 0 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-soft);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ---- the foot: joined, last seen ---------------------------------------- */

/* margin-top:auto pins these to the bottom edge whatever is above them, so the
   dates line up across a row of cards of different heights instead of floating
   at the end of however much biography each one had. */
.md-card-foot {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: auto;
    padding-top: 4px;
    font-size: 12px;
    color: var(--text-muted);
}

.md-fact {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.md-fact i {
    font-size: 11px;
}

/* ---- the row shape ------------------------------------------------------ */

/* Across rather than down. The head takes the left, the biography the middle,
   and the dates the right -- so a row reads as one sentence about a person
   instead of a tall card that happens to be wide. */
.dash-card-wide.md-card {
    flex-direction: row;
    align-items: center;
    gap: 16px;
}

.dash-card-wide.md-card .md-card-head {
    flex: 0 0 260px;
    align-items: center;
}

.dash-card-wide.md-card .md-jobs {
    flex: 0 1 auto;
    margin-top: 0;
}

.dash-card-wide.md-card .md-about {
    flex: 1 1 auto;
    -webkit-line-clamp: 2;
    margin: 0;
}

.dash-card-wide.md-card .md-card-foot {
    flex: none;
    margin-top: 0;
    margin-left: auto;
    padding-top: 0;
}

/* ---- the staff mark ----------------------------------------------------- */

/* Only staff ever see this: a member who has hidden themselves is not in
   anybody else's results at all, so there is nothing for anybody else to mark.
   Grey rather than the badge colours the Library uses, because it reports a
   state rather than warning about one. */
.md-badge-hidden {
    position: absolute;
    top: 6px;
    right: 8px;
    font-size: 13px;
    color: var(--text-muted);
    opacity: .8;
}

/* ---- the panel's one addition ------------------------------------------- */

/* The Near box sits under the sort list rather than up with the name box,
   because it is not a filter -- it does not remove anybody from the wall. It is
   the argument to one of the sorts above it, and it belongs where that sort can
   be seen. */
.md-near {
    margin-top: 8px;
}

/* Belt and braces over the UA's own [hidden] rule, which any later display
   declaration on this class would quietly beat. */
.md-near[hidden] {
    display: none;
}

.md-near-note {
    margin: 6px 0 0;
    font-size: 12px;
    line-height: 1.45;
    color: var(--text-muted);
}

.md-near-note i {
    margin-right: 4px;
}

.md-near-note a {
    color: var(--primary);
    text-decoration: underline;
    cursor: pointer;
}

/* ---- the member's own switch, on their profile -------------------------- */

/* The switch itself is .mk-switch from css/marketplace.css -- the same control
   as "List this screenplay in the Script Library", because it is the same kind
   of decision. This is only the room around it. */
.md-visibility {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
}

/* ---- narrow ------------------------------------------------------------- */

@media (max-width: 700px) {

    /* One card across. Below this the three-column grid gives cards too narrow
       for a name and a town to sit side by side with a face. */
    .md-wrap .dash-grid {
        grid-template-columns: 1fr;
    }

    /* A row card on a phone is a stacked card. The horizontal arrangement
       depends on there being somewhere for the biography to go. */
    .dash-card-wide.md-card {
        flex-direction: column;
        align-items: stretch;
    }

    .dash-card-wide.md-card .md-card-head {
        flex: none;
    }

    .dash-card-wide.md-card .md-card-foot {
        margin-left: 0;
        padding-top: 4px;
    }
}