/* Оформление карточки: подсветка цветом и рекламные плашки.
   Отдельный файл, потому что Tailwind в теме собран заранее — произвольных
   цветов в output.css нет, и дописать их туда без пересборки нельзя. */

/* ── Подсветка карточки ─────────────────────────────────────────────────────
   Золото, а не фирменный розовый: розовым в теме набрано имя и цена внутри
   каждой карточки, и рамка того же тона слилась бы с обычными карточками. */
.proj1-card--highlight {
  border: 2px solid #f0a500;
  box-shadow: 0 0 0 1px rgba(240, 165, 0, .25), 0 6px 18px rgba(240, 165, 0, .28) !important;
  background: linear-gradient(180deg, #fffaf0 0%, #ffffff 42%);
  position: relative;
}

.proj1-card--highlight:hover {
  box-shadow: 0 0 0 1px rgba(240, 165, 0, .35), 0 10px 26px rgba(240, 165, 0, .38) !important;
}

/* Внутренняя подложка карточки перебила бы градиент — гасим её. */
.proj1-card--highlight > div:last-child {
  background: transparent;
}

/* ── Плашки ─────────────────────────────────────────────────────────────────
   Стопкой слева сверху: справа сверху кнопка избранного, справа снизу
   Verified, слева снизу иконка видео. Отступ сверху обходит онлайн-точку. */
.proj1-card-badges {
  position: absolute;
  top: 32px;
  left: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  pointer-events: none;
}

.proj1-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .02em;
  color: #fff;
  white-space: nowrap;
  border-radius: 0 4px 4px 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
}

.proj1-badge--top1 {
  background: linear-gradient(135deg, #b8860b 0%, #f0a500 55%, #ffd45e 100%);
}

.proj1-badge--top1::before {
  content: "★";
  font-size: 10px;
}

.proj1-badge--best {
  background: linear-gradient(135deg, #7c3aed 0%, #a855f7 55%, #c084fc 100%);
}

.proj1-badge--best::before {
  content: "♥";
  font-size: 10px;
}

/* ── Плашки на странице агентства ───────────────────────────────────────────
   Здесь они стоят в строку рядом с заголовком, а не поверх картинки. */
.proj1-agency-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.proj1-agency-badges .proj1-badge {
  border-radius: 999px;
  padding: 5px 10px;
}