/* fx/media-engine.css - modul media-engine: ambientné video v slotoch .media, náhľady dlaždíc,
   filmová pilulka na fotke kurzu, bodka prehrávania lektora, Kino (svetlý prehliadač) */

/* ---------- ambientné video (vytvára ho len JS, nikdy pod reduced motion) ---------- */
.me-vid{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;
  opacity:0; pointer-events:none; background:transparent;
  transition:opacity .3s var(--ease), transform 1.1s var(--ease);
}
.is-playing .me-vid{ opacity:1; transition:opacity .6s var(--ease), transform 1.1s var(--ease); }
html.no-autoplay .me-vid{ display:none; }

/* dlaždica: video leží v .tile__media pod gradientom ::after (z-index 1) */
.tile__vid{ z-index:0; }
.tile--sold .tile__vid{ filter:grayscale(.5); }

/* ---------- klikateľné médiá ---------- */
[data-kino]{ cursor:pointer; }
.course__photo[data-kino]:focus-visible,
.vcard:focus-visible{ outline:2px solid var(--green); outline-offset:4px; }

/* filmová pilulka na fotke kurzu a na videovizitke */
.course__photo .pill-play,
.vcard .pill-play{
  background:rgba(255,255,255,.78);
  -webkit-backdrop-filter:blur(12px) saturate(1.4); backdrop-filter:blur(12px) saturate(1.4);
  transition:background-color .2s var(--ease);
}
.course__photo .pill-play{ z-index:3; }
.pill-play--right{ left:auto; right:14px; }
@media (max-width:760px){
  .course__photo .pill-play,
  .vcard .pill-play{ height:40px; padding:0 .95rem; font-size:.85rem; }
}

/* videovizitka a bodka prehrávania na karte lektora */
.vcard img{ transition:transform .9s var(--ease); }
.person__play{
  -webkit-backdrop-filter:blur(8px) saturate(1.3); backdrop-filter:blur(8px) saturate(1.3);
  overflow:hidden;
}
.person__play::before{
  content:""; position:absolute; inset:0; border-radius:inherit; background:var(--grad);
  opacity:0; transition:opacity .2s var(--ease);
}
.person__play svg{ position:relative; transition:fill .2s var(--ease); }

@media (hover:hover) and (pointer:fine){
  .vcard:hover img{ transform:scale(1.03); }
  .vcard:hover .pill-play,
  .course__photo[data-kino]:hover .pill-play{ background:rgba(255,255,255,.96); }
  .person:hover .person__play::before{ opacity:1; }
  .person:hover .person__play svg{ fill:#fff; }
  .tile:hover .tile__vid{ transform:scale(1.05); }
}

/* =====================================================
   KINO - svetlý prehliadač fotiek a filmov (#kino z jadra)
   ===================================================== */
.kino{
  --kx:clamp(16px, 4vw, 64px);
  --ky:clamp(68px, 9vh, 92px);
  color:var(--ink); overscroll-behavior:contain;
}
.kino__bg{
  position:absolute; inset:0; z-index:0; touch-action:none;
  background:rgba(245,245,247,.96);
  -webkit-backdrop-filter:blur(18px) saturate(1.2); backdrop-filter:blur(18px) saturate(1.2);
}
.kino.is-dragging .kino__bg{ -webkit-backdrop-filter:none; backdrop-filter:none; background:rgba(245,245,247,.98); }

.kino__track{
  position:absolute; inset:0; z-index:1; display:flex;
  overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; scroll-behavior:auto;
  scrollbar-width:none; -webkit-overflow-scrolling:touch; outline:0;
}
.kino__track::-webkit-scrollbar{ display:none; }
.kino__slide{
  flex:0 0 100%; width:100%; height:100%; box-sizing:border-box;
  display:flex; align-items:center; justify-content:center;
  scroll-snap-align:center; scroll-snap-stop:always;
  padding:calc(var(--ky) + env(safe-area-inset-top)) calc(var(--kx) + env(safe-area-inset-right))
          calc(var(--ky) + env(safe-area-inset-bottom)) calc(var(--kx) + env(safe-area-inset-left));
}
.kino__media{
  position:relative; flex:none; overflow:hidden; border-radius:14px; background:var(--bg-3, #ececee);
  aspect-ratio:var(--ar, 1.5);
  width:min(100%, calc((100vh - 2 * var(--ky) - env(safe-area-inset-top) - env(safe-area-inset-bottom)) * var(--ar, 1.5)));
  width:min(100%, calc((100svh - 2 * var(--ky) - env(safe-area-inset-top) - env(safe-area-inset-bottom)) * var(--ar, 1.5)));
  transform-origin:0 0;
}
.kino__media > img,
.kino__media > video,
.kino__embed,
.kino__embed > *{ position:absolute; inset:0; width:100%; height:100%; display:block; border:0; object-fit:cover; }
.kino__media > video{ object-fit:contain; background:var(--bg-3, #ececee); }
.kino__hi{ opacity:0; transition:opacity .4s var(--ease); }
.kino__hi.is-loaded{ opacity:1; }

/* ovládanie */
.kino__ui{ position:absolute; inset:0; z-index:2; pointer-events:none; }
.kino__ui > *{ pointer-events:auto; }
.kino__count{
  position:absolute; top:calc(env(safe-area-inset-top) + 26px); left:calc(env(safe-area-inset-left) + 22px);
  font-family:var(--display); font-size:1.1rem; letter-spacing:.14em; line-height:1; color:var(--muted);
  font-variant-numeric:tabular-nums; pointer-events:none;
}
.kino__count b{ font-weight:400; color:var(--ink); }
.kino.is-single .kino__count,
.kino.is-single .kino__nav{ display:none; }
.kino__close,
.kino__nav{
  position:absolute; display:flex; align-items:center; justify-content:center; padding:0; border:0;
  border-radius:50%; color:var(--ink); cursor:pointer; -webkit-tap-highlight-color:transparent;
}
.kino__close{
  top:calc(env(safe-area-inset-top) + 14px); right:calc(env(safe-area-inset-right) + 14px);
  width:44px; height:44px; background:rgba(255,255,255,.92); box-shadow:var(--shadow-soft);
  transition:background-color .2s var(--ease);
}
.kino__close svg{ width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; }
.kino__nav{
  top:50%; margin-top:-20px; width:40px; height:40px;
  background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:blur(12px) saturate(1.3); backdrop-filter:blur(12px) saturate(1.3);
  box-shadow:var(--shadow-soft);
  opacity:0; pointer-events:none; transition:opacity .3s var(--ease), background-color .2s var(--ease);
}
.kino__nav--prev{ left:calc(env(safe-area-inset-left) + 22px); }
.kino__nav--next{ right:calc(env(safe-area-inset-right) + 22px); }
.kino__nav--next .ico-chev{ transform:scaleX(-1); }
.kino__nav .ico-chev{ width:10px; height:12px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.kino.is-ui .kino__nav:not([disabled]){ opacity:1; pointer-events:auto; }
.kino__nav[disabled]{ opacity:0 !important; pointer-events:none !important; }
.kino__close:focus-visible,
.kino__nav:focus-visible{ outline:2px solid var(--green); outline-offset:3px; opacity:1; }
@media (hover:hover) and (pointer:fine){
  .kino__close:hover,
  .kino__nav:hover{ background:#fff; }
}
@media (hover:none){ .kino__nav{ display:none; } }
@media (max-width:760px){
  .kino{ --kx:12px; --ky:76px; }
}
@media (prefers-reduced-motion: reduce){ .me-vid{ display:none; } }