/* =========================================================
   BUYER CONSULTING - PROJECT BROWSER
   AJAX filters and pagination only.
   Project cards inherit the established global BC component.
   ========================================================= */

.bc-project-browser {
  --bc-card-surface: #F7F5FB;
  --bc-card-accent: var(--bc-project, #392BA0);
  --bc-card-soft: var(--bc-project-soft, rgba(57, 43, 160, 0.075));
  --bc-card-arrow: var(--bc-project, #392BA0);
  --bc-card-arrow-hover-bg: var(--bc-project, #392BA0);
  --bc-card-hover-border: rgba(57, 43, 160, 0.18);
  --bc-card-hover-shadow: rgba(57, 43, 160, 0.09);
  --bc-project-card-max-width: 24rem;
  --bc-project-card-gap: clamp(1.25rem, 2vw, 1.75rem);

  width: 100%;
  max-width: var(--bc-site-width, 1200px);
  margin: 0 auto;
  color: var(--bc-azure, #005461);
}

/* =========================================================
   FILTER BAR
   =========================================================

   Full project browser:
   - No horizontal scrolling.
   - Desktop uses a deliberate 3-column filter grid.
   - Tablet uses 2 columns.
   - Mobile uses 1 column.
   - Long Area of Work labels wrap cleanly inside each control.

   Featured browser instances stay more compact and can fit more
   filters per row where space allows.
   ========================================================= */

.bc-project-browser__filters {
  position: relative;
  z-index: 10;

  display: flex;
  justify-content: center;

  width: 100%;

  margin:
    0
    0
    clamp(2rem, 3vw, 2.6rem);

  padding: 0;

  overflow: visible;
}

.bc-project-browser__filter-list {
  display: grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap:
    0.65rem;

  width: 100%;
  max-width: 60rem;

  margin:
    0
    auto;

  padding: 0;

  overflow: visible;

  border: 0;
  border-radius: 0;

  background: transparent;
  box-shadow: none;
}

.bc-project-browser__filter {
  display: flex;

  align-items: center;
  justify-content: center;

  width: 100%;
  min-width: 0;
  max-width: none;
  min-height: 3.15rem;

  margin: 0;

  padding:
    0.7rem
    1rem;

  border:
    1px solid
    var(--bc-project-border, rgba(57, 43, 160, 0.14));

  border-radius:
    var(--bc-radius-pill, 999px);

  background:
    var(--bc-white, #FFFFFF);

  box-shadow: none;

  font-family:
    var(--bc-font-secondary, "Metropolis", Arial, Helvetica, sans-serif);

  font-size:
    0.72rem;

  font-weight:
    700;

  line-height:
    1.25;

  text-align:
    center;

  text-wrap:
    balance;

  color:
    var(--bc-azure, #005461);

  text-decoration:
    none;

  white-space:
    normal;

  transition:
    background-color var(--bc-transition-fast, 180ms ease),
    border-color var(--bc-transition-fast, 180ms ease),
    color var(--bc-transition-fast, 180ms ease),
    opacity var(--bc-transition-fast, 180ms ease);
}

.bc-project-browser__filter:hover {
  border-color:
    var(--bc-project-border-strong, rgba(57, 43, 160, 0.22));

  background:
    var(--bc-project-soft, rgba(57, 43, 160, 0.075));

  color:
    var(--bc-project-dark, #2A1F77);
}

.bc-project-browser__filter.is-active,
.bc-project-browser__filter[aria-current="page"] {
  border-color:
    var(--bc-project, #392BA0);

  background:
    var(--bc-project, #392BA0);

  color:
    var(--bc-white, #FFFFFF);
}

.bc-project-browser__filter:focus-visible,
.bc-project-browser__page:focus-visible {
  outline:
    3px solid
    var(--bc-blue, #6257E3);

  outline-offset:
    3px;
}

/* Featured browser instances are usually used in tighter sections. */
.bc-project-browser--featured
.bc-project-browser__filter-list {
  grid-template-columns:
    repeat(auto-fit, minmax(10rem, 1fr));

  max-width:
    100%;
}

/* =========================================================
   FILTER BAR - TABLET
   ========================================================= */

@media (max-width: 1024px) {

  .bc-project-browser__filter-list {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    max-width:
      46rem;
  }

  .bc-project-browser--featured
  .bc-project-browser__filter-list {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    max-width:
      46rem;
  }

  .bc-project-browser__filter {
    min-height:
      3rem;

    padding:
      0.65rem
      0.9rem;
  }
}

/* =========================================================
   FILTER BAR - MOBILE
   ========================================================= */

@media (max-width: 640px) {

  .bc-project-browser__filter-list,
  .bc-project-browser--featured
  .bc-project-browser__filter-list {
    grid-template-columns:
      minmax(0, 1fr);

    gap:
      0.5rem;

    width:
      100%;

    max-width:
      32rem;
  }

  .bc-project-browser__filter {
    min-height:
      2.9rem;

    padding:
      0.62rem
      0.9rem;

    font-size:
      0.7rem;
  }
}

/* =========================================================
   RESULTS AND AJAX TRANSITION
   ========================================================= */

.bc-project-browser__results {
  position: relative;
  width: 100%;
  min-height: 8rem;
  opacity: 1;
  transform: translateY(0);
  transition:
    height var(--bc-transition, 220ms ease),
    opacity var(--bc-transition-fast, 180ms ease),
    transform var(--bc-transition-fast, 180ms ease);
}

.bc-project-browser__results.is-leaving {
  opacity: 0;
  transform: translateY(4px);
}

.bc-project-browser__results.is-entering {
  opacity: 0;
  transform: translateY(4px);
}

.bc-project-browser.is-loading .bc-project-browser__filter {
  cursor: progress;
}

.bc-project-browser.is-loading .bc-project-browser__results::after {
  content: "";
  position: absolute;
  top: -0.4rem;
  right: 0;
  width: 1.35rem;
  height: 1.35rem;
  border: 2px solid var(--bc-project-soft-strong, rgba(57, 43, 160, 0.12));
  border-top-color: var(--bc-project, #392BA0);
  border-radius: 50%;
  animation: bcpb-spin 650ms linear infinite;
}

@keyframes bcpb-spin {
  to { transform: rotate(360deg); }
}

/* =========================================================
   GRID
   ========================================================= */

.bc-project-browser .bc-projects-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-auto-flow: row !important;
  gap: var(--bc-project-card-gap) !important;
  width: 100% !important;
  max-width: var(--bc-site-width, 1200px) !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  align-items: stretch !important;
  justify-items: stretch !important;
}

.bc-project-browser .bc-project-card-content {
  padding: 1.35rem 1.45rem 1.45rem !important;
}

.bc-project-browser .bc-project-card-eyebrow-wrap {
  margin-bottom: 0.65rem !important;
}

.bc-project-browser .bc-project-card-title {
  margin-bottom: 0.65rem !important;
}

.bc-project-browser .bc-project-card-summary {
  margin-bottom: 1.15rem !important;
}

.bc-project-card-image-placeholder {
  display: block;
  width: 100%;
  height: 100%;
  background:
    linear-gradient(
      135deg,
      var(--bc-project-soft, rgba(57, 43, 160, 0.075)),
      var(--bc-project-soft-strong, rgba(57, 43, 160, 0.12))
    );
}

/* =========================================================
   EMPTY STATE
   ========================================================= */

.bc-projects-empty {
  width: 100%;
  max-width: 42rem;
  margin: 0;
  padding: 1.5rem 1.65rem;
  border: 1px solid var(--bc-project-border, rgba(57, 43, 160, 0.14));
  border-radius: var(--bc-radius-medium, 12px);
  background: var(--bc-project-soft, rgba(57, 43, 160, 0.075));
  font-family: var(--bc-font-primary, "Nunito", Arial, Helvetica, sans-serif);
  color: var(--bc-azure, #005461);
}

.bc-projects-empty p {
  margin: 0;
}

/* =========================================================
   PAGINATION
   ========================================================= */

.bc-project-browser__pagination {
  display: flex;
  justify-content: center;
  width: 100%;
  margin: clamp(2rem, 3vw, 2.75rem) 0 0;
  padding: 0;
}

.bc-project-browser__pagination-desktop {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
}

.bc-project-browser__pagination-mobile {
  display: none;
}

.bc-project-browser__page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-width: 2.65rem;
  min-height: 2.65rem;
  margin: 0;
  padding: 0.55rem 0.78rem;
  border: 1px solid var(--bc-project-border, rgba(57, 43, 160, 0.14));
  border-radius: var(--bc-radius-pill, 999px);
  background: var(--bc-white, #FFFFFF);
  font-family: var(--bc-font-secondary, "Metropolis", Arial, Helvetica, sans-serif);
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1;
  color: var(--bc-project, #392BA0);
  text-decoration: none;
  transition:
    background-color var(--bc-transition-fast, 180ms ease),
    border-color var(--bc-transition-fast, 180ms ease),
    color var(--bc-transition-fast, 180ms ease),
    transform var(--bc-transition-fast, 180ms ease);
}

.bc-project-browser__page:hover {
  border-color: var(--bc-project, #392BA0);
  background: var(--bc-project-soft, rgba(57, 43, 160, 0.075));
  color: var(--bc-project-dark, #2A1F77);
  transform: translateY(-1px);
}

.bc-project-browser__page.is-current,
.bc-project-browser__page[aria-current="page"] {
  border-color: var(--bc-project, #392BA0);
  background: var(--bc-project, #392BA0);
  color: var(--bc-white, #FFFFFF);
}

.bc-project-browser__page--prev,
.bc-project-browser__page--next {
  padding-inline: 1rem;
}

.bc-project-browser__page--ellipsis {
  min-width: 1.8rem;
  border-color: transparent;
  background: transparent;
  color: var(--bc-text-soft, rgba(0, 84, 97, 0.76));
}

.bc-project-browser__page--ellipsis:hover {
  transform: none;
  border-color: transparent;
  background: transparent;
}

.bc-project-browser__page-status {
  font-family: var(--bc-font-secondary, "Metropolis", Arial, Helvetica, sans-serif);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--bc-azure, #005461);
}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1024px) {
  .bc-project-browser__filter-list {
    justify-content: flex-start;
  }

  .bc-project-browser__filter {
    flex: 0 0 auto;
    min-width: 8rem;
    max-width: 13rem;
  }

  .bc-project-browser .bc-projects-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {
  .bc-project-browser__filters {
    margin-top: -0.9rem;
    margin-bottom: 1.5rem;
  }

  .bc-project-browser__filter-list {
    padding: 0.55rem;
  }

  .bc-project-browser__filter {
    min-width: 8.75rem;
    min-height: 2.8rem;
    padding: 0.6rem 0.8rem;
    font-size: 0.68rem;
  }

  .bc-project-browser .bc-projects-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .bc-project-browser__pagination-desktop {
    display: none;
  }

  .bc-project-browser__pagination-mobile {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
  }

  .bc-project-browser__page--compact {
    flex: 0 0 2.65rem;
    width: 2.65rem;
    height: 2.65rem;
    min-width: 2.65rem;
    min-height: 2.65rem;
    padding: 0;
  }

  .bc-project-browser__page.is-disabled {
    opacity: 0.35;
  }
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  .bc-project-browser__results,
  .bc-project-browser__filter,
  .bc-project-browser__page {
    transition: none !important;
  }

  .bc-project-browser.is-loading .bc-project-browser__results::after {
    animation: none;
  }
}

/* =========================================================
   WHOLE-CARD LINKS
   Cards with one destination are one semantic link.
   ========================================================= */

.bc-project-featured-cell {
  width: 100%;
  max-width: var(--bc-site-width, 1200px);
  margin: 0 auto;
  padding: 0;
}

.bc-project-browser a.bc-project-card,
a.bc-project-featured {
  color: inherit !important;
  text-decoration: none !important;
  cursor: pointer;
}

.bc-project-browser a.bc-project-card:focus-visible,
a.bc-project-featured:focus-visible {
  outline: 3px solid var(--bc-blue, #6257E3) !important;
  outline-offset: 4px !important;
}

.bc-project-browser .bc-project-card:is(:hover, :focus-visible)
.bc-project-card-title {
  color: var(--bc-card-accent, var(--bc-project, #392BA0)) !important;
}

.bc-project-browser .bc-project-card:is(:hover, :focus-visible)
.bc-project-card-link {
  color: var(--bc-card-accent, var(--bc-project, #392BA0)) !important;
}

.bc-project-browser .bc-project-card:is(:hover, :focus-visible)
.bc-project-card-link::after {
  background: var(--bc-card-arrow-hover-bg, var(--bc-project, #392BA0));
  color: var(--bc-white, #FFFFFF);
  transform: translateX(0.18rem);
}

.bc-project-featured:is(:hover, :focus-visible)
.bc-project-featured__title {
  color: var(--bc-project, #392BA0) !important;
}

.bc-project-featured:is(:hover, :focus-visible)
.bc-project-featured__link {
  color: var(--bc-project-dark, #2A1F77) !important;
}

.bc-project-featured:is(:hover, :focus-visible)
.bc-project-featured__link::after {
  background: var(--bc-project, #392BA0);
  color: var(--bc-white, #FFFFFF);
  transform: translateX(0.15rem);
}

/* =========================================================
   WHOLE-CARD CTA TYPOGRAPHY FIX
   The visible CTA is a span inside the whole-card link.
   Define it here explicitly so theme/global anchor typography
   cannot leak into the CTA after the markup change.
   ========================================================= */

.bc-project-browser a.bc-project-card {
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
}

.bc-project-browser .bc-project-card-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;

  width: fit-content !important;
  min-width: 0 !important;
  max-width: 100% !important;

  margin: auto 0 0 !important;
  padding: 0 !important;

  border: 0 !important;
  border-radius: 0 !important;

  background: transparent !important;
  box-shadow: none !important;

  font-family: var(--bc-font-secondary, "Metropolis", Arial, Helvetica, sans-serif) !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  letter-spacing: 0 !important;

  color: var(--bc-card-accent, var(--bc-project, #392BA0)) !important;

  text-decoration: none !important;
  white-space: nowrap !important;

  pointer-events: none;
}

.bc-project-browser .bc-project-card-link::after {
  content: "\2192";

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  flex: 0 0 1.9rem !important;

  width: 1.9rem !important;
  height: 1.9rem !important;

  margin-left: 0.6rem !important;
  padding: 0 0 0.07rem !important;

  box-sizing: border-box !important;

  border: 0 !important;
  border-radius: 50% !important;

  background: var(--bc-card-soft, var(--bc-project-soft, rgba(57, 43, 160, 0.075))) !important;

  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 0.95rem !important;
  font-weight: 900 !important;
  line-height: 1 !important;

  color: var(--bc-card-arrow, var(--bc-project, #392BA0)) !important;

  -webkit-text-stroke: 0.2px currentColor;

  transition:
    background-color var(--bc-transition-fast, 180ms ease),
    color var(--bc-transition-fast, 180ms ease),
    transform var(--bc-transition-fast, 180ms ease) !important;
}

.bc-project-browser .bc-project-card:is(:hover, :focus-visible)
.bc-project-card-link::after {
  background: var(--bc-card-arrow-hover-bg, var(--bc-project, #392BA0)) !important;
  color: var(--bc-white, #FFFFFF) !important;
  transform: translateX(0.16rem) !important;
}


/* Featured project uses the same visual CTA language. */

a.bc-project-featured {
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
}

.bc-project-featured .bc-project-featured__link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;

  width: fit-content !important;
  min-width: 0 !important;
  max-width: 100% !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;
  border-radius: 0 !important;

  background: transparent !important;
  box-shadow: none !important;

  font-family: var(--bc-font-secondary, "Metropolis", Arial, Helvetica, sans-serif) !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  letter-spacing: 0 !important;

  color: var(--bc-project, #392BA0) !important;

  text-decoration: none !important;
  white-space: nowrap !important;

  pointer-events: none;
}

.bc-project-featured .bc-project-featured__link::after {
  content: "\2192";

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  flex: 0 0 1.9rem !important;

  width: 1.9rem !important;
  height: 1.9rem !important;

  margin-left: 0.6rem !important;
  padding: 0 0 0.07rem !important;

  box-sizing: border-box !important;

  border: 0 !important;
  border-radius: 50% !important;

  background: var(--bc-project-soft, rgba(57, 43, 160, 0.075)) !important;

  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 0.95rem !important;
  font-weight: 900 !important;
  line-height: 1 !important;

  color: var(--bc-project, #392BA0) !important;

  -webkit-text-stroke: 0.2px currentColor;

  transition:
    background-color var(--bc-transition-fast, 180ms ease),
    color var(--bc-transition-fast, 180ms ease),
    transform var(--bc-transition-fast, 180ms ease) !important;
}

.bc-project-featured:is(:hover, :focus-visible)
.bc-project-featured__link::after {
  background: var(--bc-project, #392BA0) !important;
  color: var(--bc-white, #FFFFFF) !important;
  transform: translateX(0.15rem) !important;
}



/* =========================================================
   RESULT-COUNT LAYOUT

   Uses the same card measure as Team Selected Work and Project
   Related Work. Cards never become oversized simply because a
   result set contains one or two projects.
   ========================================================= */

@media (min-width: 1025px) {
  .bc-project-browser
  .bc-projects-grid[data-bc-project-grid].bc-projects-grid--count-1 {
    grid-template-columns: minmax(0, 1fr) !important;
    max-width: var(--bc-project-card-max-width) !important;
    margin-right: auto !important;
    margin-left: auto !important;
  }

  .bc-project-browser
  .bc-projects-grid[data-bc-project-grid].bc-projects-grid--count-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    max-width: calc(48rem + var(--bc-project-card-gap)) !important;
    margin-right: auto !important;
    margin-left: auto !important;
  }

  .bc-project-browser
  .bc-projects-grid[data-bc-project-grid].bc-projects-grid--count-3-plus {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    max-width: var(--bc-site-width, 1200px) !important;
    margin-right: auto !important;
    margin-left: auto !important;
  }
}

@media (max-width: 1024px) and (min-width: 768px) {
  .bc-project-browser
  .bc-projects-grid[data-bc-project-grid] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    max-width: calc(48rem + var(--bc-project-card-gap)) !important;
    margin-right: auto !important;
    margin-left: auto !important;
  }

  .bc-project-browser
  .bc-projects-grid[data-bc-project-grid].bc-projects-grid--count-1 {
    grid-template-columns: minmax(0, 1fr) !important;
    max-width: var(--bc-project-card-max-width) !important;
  }
}

@media (max-width: 767px) {
  .bc-project-browser
  .bc-projects-grid[data-bc-project-grid] {
    grid-template-columns: minmax(0, 1fr) !important;
    max-width: var(--bc-project-card-max-width) !important;
    margin-right: auto !important;
    margin-left: auto !important;
  }
}

/* =========================================================
   CARD EYEBROW

   The PHP renderer now outputs the Project Content Model primary
   Area of Work only. Keep the resulting single label compact and
   prevent inherited Cornerstone layout rules from turning it into
   a full-width stack.
   ========================================================= */

.bc-project-browser
.bc-project-card-eyebrow-wrap {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: flex-start !important;
  width: 100% !important;
  min-width: 0 !important;
}

.bc-project-browser
.bc-project-card-eyebrow {
  display: inline-block !important;
  width: auto !important;
  max-width: 100% !important;
}


/* =========================================================
   PROJECTS ARCHIVE - FILTER LAYOUT GUARD
   =========================================================
   The site global stylesheet historically forced the browser filter
   list back to inline-flex/max-content on the Projects Archive.
   These archive-specific rules deliberately outrank that legacy
   integration CSS so the plugin owns its own navigation layout.
   ========================================================= */

.bc-projects-index
.bc-project-browser
.bc-project-browser__filters {
  display: block !important;

  width: 100% !important;
  max-width: none !important;

  margin:
    0
    0
    clamp(1.5rem, 2.4vw, 2rem) !important;

  padding: 0 !important;

  overflow: visible !important;
}

.bc-projects-index
.bc-project-browser
.bc-project-browser__filter-list {
  display: grid !important;

  grid-template-columns:
    repeat(3, minmax(0, 1fr)) !important;

  align-items: stretch !important;
  justify-content: stretch !important;

  gap: 0.65rem !important;

  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  overflow: visible !important;
}

.bc-projects-index
.bc-project-browser
.bc-project-browser__filter {
  flex: none !important;

  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 3rem !important;

  margin: 0 !important;

  padding:
    0.68rem
    1rem !important;

  white-space: normal !important;
  overflow-wrap: anywhere;
}

@media (max-width: 1024px) {

  .bc-projects-index
  .bc-project-browser
  .bc-project-browser__filter-list {
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;
  }

  .bc-projects-index
  .bc-project-browser
  .bc-project-browser__filter {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }
}

@media (max-width: 640px) {

  .bc-projects-index
  .bc-project-browser
  .bc-project-browser__filter-list {
    grid-template-columns:
      minmax(0, 1fr) !important;

    gap:
      0.5rem !important;
  }

  .bc-projects-index
  .bc-project-browser
  .bc-project-browser__filters {
    margin-top: 0 !important;
    margin-bottom: 1.35rem !important;
  }

  .bc-projects-index
  .bc-project-browser
  .bc-project-browser__filter {
    min-height: 2.85rem !important;

    padding:
      0.62rem
      0.85rem !important;

    font-size:
      0.7rem !important;
  }
}


/* =========================================================
   PROJECT CARD CANONICAL LOCK - 1.5.19
   =========================================================
   The browser owns filtering and grid behaviour, while project cards
   follow the same dimensions and typography used by the site-wide
   project-card component.
   ========================================================= */

.bc-project-browser {
  --bc-project-card-max-width: 24rem;
  --bc-project-card-min-column: 20rem;
  --bc-project-card-gap: clamp(1.25rem, 1.6vw, 1.5rem);
}

.bc-project-browser .bc-projects-grid,
.bc-project-browser .bc-projects-grid[data-bc-project-grid],
.bc-project-browser .bc-projects-grid[data-bc-project-grid].bc-projects-grid--count-1,
.bc-project-browser .bc-projects-grid[data-bc-project-grid].bc-projects-grid--count-2,
.bc-project-browser .bc-projects-grid[data-bc-project-grid].bc-projects-grid--count-3-plus {
  display: grid !important;
  grid-template-columns:
    repeat(
      auto-fit,
      minmax(
        min(100%, var(--bc-project-card-min-column)),
        var(--bc-project-card-max-width)
      )
    ) !important;
  grid-auto-rows: 1fr !important;
  gap: var(--bc-project-card-gap) !important;
  width: 100% !important;
  max-width: var(--bc-site-width, 1200px) !important;
  margin-right: auto !important;
  margin-left: auto !important;
  align-items: stretch !important;
  justify-content: center !important;
  justify-items: stretch !important;
}

.bc-project-browser .bc-project-card-cell {
  display: flex !important;
  width: 100% !important;
  max-width: var(--bc-project-card-max-width) !important;
  min-width: 0 !important;
  height: 100% !important;
  justify-self: center !important;
}

.bc-project-browser .bc-project-card {
  width: 100% !important;
  max-width: var(--bc-project-card-max-width) !important;
  height: 100% !important;
}

.bc-project-browser .bc-project-card-content {
  padding: 1.35rem 1.45rem 1.45rem !important;
}

.bc-project-browser .bc-project-card-eyebrow-wrap {
  margin: 0 0 0.65rem !important;
}

.bc-project-browser .bc-project-card-eyebrow {
  font-size: 0.7rem !important;
  line-height: 1.3 !important;
  letter-spacing: 0.08em !important;
}

.bc-project-browser .bc-project-card-title {
  margin: 0 0 0.65rem !important;
  font-size: clamp(1.25rem, 1.15rem + 0.35vw, 1.45rem) !important;
  line-height: 1.16 !important;
  letter-spacing: -0.018em !important;
}

.bc-project-browser .bc-project-card-summary {
  margin: 0 0 1.15rem !important;
  font-size: 0.94rem !important;
  line-height: 1.55 !important;
}

.bc-project-browser .bc-project-card-link {
  margin: auto 0 0 !important;
  font-size: 0.78rem !important;
  line-height: 1.25 !important;
}

@media (max-width: 1024px) {
  .bc-project-browser {
    --bc-project-card-min-column: 18rem;
  }
}

@media (max-width: 767px) {
  .bc-project-browser .bc-projects-grid,
  .bc-project-browser .bc-projects-grid[data-bc-project-grid],
  .bc-project-browser .bc-projects-grid[data-bc-project-grid].bc-projects-grid--count-1,
  .bc-project-browser .bc-projects-grid[data-bc-project-grid].bc-projects-grid--count-2,
  .bc-project-browser .bc-projects-grid[data-bc-project-grid].bc-projects-grid--count-3-plus {
    grid-template-columns: minmax(0, 1fr) !important;
    max-width: var(--bc-project-card-max-width) !important;
  }

  .bc-project-browser .bc-project-card-content {
    padding: 1.25rem 1.2rem 1.3rem !important;
  }

  .bc-project-browser .bc-project-card-title {
    font-size: 1.25rem !important;
  }

  .bc-project-browser .bc-project-card-summary {
    font-size: 0.92rem !important;
  }
}