/* ============================================================================
   modules/listings/listing-gallery.css — доступна галерея + блок безпеки
   (v1.1.5.337, redesign крок 4; файл зі списку спеки KPLUS_LISTINGS_REDESIGN_SPEC_1.1.5.288)

   Покриває:
     • ГАЛЕРЕЯ — видимий фокус на hero та мініатюрах, стан активної мініатюри
       через aria-current (а не лише візуальний клас), кнопка-відео як повноцінний
       фокусований контрол (раніше була <div> — недосяжна з клавіатури).
     • SAFETY INFORMATION — блок «Безпечна угода» в main-контенті (вимога спеки).

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

/* ── ГАЛЕРЕЯ: фокус ─────────────────────────────────────────────────────── */
.kp-listing-gallery__hero:focus-visible,
.kp-listing-gallery__thumb:focus-visible {
  outline: 2px solid var(--n-accent-ring);
  outline-offset: 2px;
  border-radius: var(--n-r-md);
}

/* ── мініатюри: активна позначена і СТАНОМ (aria-current), і візуально ──── */
.kp-listing-gallery__thumb {
  position: relative;
  display: block;
  padding: 0;
  border: 2px solid transparent;
  border-radius: var(--n-r-md);
  background: var(--n-bg-3);
  cursor: pointer;
  overflow: hidden;
  transition: border-color var(--n-dur-fast) var(--n-ease),
              opacity var(--n-dur-fast) var(--n-ease);
}

.kp-listing-gallery__thumb:hover {
  border-color: var(--n-accent-border);
}

.kp-listing-gallery__thumb.is-active,
.kp-listing-gallery__thumb[aria-current="true"] {
  border-color: var(--n-accent);
}

/* відео-мініатюра тепер <button> — прибираємо дефолтні стилі кнопки */
.kp-listing-gallery__thumb--video {
  appearance: none;
  -webkit-appearance: none;
  line-height: 0;
}

.kp-listing-gallery__thumb-play {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  transform: translate(-50%, -50%);
  font-size: 0.9rem;
  color: var(--n-text-on-accent);
  pointer-events: none;
}

/* ── SAFETY INFORMATION ─────────────────────────────────────────────────── */
.kp-listing-safety {
  margin-block-start: var(--n-s-3);
  padding: var(--n-s-3);
  border: 1px solid var(--n-border);
  border-inline-start: 3px solid var(--n-accent);
  border-radius: var(--n-r-md);
  background: var(--n-bg-2);
}

.kp-listing-safety__title {
  margin: 0 0 var(--n-s-2);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--n-text-strong);
}

.kp-listing-safety__list {
  display: flex;
  flex-direction: column;
  gap: var(--n-s-1);
  margin: 0;
  padding-inline-start: var(--n-s-4);
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--n-text-soft);
}

.kp-listing-safety__report {
  margin: var(--n-s-2) 0 0;
  font-size: 0.75rem;
  color: var(--n-text-mute);
}

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