/* ── components/impact-card.css ─────────────────────────
   Component: nf--impact-card
   Card with orange top border, category label, body text,
   and optional arrow. Linked variant (a.nf--impact-card--linked)
   makes the whole card clickable with hover animations.
   ──────────────────────────────────────────────────────── */

.nf--impact-card {
    border-top: 2px solid var(--orange);
    padding: var(--spacing4) 0 var(--spacing6);
    display: flex;
    flex-direction: column;
    color: inherit;
    text-decoration: none;
}

a.nf--impact-card--linked {
    cursor: pointer;
    transition: border-color 200ms ease-out;
}

a.nf--impact-card--linked:hover {
    border-top-color: var(--black);
    text-decoration: none !important;
    opacity: 1 !important;
}

.nf--impact-card__cat {
    display: block;
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--shark);
    margin: 0 0 var(--spacing3);
    transition: color 200ms ease-out;
}

a.nf--impact-card--linked:hover .nf--impact-card__cat {
    color: var(--orange);
}

.nf--impact-card p {
    font-size: 1.6rem;
    color: var(--black);
    line-height: 1.6;
    margin: 0;
    flex: 1;
}

.nf--impact-card__arrow {
    display: inline-block;
    font-size: 2rem;
    color: var(--orange);
    margin-top: var(--spacing4);
    line-height: 1;
    transition: transform 200ms ease-out;
}

a.nf--impact-card--linked:hover .nf--impact-card__arrow {
    transform: translateX(6px);
}