@charset "UTF-8";
/**
 * CAI Resource "compact card" — intrinsic styles shared across widgets.
 *
 * These rules style the card itself (`.cai-resource-card…`), independent of any
 * layout container. The Resource Grid's grid/list view scoping lives in
 * resource-grid.scss; other widgets (e.g. Related Resources) reuse the card by
 * enqueueing this stylesheet. Rendered markup: see inc/resource-card.php.
 */
.cai-resource-card {
  display: flex;
  flex-direction: column;
  /* Positioning context for the title link's stretched ::after, which makes
     the whole card clickable (both grid + list views). */
  position: relative;
  /* The grid stretches items to the tallest in the row (default
     align-items: stretch); height:100% makes the card fill that stretched
     cell so the CTA's margin-top:auto (grid view, below) can pin to the foot
     and CTAs line up across a row. */
  height: 100%;
  text-decoration: none;
}

.cai-resource-card__media {
  flex-shrink: 0;
  border-radius: var(--cai-radius-card, 8px);
  overflow: hidden;
  background: var(--cai-color-smoke, #f7f7f7);
}

.cai-resource-card__image,
.cai-resource-card__image-placeholder {
  display: block;
  width: 100%;
  height: auto;
  min-width: 100%;
  min-height: 100%;
  object-fit: cover;
}

.cai-resource-card__image-placeholder {
  aspect-ratio: 16/9;
  background-color: var(--cai-color-smoke, #f7f7f7);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='155.5 153.5 386.6 229.6' fill='%23d9d9d6'%3E%3Cpath d='M423.371%2C159h-50.39l-14.292%2C39.75-14.292%2C39.75-14.292%2C39.75-14.292%2C39.75h50.035l.059-.208.059-.208.059-.208.059-.208%2C2.255-7.742%2C2.255-7.742%2C2.255-7.742%2C2.255-7.742h46.154l2.314%2C7.95%2C2.314%2C7.95%2C2.314%2C7.95%2C2.314%2C7.95h50.026l-14.292-39.75-14.292-39.75-14.292-39.75-14.292-39.75ZM384.361%2C254.4l3.295-11.32%2C3.295-11.32%2C3.295-11.32%2C3.295-11.32.161-.55.161-.55.161-.55.161-.55%2C3.455%2C11.87%2C3.455%2C11.87%2C3.455%2C11.87%2C3.455%2C11.87h-27.641Z'/%3E%3Cpath d='M492.197%2C318v-159h48.404v159h-48.404Z'/%3E%3Cpath d='M240.354%2C155.007c-9.899%2C0-19.295%2C1.416-27.986%2C4.083s-16.675%2C6.587-23.75%2C11.594-13.239%2C11.103-18.289%2C18.123-8.986%2C14.964-11.604%2C23.669c-.608%2C2.015-1.144%2C4.072-1.607%2C6.168s-.853%2C4.232-1.166%2C6.404-.551%2C4.382-.711%2C6.626-.24%2C4.522-.24%2C6.832.081%2C4.588.24%2C6.832.397%2C4.453.71%2C6.626.702%2C4.308%2C1.163%2C6.404.996%2C4.153%2C1.601%2C6.168c2.62%2C8.705%2C6.558%2C16.649%2C11.61%2C23.669s11.217%2C13.116%2C18.292%2C18.123%2C15.06%2C8.927%2C23.751%2C11.594%2C18.087%2C4.083%2C27.986%2C4.083c9.212%2C0%2C17.98-1.226%2C26.143-3.545s15.722-5.732%2C22.515-10.105%2C12.82-9.709%2C17.921-15.873%2C9.275-13.157%2C12.362-20.847l-2.388-.88-2.388-.88-2.388-.88-2.388-.88-7.918-2.917-7.918-2.917-7.918-2.917-7.918-2.917c-1.469%2C3.787-3.417%2C7.276-5.799%2C10.377s-5.196%2C5.817-8.4%2C8.059-6.795%2C4.01-10.73%2C5.218-8.213%2C1.855-12.789%2C1.855c-5.32%2C0-10.233-.859-14.674-2.444s-8.409-3.896-11.837-6.8-6.318-6.402-8.601-10.361-3.961-8.378-4.966-13.125c-.18-.855-.339-1.721-.476-2.596s-.251-1.761-.343-2.655-.161-1.798-.208-2.709-.07-1.832-.07-2.759.023-1.852.068-2.765.114-1.818.204-2.713.204-1.781.34-2.656.294-1.741.474-2.596c.998-4.778%2C2.671-9.211%2C4.952-13.175s5.171-7.456%2C8.601-10.352%2C7.402-5.194%2C11.847-6.769%2C9.363-2.425%2C14.688-2.425c4.584%2C0%2C8.868.642%2C12.808%2C1.843s7.535%2C2.96%2C10.741%2C5.195%2C6.022%2C4.946%2C8.403%2C8.049%2C4.328%2C6.599%2C5.795%2C10.404l7.908-2.915%2C7.908-2.915%2C7.908-2.915%2C7.908-2.915%2C2.388-.88%2C2.388-.88%2C2.388-.88%2C2.388-.88c-3.087-7.69-7.262-14.682-12.362-20.846s-11.128-11.497-17.92-15.869-14.35-7.784-22.512-10.102-16.928-3.543-26.138-3.543h0Z'/%3E%3Cpath d='M291.665%2C349.796h-132.664v31.8h121.094l2.892-7.95%2C2.892-7.95%2C2.892-7.95%2C2.892-7.95h0Z'/%3E%3Cpolygon points='540.6 349.794 540.6 357.744 540.6 365.694 540.6 373.644 540.6 381.594 478.609 381.594 416.617 381.594 354.626 381.594 292.634 381.594 295.529 373.644 298.424 365.694 301.319 357.744 304.214 349.794 363.311 349.794 422.407 349.794 481.504 349.794 540.6 349.794'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20%;
}

.cai-resource-card__content {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 20px;
}

.cai-resource-card__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: var(--cai-color-body-muted, #606d7b);
}

.cai-resource-card__tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  border-radius: 100px;
  font-weight: 400;
  font-size: var(--cai-fs-body-2-small, 14px);
  line-height: var(--cai-lh-body-2-small, 1.55);
  background: var(--cai-color-action-soft, #d3e7ff);
  color: var(--cai-color-ink, #141414);
}

.cai-resource-card__date {
  margin-left: auto;
}

.cai-resource-card__title {
  margin: 0;
  font-family: var(--cai-font-base, Arial, Helvetica, sans-serif);
  font-weight: 400;
  line-height: 28px;
  font-size: 22px;
  color: var(--cai-color-ink, #141414);
}

/* The title doubles as the card's link: reset it to read like a heading, then
   stretch its ::after over the whole card so the entire card is clickable —
   independent of whether the CTA is shown. */
.cai-resource-card__title-link {
  color: inherit;
  text-decoration: none;
}

.cai-resource-card__title-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.cai-resource-card__excerpt {
  margin: 0;
  font-family: var(--cai-font-base, Arial, Helvetica, sans-serif);
  font-weight: 400;
  line-height: var(--cai-lh-cta-link, 24px);
  font-size: var(--cai-fs-cta-link, 16px);
  color: var(--cai-color-ink-80, rgba(20, 20, 20, 0.8));
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}

@media (min-width: 768px) {
  .cai-resource-card__excerpt {
    -webkit-line-clamp: 2;
    line-clamp: 2;
  }
}
/* CTA — a "read more" link with the circle-arrow-right glyph, mirroring the
   carousel card. inline-flex so the icon sits beside the text with a gap. */
.cai-resource-card__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  /* Above the title link's stretched ::after so the CTA keeps its own
     hover/focus (both resolve to the same destination). */
  position: relative;
  z-index: 2;
  font-family: var(--cai-font-base, Arial, Helvetica, sans-serif);
  font-weight: 400;
  line-height: var(--cai-lh-cta-link, 24px);
  font-size: var(--cai-fs-cta-link, 16px);
  color: var(--cai-color-action, #6A6BD4);
  text-decoration: underline;
}

.cai-resource-card__link svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  transition: transform 0.15s ease;
}

/* Affordances: the title-link and the CTA are two separate anchors sitting
   on top of one stretched click target (see .cai-resource-card__title-link
   ::after above), so neither one hovering the other via normal CSS descendant
   rules — nothing tied them together visually. :hover on an ancestor already
   fires while hovering any descendant, so keying both anchors' hover state off
   .cai-resource-card:hover covers both directions: hovering the media/excerpt/
   whitespace affects the CTA, and hovering the CTA affects the title. Mirrors
   the filter-carousel card's identical clickable-unit treatment.
   The CTA is already colored + underlined at rest (unlike the plain-looking
   title), so a color-only change on hover reads as barely-there — the arrow
   nudges right too, the same cue used on the mega-menu's "View all" link,
   so the CTA's reaction to a card-wide hover is as obvious as the title's. */
.cai-resource-card:hover,
.cai-resource-card:focus-within {
  cursor: pointer;
}
.cai-resource-card:hover .cai-resource-card__title-link,
.cai-resource-card:focus-within .cai-resource-card__title-link {
  text-decoration: underline;
  color: var(--cai-color-action-hover, #2f2951);
}
.cai-resource-card:hover .cai-resource-card__link,
.cai-resource-card:focus-within .cai-resource-card__link {
  color: var(--cai-color-action-hover, #2f2951);
  text-decoration: underline;
}

.cai-resource-card:focus-within {
  outline: 2px solid var(--cai-color-action, #6A6BD4);
  outline-offset: 2px;
}