/* ═══════════════════════════════════════════════════════════════
   Экран Trends. Мобилка: карусель-герой + шит со списком.
   ПК: плитки-функции + каталог-сетка.
   ═══════════════════════════════════════════════════════════════ */

/* ── карусель (только мобилка) ────────────────────────────── */
.hero{position:fixed;top:0;left:0;right:0;height:var(--hero);z-index:1}
.tr-stage{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;height:var(--hero);scrollbar-width:none}
.tr-stage::-webkit-scrollbar{display:none}
.tr-slide{flex:0 0 100%;scroll-snap-align:center;position:relative;overflow:hidden;
       background-size:cover;background-position:center}
.tr-slide::after{content:"";position:absolute;inset:0;
  background:linear-gradient(#0c021755 0 20%,#0c021700 42%,#0c0217 97%)}
/* целый кадр поверх размытой подложки, без дикого кропа */
.tr-slide .bb,.tr-slide .pv{position:absolute;left:0;top:0;width:100%;height:100%}
.tr-slide .bb{object-fit:cover;filter:blur(36px);transform:scale(1.15)}
.tr-slide .pv,.tr-slide .ex{object-fit:contain}

.tr-stage-top{
  position:absolute;top:0;left:0;right:0;z-index:3;
  display:flex;align-items:center;justify-content:space-between;
  padding:calc(env(safe-area-inset-top) + 16px) var(--pad) 0;
}
.tr-dots{position:absolute;left:0;right:0;bottom:50px;z-index:5;display:flex;gap:6px;justify-content:center}
.tr-dots i{width:6px;height:6px;border-radius:50%;background:#ffffff4d;cursor:pointer;transition:width .2s}
.tr-dots i.on{width:26px;border-radius:3px;background:#fff}

/* ── плитки-функции (только ПК) ───────────────────────────── */
.tr-hot{display:none}

/* ── шит: панель и список. Доехал до верха — углы, ручка и тень растекаются, шит становится экраном (scroll-timeline) ── */
.tr-sheet{
  position:relative;z-index:4;margin-top:calc(var(--hero) - 26px);
  background:var(--panel);border-top:1px solid var(--line);
  border-radius:28px 28px 0 0;padding:20px var(--pad) 24px;
  min-height:calc(100vh - var(--tab));box-shadow:0 -20px 50px #0c0217b3;
  animation:tr-flat linear both;animation-timeline:scroll();animation-range:0 calc(var(--hero) - 26px);
}
.tr-sheet::before{content:"";display:block;width:38px;height:4px;border-radius:2px;background:#ffffff2e;margin:-8px auto 16px;
  animation:tr-grab linear both;animation-timeline:scroll();animation-range:0 calc(var(--hero) - 26px)}
@keyframes tr-flat{to{border-radius:0;box-shadow:none;border-color:transparent}}
@keyframes tr-grab{to{opacity:0}}
.tr-search{display:flex;align-items:center;gap:11px;background:var(--panel2);border:1px solid var(--line);border-radius:16px;padding:13px 15px}
.tr-search .ic{color:var(--dim);width:16px;height:16px;flex:none}
.tr-search input{flex:1;border:0;background:none;outline:none;font-size:16px}
.tr-search input::placeholder{color:var(--dim)}

/* панель. Мобилка: поиск сверху, под ним один ряд чипсов и сортировки (горизонтальный скролл).
   ПК: чипсы · поиск · сортировка в одну строку (ряд раскрыт через display:contents) */
.tr-toolbar{display:grid;gap:12px;margin-bottom:16px}
.tr-row{display:flex;align-items:center;gap:8px;overflow-x:auto;scrollbar-width:none;margin:0 calc(-1 * var(--pad));padding:0 var(--pad)}
.tr-row::-webkit-scrollbar{display:none}
.tr-tdiv{width:1px;height:22px;background:var(--line);flex:none;margin:0 4px}
.tr-toolbar .chips{margin:0;gap:8px;overflow:visible}
.tr-sort{display:flex;gap:8px}
.tr-toolbar .chip,.tr-toolbar .tr-search,.tr-sort span{
  height:42px;display:flex;align-items:center;border-radius:999px;
  background:var(--panel2);border:1px solid var(--line);font-size:14px;color:var(--dim);
  padding:0 18px;white-space:nowrap;cursor:pointer}
.tr-toolbar .chip,.tr-sort span{height:34px;padding:0 14px;font-size:13px}
.tr-toolbar .tr-search{gap:10px;cursor:text}
.tr-toolbar .tr-search input{font-size:14px}
.tr-toolbar .chip.on,.tr-sort span.on{background:var(--acc);border-color:var(--acc);color:#fff;font-weight:600}

/* каталог: только обложки, по две в ряд; на ПК по четыре–шесть */
.tr-list{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tr-list:empty::after{content:"Nothing found";color:var(--dim);padding:10px 4px}
.tr-card{cursor:pointer}
.tr-card .cover{aspect-ratio:2/3;border-radius:14px;transition:transform .15s}
.tr-card:hover .cover{transform:translateY(-3px)}
/* затемнение и стата — только под курсором */
.tr-card .grad{position:absolute;inset:0;z-index:2;background:linear-gradient(#0000 62%,#0c0217d9);opacity:0;transition:opacity .2s}
.tr-card:hover .grad,.tr-card:hover .st{opacity:1}
.tr-card .st{position:absolute;left:10px;right:10px;bottom:10px;z-index:3;display:flex;gap:12px;justify-content:center;opacity:0;transition:opacity .2s;
          font-size:12px;font-weight:600;text-shadow:0 1px 6px #000}
.tr-card .st span{display:inline-flex;align-items:center;gap:4px}
.tr-card .st svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 1px 3px #000)}

@media (min-width:900px){
  .hero{display:none}

  .tr-hot{display:block;padding:22px 40px 4px}
  .tr-fnrow{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none}
  .tr-fnrow::-webkit-scrollbar{display:none}
  .tr-fnrow .tr-fn{flex:0 0 clamp(420px,32%,620px);scroll-snap-align:start}
  .tr-fn{position:relative;border-radius:var(--r);overflow:hidden;cursor:pointer;aspect-ratio:21/9;
      border:1px solid var(--line);transition:transform .15s}
  .tr-fn:hover{transform:translateY(-3px)}
  .tr-fn .tx{position:absolute;left:20px;top:0;bottom:0;display:flex;align-items:center;z-index:2;text-shadow:0 2px 14px #000c}
  .tr-fn .tx b{display:block;font-size:24px;line-height:1.1}
  /* плитка видео: ролик на всю плитку, затемнение слева под текст */
  .tr-fn video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .tr-fn.vid::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#0c0217e6 30%,#0c021700 70%)}
  /* плитка картинки: веер из трёх кадров на размытом фоне */
  .tr-fn.fan .bg{position:absolute;inset:-10%;background:url(https://lzalbzidhlwjimdaadgx.supabase.co/storage/v1/object/public/presets/cowboy/1-thumb.webp) center/cover;filter:blur(28px) brightness(.5)}
  .tr-fn.fan .k{position:absolute;top:11%;width:20%;height:71%;border-radius:12px;background:center/cover;
    box-shadow:0 14px 40px #000a;border:1px solid #ffffff2a;transition:transform .4s;transform-origin:bottom center}
  .tr-fn.fan .k1{left:54%;background-image:url(https://lzalbzidhlwjimdaadgx.supabase.co/storage/v1/object/public/presets/gta-vice-city/1-thumb.webp);transform:rotate(-14deg) translateX(-27%)}
  .tr-fn.fan .k2{left:59%;background-image:url(https://lzalbzidhlwjimdaadgx.supabase.co/storage/v1/object/public/presets/wild-cats/1-thumb.webp);transform:rotate(-2deg)}
  .tr-fn.fan .k3{left:64%;background-image:url(https://lzalbzidhlwjimdaadgx.supabase.co/storage/v1/object/public/presets/cowboy/1-thumb.webp);transform:rotate(11deg) translateX(27%)}
  .tr-fn.fan:hover .k1{transform:rotate(-14deg) translateX(-45%)}
  .tr-fn.fan:hover .k3{transform:rotate(11deg) translateX(45%)}

  /* каталог под плитками */
  .tr-sheet{margin:0;padding:26px 40px 60px;background:none;border:0;border-radius:0;box-shadow:none;min-height:0;animation:none}
  .tr-sheet::before{display:none}
  .tr-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:18px}
  .tr-row{display:contents}
  .tr-toolbar .tr-search{order:1;flex:1;min-width:200px;max-width:320px}
  .tr-sort{order:2;margin-left:auto}
  .tr-toolbar .chip,.tr-sort span{height:42px;padding:0 18px;font-size:14px}
  .tr-list{grid-template-columns:repeat(4,1fr);gap:14px}
}
/* широкий монитор — шесть карточек в ряд */
@media (min-width:1400px){
  .tr-list{grid-template-columns:repeat(6,1fr)}
}