/* =========================================================================
   Project Credits — label/value row that closes a single-project page.
   Reuses the theme's design language: Urbanist type, .container width and the
   .text-anime scroll reveal. No second font family is loaded; the label/value
   hierarchy is carried by size, weight and colour alone.
   ========================================================================= */

.project-credits{
  width: 100%;
  color: #fff;
}

.project-credits .credits-heading{
  font-family: 'Urbanist', sans-serif;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .55;
  margin-bottom: 60px;
}

/* auto-fit, so the row keeps as many columns as fit and wraps the rest instead
   of needing a breakpoint per repeater length. The two custom properties are
   written inline by the widget's layout controls (see render()). */
.project-credits .credits-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--credits-col-min, 180px), 1fr));
  /* The control writes the gap inline, and an inline style beats any media
     query, so the narrow-screen behaviour is folded in here: whatever gap is
     chosen, it can never take more than a sliver of a small viewport. */
  column-gap: min(var(--credits-col-gap, 40px), 6vw);
  row-gap: 48px;
}

.project-credits.has-divider .credits-grid{
  border-top: 1px solid rgba(255, 255, 255, .12);
  padding-top: 56px;
}

.project-credits .credit-item{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}

.project-credits .credit-label{
  display: block;
  font-family: 'Urbanist', sans-serif;
  font-size: clamp(20px, 1.7vw, 30px);
  font-weight: 500;
  line-height: 1.2;
  color: #e8e8e8;
  margin-bottom: 18px;
}

.project-credits .credit-value{
  display: block;
  font-family: 'Urbanist', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: #8b8d8f;
}

/* Left plain inline (not inline-flex) on purpose: .text-anime runs SplitText
   over this value and splits it into line boxes, which it can only measure
   reliably when the link is ordinary inline content. */
.project-credits .credit-value a{
  color: inherit;
  transition: color .3s ease;
}

.project-credits .credit-value a:hover{
  color: #fff;
}

/* The arrow only changes colour with the rest of the link — .text-anime wraps
   each line in an overflow:hidden mask, so a transform here would be clipped. */
.project-credits .credit-value a i{
  font-size: 14px;
  margin-right: 7px;
  vertical-align: -.02em;
}

@media only screen and (max-width: 991px){

  .project-credits .credits-heading{
    font-size: 13px;
    margin-bottom: 34px;
  }

  .project-credits .credits-grid{
    row-gap: 32px;
  }

  .project-credits.has-divider .credits-grid{
    padding-top: 32px;
  }

  .project-credits .credit-label{
    margin-bottom: 10px;
  }

  .project-credits .credit-value{
    font-size: 15px;
  }

}