/* Раздел «Топы» (/tops), 05.11.2026 */
.tops-hero{padding:150px 0 40px;background:radial-gradient(1200px 400px at 20% 0,rgba(232,54,79,.18),transparent 70%)}
.tops-hero .crumbs{display:flex;gap:8px;font:500 .85rem/1 var(--font-ui);color:rgba(245,245,247,.7)}
.tops-hero .crumbs a:hover{color:var(--fg)}
.tops-hero h1{font:800 clamp(2.6rem,6vw,4.6rem)/1 var(--font-display);letter-spacing:-.04em;margin:14px 0 16px}
.tops-hero h1 em{font-style:normal;color:rgba(245,245,247,.45)}
.tops-hero .dek{max-width:760px;color:rgba(245,245,247,.72);font-size:1.08rem;line-height:1.55}
.tops{display:grid;gap:20px;padding-bottom:80px}
.pair{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:20px}
.tcard{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:28px;align-items:end;padding:36px;border-radius:24px;overflow:hidden;isolation:isolate;min-height:340px;border:1px solid rgba(255,255,255,.08)}
.tops>.tcard{min-height:400px}
.tcard .tbg,.tcard .tbg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%;z-index:-2;transition:transform .8s}
.tcard::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(0,0,0,.92) 0%,rgba(0,0,0,.7) 45%,rgba(0,0,0,.35) 100%)}
.tcard:hover .tbg{transform:scale(1.04)}
.thid .tbg,.thid .tbg img{filter:grayscale(1) brightness(.6)}
.tcult::before{background:linear-gradient(90deg,rgba(20,6,0,.94) 0%,rgba(40,12,0,.7) 50%,rgba(0,0,0,.3) 100%)}
.tbody{display:grid;gap:12px;justify-items:start;max-width:560px}
.tk{font:700 .72rem/1 var(--font-ui);letter-spacing:.12em;text-transform:uppercase;color:rgba(245,245,247,.6);display:flex;gap:10px;align-items:center}
.tcult .tk{color:var(--cult,#ffb547)}
.tcard h2{font:800 clamp(1.9rem,3.4vw,3rem)/1 var(--font-display);letter-spacing:-.035em}
.tcard p{color:rgba(245,245,247,.75);line-height:1.5}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chips span{font:600 .8rem/1 var(--font-ui);padding:8px 12px;border-radius:999px;background:rgba(255,255,255,.1)}
.go{font:600 .95rem/1 var(--font-ui);margin-top:6px}
.tposters{display:flex;gap:10px}
.tp{position:relative;width:118px;aspect-ratio:2/3;border-radius:12px;overflow:hidden;box-shadow:0 18px 40px rgba(0,0,0,.5);background:rgba(255,255,255,.06)}
.pair .tp{width:84px}
.tp img{width:100%;height:100%;object-fit:cover}
.tp i{position:absolute;left:8px;bottom:6px;font:800 1.6rem/1 var(--font-display);font-style:normal;text-shadow:0 2px 12px rgba(0,0,0,.8)}
.pair .tcard{grid-template-columns:1fr;align-content:end}
.pair .tposters{order:-1}
.soon h2,.how h2{font:700 1.4rem/1.2 var(--font-display);margin:28px 0 14px}
.sgrid,.hgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.scard{display:grid;gap:6px;padding:22px;border:1px dashed rgba(255,255,255,.18);border-radius:18px;color:rgba(245,245,247,.55)}
.scard b{color:rgba(245,245,247,.85);font:600 1.05rem/1.2 var(--font-display)}
.hgrid div{display:grid;gap:6px;padding:22px;border-radius:18px;background:rgba(255,255,255,.04)}
.hgrid span{color:rgba(245,245,247,.65);font-size:.95rem;line-height:1.5}
@media (max-width:900px){.sgrid,.hgrid{grid-template-columns:1fr}.tcard{grid-template-columns:1fr;padding:24px}.tposters{order:-1}.tp,.pair .tp{width:84px}.tops-hero{padding-top:130px}}