@layer components {

    /* ── Country hub (/countries/{code}) ─────────────────────────────
     The landing page is wayfinding and reads as editorial: pale, airy,
     tiles in a grid. A hub is the opposite job — a company arrives
     wanting facts — so it is dense, banded and carded, and needs its
     own components rather than the landing page's.

     Host-local for now because Africa Documents has no hubs. Promote to
     the RCL when a second host grows them. */

    /* A grey canvas is what lets a white card read as a card. On the
       landing page's white there is nothing for a surface to sit
       against, which is why cards there read as flat regions. */
    .c-hub {
        background: var(--color-surface-alt);
    }

    .c-hub__inner {
        max-width: var(--max-content-width);
        margin-inline: auto;
        padding-inline: clamp(var(--space-4), 4vw, var(--space-7));
    }

    /* ── Banner ───────────────────────────────────────────────────── */

    .c-hub__banner {
        background: var(--color-surface-inverse);
        color: var(--color-on-surface-inverse);
        padding-block: var(--space-8) var(--space-9);
    }

    .c-hub__crumb {
        font-size: var(--fs-caption);
        letter-spacing: .08em;
        text-transform: uppercase;
        color: var(--color-on-dark-mute);
        margin: 0 0 var(--space-5);
    }

    .c-hub__crumb a {
        color: var(--color-on-dark-mute);
    }

    .c-hub__crumb a:hover {
        color: var(--color-on-dark);
    }

    .c-hub__banner-row {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-end;
        justify-content: space-between;
        gap: var(--space-7);
    }

    .c-hub__title {
        margin: 0;
        max-width: 26ch;
        color: var(--color-on-dark);
    }

    .c-hub__sub {
        margin: var(--space-4) 0 0;
        max-width: 48ch;
        color: var(--color-on-dark-mute);
    }

    .c-hub__actions {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-3);
        margin-top: var(--space-6);
    }

    /* ── Figures in the banner ────────────────────────────────────── */

    .c-hub-figures {
        display: flex;
        gap: var(--space-7);
    }

    /* A hairline between figures rather than a box around them: the rule
       is what makes two numbers read as one set instead of two
       headings. */
    .c-hub-figure + .c-hub-figure {
        border-left: 1px solid rgb(250 250 250 / .2);
        padding-left: var(--space-7);
    }

    .c-hub-figure__num {
        font-family: var(--font-display);
        font-size: var(--fs-display-s);
        line-height: var(--lh-tight);
        color: var(--color-on-dark);
    }

    .c-hub-figure__label {
        font-size: var(--fs-ui-sm);
        color: var(--color-on-dark-mute);
        margin-top: var(--space-2);
    }

    /* ── At a glance ──────────────────────────────────────────────── */

    .c-hub-glance {
        background: var(--color-surface-field);
        border-bottom: 1px solid var(--color-line);
        padding-block: var(--space-6);
    }

    .c-hub-glance__grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
        gap: var(--space-6);
    }

    .c-hub-glance__label {
        font-size: var(--fs-caption);
        letter-spacing: .08em;
        text-transform: uppercase;
        color: var(--color-ink-mute);
        margin: 0 0 var(--space-2);
    }

    /* Deliberately NOT the display numeral face: these values are words
       — an authority, a market, an obligation — and a display size turns
       "Monthly PAYE remittance" into a headline. */
    .c-hub-glance__value {
        font-size: var(--fs-body-lg);
        font-weight: 600;
        color: var(--color-ink);
        margin: 0;
        line-height: var(--lh-snug);
    }

    .c-hub-glance__note {
        font-size: var(--fs-ui-sm);
        color: var(--color-ink-mute);
        margin: var(--space-1) 0 0;
    }

    /* ── Sections and cards ───────────────────────────────────────── */

    .c-hub__section {
        padding-block: var(--space-8);
    }

    .c-hub__section-head {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        justify-content: space-between;
        gap: var(--space-4);
        margin-bottom: var(--space-5);
    }

    .c-hub__section-title {
        margin: 0;
        font-size: var(--fs-heading);
    }

    .c-hub__section-lede {
        margin: var(--space-2) 0 0;
        color: var(--color-ink-soft);
        max-width: 60ch;
    }

    .c-hub-card {
        background: var(--color-surface-field);
        border: 1px solid var(--color-line);
        border-radius: var(--radius-md);
        padding: var(--space-5) var(--space-6);
    }

    .c-hub-rows {
        display: flex;
        flex-direction: column;
        gap: var(--space-3);
    }

    /* ── One obligation ───────────────────────────────────────────── */

    .c-hub-row {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-4);
    }

    .c-hub-row__title {
        margin: 0;
        font-size: var(--fs-body-lg);
    }

    .c-hub-row__who {
        margin: var(--space-1) 0 0;
        font-size: var(--fs-ui-sm);
        color: var(--color-ink-mute);
    }

    /* Right-aligned so a column of dates lines up and can be scanned
       without reading the titles beside them. */
    .c-hub-row__due {
        text-align: right;
        margin: 0;
        white-space: nowrap;
    }

    .c-hub-row__date {
        font-weight: 600;
        color: var(--color-ink);
        font-variant-numeric: tabular-nums;
    }

    .c-hub-row__away {
        display: block;
        font-size: var(--fs-ui-sm);
        color: var(--color-ink-mute);
    }

    .c-hub-tag {
        display: inline-block;
        font-size: var(--fs-caption);
        letter-spacing: .04em;
        color: var(--color-ink-soft);
        background: var(--color-surface-alt);
        border-radius: var(--radius-sm);
        padding: 2px var(--space-3);
    }

    /* ── Regulators ───────────────────────────────────────────────── */

    /* The two every company deals with get a card each; the rest are a
       list inside one card, because fifteen equal cards is a wall and a
       single one is a stub. */
    .c-hub-featured {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
        gap: var(--space-4);
        margin-bottom: var(--space-4);
    }

    .c-hub-featured__role {
        font-size: var(--fs-caption);
        letter-spacing: .08em;
        text-transform: uppercase;
        color: var(--color-ink-mute);
        margin: 0 0 var(--space-2);
    }

    .c-hub-featured__name {
        margin: 0;
        font-size: var(--fs-subheading);
    }

    .c-hub-featured__desc {
        margin: var(--space-2) 0 0;
        color: var(--color-ink-soft);
        font-size: var(--fs-ui-sm);
    }

    .c-hub-list {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
        gap: var(--space-5);
    }

    .c-hub-list__item {
        margin: 0;
    }

    .c-hub-list__name {
        font-weight: 600;
        color: var(--color-ink);
    }

    .c-hub-list__desc {
        display: block;
        font-size: var(--fs-ui-sm);
        color: var(--color-ink-mute);
        margin-top: 2px;
    }
}