/**
 * "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;
}

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
   service names are links too, and anchors do not nest. So the title's anchor
   is stretched over the card instead, and the service list is 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);
}

body.npf-home .npf-main .cat-card__note {
  font-size: 14px;
  line-height: 21px;
  color: var(--muted-slate);
}

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

   The design's soft button, at the foot of the card. Above the title's
   stretched overlay for the same reason the service list is — 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 long the service list above it runs. */
  display: flex;
  justify-content: center;
  width: 100%;
  /* The card's slack goes here, above the button, rather than into the middle
     of the card. `margin-bottom: auto` on the body used to hold it — that
     bottom-aligned three equal chip rows across the cards, which was tidy while
     every card had exactly three. The service lists are 4, 10 and 11 long now
     and the browse-all card has none, so the same rule opened a 300px hole
     between the title and the services on the short cards. Pinning the button
     keeps every card's title and services directly under one another and puts
     the leftover height where nobody has to read past it. */
  margin-top: auto;
}

/* 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;
}

/* ==================================================================
   SERVICE LIST

   Every service in the area, as small pills in a box of a fixed height that
   scrolls when the list is longer than the box.

   Two things are being solved at once. The pills are small — 12px on 4px of
   padding rather than the 13px on 6px they started at — because at four columns
   a card is only ~280px wide, and at the old size any name longer than two
   words took a whole row to itself. At this size two and three sit on a line,
   which is what the section was asked for.

   And the box is capped, because the areas are 4, 10 and 11 services deep. Left
   to size themselves the cards ran to ~880px and pushed the grid off the first
   screen — and since the grid stretches every card to the tallest, the short
   ones paid for the long one in white space. A fixed height means the four
   cards are the same four cards whatever the taxonomy grows into: the page
   stays one screen, nothing is hidden, and the longer lists scroll.

   Above the stretched overlay, so each pill is its own destination while the
   rest of the tile still opens the parent category — and so the wheel scrolls
   the list rather than the page.
   ================================================================== */

body.npf-home .npf-main .cat-card__subs {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 5px;
  /* Four rows of pills (24px each, 5px apart) plus half of a fifth. The half
     row is deliberate: a list cut through the middle of a pill is the one
     signal that reads as "there is more" without a label or an arrow. */
  max-height: 128px;
  overflow-y: auto;
  /* The scrollport is inset so pills are not flush against the scrollbar, and
     the wheel stops here rather than scrolling the page on when the list ends. */
  padding-right: 6px;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #c7dbf3 transparent;
}

/* Chrome hides overlay scrollbars on macOS until something moves, which on a
   list whose whole affordance is "this scrolls" is the wrong default. Styling
   the pseudo-elements opts out of overlay scrollbars, so the track is always
   there to be seen. */
body.npf-home .npf-main .cat-card__subs::-webkit-scrollbar {
  width: 5px;
}

body.npf-home .npf-main .cat-card__subs::-webkit-scrollbar-track {
  background: var(--primary-soft);
  border-radius: var(--radius-pill);
}

body.npf-home .npf-main .cat-card__subs::-webkit-scrollbar-thumb {
  background: #a9c8ea;
  border-radius: var(--radius-pill);
}

body.npf-home .npf-main .cat-card__subs::-webkit-scrollbar-thumb:hover {
  background: var(--primary);
}

body.npf-home .npf-main .cat-card__subs:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
  border-radius: 6px;
}

body.npf-home .npf-main .cat-card__sub {
  display: inline-flex;
  align-items: center;
  padding: 4px 9px;
  border-radius: var(--radius-pill);
  background: var(--primary-soft);
  color: var(--primary-darker);
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  text-transform: capitalize;
  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;
}

/* ==================================================================
   "BROWSE ALL EXPERTS" — the last card

   Same tile, inverted. It has to be one of the four choices rather than an
   ornament, so the geometry is untouched: same padding, same radius, same icon
   chip, same button position, and it sits in the same grid cell any area card
   would. Only the fill changes, because it is not a service area — it is what
   you take when none of the three named ones is what you came for, and a
   visitor scanning the row should be able to see that without reading.

   This replaces a text link under the grid, which is where the option was
   before and where nobody found it.
   ================================================================== */

body.npf-home .npf-main .cat-card--all {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-darker) 100%);
  box-shadow: var(--shadow-primary);
}

body.npf-home .npf-main .cat-card--all:hover {
  box-shadow: 0 18px 40px rgba(63, 109, 179, 0.36);
}

/* The glyphs are drawn in white strokes for a primary chip; on a primary card
   the chip needs to be the lighter shape, not the darker one. */
body.npf-home .npf-main .cat-card--all .cat-card__icon {
  background: rgba(255, 255, 255, 0.16);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.4);
}

body.npf-home .npf-main .cat-card--all .cat-card__title,
body.npf-home .npf-main .cat-card--all .cat-card__title a {
  color: #fff;
}

body.npf-home .npf-main .cat-card--all .cat-card__title a:hover {
  color: #fff;
}

body.npf-home .npf-main .cat-card--all .cat-card__note {
  color: rgba(255, 255, 255, 0.82);
}

/* White on the fill, and it stays white on hover — `.cat-card:hover
   .cat-card__btn` fills the button with --primary, which on this card is the
   button disappearing into its own tile. Five classes to that rule's four. */
body.npf-home .npf-main .cat-card.cat-card--all .cat-card__btn,
body.npf-home .npf-main .cat-card.cat-card--all:hover .cat-card__btn,
body.npf-home .npf-main .cat-card.cat-card--all .cat-card__btn:hover {
  --btn-bg: #fff;
  --btn-fg: var(--primary-darker);
  background: #fff;
  color: var(--primary-darker);
  box-shadow: none;
}

/* ==================================================================
   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;
  }
}