/**
 * Knowledge library result card.
 *
 * Figma: Sponge Knowledge Platform — Knowledge library, "Card/Knowledge"
 * (node 17860:3814).
 */

.c--card-knowledge {
  --_card-k_bg: var(--card-k_bg, #f9f9f9);
  --_card-k_b-r: var(--card-k_b-r, 16px);
  --_card-k_p: var(--card-k_p, 24px);
  --_card-k_gap: var(--card-k_gap, 16px);

  --_card-k-meta_f-s: var(--card-k-meta_f-s, 12px);
  --_card-k-meta_c: var(--card-k-meta_c, #666666);
  --_card-k-date_c: var(--card-k-date_c, #888888);

  --_card-k-pill_f-s: var(--card-k-pill_f-s, 11px);
  --_card-k-pill_b-r: var(--card-k-pill_b-r, 10px);
  --_card-k-pill_p-b: var(--card-k-pill_p-b, 6px);
  --_card-k-pill_p-i: var(--card-k-pill_p-i, 8px);
  --_card-k-pill-type_bg: var(--card-k-pill-type_bg, #eaf3de);
  --_card-k-pill-type_c: var(--card-k-pill-type_c, #27500a);
  --_card-k-pill-lang_bg: var(--card-k-pill-lang_bg, var(--c-gray-ultralight));
  --_card-k-pill-lang_c: var(--card-k-pill-lang_c, var(--c-text));

  --_card-k-title_f-s: var(--card-k-title_f-s, 20px);
  --_card-k-title_c: var(--card-k-title_c, var(--c-title-main));
  --_card-k-body_f-s: var(--card-k-body_f-s, 14px);
  --_card-k-body_c: var(--card-k-body_c, var(--c-text));

  --_card-k-measures_c: var(--card-k-measures_c, #888888);
  --_card-k-measures-link_c: var(--card-k-measures-link_c, var(--c-blue));

  --_card-k-btn_bg: var(--card-k-btn_bg, var(--c-white));
  --_card-k-btn_c: var(--card-k-btn_c, var(--c-gray-dim));
  --_card-k-btn_b-r: var(--card-k-btn_b-r, 18px);
  --_card-k-btn_bg_h: var(--card-k-btn_bg_h, var(--c-earth-dark));
  --_card-k-btn_c_h: var(--card-k-btn_c_h, var(--c-white));

  /* Extra room under the content so the absolutely placed Open button never
     sits on top of the text. Needed most on the resource teaser, which has no
     "Associated measures" row to push the text clear of the button. */
  --_card-k_btn-clearance: var(--card-k_btn-clearance, 38px);

  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--_card-k_gap);
  padding: var(--_card-k_p);
  padding-block-end: calc(var(--_card-k_p) + var(--_card-k_btn-clearance));
  overflow: hidden;
  color: var(--_card-k-body_c);
  background-color: var(--_card-k_bg);
  border-radius: var(--_card-k_b-r);
}

/* ---- Meta row: category + date on the left, pills on the right ---- */
.card-knowledge__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: var(--_card-k-meta_f-s);
  line-height: var(--l-h);
}

.card-knowledge__meta-left {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.card-knowledge__category {
  color: var(--_card-k-meta_c);
  text-transform: uppercase;
}

.card-knowledge__date {
  color: var(--_card-k-date_c);
  white-space: nowrap;
}

.card-knowledge__pills {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.card-knowledge__pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-block: var(--_card-k-pill_p-b);
  padding-inline: var(--_card-k-pill_p-i);
  font-size: var(--_card-k-pill_f-s);
  line-height: var(--l-h);
  text-transform: uppercase;
  white-space: nowrap;
  border-radius: var(--_card-k-pill_b-r);
}

.card-knowledge__pill--type {
  color: var(--_card-k-pill-type_c);
  background-color: var(--_card-k-pill-type_bg);
}

.card-knowledge__pill--language {
  color: var(--_card-k-pill-lang_c);
  background-color: var(--_card-k-pill-lang_bg);
}

/* ---- Title + summary ---- */
.card-knowledge__content {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.card-knowledge__title {
  margin: 0;
  font-family: var(--f-f_s);
  font-size: var(--_card-k-title_f-s);
  font-weight: var(--f-w_bold);
  line-height: 1.35;
  color: var(--_card-k-title_c);
  word-break: break-word;
}

.card-knowledge__title a {
    color: inherit;
    -webkit-text-decoration: none;
    text-decoration: none;
  }

.card-knowledge__title a:hover {
      -webkit-text-decoration: underline;
      text-decoration: underline;
    }

.card-knowledge__summary {
  margin: 0;
  font-size: var(--_card-k-body_f-s);
  line-height: var(--l-h);
  color: var(--_card-k-body_c);
  word-break: break-word;
}

/* ---- Associated measures ---- */
.card-knowledge__measures {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.25rem;

  /* Keep the measure links clear of the absolutely placed Open button. */
  padding-inline-end: 6.25rem;
}

.card-knowledge__measures-label {
  font-size: 0.75rem;
  line-height: 1.5rem;
  color: var(--_card-k-measures_c);
}

.card-knowledge__measures-list {
  font-size: 0.875rem;
  font-weight: var(--f-w_medium);
  line-height: 1rem;
  color: var(--_card-k-measures-link_c);
}

.card-knowledge__measures-list a {
    color: inherit;
  }

/* ---- Open button, pinned bottom-right per the design ---- */
.card-knowledge__link {
  position: absolute;
  inset-block-end: 1rem;
  inset-inline-end: var(--_card-k_p);
  display: inline-flex;
  gap: 0.25rem;
  align-items: center;
  padding-block: 0.625rem;
  padding-inline: 0.875rem;
  font-size: 0.875rem;
  font-weight: var(--f-w_medium);
  line-height: var(--l-h);
  color: var(--_card-k-btn_c);
  -webkit-text-decoration: none;
  text-decoration: none;
  white-space: nowrap;
  background-color: var(--_card-k-btn_bg);
  border-radius: var(--_card-k-btn_b-r);
  transition: var(--t--b);
}
.card-knowledge__link svg {
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
  }
/* External links angle the arrow into the "leaves the site" diagonal, as the
     node_default quick-reference links do. */
.card-knowledge__link.card-knowledge__link--external svg {
    transform: rotate(-45deg);
  }
.card-knowledge__link:hover,
  .card-knowledge__link:focus-visible {
    color: var(--_card-k-btn_c_h);
    -webkit-text-decoration: none;
    text-decoration: none;
    background-color: var(--_card-k-btn_bg_h);
  }

/* On narrow screens let the button fall into the flow instead of overlapping;
   in flow it needs no reserved space beneath the content. */
@media (max-width: 61.9375rem) {
  .c--card-knowledge {
    --_card-k_btn-clearance: 0px;
  }

  .card-knowledge__measures {
    padding-inline-end: 0;
  }

  .card-knowledge__link {
    position: static;
    align-self: flex-start;
  }
}