@charset "UTF-8";
/**
 * CAI Related Resources — feature card + compact-card grid for the
 * cai_related_resources widget.
 *
 * The compact cards' intrinsic styles come from resource-card.scss (enqueued
 * via the `cai-resource-card` handle, a dependency of `cai-related-resources`).
 * This stylesheet adds the section header, the bespoke horizontal feature card,
 * and the responsive compact-card grid — re-declaring, scoped to
 * `.cai-related-resources`, the grid-view layout bits that otherwise live in
 * resource-grid.scss so the cards are equal-height with bottom-pinned CTAs.
 */
.cai-related-resources {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: 0;
  margin: 0;
}

/* -------------------------------------------------------------------------
 * Header — two-tone heading + optional description (mirrors the carousel).
 * ---------------------------------------------------------------------- */
.cai-related-resources__header {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.cai-related-resources__heading {
  margin: 0;
  font-family: var(--cai-font-base, Arial, Helvetica, sans-serif);
  font-weight: 400;
  line-height: 1.25;
  font-size: var(--cai-fs-h2-internal, 56px);
  letter-spacing: var(--cai-ls-h2, -1px);
  color: var(--cai-color-ink, #141414);
}

.cai-related-resources__heading-highlight {
  color: var(--cai-color-blue-brand);
}

.cai-related-resources__description {
  margin: 0;
  max-width: 60ch;
  font-family: var(--cai-font-base, Arial, Helvetica, sans-serif);
  font-weight: 400;
  line-height: var(--cai-lh-subtitle, 1.5);
  font-size: var(--cai-fs-subtitle, 18px);
  color: var(--cai-color-ink-80, rgba(20, 20, 20, 0.8));
}

/* -------------------------------------------------------------------------
 * Feature card — horizontal: image ~50% left, content right. Stacks on mobile.
 * position:relative provides the containing block for the shared title-link's
 * stretched ::after (from resource-card.css), so the whole card is clickable.
 * ---------------------------------------------------------------------- */
.cai-related-resources__feature {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--cai-spacer-4, 24px);
  align-items: center;
}

@media (min-width: 768px) {
  .cai-related-resources__feature {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }
}
.cai-related-resources__feature-media {
  flex-shrink: 0;
  border-radius: var(--cai-radius-card, 8px);
  overflow: hidden;
  background: var(--cai-color-smoke, #f7f7f7);
}

.cai-related-resources__feature-image,
.cai-related-resources__feature-placeholder {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
}

.cai-related-resources__feature-placeholder {
  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-related-resources__feature-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cai-related-resources__feature-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-related-resources__feature-date {
  color: var(--cai-color-body-muted, #606d7b);
}

.cai-related-resources__feature-title {
  margin: 0;
  font-family: var(--cai-font-base, Arial, Helvetica, sans-serif);
  font-weight: 400;
  line-height: var(--cai-lh-h5, 1.25);
  font-size: var(--cai-fs-h5, 24px);
  color: var(--cai-color-ink, #141414);
}

.cai-related-resources__feature-excerpt {
  margin: 0;
  font-family: var(--cai-font-base, Arial, Helvetica, sans-serif);
  font-weight: 400;
  line-height: var(--cai-lh-body-2);
  font-size: var(--cai-fs-body-2);
  color: var(--cai-color-ink);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}

@media (min-width: 768px) {
  .cai-related-resources__feature-excerpt {
    -webkit-line-clamp: 4;
    line-clamp: 4;
  }
}
/* Solid CTA button. z-index lifts it above the title-link's stretched ::after
   so it keeps its own hover/focus (both resolve to the same destination). */
.cai-related-resources__feature-cta {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  padding: 12px 24px;
  border-radius: var(--cai-radius-button, 4px);
  background: var(--cai-color-action, #6A6BD4);
  color: var(--cai-color-white, #ffffff);
  font-weight: 400;
  font-size: var(--cai-fs-cta-link, 16px);
  line-height: var(--cai-lh-cta-link, 24px);
  text-decoration: none;
  white-space: nowrap;
}

.cai-related-resources__feature-cta:hover,
.cai-related-resources__feature-cta:focus {
  background: var(--cai-color-action-hover, var(--cai-color-ink, #141414));
  color: var(--cai-color-white, #ffffff);
}

/* -------------------------------------------------------------------------
 * Compact-card grid — responsive: 1 col mobile, 2 col tablet, 3 col desktop.
 * The container-scoped layout bits (media aspect, content grow, CTA pin) are
 * re-declared from resource-grid.scss so cards are equal-height with
 * bottom-aligned CTAs. Card intrinsics come free from resource-card.css.
 * ---------------------------------------------------------------------- */
.cai-related-resources__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}

@media (min-width: 768px) {
  .cai-related-resources__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .cai-related-resources__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.cai-related-resources__grid .cai-resource-card__media {
  aspect-ratio: 16/9;
}

.cai-related-resources__grid .cai-resource-card__content {
  flex: 1;
}

.cai-related-resources__grid .cai-resource-card__link {
  margin-top: auto;
  padding-top: 4px;
}