/**
 * "Find an Expert by Service" — the service category grid.
 *
 * Everything structural comes from npf-home.css, which is the reference design
 * ported whole: the container, the breadcrumb, the type scale, the buttons, the
 * `.link-arrow` and every colour and radius below is one of its tokens. This
 * file only states what that stylesheet has no equivalent for — the grid itself,
 * and the card, which is the Challenges card with a count and sub-category links
 * added.
 *
 * The card is deliberately not a new shape. The home page already asks "What's
 * Your Biggest Nonprofit Challenge?" with a grid of icon-over-title-over-text
 * tiles that lead to a category; this is the same question asked in the site's
 * own vocabulary, so it is the same tile: 24px padding, 20px radius, white on
 * --bg-alt, a 56px primary icon chip, and a 4px lift on hover.
 *
 * Loaded after npf-home.css and scoped the same way (`body.npf-home .npf-main`),
 * so it wins ties on source order without !important.
 */

/* ==================================================================
   SECTION
   ================================================================== */

body.npf-home .npf-main .cats {
  background: var(--bg-alt);
  padding-block: 72px 100px;
}

body.npf-home .npf-main .cats__inner {
  display: flex;
  flex-direction: column;
  max-width: 1200px;
  margin-inline: auto;
}

body.npf-home .npf-main .cats .breadcrumb {
  margin-bottom: 28px;
}

body.npf-home .npf-main .cats__head {
  text-align: center;
  margin-bottom: 50px;
}

/* An <h1>, not the <h2> the Challenges section uses — this is the page's own
   heading, so it takes the listing pages' heading size rather than a section
   heading's. */
body.npf-home .npf-main .cats__head h1 {
  font-size: clamp(36.8px, 5vw, 52.8px);
  line-height: 1.2;
  letter-spacing: -0.025em;
  text-transform: capitalize;
  color: var(--ink);
}

body.npf-home .npf-main .cats__head p {
  margin-top: 16px;
  font-size: 16px;
  line-height: 26px;
  color: var(--muted-slate);
}

/* ==================================================================
   GRID

   The column count travels with the markup, as it does on the Challenges grid:
   the element writes --npf-cats-cols from the panel, so changing "Columns" in
   the builder does not need a matching CSS change.
   ================================================================== */

body.npf-home .npf-main .cats__grid {
  display: grid;
  grid-template-columns: repeat(var(--npf-cats-cols, 4), minmax(0, 1fr));
  gap: 24px;
  align-items: stretch;
}

/* ==================================================================
   CARD
   ================================================================== */

body.npf-home .npf-main .cat-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 28px 24px;
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow-sm);
  transition: transform var(--t), box-shadow var(--t);
}

body.npf-home .npf-main .cat-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}

body.npf-home .npf-main .cat-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  flex: none;
  border-radius: 14px;
  background: var(--primary);
}

body.npf-home .npf-main .cat-card__icon img {
  width: 30px;
  height: 30px;
}

body.npf-home .npf-main .cat-card__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* Pushes the sub-category row to the bottom, so cards holding a different
     number of chips still line their chips up with each other. */
  margin-bottom: auto;
}

body.npf-home .npf-main .cat-card__title {
  font-weight: 600;
  font-size: 20px;
  line-height: 26px;
  text-transform: capitalize;
  color: var(--ink);
}

body.npf-home .npf-main .cat-card__title a {
  color: inherit;
  text-decoration: none;
}

/* The whole tile is clickable, but the markup cannot be one big <a> — the
   sub-category chips are links too, and anchors do not nest. So the title's
   anchor is stretched over the card instead, and the chips are lifted above it
   below. Same result, valid markup, and the card still announces itself as one
   link to a screen reader because the stretched anchor is the only thing
   covering it. */
body.npf-home .npf-main .cat-card__title a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

body.npf-home .npf-main .cat-card__title a:hover {
  color: var(--primary);
}

body.npf-home .npf-main .cat-card__count {
  font-family: var(--font-ui, inherit);
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  color: var(--primary);
}

/* ==================================================================
   BUTTON

   The design's soft button, at the foot of the card. Above the title's
   stretched overlay for the same reason the chips are — otherwise the overlay
   takes the click and the button is decoration that cannot be pressed.
   ================================================================== */

body.npf-home .npf-main .cat-card__btn {
  position: relative;
  z-index: 1;
  /* Full width and last in the flex column, so every card's button sits on the
     same line however many chips the card above it holds. */
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 4px;
}

/* The card is the hover target, not the button — pressing anywhere on the tile
   does the same thing, so the button fills in with the card rather than only
   under its own cursor. It has to out-specify `.btn--soft:hover`, which sets
   `background` directly and not just the variable; (0,5,1) against that rule's
   (0,4,1) does it without !important. */
body.npf-home .npf-main .cat-card:hover .cat-card__btn,
body.npf-home .npf-main .cat-card .cat-card__btn:hover {
  --btn-bg: var(--primary);
  --btn-fg: #fff;
  background: var(--primary);
  color: #fff;
}

/* `.btn:hover` lifts 3px. The card is already lifting 4px underneath it, and
   the two together made the button slide out of its own tile on hover. */
body.npf-home .npf-main .cat-card .cat-card__btn:hover {
  transform: none;
  box-shadow: none;
}

/* ==================================================================
   SUB-CATEGORY CHIPS

   Above the stretched overlay, so each one is its own destination while the
   rest of the tile still opens the parent category.
   ================================================================== */

body.npf-home .npf-main .cat-card__subs {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

body.npf-home .npf-main .cat-card__sub {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  background: var(--primary-soft);
  color: var(--primary-darker);
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
  text-decoration: none;
  transition: background var(--t-fast), color var(--t-fast);
}

body.npf-home .npf-main .cat-card__sub:hover,
body.npf-home .npf-main .cat-card__sub:focus-visible {
  background: var(--primary);
  color: #fff;
}

/* ==================================================================
   FOOTER LINK / EMPTY STATE
   ================================================================== */

body.npf-home .npf-main .cats__more {
  margin-top: 44px;
  text-align: center;
}

body.npf-home .npf-main .cats .npf-empty {
  padding: 48px 0;
  text-align: center;
  font-size: 16px;
  color: var(--muted-slate);
}

/* ==================================================================
   RESPONSIVE — the same breakpoints the Challenges grid steps at, so the two
   grids reflow together on a page that shows both.
   ================================================================== */

@media (max-width: 1024px) {
  body.npf-home .npf-main .cats__grid {
    grid-template-columns: repeat(var(--npf-cats-cols-md, 3), minmax(0, 1fr));
    gap: 20px;
  }
}

@media (max-width: 900px) {
  body.npf-home .npf-main .cats {
    padding-block: 48px 68px;
  }
  body.npf-home .npf-main .cats__head {
    margin-bottom: 36px;
  }
  body.npf-home .npf-main .cats__grid {
    grid-template-columns: repeat(var(--npf-cats-cols-sm, 2), minmax(0, 1fr));
    gap: 16px;
  }
}

@media (max-width: 560px) {
  /* The design drops the breadcrumb on the listing pages at this width; this
     page follows it rather than keeping a trail nothing else shows. */
  body.npf-home .npf-main .cats .breadcrumb {
    display: none;
  }
  body.npf-home .npf-main .cats__grid {
    grid-template-columns: 1fr;
  }
  body.npf-home .npf-main .cats__head h1 {
    font-size: 30px;
  }
}