/**
 * Featured Resources component.
 *
 * Figma: Sponge Knowledge Platform — Knowledge page, "Featured" section
 * (node 18907:6655).
 *
 * Layout/scroll comes entirely from the embedded nav-scroll component; this
 * file only sets the section chrome and overrides nav-scroll's custom
 * properties to match the design (44px black circular button, 30px card
 * gutters, card-knowledge children instead of nav-scroll's default "pill"
 * item styling).
 */

.c--featured-resources {
  --_fr_gap: var(--fr_gap, 16px);
  --_fr_col-gap: var(--fr_col-gap, 30px);
  --_fr_card-h: var(--fr_card-h, 240px);

  display: flex;
  flex-direction: column;
  gap: var(--_fr_gap);
  width: var(--container_m-w);
  margin-inline: auto;
  padding-block: 2.5rem;
}

.featured-resources__heading {
  margin: 0;
  font-family: var(--f-f_s);
  font-size: 1.5rem;
  font-weight: var(--f-w_bold);
  line-height: 1.3;
  color: var(--c-title-main);
}

/* ---- nav-scroll overrides: black 44px circular button, vertically centred,
   card gutters instead of the default "pill nav" gap/padding. ---- */
.c--featured-resources .c--nav-scroll {
  --_nav-scroll_track_gap: var(--_fr_col-gap);
  --_nav-scroll_track_b-b: none;
  --_nav-scroll_btns_w: 2.75rem;
  --_nav-scroll_btns_b-r: 50%;
  --_nav-scroll_btn_bg: #222222;
  --_nav-scroll_btn_disabled-opacity: 0;
}

.c--featured-resources .c--nav-scroll__buttons {
  inset-block-start: 50%;
  transform: translateY(-50%);
}

.c--featured-resources .c--nav-scroll__buttons button {
  color: var(--c-white);
}

/* Neutralise nav-scroll's generic "pill nav item" styling for card-knowledge
   children - it sets padding/background/border-radius at higher specificity
   than card-knowledge's own rule, so those are restored here from the same
   custom properties card-knowledge itself reads. `white-space: nowrap` on
   the track (needed for nav-scroll's own pill-nav use case) also inherits
   into the card's title otherwise, stopping it from wrapping; `min-width: 0`
   undoes the flex default that would then refuse to shrink the card below
   that unwrapped title's width, past the 4-per-row flex-basis below. */
.c--featured-resources .c--nav-scroll > [data-navScroll-track] > .c--card-knowledge {
  flex: 0 0 calc((100% - 3 * var(--_fr_col-gap)) / 4);
  min-width: 0;
  height: var(--_fr_card-h);
  padding: var(--_card-k_p, 24px);
  background-color: var(--_card-k_bg, #f9f9f9);
  border-radius: var(--_card-k_b-r, 16px);
  white-space: normal;
  cursor: default;
}

@media (max-width: 61.9375rem) {
  .c--featured-resources .c--nav-scroll > [data-navScroll-track] > .c--card-knowledge {
    flex-basis: 80%;
    min-width: 15rem;
  }
}

/* ---- Few enough cards to fit one desktop row (see FeaturedResourcesBlock):
   still a slider up to 991px, but from 992px up the buttons are hidden
   server side rather than waiting on nav-scroll's JS overflow check. ---- */
@media (min-width: 62rem) {
  .c--featured-resources--static .c--nav-scroll {
    --_nav-scroll_track_p-i: 0px;
    --nav-scroll_btns_d: none;
  }
}