/* Тематические блоки главной (pickaclass). Подключается только из
   pickaclass/landing.html — существующие css не трогаем.
   Мобайл: горизонтальный свайп-рельс (scroll-snap). Десктоп: сетка 4×2.
   Логические свойства (inline-start/end) — чтобы не разъезжалось в RTL (ar). */

.hb-wrap { display: block; }

/* content-visibility: офскрин-блоки не рендерятся, и их фоновые картинки не
   грузятся — единственный рабочий «lazy» для background-image (13×8=104 карточки). */
.hb-sec {
  padding: 30px 0;
  content-visibility: auto;
  contain-intrinsic-size: 0 540px;
}
/* alternating-фон заменён тематическим (см. блок «Тематика» ниже) */

.hb-sec__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px 20px; flex-wrap: wrap; margin-bottom: 18px;
}
.hb-sec__title {
  margin: 0; font-size: 24px; line-height: 1.2; font-weight: 800; letter-spacing: -.02em;
}
.hb-sec__all {
  font-size: 14px; font-weight: 700; text-decoration: none; white-space: nowrap;
  color: var(--accent, #1d4ed8);
}
.hb-sec__all:hover { text-decoration: underline; }
.hb-sec__all .hb-arr { display: inline-block; margin-inline-start: 4px; }
[dir="rtl"] .hb-sec__all .hb-arr { transform: scaleX(-1); }

/* ── Рельс ───────────────────────────────────────────────────────────────── */
.hb__rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 62%;   /* видно 1 карточку целиком + половину следующей */
  gap: 14px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 10px;
  scrollbar-width: thin;
}
.hb__rail > * { scroll-snap-align: start; min-width: 0; }
.hb__rail::-webkit-scrollbar { height: 6px; }
.hb__rail::-webkit-scrollbar-thumb { background: var(--border, #d8dce3); border-radius: 3px; }

/* CTA под рельсом — только на узких экранах (после свайпа кнопка под рукой) */
.hb-sec__foot { margin-top: 12px; }
.hb-sec__foot .hb-sec__all { display: inline-block; }

@media (min-width: 640px) { .hb__rail { grid-auto-columns: 38%; } }

@media (min-width: 960px) {
  .hb-sec { padding: 38px 0; }
  .hb-sec__title { font-size: 27px; }
  .hb__rail {
    grid-auto-flow: row;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-columns: auto;
    overflow: visible;
    scroll-snap-type: none;
    gap: 16px;
    padding-bottom: 0;
  }
  .hb-sec__foot { display: none; }   /* на десктопе хватает ссылки в шапке */
}

@media (max-width: 639px) {
  .hb-sec { padding: 22px 0; contain-intrinsic-size: 0 460px; }
  .hb-sec__title { font-size: 20px; }
  /* Рядом с заголовком ссылка не помещается и обрезается — на узких экранах
     работает только кнопка под рельсом (она же удобнее: видна после свайпа). */
  .hb-sec__head .hb-sec__all { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hb__rail { scroll-behavior: auto; }
}

/* ── Тот же свайп-рельс для существующей сетки Trending на главной ──────────
   Trending рендерит .grid-cards (общий класс каталога!), поэтому цепляемся за
   доп. класс .hb-rail-m — глобальный .grid-cards в каталоге/категориях не
   затронут. Специфичность .grid-cards.hb-rail-m (0,2,0) перебивает
   mobile.css `.grid-cards{grid-template-columns:1fr}`. */
@media (max-width: 959px) {
  .grid-cards.hb-rail-m {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 62%;
    gap: 14px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 10px;
    scrollbar-width: thin;
  }
  .grid-cards.hb-rail-m > * { scroll-snap-align: start; min-width: 0; }
  .grid-cards.hb-rail-m::-webkit-scrollbar { height: 6px; }
  .grid-cards.hb-rail-m::-webkit-scrollbar-thumb { background: var(--border, #d8dce3); border-radius: 3px; }
}
@media (min-width: 640px) and (max-width: 959px) {
  .grid-cards.hb-rail-m { grid-auto-columns: 38%; }
}

/* ── Тематика блоков: цвет + иконка на секцию ─────────────────────────────────
   13 секций подряд сливались в «стену карточек» (альтернирующий белый/серый фон
   почти не читался). Даём каждой теме свой акцент: очень светлый тональный фон,
   полоса у заголовка, иконка и цветной CTA. Никаких картинок — ноль веса.
   Значения задаются по id секции (`#b-<key>` уже есть в разметке для якорей). */
#b-parenting      { --hb: #f59e0b; --hb-ico: "👨‍👩‍👧"; }
#b-martial        { --hb: #dc2626; --hb-ico: "🥋"; }
#b-psychotherapy  { --hb: #7c3aed; --hb-ico: "🧠"; }
#b-video          { --hb: #db2777; --hb-ico: "🎬"; }
#b-music          { --hb: #4f46e5; --hb-ico: "🎵"; }
#b-ai             { --hb: #0891b2; --hb-ico: "🤖"; }
#b-photo          { --hb: #0369a1; --hb-ico: "📷"; }
#b-yoga           { --hb: #059669; --hb-ico: "🧘"; }
#b-esoteric       { --hb: #9333ea; --hb-ico: "🔮"; }
#b-crime          { --hb: #475569; --hb-ico: "🔍"; }
#b-women          { --hb: #e11d48; --hb-ico: "🌸"; }
#b-beauty         { --hb: #a21caf; --hb-ico: "💄"; }
#b-crafts         { --hb: #b45309; --hb-ico: "🎨"; }

.hb-sec {
  background: linear-gradient(180deg,
              color-mix(in srgb, var(--hb, #64748b) 9%, var(--surface, #fff)) 0%,
              var(--surface, #fff) 72%);
}
.hb-sec__title {
  border-inline-start: 5px solid var(--hb, #64748b);
  padding-inline-start: 13px;
}
.hb-sec__title::before {           /* декоративная иконка темы */
  content: var(--hb-ico, "");
  margin-inline-end: 9px;
  font-size: .92em;
}
.hb-sec__all { color: var(--hb, var(--accent)); font-weight: 700; }

/* Тон чуть плотнее на узких экранах: там секции идут встык и разделение важнее */
@media (max-width: 959px) {
  .hb-sec {
    background: linear-gradient(180deg,
                color-mix(in srgb, var(--hb, #64748b) 12%, var(--surface, #fff)) 0%,
                var(--surface, #fff) 78%);
  }
}
@media (prefers-reduced-transparency: reduce) {
  .hb-sec { background: var(--surface, #fff); }
}