/* OE-PROJECT-BADGES-V1. Подключается в публичном Layout.
   Работает на главной, в списке и в портфолио мастера, в том числе без JS.
   CSS предпросмотра v2.1 и JS не заменяются. */
.portfolio-card-image > .oe-card-labels {
  position: absolute;
  z-index: 3;
  top: 10px;
  left: 10px;
  right: 10px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  pointer-events: none;
  transition: top 120ms ease;
}
.portfolio-card-image > .oe-card-labels > .portfolio-card-type {
  position: static;
  left: auto;
  top: auto;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  margin: 0;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.35;
}
.oe-project-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  padding: 4px 9px;
  border-radius: 7px;
  font-size: .72rem;
  line-height: 1.35;
  font-weight: 750;
  white-space: nowrap;
  background: #eaf3ff;
  color: #175b9b;
  box-shadow: 0 1px 5px rgba(8, 26, 42, .1);
}
.oe-project-badge--new {
  background: #15803d;
  color: #ffffff;
  padding: 5px 11px;
  font-size: .78rem;
  font-weight: 800;
  box-shadow: 0 2px 8px rgba(8, 26, 42, .22);
}
.oe-project-badge--updated { background: #eaf3ff; color: #175b9b; }
.oe-project-badge--featured { background: #fff4dc; color: #735014; }

/* Обе плашки освобождают место для полосок одновременно. */
@media (hover: hover) and (pointer: fine) {
  .portfolio-card-image.oe-card-preview.is-preview-ready.is-pointer-preview > .oe-card-labels,
  .portfolio-card-link:focus-visible .portfolio-card-image.oe-card-preview.is-preview-ready > .oe-card-labels {
    top: 31px;
  }
}
@media (hover: none), (pointer: coarse), (pointer: none) {
  .portfolio-card-image.oe-card-preview.is-preview-ready > .oe-card-labels { top: 31px; }
}
@media (prefers-reduced-motion: reduce) {
  .portfolio-card-image > .oe-card-labels { transition: none; }
}