/* ==========================================================================
   BLOCK: LIBRARY -- categorised resource lists: case studies, whitepapers,
   featured articles, congress archive. Optional aside (section index /
   stats) via the .with-aside layout; aside is the THIRD navigation tier.
   ========================================================================== */

@scope (.block-library) {
    :scope {
        padding-block: clamp(44px, 9cqw, 130px);
        container-type: inline-size;
        container-name: library;
    }

    .with-aside { display: grid; gap: clamp(28px, 4cqw, 64px); align-items: start; }
    @container library (width >= 1000px) {
        .with-aside { grid-template-columns: minmax(0, 1fr) minmax(260px, 320px); }
    }

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

    /* Category group */
    .lib-group {
        border: 1px solid var(--panel-border);
        background: var(--panel-bg);
        color: var(--panel-text);
        margin-block-end: var(--space-xs);
    }
    /* The card carries the padding; header and items flow inside it with
       whitespace only -- the existing site's calm, ruleless interior. */
    .lib-group {
        padding: clamp(24px, 3.6cqw, 52px) clamp(22px, 3.4cqw, 50px);
    }
    .lib-group > header {
        display: grid;
        gap: 16px;
        justify-items: start;
        margin-block-end: clamp(20px, 2.2cqw, 30px);
    }
    /* Category titles: featherweight display type anchored by the
       short lime rule -- scales up generously on wide containers. */
    .lib-group h2 {
        font-size: clamp(1.5rem, 2.4cqw, 2.3rem);
        font-weight: 200;
        line-height: 1.15;
        letter-spacing: -0.01em;
    }
    .lib-group h2::after {
        content: "";
        display: block;
        inline-size: 44px;
        block-size: 3px;
        background: var(--accent-lime);
        margin-block-start: 14px;
    }
    .lib-group > header p {
        font-weight: 400;
        font-size: 1rem;
        color: var(--panel-muted);
        line-height: 1.75;
        max-inline-size: 64ch;
    }

    .lib-item {
        padding: clamp(16px, 2.2cqw, 30px) 0;
        padding-inline-start: 26px;      /* hanging indent under the bullet */
        display: grid;
        gap: 10px;
        position: relative;              /* anchor box for the bullet only */
    }
    /* Trim doubled whitespace at the card's seams */
    .lib-group > .lib-item:last-child { padding-block-end: 0; }
    .lib-group > header + .lib-item { padding-block-start: 0; }

    /* Lime bullet on the title line -- the live site's list voice */
    .lib-item > h3::before {
        content: "";
        position: absolute;
        inset-inline-start: 4px;
        margin-block-start: 0.55em;
        inline-size: 7px;
        block-size: 7px;
        border-radius: 50%;
        background: var(--accent-lime);
    }
    .lib-item h3 a {
        font-weight: 700;
        font-size: clamp(1.05rem, 1.2cqw, 1.2rem);
        line-height: 1.5;
        transition: color 0.25s;
    }
    .lib-item h3 a:hover { color: var(--accent-ink); }
    .lib-item p { font-weight: 400; font-size: 0.98rem; color: var(--panel-muted); line-height: 1.75; max-inline-size: 72ch; }

    /* Media rows (featured articles / congress archive) */
    .lib-item.has-media {
        grid-template-columns: 1fr;
        padding-inline-start: 0;
        border-block-end: 1px solid var(--panel-border);
        padding-block: clamp(26px, 2.8cqw, 38px);
    }
    .lib-item.has-media:last-child { border-block-end: 0; }
    .lib-item.has-media > h3::before { content: none; }
    @container library (width >= 640px) {
        .lib-item.has-media {
            grid-template-columns: minmax(140px, 220px) 1fr;
            column-gap: 22px;
        }
        .lib-item.has-media > .lib-media { grid-row: 1 / span 3; }
    }
    .lib-media { display: grid; border: 1px solid var(--panel-border); overflow: hidden; }
    .lib-media > * { grid-area: 1 / 1; }
    .lib-media img {
        inline-size: 100%;
        block-size: 100%;
        aspect-ratio: 16 / 9;
        object-fit: cover;
        filter: grayscale(25%);
        transition: filter 0.5s var(--ease-lux);
    }
    .lib-item:hover .lib-media img { filter: grayscale(0%); }
    /* Video badge -- drawn, not imagery */
    .lib-media .play-badge {
        place-self: center;
        z-index: 1;
        inline-size: 44px;
        block-size: 44px;
        border-radius: 50%;
        background: rgba(0,0,0,0.6);
        display: grid;
        place-items: center;
        color: var(--accent-lime);
    }
    .play-badge::before {
        content: "";
        inline-size: 0;
        block-size: 0;
        border-block: 8px solid transparent;
        border-inline-start: 13px solid currentColor;
        translate: 2px 0;
    }

    /* Meta, tags, actions */
    .lib-meta {
        font-size: 0.78rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.14em;
        color: var(--panel-muted);
    }
    .tag-list {
        display: block;
        font-size: 0.86rem;
        font-weight: 500;
        color: var(--panel-muted);
        line-height: 2;
        margin-block-start: 2px;
    }
    .tag-list::before { content: "Tags: "; }
    .tag-list a {
        color: var(--accent-ink);
        transition: color 0.25s;
    }
    .tag-list a:hover { color: var(--panel-text); text-decoration: underline; }
    .tag-list a + a::before {
        content: " | ";
        color: var(--panel-muted);
        pointer-events: none;
    }
    /* Region moves to its own labelled line */
    .tag-list .tag-region {
        display: block;
        color: var(--accent-ink);
    }
    .tag-list .tag-region::before { content: "Region: "; color: var(--panel-muted); }

    .doc-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-block-start: 6px; }
    /* Chip buttons: shared component -- see block-chips.css. */
    /* Aside panels: shared component -- see block-aside.css.
       (@scope rules cannot cross block scopes, so the panel anatomy
       lives in its own panel-scoped module.) */
}