/* Predmeti: one player, a tab per subject. The slides sit side by side in a scroll-snap track,
   so the tabs (desktop) and a swipe (phone) move the same thing. Videos are attached by
   predmeti-films.js only when the section is near and play only while it is in view. */
.pf{margin-top:8px}
.pf-tabs{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:4px 2px 16px;-webkit-overflow-scrolling:touch}
.pf-tabs::-webkit-scrollbar{display:none}
.pf-tab{flex:0 0 auto;display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:10px 18px;border-radius:999px;border:2px solid var(--line);background:#fff;color:var(--ink);font-family:'Nunito',sans-serif;font-weight:800;font-size:15px;line-height:1;cursor:pointer;transition:background .18s ease,color .18s ease,border-color .18s ease}
.pf-tab i{width:10px;height:10px;border-radius:50%;background:var(--c);flex:0 0 auto}
.pf-tab:hover{border-color:var(--ink-2)}
.pf-tab[aria-selected="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.pf-tab:focus-visible,.pf-toggle:focus-visible{outline:3px solid var(--blue-3);outline-offset:2px}

.pf-track{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;padding-bottom:26px;margin-bottom:-26px}
.pf-track::-webkit-scrollbar{display:none}
.pf-slide{flex:0 0 100%;min-width:0;scroll-snap-align:center;display:grid;grid-template-columns:minmax(0,1.78fr) minmax(0,1fr);background:#fff;border:1px solid var(--line);border-radius:28px;box-shadow:var(--shadow-card);overflow:hidden}
.pf-media{position:relative;aspect-ratio:16/9;background:var(--bgc,#0a3f99)}
.pf-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.pf-toggle{position:absolute;right:14px;bottom:14px;width:44px;height:44px;border-radius:50%;border:0;padding:0;display:grid;place-items:center;background:rgba(15,27,51,.62);color:#fff;cursor:pointer}
.pf-toggle svg{width:18px;height:18px;display:block}
.pf-toggle .pf-ic-play{display:none}
.pf-toggle[data-state="paused"] .pf-ic-play{display:block}
.pf-toggle[data-state="paused"] .pf-ic-pause{display:none}

.pf-info{display:flex;flex-direction:column;justify-content:center;gap:12px;padding:32px 32px 30px;min-width:0}
.pf-grade{align-self:flex-start;font-family:'Nunito',sans-serif;font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:6px 12px;border-radius:999px;color:var(--ink);background:var(--bg-2);border:1px solid var(--line)}
.pf-grade::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--c);margin-right:7px}
.pf-name{font-family:'Nunito',sans-serif;font-weight:800;font-size:30px;line-height:1.1;letter-spacing:-.01em;color:var(--ink);margin:0}
.pf-intro{font-size:16px;line-height:1.5;color:var(--ink-2);margin:0}
.pf-counts{display:flex;gap:26px;margin-top:2px}
.pf-counts b{display:block;font-family:'Nunito',sans-serif;font-weight:800;font-size:24px;line-height:1.1;color:var(--ink);font-variant-numeric:tabular-nums}
.pf-counts span{font-size:13px;color:var(--muted)}
.pf-film{font-size:13.5px;line-height:1.45;color:var(--muted);border-top:1px solid var(--line);padding-top:12px;margin:2px 0 0}
.pf-film b{color:var(--ink);font-weight:700}
.pf-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.pf-cta .btn{padding:13px 20px}
.pf-hint{display:none;font-size:13px;color:var(--muted);text-align:center;margin:14px 0 0}

@media (max-width:1000px){
  .pf-slide{grid-template-columns:1fr}
  .pf-info{padding:24px 24px 26px}
}
@media (max-width:640px){
  .pf-track{gap:12px}
  .pf-slide{flex-basis:88%;border-radius:22px}
  .pf-media{aspect-ratio:1/1}
  .pf-info{padding:18px 18px 20px;gap:10px}
  .pf-name{font-size:24px}
  .pf-intro{font-size:15px}
  .pf-cta .btn{width:100%;justify-content:center}
  .pf-hint{display:block}
}
@media (prefers-reduced-motion:reduce){
  .pf-tab{transition:none}
}

/* The same films in a subject page's hero (hero-film.js). */
.hf{margin:0;width:min(100%,400px)}
.hf-media{position:relative;aspect-ratio:1/1;border-radius:26px;overflow:hidden;background:var(--bgc,#0a44a8);border:1px solid rgba(255,255,255,.2);box-shadow:0 28px 60px -22px rgba(0,0,0,.55)}
.hf-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.hf figcaption{margin-top:12px;font-size:13.5px;line-height:1.5;color:rgba(255,255,255,.82)}
.hf figcaption b{color:#fff;font-weight:700}
.hf figcaption a{color:#fff;font-weight:700;text-decoration:underline;text-underline-offset:3px;display:inline-block;padding:6px 0}
@media (max-width:980px){
  .ph-aside.ph-film{display:flex;justify-content:flex-start}
  .hf{width:min(100%,440px)}
}