/* card_grid block. The card shell (.card-grid__card, __category, __card-title,
   __description, __pill) lives in css/components/card.css and the grid in
   css/components/card-grid.css. This file styles the parts those don't cover:
   the icon, the CTA, the pill row and the footer links. No literal colour. */

.card-grid-section .card-grid-title { margin-bottom: .4rem; }
.card-grid-intro { color: var(--muted); max-width: 62ch; margin-bottom: 1.6rem; }

.card-grid__icon { display: inline-flex; margin-bottom: .4rem; color: var(--accent); }
.card-grid__icon svg { width: 34px; height: 34px; }
.card-grid__icon--blue { color: var(--surface-blue); }
.card-grid__icon--green { color: var(--aud-employers-text); }

.card-grid__cta { margin-top: auto; padding-top: .9rem; display: inline-flex; align-items: center; gap: .4rem; font-size: var(--fs-min); font-weight: 700; color: var(--link); }
.card-grid__card:hover .card-grid__cta { text-decoration: underline; }
.card-grid__cta-icon { flex: 0 0 auto; width: 1em; height: 1em; }

.card-grid__pills { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: auto; padding-top: .9rem; }
.card-grid__pills .card-grid__pill { margin-top: 0; padding-top: 0; color: var(--link); font-weight: 700; }

.card-grid__footer { margin-top: 1.8rem; padding-top: 1.4rem; border-top: 1px solid var(--line); }
.card-grid__footer-title { font-size: 1.25rem; margin-bottom: .7rem; }
.card-grid__footer-pills { display: flex; flex-wrap: wrap; gap: .8rem 1.4rem; }
.card-grid__footer-pills a { font-size: var(--fs-min); font-weight: 700; color: var(--link); }