@layer components {

    /* ── Pillar grid ────────────────────────────────────────────────
     Three-column feature grid used in the Platform section.
     Cells separated by hairlines on the shared border. */
    .c-pillars {
        max-width: 80rem;
        margin-inline: auto;
        padding: var(--section-space) var(--space-7);
    }

    @media (max-width: 900px) {
        .c-pillars { padding-inline: var(--space-5); }
    }

    .c-pillar-grid {
        display: grid;
        /* auto-fit, not a fixed count: most pages have three pillars, the
           Africa Documents home page has four. A hard repeat(4, 1fr) would
           leave the three-pillar pages with a quarter of the row empty. */
        grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
        border-top: 1px solid var(--color-line);
    }

    @media (max-width: 900px) {
        .c-pillar-grid { grid-template-columns: 1fr; }
    }

    .c-pillar {
        padding: var(--space-7) var(--space-6) var(--space-6);
        border-right: 1px solid var(--color-line);
        border-bottom: 1px solid var(--color-line);
        position: relative;
        transition: background var(--dur-slow) var(--ease);
    }

    .c-pillar:last-child { border-right: none; }

    @media (max-width: 900px) {
        .c-pillar { border-right: none; }
    }

    .c-pillar:hover { background: var(--color-surface-alt); }

    .c-pillar__num {
        font-family: var(--font-display);
        font-size: var(--fs-ui-sm);
        color: var(--color-ink-mute);
        letter-spacing: 0.1em;
    }

    .c-pillar__icon {
        margin: var(--space-5) 0 var(--space-6);
        width: 3rem;
        height: 3rem;
        color: var(--color-accent);
    }

    .c-pillar__title {
        font-family: var(--font-display);
        font-weight: 400;
        font-size: 1.625rem;
        line-height: 1.15;
        letter-spacing: -0.01em;
        margin-bottom: var(--space-3);
    }

    .c-pillar__copy {
        font-size: var(--fs-body-sm);
        color: var(--color-ink-soft);
        margin-bottom: var(--space-6);
    }

    .c-pillar__link {
        font-size: var(--fs-ui-sm);
        letter-spacing: 0.05em;
        text-transform: uppercase;
        color: var(--color-ink);
        text-decoration: none;
        font-weight: 500;
        border-bottom: 1px solid var(--color-ink);
        padding-bottom: 2px;
        transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
    }

    .c-pillar__link:hover {
        color: var(--color-accent);
        border-color: var(--color-accent);
    }
}