/* Развязка предложения: две кнопки, строка о решении и уборка в углу.

   Вынесено из offer.css по длине: там о самой карточке — подложке,
   лице, заголовке, — здесь о том, чем разговор кончается. */

/* Две кнопки в ряд поровну. На узком экране они уходят столбиком:
   кнопка, в которую не попасть пальцем, хуже двух строк. */
.offer__acts {
  display: flex;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
}

/* Отступ между кнопками в столбик обнуляем: правило .btn + .btn
   в button.css рассчитано на кнопки друг под другом, а в ряду оно
   опускало вторую на двенадцать пикселей — и кнопки одной высоты
   выглядели разными. */
.offer__acts .btn + .btn { margin-top: 0; }

.offer__acts .btn {
  flex: 1;
  width: auto;
  height: var(--sp-14);
  min-height: 0;
  padding-inline: var(--sp-3);
  padding-block: 0;
  border-radius: var(--r-md);
  font-size: var(--fs-md);
  line-height: 1;
}

/* Главной кнопке возвращаем мягкий ореол: здесь она не в строке,
   а во всю половину карточки, и свечение читается как «это главное». */
.offer__acts .btn--primary { box-shadow: 0 6px 20px var(--gold-soft); }

.offer__acts .btn--primary:active { transform: scale(.98); }
.offer__acts .btn--ghost:active { transform: scale(.98); }

@media (max-width: 359px) {
  .offer__acts { flex-direction: column; }
}

/* Чем кончилось: строка вместо кнопок у решённого предложения. */
.offer__done {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-dim);
}

.offer__done--good { color: var(--ok); }

.offer__done .icon {
  width: var(--fs-md);
  height: var(--fs-md);
}

/* Уборка стоит в одной строке со временем, а не поверх него: лежа
   слоем в углу, она наезжала на время и читалась как его часть. */
.offer__row {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
}

.offer__more {
  display: grid;
  place-items: center;
  width: var(--sp-6);
  height: var(--sp-6);
  border: none;
  border-radius: 50%;
  background: none;
  color: var(--text-faint);
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--fast) var(--ease), color var(--fast) var(--ease);
}

.offer__more .icon {
  width: var(--fs-sm);
  height: var(--fs-sm);
}

/* На телефоне кнопка видна всегда: наводить там нечем. */
@media (hover: none) {
  .offer__more { opacity: .5; }
}

@media (hover: hover) {
  .offer:hover .offer__more { opacity: 1; }
  .offer__more:hover { color: var(--text); }
}