/* ==========================================================================
   BLOCK: PEOPLE - taskforce / team grids: photo, name, org, role.
   ========================================================================== */

@scope (.block-people) {
    :scope {
        padding-block: clamp(44px, 9cqw, 130px);
        container-type: inline-size;
        container-name: people;
    }
    .with-aside { display: grid; gap: clamp(28px, 4cqw, 64px); align-items: start; }
    @container people (width >= 1000px) {
        .with-aside { grid-template-columns: minmax(0, 1fr) minmax(240px, 300px); }
    }

    .people-lede {
        font-weight: 300;
        font-size: clamp(1.02rem, 1.2cqw, 1.18rem);
        color: var(--text-secondary);
        line-height: 1.9;
        max-inline-size: 64ch;
        margin-block-end: clamp(28px, 4cqw, 64px);
    }

    .people-grid {
        display: grid;
        gap: clamp(16px, 2.4cqw, 34px);
        grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
    }
    .person {
        border: 1px solid var(--panel-border);
        background: var(--panel-bg);
        color: var(--panel-text);
        display: grid;
        grid-template-rows: auto 1fr;
    }
    .person img {
        inline-size: 100%;
        aspect-ratio: 1;
        object-fit: cover;
        filter: grayscale(25%);
        transition: filter 0.5s var(--ease-lux);
    }
    .person:hover img { filter: grayscale(0%); }
    .person figcaption {
        padding: clamp(16px, 2cqw, 28px) clamp(16px, 2cqw, 26px) clamp(20px, 2.4cqw, 32px);
        display: grid;
        gap: 8px;
        align-content: start;
    }
    .person .p-name { font-weight: 900; font-size: 1.08rem; line-height: 1.3; }
    .person .p-org {
        font-size: 0.74rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.14em;
        color: var(--accent-ink);
        line-height: 1.5;
    }
    .person .p-role { font-weight: 300; font-size: 0.92rem; color: var(--panel-muted); line-height: 1.65; }

    /* ------------------------------------------- SUBGRID ALIGNMENT --
       Each card spans four parent rows (photo / name / org / role) and
       subgrids onto them, so titles and text line up across every card
       in a row - however long a name or role wraps. figcaption becomes
       display: contents so its three spans are direct grid items on the
       shared tracks (its padding moves onto them). Non-subgrid engines
       keep the plain cards above. */
    @supports (grid-template-rows: subgrid) {
        .person {
            grid-row: span 4;
            grid-template-rows: subgrid;
            row-gap: 0;
        }
        .person figcaption { display: contents; }
        .person .p-name {
            padding: clamp(18px, 2cqw, 26px) clamp(16px, 2cqw, 26px) 0;
        }
        .person .p-org {
            padding: 8px clamp(16px, 2cqw, 26px) 0;
        }
        .person .p-role {
            padding: 8px clamp(16px, 2cqw, 26px) clamp(20px, 2.4cqw, 30px);
        }
    }

    /* Photo placeholder when no image is supplied (drawn, not imagery) */
    .p-photo-blank {
        inline-size: 100%;
        aspect-ratio: 1;
        display: grid;
        place-items: center;
        background: var(--panel-hover);
        color: var(--panel-muted);
        font-weight: 900;
        font-size: 1.6rem;
        letter-spacing: 0.05em;
    }
}