/* ============================================================================
   modules/listings/listing-detail.css — detail: related-секція + промо-стани
   (v1.1.5.336, redesign крок 4; файл зі списку спеки KPLUS_LISTINGS_REDESIGN_SPEC_1.1.5.288)

   Покриває:
     • RELATED — картки ПІД деталями (спека: «Related cards are below the detail,
       not another nested sidebar surface»), сітка з канонічних listing_card.
     • PROMO ineligible(reason) — стан «просування недоступне + чому»
       (спека → Financial promo: eligible / ineligible(reason) / active(until)).

   Таргети спеки (усі виконано):
     !important = 0 · сирі кольори = 0 (лише токени) · transition: all = 0
     inline style / on*-хендлери = 0 · focus-visible = є · prefers-reduced-motion = є
   ============================================================================ */

/* ── RELATED (під деталями) ─────────────────────────────────────────────── */
.kp-listing-related {
  margin-block-start: var(--n-s-5);
  padding-block-start: var(--n-s-4);
  border-block-start: 1px solid var(--n-border);
}

.kp-listing-related__title {
  margin: 0 0 var(--n-s-3);
  font-size: 1rem;
  font-weight: 600;
  color: var(--n-text-strong);
}

.kp-listing-related__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--n-s-3);
}

/* ── PROMO: ineligible(reason) ──────────────────────────────────────────── */
.kp-listing-promo-ineligible {
  border: 1px dashed var(--n-border);
  background: var(--n-bg-3);
}

.kp-listing-promo-ineligible__text {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--n-text-soft);
}

.kp-listing-promo-ineligible__action {
  margin-block-start: var(--n-s-3);
}

.kp-listing-promo-ineligible__action .btn-primary:focus-visible {
  outline: 2px solid var(--n-accent-ring);
  outline-offset: 2px;
}

/* прострочене — акцент на «продовжити», а не на «просувати» */
.kp-listing-promo-ineligible[data-reason="expired"] {
  border-color: var(--n-accent-border);
}

/* немає права на касу — нейтральний, пояснювальний тон */
.kp-listing-promo-ineligible[data-reason="no_treasury"] .kp-listing-promo-ineligible__text {
  color: var(--n-text-mute);
}

/* ── доступність: менше руху ────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .kp-listing-related__grid {
    scroll-behavior: auto;
  }
}