/* ============================================================
   people.css
   The People section: the personal page (people_page.php), and next
   the Ekphrasts mosaic and the Organization page. Colours come only
   from the tokens in style.css :root. One colour point per view
   (Design Brief, Colour): the deep celadon line on top of the page
   head; ink and grey carry the rest. Buttons are dark grey (2026-11-05).
   ============================================================ */

/* The section hero is the site-wide .page-hero.toolbar in style.css
   (2026-11-05: one minimal bar everywhere; only Exhibition keeps a
   themed hero). No hero styles belong in this file. */

/* ── Page head ── */
.people-head {
    position: relative;
    border-top: 2px solid var(--celadon-deep);
    padding: 28px 16px 22px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
    border-bottom: 1px solid var(--border);
}
.people-avatar {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--gray-light);
    display: block;
}
.people-avatar--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gray-mid);
}
.people-name {
    margin: 4px 0 0;
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 400;
    font-size: 28px;
    line-height: 1.15;
    color: var(--black);
}
.people-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--gray-mid);
}
.people-badge {
    padding: 2px 7px;
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}
.people-badge--artist  { background: var(--id-artist-bg);  color: var(--id-artist-fg); }
.people-badge--poet    { background: var(--id-poet-bg);    color: var(--id-poet-fg); }
.people-badge--gallery { background: var(--id-gallery-bg); color: var(--id-gallery-fg); }
.people-counts {
    font-size: 13px;
    color: var(--gray-mid);
}
.people-actions {
    display: flex;
    gap: 8px;
    margin-top: 6px;
}

/* Owner's Edit: a secondary action, so it sits in the head's top-right
   corner (X, LinkedIn) instead of taking a line. The actions line is
   kept for the visitor's primary actions (Follow, Message, Share). */
.people-edit {
    position: absolute;
    top: 6px;
    right: 8px;
    min-height: 44px;
    padding: 0 8px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--gray-dark);
    text-decoration: none;
}
.people-edit:hover { color: var(--black); }

/* Buttons: primary dark grey, secondary white with a light line. */
.people-btn {
    min-height: 40px;
    padding: 0 22px;
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--gray-dark);
    background: var(--gray-dark);
    color: var(--white);
    font-family: var(--font-sans);
    font-size: 14px;
    border-radius: 2px;
    text-decoration: none;
}
.people-btn--secondary {
    border-color: var(--border);
    background: var(--white);
    color: var(--black);
}

/* ── Body: tabs, views and grid stop at the container width, so on a
   wide screen the columns keep their count and size (Design Brief,
   Content grid: "container max-width stops; columns do not grow"). ── */
.people-body {
    max-width: 1200px;
    margin: 0 auto;
}

/* ── Tabs and view switch ── */
.people-tabs {
    display: flex;
    justify-content: center;
    overflow-x: auto;
    border-bottom: 1px solid var(--border);
}
.people-tab {
    flex: none;
    min-height: 46px;
    padding: 0 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: 13px;
    color: var(--gray-mid);
    text-decoration: none;
}
.people-tab::after {
    content: '';
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: transparent;
}
.people-tab.is-active { color: var(--black); }
.people-tab.is-active::after { background: var(--celadon-mid); }

/* The view switch line also carries the first label (the count in
   Selected, the first year in Timeline), so switching views never moves
   the grid. Later year headings share the same height. */
.people-views {
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 10px 0 16px;
}
.people-views-label {
    margin: 0 auto 0 0;
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 400;
    font-size: 18px;
    line-height: 1;
    color: var(--black);
}
.people-view {
    min-height: 32px;
    padding: 0 8px;
    display: inline-flex;
    align-items: center;
    font-size: 12px;
    color: var(--gray-mid);
    text-decoration: none;
}
.people-view.is-active { color: var(--black); }

/* ── Grid: 3 columns on phones, 4 on tablets, 5 on desktops (Design
   Brief, Content grid). Tiles 3:4 with a tight gap. ── */
.people-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2px;
}
@media (min-width: 640px)  { .people-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .people-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

.people-year {
    margin: 0;
    min-height: 44px;
    display: flex;
    align-items: center;
    padding: 0 16px;
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 400;
    font-size: 18px;
    color: var(--black);
}
.people-tile {
    position: relative;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    display: block;
    background: var(--gray-light);
    color: var(--black);
    text-decoration: none;
}
.people-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.people-tile--poem {
    padding: 12px 10px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    background: var(--white);
    border: 1px solid var(--border);
}
.people-tile-lines {
    font-family: var(--font-serif);
    font-size: 13px;
    line-height: 1.45;
    white-space: pre-line;
    overflow: hidden;
}
.people-tile-title {
    margin-top: auto;
    font-size: 10px;
    color: var(--gray-mid);
}

/* ── About ── */
.people-about {
    max-width: 680px;
    margin: 0 auto;
    padding: 8px 16px 40px;
}
.people-about-label {
    margin: 28px 0 10px;
    font-size: 12px;
    letter-spacing: 1.5px;
    font-weight: 500;
    color: var(--gray-mid);
    text-transform: uppercase;
}
.people-practice {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 26px;
    line-height: 1.2;
    color: var(--black);
}
.people-prose {
    margin: 10px 0 0;
    font-family: var(--font-serif);
    font-size: 16px;
    line-height: 1.65;
    color: var(--gray-dark);
    white-space: pre-line;
}
.people-cv {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    row-gap: 10px;
    font-size: 14px;
    line-height: 1.45;
}
.people-cv-year { color: var(--gray-mid); }

.people-empty {
    padding: 40px 16px;
    text-align: center;
    font-size: 14px;
    color: var(--gray-mid);
}