.portfolio-project-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  outline-offset: 5px;
  color: inherit;
  text-decoration: none;
}

.portfolio-project-card:focus-visible {
  outline: 2px solid var(--color-focus);
}

.portfolio-project-card__media {
  position: relative;
  display: block;
  width: 100%;
  height: var(--portfolio-project-card-media-height, 500px);
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--portfolio-project-card-media-background);
}

.portfolio-project-card__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform var(--motion-layout) var(--ease-out-quint);
}

.portfolio-project-card__badge {
  position: absolute;
  bottom: var(--portfolio-project-card-badge-inset);
  left: var(--portfolio-project-card-badge-inset);
  display: grid;
  place-items: center;
  width: var(--space-7);
  height: var(--space-9);
  border-radius: var(--radius-pill);
  background: var(--color-overlay-inverse-soft);
  transform: rotate(45deg);
  transition: background-color var(--motion-fast) var(--ease-out-quart), color var(--motion-fast) var(--ease-out-quart), transform var(--motion-layout) var(--ease-out-quint), width var(--motion-layout) var(--ease-out-quint), height var(--motion-layout) var(--ease-out-quint);
}

.portfolio-project-card__badge-inner {
  display: grid;
  place-items: center;
  width: var(--space-4);
  height: var(--space-4);
  color: var(--color-footer-text);
  transform: rotate(-45deg);
  transition: color var(--motion-fast) var(--ease-out-quart), transform var(--motion-layout) var(--ease-out-quint);
}

.portfolio-project-card__arrow {
  display: block;
  width: var(--space-4);
  height: var(--space-4);
  color: inherit;
  fill: currentColor;
}

.portfolio-project-card__copy {
  width: 100%;
  padding-top: var(--portfolio-project-card-copy-gap);
}

.portfolio-project-card__meta {
  display: flex;
  align-items: baseline;
  gap: var(--portfolio-project-card-meta-gap);
  min-width: 0;
  color: var(--portfolio-project-card-client-color);
  font-size: var(--type-label-size);
  font-weight: var(--type-label-weight);
  line-height: var(--type-label-leading);
}

.portfolio-project-card__industry {
  color: var(--color-text-secondary-muted);
}

.portfolio-project-card__lock {
  display: block;
  align-self: center;
  width: 26px;
  height: 26px;
  flex: none;
  fill: var(--color-text-secondary-muted);
}

.portfolio-project-card__sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.portfolio-project-card .portfolio-project-card__title {
  width: 100%;
  margin: var(--portfolio-project-card-title-gap) 0 0;
  color: var(--color-text-primary);
  font-size: var(--portfolio-project-card-title-size);
  font-weight: var(--type-section-title-sm-weight);
  letter-spacing: var(--portfolio-project-card-title-letter-spacing);
  line-height: var(--portfolio-project-card-title-line-height);
}

@media (hover: hover) and (pointer: fine) {
  .portfolio-project-card:hover .portfolio-project-card__image { transform: scale(1.081); }
  .portfolio-project-card:hover .portfolio-project-card__badge { width: var(--portfolio-project-card-badge-expanded-size); height: var(--portfolio-project-card-badge-expanded-size); background: var(--color-surface); transform: none; }
  .portfolio-project-card:hover .portfolio-project-card__badge-inner { color: var(--color-text-primary); transform: none; }
}

.portfolio-project-card:focus-visible .portfolio-project-card__image { transform: scale(1.081); }
.portfolio-project-card:focus-visible .portfolio-project-card__badge { width: var(--portfolio-project-card-badge-expanded-size); height: var(--portfolio-project-card-badge-expanded-size); background: var(--color-surface); transform: none; }
.portfolio-project-card:focus-visible .portfolio-project-card__badge-inner { color: var(--color-text-primary); transform: none; }

@media (max-width: 767.98px) {
  .portfolio-project-card__media {
    height: auto;
    aspect-ratio: 1.24;
  }

  .portfolio-project-card__meta { flex-wrap: wrap; row-gap: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .portfolio-project-card__image,
  .portfolio-project-card__badge,
  .portfolio-project-card__badge-inner { transition: none; }
  .portfolio-project-card__badge,
  .portfolio-project-card__badge-inner { transform: none; }
  .portfolio-project-card:hover .portfolio-project-card__image,
  .portfolio-project-card:focus-visible .portfolio-project-card__image { transform: none; }
  .portfolio-project-card:hover .portfolio-project-card__badge,
  .portfolio-project-card:focus-visible .portfolio-project-card__badge { width: var(--space-7); height: var(--space-9); transform: none; }
  .portfolio-project-card:hover .portfolio-project-card__badge-inner,
  .portfolio-project-card:focus-visible .portfolio-project-card__badge-inner { color: var(--color-footer-text); transform: none; }
}