/**
 * @file
 * Рекомендації на сторінці товару.
 *
 * Двох компонентів тут рівно два, і обидва спираються на готове: ряд бере
 * розмітку й правила `.sr-rail` з головної (css/home.css), а картки —
 * звичайні картки каталогу. Свого тут лише заголовок ряду й смуга класів
 * якості.
 *
 * Кольорів і розмірів поза токенами не вигадуємо.
 */

/* --- ряд «ще до цієї моделі» --- */

.sr-rec {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--sr-line);
}

/*
 * Заголовок такий самий, як «Опис товару» нижче: обидва — розділи однієї
 * сторінки, і різний кегль читався б як різна вага.
 */
.sr-rec__title {
  margin: 0 0 16px;
  color: var(--sr-ink);
  font-size: var(--sr-text-xl);
  font-weight: 700;
  line-height: 1.2;
}

/* --- інші виконання того самого товару --- */

/*
 * Драбина, а не ряд пігулок.
 *
 * Спершу варіанти стояли пігулками поруч — і на першому ж живому товарі
 * дали горизонтальну прокрутку сторінки: підписи тут не короткі мітки
 * класів, а фрази на кшталт «оригінальна деталь з контролером», і в
 * колонку 266px вони не вміщаються ніяк.
 *
 * Стовпчик «назва ліворуч — ціна праворуч» до того ж чесніше показує суть:
 * це драбина цін, і читати її треба згори вниз.
 */
.sr-alt {
  margin: 12px 0 4px;
}

.sr-alt__label {
  display: block;
  margin-bottom: 6px;
  color: var(--sr-grey-2);
  font-size: var(--sr-text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.sr-alt__list {
  margin: 0;
  padding: 0;
  border: 1px solid var(--sr-line);
  border-radius: var(--sr-radius-sm);
  list-style: none;
}

.sr-alt__item {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--sr-line);
}

.sr-alt__item:first-child {
  border-top: 0;
}

.sr-alt__link {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-height: 38px;
  padding: 7px 12px;
  color: var(--sr-ink);
  text-decoration: none;
}

.sr-alt__link:hover,
.sr-alt__link:focus-visible {
  background: var(--sr-ground);
  text-decoration: none;
}

/*
 * Підпис переносимо, а не обрізаємо: це єдине, що пояснює різницю між
 * варіантами, і половина фрази тут гірша за два рядки. `min-width: 0`
 * обовʼязковий — без нього флекс-елемент не стискається нижче найдовшого
 * слова й виштовхує ціну за край.
 */
.sr-alt__name {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--sr-grey-1);
  font-size: var(--sr-text-sm);
  line-height: 1.35;
}

.sr-alt__price {
  flex: none;
  font-size: var(--sr-text-base);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Дешевший за поточний — те, заради чого драбину й дивляться. */
.sr-alt__link.is-cheaper .sr-alt__price {
  color: var(--sr-red);
}

/* Позиція під замовлення лишається в переліку, але тихішою: вона теж
   відповідь на питання «а дешевше є», просто з очікуванням. */
.sr-alt__link.is-out .sr-alt__price {
  color: var(--sr-grey-1);
}

.sr-alt__note {
  flex: none;
  color: var(--sr-grey-2);
  font-size: var(--sr-text-xs);
  white-space: nowrap;
}

@media (max-width: 760px) {
  .sr-rec {
    margin-top: 32px;
    padding-top: 20px;
  }

  /* На телефоні заголовок розділу менший — так само, як «Опис товару»:
     інакше він зрівнюється з назвою товару й ієрархія зникає. */
  .sr-rec__title {
    font-size: var(--sr-text-lg);
  }

  /* Ціль дотику 44px: на телефоні драбина — це список посилань, і в рядок
     на 38px палець промахується. */
  .sr-alt__link {
    min-height: 44px;
  }
}