/* ============================================================
   Goals subject hub: what goalCluster.css does not already draw.

   The hub renders through the leaves' stylesheet (goalCluster.css) so the
   chrome, the reading column, the pair, the ask and the sources are the same
   surface a parent lands on when they follow a disability link down. This
   sheet adds only the disability section: a lead and eighteen links, each
   with its sentence. Scoped to `.lp.gc.gh`.

   Held to social-ops/content/seo-visual-brief.md: paper ground, no kickers,
   no uppercase tracked labels, no decorative rules, no stat tiles, one
   primary teal button (the leaves' ask, from goalCluster.css).
   ============================================================ */

.gh-lead {
    color: var(--ink-2);
}

/* Eighteen links and their sentences. The same list shape as the sources
   (a link, then the reason it is there) because it is the same kind of block,
   set two-up on a wide screen so the section is one scroll, not four. */
.gh-leaves {
    display: grid;
    gap: 14px;
    margin: 22px 0 0;
    padding: 0;
    list-style: none;
    font-size: 15.5px;
    line-height: 1.5;
    color: var(--muted);
}

.gh-leaves li {
    padding: 14px 16px;
    border-radius: 12px;
    background: var(--paper-2);
}

.lp.gc.gh .gh-leaves a {
    font: 600 16px/1.35 var(--sans);
    color: var(--ink);
    text-decoration-color: var(--brand);
}

.lp.gc.gh .gh-leaves a:hover {
    color: var(--brand-2);
}

.gh-leaves span {
    display: block;
    margin-top: 4px;
}

@media (min-width: 720px) {
    .gh-leaves {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px 18px;
        margin-top: 26px;
    }
}