/* Карточка предложения карты: главное событие ленты.

   Остальные события — строки: они отвечают, что случилось. Это —
   карточка: она просит решения, и решение необратимое. Отсюда
   и вес: крупные поля, своя подложка с переходом, светлая
   волосяная граница и мягкая тень под ней.

   Свечения и стекла нет намеренно: сквозь него хуже читается
   текст, а читать здесь придётся — человек отдаёт свои данные. */

.offer {
  position: relative;
  padding: var(--sp-5);
  border-radius: var(--r-xl);
  background: linear-gradient(145deg, var(--offer-top), var(--offer-bottom));
  border: 1px solid var(--offer-line);
  box-shadow: 0 10px 30px var(--offer-shadow);
  animation: offer-in var(--base) var(--ease);
}

/* Отвеченное предложение остаётся в ленте, но гаснет: дело сделано,
   и звать оно больше не должно. */
.offer--done { opacity: .72; }

@keyframes offer-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

.offer__top {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
}

/* Лицо компании крупно: по нему её узнают раньше, чем прочитают
   название. */
.offer__face {
  flex: none;
  display: grid;
  place-items: center;
  width: 15.4cqw;
  height: 15.4cqw;
  border-radius: 50%;
  background: var(--surface-2) center / cover no-repeat;
  color: var(--text-dim);
  font-size: var(--fs-lg);
  font-weight: 700;
  text-decoration: none;
}

.offer__face--blank { border: 1px solid var(--line); }

.offer__face .icon {
  width: var(--fs-lg);
  height: var(--fs-lg);
}

.offer__who {
  flex: 1;
  min-width: 0;
  padding-top: 1cqw;
}

.offer__name {
  font-size: var(--fs-md);
  font-weight: 700;
  letter-spacing: -.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.offer__kind {
  margin-top: var(--sp-1);
  font-size: var(--fs-xs);
  color: var(--text-dim);
}

/* Время и вид предложения — столбиком у правого края: время сверху,
   потому что его ищут глазами первым. */
.offer__side {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--sp-2);
  padding-top: 1cqw;
}

.offer__when {
  font-size: var(--fs-xs);
  color: var(--text-faint);
  white-space: nowrap;
}

/* Ярлык вида: тёмный, с волосяной границей и золотым знаком карты.
   Он не кричит — он подсказывает, о чём речь, до чтения заголовка. */
.offer__tag {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: var(--sp-1) var(--sp-2);
  border: 1px solid var(--offer-line);
  border-radius: var(--r-sm);
  font-size: var(--fs-xs);
  color: var(--text-dim);
  white-space: nowrap;
}

.offer__tag .icon {
  width: var(--fs-sm);
  height: var(--fs-sm);
  color: var(--accent-text);
  /* Мягкое свечение у знака: золото на тёмном без него выглядит
     плоской наклейкой. */
  filter: drop-shadow(0 0 4px var(--gold-soft));
}

.offer__title {
  margin-top: var(--sp-4);
  font-size: var(--fs-lg);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.02em;
}

.offer__text {
  margin-top: var(--sp-3);
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--text-dim);
}