/* =========================================================
   Reusable Client Resource Project widgets
   /assets/css/widgets.css
   ========================================================= */

.crp-widget {
  --widget-teal: var(--teal, #2d9a92);
  --widget-teal-dark: var(--teal-dark, #227f78);
  --widget-muted: var(--muted, #d8e7e8);
  --widget-ink: var(--ink, #050505);
  color: var(--widget-ink);
}

.crp-widget__eyebrow {
  margin: 0 0 7px;
  color: var(--widget-teal-dark);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* Full-width latest article cards */
.crp-latest {
  width: min(1240px, calc(100% - 40px));
  margin: 70px auto;
}

.crp-latest__header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 26px;
}

.crp-latest__header h2 {
  margin: 0;
  font-size: clamp(30px, 4vw, 44px);
  line-height: 1.08;
  letter-spacing: -.035em;
}

.crp-widget__all-link {
  flex: 0 0 auto;
  padding: 10px 0 8px;
  color: var(--widget-teal-dark);
  border-bottom: 2px solid var(--widget-teal);
  font-size: 14px;
  font-weight: 800;
}

.crp-widget__all-link:hover,
.crp-widget__all-link:focus-visible {
  color: var(--widget-ink);
}

.crp-latest__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.crp-article-card {
  min-width: 0;
  overflow: hidden;
  background: #fff;
  border: 1px solid #dce5e5;
  border-top: 5px solid var(--widget-teal);
  border-radius: 14px;
  box-shadow: 0 9px 26px rgba(18, 56, 55, .08);
  transition: transform .18s ease, box-shadow .18s ease;
}

.crp-article-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 34px rgba(18, 56, 55, .14);
}

.crp-article-card__body {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  padding: 24px;
}

.crp-article-card__meta {
  min-height: 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  color: #687474;
  font-size: 12px;
  font-weight: 600;
}

.crp-article-card__category {
  overflow: hidden;
  padding: 4px 9px;
  color: var(--widget-teal-dark);
  background: #eaf4f4;
  border-radius: 999px;
  font-weight: 800;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crp-article-card h3 {
  margin: 0 0 12px;
  font-size: 21px;
  line-height: 1.28;
  letter-spacing: -.018em;
}

.crp-article-card h3 a:hover,
.crp-article-card h3 a:focus-visible {
  color: var(--widget-teal-dark);
}

.crp-article-card p {
  display: -webkit-box;
  overflow: hidden;
  margin: 0 0 22px;
  color: #526060;
  font-size: 14px;
  line-height: 1.65;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}

.crp-article-card__read {
  width: fit-content;
  margin-top: auto;
  color: var(--widget-teal-dark);
  font-size: 14px;
  font-weight: 800;
}

.crp-article-card__read:hover,
.crp-article-card__read:focus-visible {
  color: var(--widget-ink);
}

/* Compact article list for a sidebar */
.crp-recent-sidebar {
  width: 100%;
  overflow: hidden;
  background: #fff;
  border: 1px solid #dce5e5;
  border-radius: 14px;
  box-shadow: 0 9px 26px rgba(18, 56, 55, .08);
}

.crp-recent-sidebar__heading {
  padding: 22px 22px 18px;
  background: linear-gradient(135deg, #edf6f6, #fff);
  border-bottom: 1px solid #dce5e5;
}

.crp-recent-sidebar__heading h2 {
  margin: 0;
  font-size: 24px;
  line-height: 1.15;
  letter-spacing: -.025em;
}

.crp-recent-sidebar__list {
  margin: 0;
  padding: 0 22px;
  list-style: none;
  counter-reset: none;
}

.crp-recent-sidebar__list li {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 11px;
  padding: 18px 0;
  border-bottom: 1px solid #e4ebeb;
}

.crp-recent-sidebar__number {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  color: #fff;
  background: var(--widget-teal);
  border-radius: 50%;
  font-size: 12px;
  font-weight: 800;
}

.crp-recent-sidebar__category {
  display: block;
  overflow: hidden;
  margin: 1px 0 5px;
  color: var(--widget-teal-dark);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.crp-recent-sidebar h3 {
  margin: 0 0 5px;
  font-size: 15px;
  line-height: 1.38;
}

.crp-recent-sidebar h3 a:hover,
.crp-recent-sidebar h3 a:focus-visible {
  color: var(--widget-teal-dark);
}

.crp-recent-sidebar time {
  color: #758080;
  font-size: 11px;
  font-weight: 600;
}

.crp-recent-sidebar__all {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 22px;
  color: #fff;
  background: var(--widget-teal-dark);
  font-size: 13px;
  font-weight: 800;
}

.crp-recent-sidebar__all:hover,
.crp-recent-sidebar__all:focus-visible {
  background: #176b65;
}

@media (max-width: 900px) {
  .crp-latest__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .crp-latest {
    width: min(100% - 28px, 1240px);
    margin: 50px auto;
  }

  .crp-latest__header {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
  }

  .crp-latest__grid {
    grid-template-columns: 1fr;
  }

  .crp-article-card__body {
    padding: 21px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .crp-article-card {
    transition: none;
  }
}

/* All-articles directory shortcode */
.crp-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.crp-all-articles {
  width: min(1180px, calc(100% - 48px));
  margin: 60px auto;
}

.crp-all-articles__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 36px;
}

.crp-all-articles__toolbar h2 {
  margin: 0;
  font-size: clamp(28px, 3vw, 36px);
  line-height: 1.1;
}

.crp-all-articles__controls {
  display: flex;
  align-items: center;
  gap: 12px;
}

.crp-all-articles__controls select,
.crp-all-articles__search input {
  height: 42px;
  border: 1px solid #d9dfe7;
  border-radius: 7px;
  background: #fff;
  color: #17202a;
  font: inherit;
  font-size: 14px;
}

.crp-all-articles__controls select {
  width: 220px;
  padding: 0 14px;
}

.crp-all-articles__search {
  display: flex;
  align-items: stretch;
}

.crp-all-articles__search input {
  width: 220px;
  padding: 0 12px;
  border-radius: 7px 0 0 7px;
}

.crp-all-articles__search button {
  width: 44px;
  border: 0;
  border-radius: 0 7px 7px 0;
  color: #fff;
  background: var(--widget-teal-dark);
  cursor: pointer;
}

.crp-all-articles__search button svg {
  display: block;
  margin: auto;
  fill: currentColor;
}

.crp-all-articles__search button:hover,
.crp-all-articles__search button:focus-visible {
  background: #176b65;
}

.crp-all-articles__clear {
  color: var(--widget-teal-dark);
  font-size: 13px;
  font-weight: 800;
}

.crp-all-articles__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 58px 30px;
}

.crp-all-article-card {
  min-width: 0;
}

.crp-all-article-card__visual {
  position: relative;
  min-height: 160px;
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  margin-bottom: 20px;
  padding: 24px;
  border-radius: 9px;
  color: #fff;
  isolation: isolate;
  font-size: clamp(20px, 2vw, 30px);
  font-weight: 800;
  line-height: 1.05;
}

.crp-all-article-card__visual::before,
.crp-all-article-card__visual::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
}

.crp-all-article-card__visual::after {
  width: 46%;
  height: 115%;
  left: auto;
  right: -7%;
  bottom: -25%;
  border: 8px solid rgba(255, 255, 255, .82);
  border-left: 0;
  border-bottom: 0;
  border-radius: 50% 0 0 0;
  opacity: .82;
}

.crp-all-article-card__visual span {
  max-width: 72%;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .2);
}

.crp-all-article-card__visual--1::before {
  background: linear-gradient(135deg, #96627b 0 58%, #d9ccd5 58%);
}

.crp-all-article-card__visual--2::before,
.crp-all-article-card__visual--5::before {
  background: linear-gradient(135deg, #790815 0 59%, #c4a0ad 59%);
}

.crp-all-article-card__visual--3::before {
  background: linear-gradient(135deg, #4d4b68 0 58%, #181722 58%);
}

.crp-all-article-card__visual--4::before {
  background: linear-gradient(135deg, #e59866 0 58%, #9e3b2e 58%);
}

.crp-all-article-card__visual--6::before {
  background: linear-gradient(135deg, #2d9a92 0 58%, #173f4b 58%);
}

.crp-all-article-card time {
  display: block;
  margin-bottom: 10px;
  color: #263333;
  font-size: 14px;
}

.crp-all-article-card h3 {
  margin: 0;
  font-size: clamp(20px, 2vw, 27px);
  line-height: 1.25;
  letter-spacing: -.02em;
}

.crp-all-article-card h3 a:hover,
.crp-all-article-card h3 a:focus-visible {
  color: var(--widget-teal-dark);
}

/* One-third-width article-row shortcode */
.crp-article-rows {
  width: 100%;
  max-width: 390px;
  overflow: hidden;
  background: #fff;
  border: 1px solid #dce5e5;
  border-radius: 14px;
  box-shadow: 0 9px 26px rgba(18, 56, 55, .08);
}

.crp-article-rows__heading {
  position: relative;
  padding: 22px;
  background: linear-gradient(135deg, #edf6f6, #fff);
  border-bottom: 1px solid #dce5e5;
}

.crp-article-rows__heading h2 {
  margin: 0;
  font-size: 26px;
  line-height: 1.15;
}

.crp-article-rows__heading > span {
  position: absolute;
  right: 22px;
  bottom: 24px;
  color: #687474;
  font-size: 12px;
  font-weight: 700;
}

.crp-article-row {
  padding: 19px 22px;
  border-bottom: 1px solid #e4ebeb;
}

.crp-article-row:last-child {
  border-bottom: 0;
}

.crp-article-row__category {
  display: block;
  overflow: hidden;
  margin-bottom: 5px;
  color: var(--widget-teal-dark);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.crp-article-row h3 {
  margin: 0 0 7px;
  font-size: 16px;
  line-height: 1.36;
}

.crp-article-row h3 a:hover,
.crp-article-row h3 a:focus-visible {
  color: var(--widget-teal-dark);
}

.crp-article-row p {
  display: -webkit-box;
  overflow: hidden;
  margin: 0 0 8px;
  color: #526060;
  font-size: 12px;
  line-height: 1.55;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.crp-article-row time {
  color: #758080;
  font-size: 11px;
  font-weight: 600;
}

.crp-articles-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-top: 56px;
}

.crp-article-rows .crp-articles-pagination {
  margin: 0;
  padding: 17px 12px;
  background: #f7fafa;
  border-top: 1px solid #dce5e5;
}

.crp-articles-pagination a,
.crp-articles-pagination span {
  min-width: 39px;
  height: 39px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #d6dce3;
  border-radius: 5px;
  color: #fff;
  background: #172334;
  font-size: 13px;
  font-weight: 700;
}

.crp-articles-pagination .is-current,
.crp-articles-pagination .is-disabled,
.crp-articles-pagination .is-gap {
  color: #87939e;
  background: #fff;
}

.crp-articles-pagination .is-gap {
  min-width: 24px;
  border-color: transparent;
}

.crp-articles-pagination a:hover,
.crp-articles-pagination a:focus-visible {
  background: var(--widget-teal-dark);
}

.crp-articles-empty {
  padding: 40px 22px;
  text-align: center;
  background: #f7fafa;
  border: 1px solid #dce5e5;
  border-radius: 10px;
}

.crp-articles-empty h3,
.crp-articles-empty p {
  margin: 0;
}

.crp-articles-empty p + p {
  margin-top: 7px;
}

@media (max-width: 980px) {
  .crp-all-articles__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .crp-all-articles__toolbar {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 720px) {
  .crp-all-articles {
    width: min(100% - 28px, 1180px);
    margin: 44px auto;
  }

  .crp-all-articles__controls {
    width: 100%;
    align-items: stretch;
    flex-direction: column;
  }

  .crp-all-articles__controls select,
  .crp-all-articles__search,
  .crp-all-articles__search input {
    width: 100%;
  }

  .crp-all-articles__grid {
    grid-template-columns: 1fr;
    gap: 42px;
  }

  .crp-article-rows {
    max-width: none;
  }
}