/**
 * Страницы /trade/: код /trade/<cc>/<hs6>/ (views/code.php) и хаб страны /trade/<cc>/ (views/hub.php) — «История рынка».
 * Разметка — на классах Bootstrap/Silicon; здесь только градиенты главной, крупные числа, бенто-карточки,
 * полоска разделов и тёмная карточка отчёта. Тёмная тема — через .dark-mode и --si-* переменные.
 */

/* AOS сдвигает элементы за край — clip (не hidden: hidden ломает sticky) */
.tb-page > section { overflow-x: clip; }
.tb-page .tb-sec { scroll-margin-top: var(--tb-stick, 120px); }

/* Градиенты как на главной (.text-gradient / .btn-gradient там объявлены локально в index.php) */
.tb-grad {
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a855f7 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: #6366f1;
}
.tb-btn-grad { background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a855f7 100%); border: 0; color: #fff; box-shadow: 0 10px 40px rgba(99, 102, 241, .3); transition: transform .2s ease, box-shadow .2s ease; }
.tb-btn-grad:hover, .tb-btn-grad:focus { color: #fff; transform: translateY(-2px); box-shadow: 0 15px 50px rgba(99, 102, 241, .4); }

/* Первый экран: фон главной (карта слева + мягкий переход) и лёгкое свечение справа */
.tb-hero {
  padding-top: 2.5rem;
  background:
    radial-gradient(40rem 26rem at 92% 12%, rgba(139, 92, 246, .14), transparent 70%),
    linear-gradient(to right, transparent 0%, rgba(248, 249, 250, .95) 60%, #f8f9fa 100%),
    url(/images/Group-min.png) top left no-repeat;
  background-color: #f8f9fa;
}
.dark-mode .tb-hero {
  background:
    radial-gradient(40rem 26rem at 92% 12%, rgba(139, 92, 246, .22), transparent 70%),
    linear-gradient(to right, transparent 0%, rgba(11, 15, 25, .95) 60%, #0b0f19 100%),
    url(/images/Group-min.png) top left no-repeat;
  background-color: #0b0f19;
}
.tb-h1 { letter-spacing: -.03em; max-width: 18ch; text-wrap: balance; }
.tb-lead { max-width: 62ch; text-wrap: pretty; }
@media (max-width: 575.98px) {
  .tb-h1 { font-size: 2.35rem; }
  .tb-hero .lead { font-size: 1.0625rem; }
}

/* Полоска разделов: как .sup-subnav */
.tb-subnav { z-index: 1020; background: rgba(255, 255, 255, .94); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); }
.dark-mode .tb-subnav { background: rgba(11, 15, 25, .94); }
.tb-subnav-title { font-size: 1.125rem; max-width: 16rem; min-width: 0; }
.tb-subnav-scroll { min-width: 0; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.tb-subnav-scroll::-webkit-scrollbar { display: none; }
.tb-subnav-scroll > div { width: max-content; min-width: 100%; }
.tb-nav-link { color: var(--si-body-color); border: 0; }
.tb-nav-link:hover { color: var(--si-primary); }
.tb-nav-link.active { background-color: var(--si-secondary); color: var(--si-gray-900, #0b0f19); font-weight: 600; }
.dark-mode .tb-nav-link.active { background-color: rgba(255, 255, 255, .1); color: #fff; }
@media print { .tb-subnav { display: none !important; } }

/* Чередование фона секций и карточки: на светлой секции — серые, на серой — цвета страницы */
.tb-alt { background-color: var(--si-secondary); }
.dark-mode .tb-alt { background-color: rgba(255, 255, 255, .03); }

/* Большое число-утверждение */
.tb-stat { font-size: clamp(4.5rem, 16vw, 8.5rem); line-height: .9; letter-spacing: -.05em; font-variant-numeric: tabular-nums; display: inline-block; }
[data-tb-count] { font-variant-numeric: tabular-nums; }
.tb-break { overflow-wrap: anywhere; min-width: 0; }
.tb-narrow { max-width: 760px; }

/* Значок в кружке, номер в топе компаний */
.tb-ico { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background: rgba(var(--si-primary-rgb), .12); color: var(--si-primary); font-size: 1.5rem; }
.tb-rank { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: rgba(var(--si-primary-rgb), .12); color: var(--si-primary); font-weight: 700; font-size: .875rem; }

/* Полоски долей: ширина задаётся --w, растут при появлении (.tb-in ставит js) */
.tb-bar { display: block; height: 8px; border-radius: 4px; background: rgba(var(--si-primary-rgb), .1); overflow: hidden; }
.tb-bar > span { display: block; height: 100%; width: var(--w); border-radius: 4px; background: linear-gradient(90deg, #6366f1, #a855f7); transform-origin: left center; }
.tb-anim .tb-bar > span { transform: scaleX(0); transition: transform 1s cubic-bezier(.22, 1, .36, 1); }
.tb-anim .tb-bar.tb-in > span { transform: scaleX(1); }
.tb-p-name { width: 8.5rem; flex-shrink: 0; }
.tb-p-pct { width: 3.75rem; flex-shrink: 0; }
@media (max-width: 575.98px) { .tb-p-name { width: 6.5rem; } }

/* Хаб страны: число кодов на первом экране, строки топа, номер группы, каталог */
.tb-stat-sm { font-size: clamp(3.5rem, 12vw, 5.5rem); }
.tb-row { transition: background-color .2s ease; }
.tb-row:hover { background-color: rgba(var(--si-primary-rgb), .06); }
.tb-chap { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: .75rem; background: rgba(var(--si-primary-rgb), .12); color: var(--si-primary); font-weight: 700; font-size: .875rem; font-variant-numeric: tabular-nums; }
.tb-hub [data-trade-heading] { scroll-margin-top: var(--tb-stick, 120px); }

/* График */
.tb-chart { min-height: 320px; }

/* Карточки-ссылки */
.tb-lift { transition: transform .25s ease, box-shadow .25s ease; }
.tb-lift:hover { transform: translateY(-4px); box-shadow: 0 1rem 2rem -1rem rgba(11, 15, 25, .3); }

/* Тёмная карточка отчёта — как видео-карточка главной, но на градиенте: одинакова в обеих темах */
.tb-cta {
  color: #fff;
  background:
    radial-gradient(36rem 24rem at 88% -10%, rgba(168, 85, 247, .55), transparent 60%),
    radial-gradient(30rem 22rem at -5% 110%, rgba(99, 102, 241, .5), transparent 60%),
    linear-gradient(135deg, #17143a 0%, #0b0f19 100%);
}
.tb-cta::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: url(/images/Group-min.png) right -10% top 20% / 60% no-repeat; opacity: .08; }
.tb-cta > .card-body { z-index: 1; }
.tb-cta-text { color: rgba(255, 255, 255, .75); }
.tb-cta-main { color: #17143a !important; background: #fff !important; border-color: #fff !important; }
.tb-cta-glass { background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.tb-cta-item { color: #fff; background: rgba(255, 255, 255, .05); transition: background-color .2s ease; }
.tb-cta-item:hover { color: #fff; background: rgba(255, 255, 255, .14); }

/* Вопросы: карточки вместо сплошного списка */
.tb-faq .accordion-button { background: transparent; box-shadow: none; }
.tb-faq .accordion-button:not(.collapsed) { color: var(--si-primary); }
.tb-faq .accordion-item:last-child { margin-bottom: 0 !important; }

@media (prefers-reduced-motion: reduce) {
  .tb-btn-grad, .tb-lift { transition: none; }
  .tb-btn-grad:hover, .tb-lift:hover { transform: none; }
}