/* minimal safety resets + pagination styling (mirrors blog-grid pagination behavior) */

.projects-grid__pagination{
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: var(--space-xl);
}

.projects-grid__pagination-list{
  list-style: none;
  margin: 0;
  padding: 0;

  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-2xs);
}

.projects-grid__pagination-item{
  list-style: none;
  margin: 0;
  padding: 0;
}

.projects-grid__pagination-link{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 40px;
  height: 40px;

  text-decoration: none;
  color: var(--text-body);

  border: 1px solid var(--bg-body);

  font-weight: 300;
}

.projects-grid__pagination-link.is-current{
  background: rgba(0,0,0,0.05);
  cursor: default;
}

.projects-grid__pagination-link:not(.is-current):hover{
  background: rgba(0,0,0,0.03);
}

.projects-grid__pagination-link:focus-visible{
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* chevrons (no text glyphs) */
.projects-grid__pagination-arrow{
  position: relative;
}

.projects-grid__pagination-arrow::before{
  content: "";
  width: 10px;
  height: 10px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  display: block;
}

.projects-grid__pagination-arrow.is-prev::before{ transform: rotate(-135deg); }
.projects-grid__pagination-arrow.is-next::before{ transform: rotate(45deg); }

[dir="rtl"] .projects-grid__pagination-arrow.is-prev::before{ transform: rotate(45deg); }
[dir="rtl"] .projects-grid__pagination-arrow.is-next::before{ transform: rotate(-135deg); }

/* optional placeholder (only if no featured image) */
.project__img--placeholder{
  width: 100%;
  height: 400px;
  background: rgba(0,0,0,0.06);
}

/* empty state (match deals grid + product categories empty styling) */
.projects-grid__empty{
  width: 100%;
  max-width: 100%;
  display: block;
  box-sizing: border-box;

  /* plays nicely inside flex/grid wrappers without brute-force */
  flex: 0 0 100%;
  align-self: stretch;
  justify-self: stretch;

  text-align: center;
  padding: 24px 0;
  font: inherit;
}