/* Раздел «Жобалар / Проекты», вариант «Витрина» и страница программы (30.09.2026).
   Мир раздела сериалов: тёмный фон, Unbounded / Inter Tight / Inter, бирюза. Всё под .pj и с префиксом pj-, чтобы не пересекаться с Bootstrap. */
.pj{
  --bg:#070a12; --bg-2:#0b101c; --bg-3:#111827;
  --surface:rgba(255,255,255,.04); --surface-2:rgba(255,255,255,.07);
  --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.14);
  --text:#f3f5fa; --text-2:#b0b9cc; --text-3:#808ba4;
  --crimson:#a70437; --teal:#502197; --teal-2:#6fe3df;
  --r-sm:8px; --r-md:16px; --r-lg:24px;
  --ease:cubic-bezier(.22,1,.36,1);
  --display:'Unbounded','Inter Tight',system-ui,sans-serif;
  --head:'Inter Tight','Inter',system-ui,sans-serif;
  --body:'Inter',system-ui,sans-serif;
  --gut:16px;
  background:var(--bg);color:var(--text);font:400 15px/1.5 var(--body);-webkit-font-smoothing:antialiased;overflow:hidden;overflow:clip;color-scheme:dark
}
@media (min-width:768px){.pj{--gut:32px}}
@media (min-width:1200px){.pj{--gut:48px}}
.pj *,.pj *::before,.pj *::after{box-sizing:border-box}
.pj a,.pj a:hover{color:inherit;text-decoration:none}
.pj button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.pj img{display:block;max-width:100%}
.pj h1,.pj h2,.pj h3,.pj p{margin:0}
.pj h1,.pj h2{text-wrap:balance}
.pj [hidden]{display:none!important}
.pj :focus-visible{outline:2px solid var(--teal-2);outline-offset:3px;border-radius:6px}
.pj ::selection{background:rgba(80,33,151,.35);color:#fff}
.pj svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pj-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pj-wrap{max-width:1320px;margin:0 auto;padding-inline:var(--gut)}
.pj-tnum{font-variant-numeric:tabular-nums}
.pj-end{height:64px}

/* секции и ряды */
.pj-sec{padding-top:40px}
@media (min-width:768px){.pj-sec{padding-top:56px}}
.pj-sec__head{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px 12px;margin-bottom:16px}
.pj .pj-sec__h{font:700 20px/1.2 var(--head);letter-spacing:-.01em;color:var(--text)}
@media (min-width:768px){.pj .pj-sec__h{font-size:24px}}
.pj-sec__n{font:500 13px/1 var(--head);color:var(--text-3)}
.pj-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;font:600 11.5px/1 var(--head);letter-spacing:.02em;background:rgba(255,255,255,.1);color:#fff;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.pj-chip--live{background:var(--crimson)}
.pj-chip--live i{width:6px;height:6px;border-radius:50%;background:#fff;animation:pjPulse 1.6s ease-in-out infinite}
@keyframes pjPulse{0%,100%{opacity:1}50%{opacity:.35}}
.pj-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:46px;padding:0 22px;border-radius:999px;font:600 15px/1 var(--head);white-space:nowrap;transition:transform .25s var(--ease),background-color .2s,color .2s}
.pj-btn:active{transform:scale(.97)}
.pj .pj-btn--primary{background:#fff;color:#070a12}
.pj .pj-btn--primary:hover{background:#e6eaf3;color:#070a12}
.pj-btn--glass{background:rgba(255,255,255,.08);border:1px solid var(--line-2)!important;color:#fff;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.pj-btn--glass:hover{background:rgba(255,255,255,.15)}
.pj-btn--round{width:46px;padding:0}
.pj-btn svg{width:18px;height:18px}
.pj-btn--primary svg path,.pj-btn--glass svg path[fill]{stroke:none}

/* карточка программы 16:9 */
.pj-card{position:relative;display:block;min-width:0}
.pj-card__pic{display:block;position:relative;aspect-ratio:16/9;border-radius:var(--r-md);overflow:hidden;background:linear-gradient(160deg,#16233d,var(--bg-3) 60%)}
.pj-card__pic img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.pj-card:hover .pj-card__pic img{transform:scale(1.045)}
.pj-card__pic::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);pointer-events:none}
.pj-card__pic .pj-chip{position:absolute;left:10px;top:10px}
.pj-when{position:absolute;right:10px;bottom:10px;max-width:calc(100% - 20px);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding:4px 8px;border-radius:6px;background:rgba(7,10,18,.72);font:600 11.5px/1.2 var(--head);color:#fff;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.pj-card__t{display:block;margin-top:10px;font:600 15px/1.3 var(--head);color:var(--text)}
.pj-card__m{display:block;margin-top:3px;font:400 12.5px/1.4 var(--body);color:var(--text-3)}
.pj-card--dim .pj-card__pic img{opacity:.75;filter:saturate(.7)}
.pj-card--dim:hover .pj-card__pic img{opacity:1;filter:none}
.pj-letter{position:absolute;inset:0;display:grid;place-items:center;container-type:inline-size;background:radial-gradient(120% 90% at 20% 0%,rgba(80,33,151,.28),transparent 55%),linear-gradient(160deg,#1c3f78,#0f1d3a)}
.pj-letter b{font:700 clamp(32px,22cqw,64px)/1 var(--display);color:rgba(255,255,255,.92)}
.pj-letter small{position:absolute;left:12px;bottom:10px;right:12px;font:600 12px/1.25 var(--head);color:rgba(255,255,255,.75)}
.pj-grid{display:grid;gap:18px 16px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:640px){.pj-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1024px){.pj-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:24px 20px}}
@media (min-width:1360px){.pj-grid{grid-template-columns:repeat(5,minmax(0,1fr))}}
.pj-row{position:relative}
.pj-row__sc{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin-inline:calc(var(--gut) * -1);padding:4px var(--gut) 8px;scroll-padding-inline:var(--gut)}
.pj-row__sc::-webkit-scrollbar{display:none}
.pj-row__sc>*{scroll-snap-align:start;flex:0 0 clamp(200px,46vw,300px)}
@media (min-width:768px){.pj-row__sc{gap:16px}.pj-row__sc>*{flex-basis:clamp(220px,23vw,320px)}}
.pj-row::after{content:"";position:absolute;top:0;bottom:0;right:calc(var(--gut) * -1);width:48px;pointer-events:none;background:linear-gradient(270deg,var(--bg),transparent)}

/* витрина */
.pj-show,.pj-hero{position:relative;isolation:isolate;min-height:500px;display:flex;flex-direction:column;justify-content:flex-end}
@media (min-width:768px){.pj-show{min-height:580px}.pj-hero{min-height:540px}}
.pj-show__art{position:absolute;inset:0;overflow:hidden;z-index:-1}
.pj-show__art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 20%;opacity:0;transform:scale(1.05);transition:opacity .9s var(--ease),transform 6s linear}
.pj-show__art img.on{opacity:1;transform:scale(1)}
@media (min-width:1024px){.pj-show__art img{left:auto;width:70%;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 22%);mask-image:linear-gradient(90deg,transparent 0,#000 22%)}}
.pj-show__shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(7,10,18,.55) 0,rgba(7,10,18,0) 20%),linear-gradient(0deg,var(--bg) 0,rgba(7,10,18,.85) 26%,rgba(7,10,18,.2) 56%,rgba(7,10,18,0) 72%)}
@media (min-width:1024px){.pj-show__shade{background:linear-gradient(180deg,rgba(7,10,18,.5) 0,rgba(7,10,18,0) 18%),linear-gradient(90deg,var(--bg) 22%,rgba(7,10,18,.7) 40%,rgba(7,10,18,.05) 62%),linear-gradient(0deg,var(--bg) 0,rgba(7,10,18,0) 40%)}}
.pj-show__in{position:relative;padding-top:120px;padding-bottom:8px;display:grid;gap:14px;max-width:640px}
.pj-hero .pj-show__in{max-width:720px;padding-bottom:20px}
.pj-show__in.on>*{animation:pjRise .6s var(--ease) both}
.pj-show__in.on>*:nth-child(2){animation-delay:.07s}.pj-show__in.on>*:nth-child(3){animation-delay:.14s}.pj-show__in.on>*:nth-child(4){animation-delay:.2s}.pj-show__in.on>*:nth-child(n+5){animation-delay:.26s}
@keyframes pjRise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.pj-tags{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;font:500 13px/1.3 var(--head);color:var(--text-2)}
.pj .pj-show__title{font:700 clamp(30px,5vw,60px)/1.04 var(--display);letter-spacing:-.02em;color:#fff;overflow-wrap:anywhere}
.pj-show__desc{font-size:16px;color:var(--text-2);max-width:48ch}
.pj-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.pj-show__thumbs{display:flex;gap:12px;overflow-x:auto;scrollbar-width:none;padding:22px 0 6px;margin-inline:calc(var(--gut) * -1);padding-inline:var(--gut)}
.pj-show__thumbs::-webkit-scrollbar{display:none}
.pj-th{flex:0 0 210px;display:grid;grid-template-columns:64px 1fr;gap:10px;align-items:center;padding-top:10px!important;border-top:2px solid rgba(255,255,255,.12)!important;text-align:left;color:var(--text-2)!important;position:relative;transition:color .2s}
.pj-th::before{content:"";position:absolute;left:0;top:-2px;height:2px;width:0;background:#fff}
.pj-th[aria-selected="true"]{color:#fff!important}
.pj-th[aria-selected="true"]::before{animation:pjFill var(--dur,7s) linear forwards}
.pj-th.done::before{animation:none;width:100%}
@keyframes pjFill{to{width:100%}}
.pj-th img{width:64px;height:36px;object-fit:cover;border-radius:6px}
.pj-th>span{display:grid;min-width:0}
.pj-th b{display:block;font:600 13px/1.2 var(--head);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pj-th small{display:block;font:400 11px/1.3 var(--body);color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:1em}

/* страница программы */
.pj-crumbs{display:flex;gap:8px;align-items:center;font:500 13px/1.2 var(--head);color:var(--text-3);min-width:0}
.pj-crumbs a:hover{color:#fff}
.pj-crumbs span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pj-crumbs svg{width:14px;height:14px}
.pj-when-line{display:inline-flex;align-items:center;gap:8px;font:500 15px/1.35 var(--head);color:var(--text)}
.pj-when-line svg{width:20px;height:20px;color:var(--teal-2)}
.pj-desc{font-size:16px;line-height:1.55;color:var(--text-2);max-width:62ch;max-height:4.65em;overflow:hidden;position:relative}
.pj-desc.clamp::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.6em;background:linear-gradient(0deg,rgba(7,10,18,.9),transparent);pointer-events:none}
.pj-desc.open{max-height:none}
.pj-desc.open::after{display:none}
.pj-desc p{margin:0 0 .6em}.pj-desc p:last-child{margin:0}
.pj-desc a{color:var(--teal-2)!important;text-decoration:underline!important}
.pj-more{font:600 14px/1 var(--head);color:#fff;display:inline-flex;align-items:center;gap:6px;justify-self:start}
.pj-more svg{width:14px;height:14px;transition:transform .3s var(--ease)}
.pj-more[aria-expanded="true"] svg{transform:rotate(90deg)}
.pj-toast{font:500 13px/1 var(--head);color:var(--teal-2);min-height:13px}
.pj-player-sec{padding-top:12px}
.pj-theatre{display:grid;gap:16px}
@media (min-width:1024px){.pj-theatre{grid-template-columns:minmax(0,1fr) 380px;gap:24px;align-items:start}}
.pj-player{position:relative;aspect-ratio:16/9;border-radius:var(--r-lg);overflow:hidden;background:#000;box-shadow:0 30px 80px -30px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.06)}
.pj-player>img{width:100%;height:100%;object-fit:cover;opacity:.9}
.pj-player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.pj-player__big{position:absolute!important;inset:0;display:grid!important;place-items:center;width:100%}
.pj-player__big span{width:76px;height:76px;border-radius:50%;background:rgba(255,255,255,.94);display:grid;place-items:center;box-shadow:0 12px 40px rgba(0,0,0,.5);transition:transform .3s var(--ease)}
.pj-player:hover .pj-player__big span{transform:scale(1.07)}
.pj-player__big svg{width:30px;height:30px;color:#070a12;margin-left:4px}
.pj-player__big svg path{stroke:none}
.pj-player__cap{position:absolute;left:0;right:0;bottom:0;padding:18px 20px;background:linear-gradient(0deg,rgba(0,0,0,.8),transparent);display:grid;gap:4px;pointer-events:none}
.pj-player__cap small{font:600 11px/1 var(--head);letter-spacing:.06em;text-transform:uppercase;color:var(--teal-2)}
.pj-player__cap b{font:600 16px/1.3 var(--head);color:#fff}
.pj-player.is-playing .pj-player__cap,.pj-player.is-playing>img,.pj-player.is-playing .pj-player__big{display:none!important}
.pj-under{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:12px;font:500 13px/1.3 var(--head);color:var(--text-3)}
.pj-eplist{display:grid;gap:4px;align-content:start;border-radius:var(--r-md);background:var(--surface);padding:8px}
@media (min-width:1024px){.pj-eplist{max-height:min(calc((1320px - 2*var(--gut) - 24px - 380px) * 9 / 16),calc((100vw - 2*var(--gut) - 24px - 380px) * 9 / 16));overflow:auto;overscroll-behavior:contain}}
@media (max-width:1023px){.pj-eplist{display:flex;overflow-x:auto;scrollbar-width:none;gap:8px}.pj-eplist::-webkit-scrollbar{display:none}.pj-eplist__h{display:none!important}.pj-eplist .pj-ep{flex:0 0 240px}}
.pj-eplist__h{display:flex;justify-content:space-between;align-items:baseline;padding:8px 8px 10px;font:600 13px/1 var(--head);color:var(--text-2)}
.pj-eplist__h b{color:var(--text)}
.pj-ep{display:grid;grid-template-columns:112px 1fr;gap:12px;align-items:center;border-radius:12px;padding:6px;transition:background .2s;text-align:left;width:100%}
.pj-ep:hover{background:var(--surface-2)}
.pj-ep[aria-current="true"]{background:rgba(80,33,151,.12)}
.pj-ep[aria-current="true"] .pj-ep__t{color:var(--teal-2)}
.pj-ep__pic{position:relative;aspect-ratio:16/9;border-radius:8px;overflow:hidden;background:var(--bg-3)}
.pj-ep__pic img{width:100%;height:100%;object-fit:cover}
.pj-ep__pic i{position:absolute;inset:0;display:grid;place-items:center;background:rgba(7,10,18,.25);opacity:0;transition:opacity .2s}
.pj-ep__pic i svg{width:24px;height:24px;color:#fff}
.pj-ep__pic i svg path{stroke:none}
.pj-ep:hover .pj-ep__pic i{opacity:1}
.pj-ep>span:nth-child(2){display:grid;min-width:0}
.pj-ep__t{font:600 13.5px/1.3 var(--head);color:var(--text);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pj-ep__d{display:block;font:400 12px/1 var(--body);color:var(--text-3);margin-top:4px}
.pj-tools{display:flex;gap:8px;align-items:center;margin-left:auto;flex-wrap:wrap}
.pj-tool{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 14px!important;border-radius:999px;border:1px solid var(--line-2)!important;font:600 13px/1 var(--head);color:var(--text-2)!important;transition:background .2s,color .2s}
.pj-tool:hover{background:var(--surface-2)!important;color:#fff!important}
.pj-tool svg{width:16px;height:16px}
.pj-seasons{display:flex;gap:4px;flex-wrap:wrap}
.pj-seasons a{display:inline-flex;align-items:center;height:36px;padding:0 12px;border-radius:999px;font:600 13px/1 var(--head);color:var(--text-2);border:1px solid var(--line)}
.pj-seasons a:hover{color:#fff}
.pj-seasons a[aria-current]{background:#fff;color:#070a12;border-color:#fff}
.pj-epgrid{display:grid;gap:20px 16px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:768px){.pj-epgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1200px){.pj-epgrid{grid-template-columns:repeat(4,minmax(0,1fr));gap:24px 20px}}
.pj-epgrid.is-busy{opacity:.5;pointer-events:none;transition:opacity .2s}
.pj-epc{display:block;min-width:0}
.pj-epc.pre{opacity:0;transform:translateY(10px)}
.pj-epc{transition:opacity .45s var(--ease),transform .45s var(--ease)}
.pj-epc__pic{display:block;position:relative;aspect-ratio:16/9;border-radius:var(--r-md);overflow:hidden;background:var(--bg-3)}
.pj-epc__pic img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.pj-epc:hover .pj-epc__pic img{transform:scale(1.045)}
.pj-epc__pic .n{position:absolute;left:10px;top:10px;padding:4px 8px;border-radius:6px;background:rgba(7,10,18,.7);font:700 12px/1 var(--display);color:#fff}
.pj-epc__pic .now{position:absolute;right:10px;top:10px;padding:4px 8px;border-radius:6px;background:var(--teal);font:700 11px/1 var(--head);color:#fff}
.pj-epc__t{margin-top:10px;font:600 14.5px/1.3 var(--head);color:var(--text);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pj-epc__d{display:block;margin-top:4px;font:400 12.5px/1 var(--body);color:var(--text-3)}
.pj-loadmore{display:flex;justify-content:center;margin-top:28px}
.pj-empty{padding:40px 16px;text-align:center;color:var(--text-2);border:1px dashed var(--line-2);border-radius:var(--r-md)}
.pj-empty b{display:block;font:700 18px/1.3 var(--head);color:var(--text);margin-bottom:6px}
/* кнопка «Сообщить о проблеме» на тёмном фоне */
.pj .pr-link{color:var(--text-3)!important}
.pj .pr-link:hover{color:#fff!important}

@media (prefers-reduced-motion:reduce){
  .pj *,.pj *::before,.pj *::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}
/* в колонке flex обёртка иначе растягивается по содержимому шире экрана */
.pj-show>.pj-wrap,.pj-hero>.pj-wrap{width:100%}
.pj-crumbs,.pj-tags,.pj-when-line{text-shadow:0 1px 12px rgba(7,10,18,.9)}
.pj-crumbs{color:var(--text-2)}