/**
 * site-ui-people-v1.css — /people/<path>/ and the /people/ A–Z (1.25.0).
 *
 * Loaded after site-ui-person-v1.css (the person frame) by
 * AIPR_UI_People_Page::enqueue(). Only what the frame does not have: the
 * pinned quote under the head, and the A–Z's letter strip and names. No new
 * font family (the pinned quote is the frame's .aipr-ui-p-said) and no new
 * size: 20/30 is the frame's standfirst, 17/22 and 14/21 are its list.
 *
 * THE FILENAME CARRIES THE DESIGN VERSION. A redesign ships as -v2; v1 stays.
 */

/* ─── Their words, pinned under the head ─────────────────────────── */

.aipr-ui-p .aipr-ui-pp-pin {
    margin: 40px 0 0;
    padding: 0;
    border: 0;
}
.aipr-ui-p .aipr-ui-pp-pin blockquote {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    quotes: none;
}
.aipr-ui-p .aipr-ui-pp-pin .aipr-ui-p-said {
    font-size: 20px;
    line-height: 30px;
    max-width: 62ch;
}
.aipr-ui-p .aipr-ui-pp-pin figcaption { margin-top: 10px; text-align: left; font-style: normal; }

/* ─── The A–Z ────────────────────────────────────────────────────── */

.aipr-ui-p .aipr-ui-pp-az {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    margin-top: 32px;
    padding: 12px 0;
    border-top: 1px solid var(--aipr-ui-line);
    border-bottom: 1px solid var(--aipr-ui-line);
}
.aipr-ui-p .aipr-ui-pp-az a {
    font-size: 14px;
    font-weight: 600;
    line-height: 21px;
    color: var(--aipr-ui-ink);
    transition: color 120ms ease;
}
.aipr-ui-p .aipr-ui-pp-az a:hover { color: var(--aipr-ui-accent); }
.aipr-ui-p .aipr-ui-pp-letter { scroll-margin-top: calc(var(--aipr-ui-top, 0px) + 72px); }

/* Five across in the 800 column: the same photograph size as the old
   1200-wide Interviews wall (about 145px), so 110 faces are not twice as long. */
.aipr-ui-p .aipr-ui-pp-faces { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 28px 16px; }

/* The name the person is filed under is the bold part: "Andrew Fleury". */
.aipr-ui-p .aipr-ui-pp-faces .aipr-ui-pp-n {
    display: block;
    margin-top: 10px;
    font-size: 17px;
    font-weight: 400;
    letter-spacing: -0.01em;
    line-height: 22px;
    color: var(--aipr-ui-ink);
    transition: color 120ms ease;
}
.aipr-ui-p .aipr-ui-pp-faces .aipr-ui-pp-n b {
    display: inline;
    margin: 0;
    font-size: inherit;
    font-weight: 600;
    line-height: inherit;
    color: inherit;
}
.aipr-ui-p .aipr-ui-pp-faces a:hover .aipr-ui-pp-n { color: var(--aipr-ui-accent); }

@media (max-width: 900px) {
    .aipr-ui-p .aipr-ui-pp-faces { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
    .aipr-ui-p .aipr-ui-pp-faces { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
    .aipr-ui-p .aipr-ui-pp-pin { margin-top: 28px; }
    .aipr-ui-p .aipr-ui-pp-pin .aipr-ui-p-said { font-size: 18px; line-height: 27px; }
}

@media (prefers-reduced-motion: reduce) {
    .aipr-ui-p .aipr-ui-pp-az a, .aipr-ui-p .aipr-ui-pp-faces .aipr-ui-pp-n { transition: none !important; }
}
