/* ═══════════════════════════════════════════════════════════════
   Блок «Полезные статьи» Trely — стили пакета
   ═══════════════════════════════════════════════════════════════

   У каждой переменной есть запасное значение: на странице, где токенов
   Trely нет, блок возьмёт его и будет выглядеть так же.

   Все правила начинаются с .arts — за пределы блока пакет не лезет
   и чужие a/img/button не трогает.

   Свой сброс не прихоть: на нашем сайте есть глобальный
   `* { margin:0; padding:0 }`, а на чужой странице его может не быть. */

.arts, .arts * { box-sizing: border-box; }

.arts {
  font-family: var(--ff, 'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif);
  letter-spacing: -0.01em;
  color: var(--black, #0F1014);
}

/* ─────────── шапка блока ─────────── */
.arts-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: var(--s-4, 32px);
}
.arts-heading {
  margin: 0;
  font-size: clamp(24px, 2.6vw, 32px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--black, #0F1014);
}

/* ─────────── стрелки ─────────── */
/* 44 px — норма области нажатия. На телефоне стрелки прячутся: там
   карусель листается пальцем, и кнопки только отнимают ширину. */
.arts-nav { display: flex; gap: 8px; flex: none; }
.arts-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--line, #E5E2DC);
  border-radius: var(--r-pill, 999px);
  background: var(--white, #FFFFFF);
  color: var(--black, #0F1014);
  cursor: pointer;
}
.arts-arrow svg { width: 20px; height: 20px; }
.arts-arrow:hover { border-color: var(--gold, #C6A064); color: var(--gold, #C6A064); }
.arts-arrow[disabled] { opacity: .35; cursor: default; }
.arts-arrow:focus-visible,
.arts-card:focus-visible,
.arts-all:focus-visible,
.arts-rail:focus-visible {
  outline: 2px solid var(--gold, #C6A064);
  outline-offset: 3px;
  border-radius: var(--r-sm, 8px);
}

/* ─────────── лента карточек ─────────── */
/* Прокрутка с прилипанием: карточка всегда встаёт по левому краю, а не
   замирает наполовину. Полосу прокрутки прячем — листают стрелками
   и пальцем. */
.arts-rail {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding-bottom: 4px;
}
.arts-rail::-webkit-scrollbar { display: none; }

.arts-card {
  flex: 0 0 300px;
  scroll-snap-align: start;
  display: block;
  background: var(--white, #FFFFFF);
  border-radius: var(--r-xl, 32px);
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  box-shadow: var(--sh-soft, 0 4px 24px rgba(39, 60, 63, .06));
}
.arts-cover { background: var(--tag, #EDE4D1); }
.arts-cover img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
.arts-body { padding: 20px 24px 24px; }
.arts-rubric {
  font-size: 13px;
  line-height: 1.4;
  color: var(--gold, #C6A064);
  margin-bottom: 8px;
}
.arts-title {
  font-size: 18px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--black, #0F1014);
}
.arts-meta {
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--gray, #6B6F71);
}
.arts-card:hover .arts-title { color: var(--gold, #C6A064); }

/* ─────────── ссылка на весь раздел ─────────── */
.arts-all {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: var(--s-4, 32px);
  font-size: 15px;
  font-weight: 500;
  color: var(--green, #273C3F);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.arts-all:hover { color: var(--gold, #C6A064); }

/* Просили «уменьшить движение» — не листаем с анимацией. */
@media (prefers-reduced-motion: reduce) {
  .arts-rail { scroll-behavior: auto; }
}

/* ─────────── узкие экраны ─────────── */
@media (max-width: 760px) {
  .arts-nav { display: none; }
  .arts-card { flex: 0 0 82%; }
  .arts-rail { gap: 16px; }
}