/* fx/course-page.css - modul course-page
   lišta kapitol, galéria „Z kurzu“, FAQ, rámik variantu, pilulky kalendár/zdieľanie,
   mobilná lišta (štítky na CTA). Skryté stavy iba pod .motion. */

/* =====================================================
   LIŠTA KAPITOL - nulová výška v toku, 44 px lišta pod hlavičkou
   ===================================================== */
#viewCourse .chapbar{
  position:sticky; top:var(--top-h); z-index:90; display:block;
  height:0; margin-inline:calc(50% - 50vw);
  /* hlavička na mobile odchádza (--hdr): posun iba transformom */
  transform:translate3d(0, calc(var(--hdr, var(--top-h)) - var(--top-h)), 0);
  transition:transform .35s var(--ease); /* rovnako ako .top v menu-header */
  pointer-events:none;
}
#viewCourse .chapbar:empty{ display:none; }
.chapbar__bar{
  position:relative; height:44px; overflow:hidden;
  background:#fff; border-bottom:1px solid rgba(29,31,29,.08);
  box-shadow:0 10px 30px -26px rgba(29,31,29,.35);
  transform:translate3d(0,-100%,0); opacity:0; visibility:hidden; pointer-events:none;
  transition:transform .26s var(--ease), opacity .26s var(--ease), visibility 0s linear .26s;
}
.chapbar.is-on .chapbar__bar{
  transform:none; opacity:1; visibility:visible; pointer-events:auto;
  transition:transform .38s var(--ease), opacity .38s var(--ease), visibility 0s;
}
.chapbar__in{
  position:relative; display:flex; align-items:stretch; height:100%;
  overflow-x:auto; overflow-y:hidden; scrollbar-width:none; overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;
}
.chapbar__in::-webkit-scrollbar{ display:none; }
.chapbar__in button{
  flex:none; display:flex; align-items:center; height:100%; padding:.18rem .9rem 0;
  background:none; border:0; cursor:pointer; white-space:nowrap;
  font-family:var(--display); font-size:1rem; letter-spacing:.1em; text-transform:uppercase; line-height:1;
  color:var(--muted); transition:color .25s var(--ease);
}
.chapbar__in button:first-of-type{ padding-left:0; }
.chapbar__in button.is-active{ color:var(--ink); }
.chapbar__in button:focus-visible{ outline:2px solid var(--green); outline-offset:-6px; border-radius:10px; }
.chapbar__ind{
  position:absolute; left:0; bottom:0; width:100px; height:2px; border-radius:2px 2px 0 0;
  background:var(--grad); transform-origin:0 0; transform:scaleX(0);
  opacity:0; pointer-events:none;
  transition:transform .45s var(--ease), opacity .25s var(--ease);
}
.chapbar__ind.is-ready{ opacity:1; }
.chapbar__fade{ display:none; }
@media (hover:hover) and (pointer:fine){
  .chapbar__in button:hover{ color:var(--green-ink); }
  .chapbar__in button.is-active:hover{ color:var(--ink); }
}
@media (max-width:960px){
  .chapbar__in{
    width:100%;
    padding-inline:max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right));
    scroll-padding-inline:var(--gutter);
  }
  .chapbar__in button{ padding-inline:.8rem; }
  .chapbar__in button:last-of-type{ margin-right:var(--gutter); }
  .chapbar__fade{
    display:block; position:absolute; top:0; right:0; bottom:0; width:48px; pointer-events:none;
    background:linear-gradient(to left, #fff 20%, rgba(255,255,255,0));
    transition:opacity .25s var(--ease);
  }
  .chapbar.is-end .chapbar__fade:not(.chapbar__fade--l){ opacity:0; }
  /* ľavý okraj: zjaví sa, až keď prvá kapitola odíde pod okraj (.is-fl z JS) */
  .chapbar__fade--l{ left:0; right:auto; background:linear-gradient(to right, #fff 20%, rgba(255,255,255,0)); opacity:0; }
  .chapbar.is-fl .chapbar__fade--l{ opacity:1; }
}
@media (max-height:480px){ #viewCourse .chapbar{ display:none; } }

/* cieľ skoku z lišty - pristane pod lištou; fokus bez rámčeka na celej sekcii */
#viewCourse .course__sec{ scroll-margin-top:calc(var(--hdr, var(--top-h)) + 56px); }
#viewCourse .course__sec:focus{ outline:none; }

/* desktop: karta s cenou uhne lište (transform, nie top), iba keď sa celá zmestí (.cp-fit z JS),
   inak by posun vytlačil hlavné tlačidlo pod okraj */
@media (min-width:961px){
  #viewCourse .buybox, #viewCourse .buybox__card{ transition:transform .38s var(--ease); }
  #viewCourse.has-chapbar.cp-fit:not(.cp-long) .buybox{ transform:translate3d(0,44px,0); }
  /* stĺpec (karta + „Mohlo by vás zaujímať“) je vyšší než okno: lepí sa iba karta,
     odporúčania čakajú na konci stĺpca a nikdy nie sú odrezané spodkom okna */
  #viewCourse.cp-long .buybox{ position:static; align-self:stretch; display:flex; flex-direction:column; }
  #viewCourse.cp-long .buybox__pin{ flex:1 0 auto; }
  #viewCourse.cp-long .buybox__card{ position:sticky; top:112px; }
  #viewCourse.cp-long.has-chapbar.cp-fit .buybox__pin{ padding-bottom:44px; }
  #viewCourse.cp-long.has-chapbar.cp-fit .buybox__card{ transform:translate3d(0,44px,0); }
}

/* =====================================================
   GALÉRIA „Z KURZU“
   ===================================================== */
.cgal__head{ display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; }
.cgal__head h2{ margin-bottom:1.2rem; }
.cgal__nav{ display:flex; gap:.5rem; margin-bottom:1.35rem; }
.cgal__btn{
  width:36px; height:36px; border-radius:50%; display:grid; place-items:center; cursor:pointer;
  background:rgba(255,255,255,.9); border:1px solid var(--line); color:var(--ink);
  box-shadow:0 6px 16px -10px rgba(29,31,29,.35);
  transition:opacity .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}
.cgal__btn svg{ width:9px; height:11px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.cgal__btn[disabled]{ opacity:.3; cursor:default; }
@media (hover:hover) and (pointer:fine){
  .cgal__btn:not([disabled]):hover{ border-color:var(--green); color:var(--green-ink); }
  .cgal__item:hover img{ transform:scale(1.04); }
}
.cgal__strip{
  display:flex; gap:14px; overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x proximity; scrollbar-width:none; overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch;
  /* nulový príspevok k min-content: pás nerozťahuje stĺpec gridu */
  width:0; min-width:100%;
  outline:none;
}
.cgal__strip::-webkit-scrollbar{ display:none; }
.cgal__strip:focus-visible{ box-shadow:0 0 0 2px var(--green); border-radius:var(--r); }
.cgal__item{
  position:relative; flex:none; display:block; height:clamp(220px, 28vw, 320px);
  border-radius:var(--r); overflow:hidden; scroll-snap-align:start; background:var(--bg-2);
  -webkit-mask-image:-webkit-radial-gradient(white, black); /* Safari: zaoblenie pri škálovaní */
}
.cgal__item img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 1.1s var(--ease);
}
.cgal__play{ left:10px; bottom:10px; padding:.4rem .55rem; }
@media (max-width:960px){
  .cgal__strip{
    gap:10px; margin-inline:calc(-1 * var(--gutter)); padding-inline:var(--gutter);
    scroll-padding-inline:var(--gutter); min-width:calc(100% + 2 * var(--gutter));
  }
  .cgal__item{ height:auto; width:78vw; }
  .cgal__item--tall{ width:62vw; max-height:78vw; }
}
/* vstup prvých piatich snímok - uvoľní ho nadpis, keď ho jadro označí .is-in */
.motion .cgal__item{ transition:opacity .7s var(--ease), transform .7s var(--ease); transition-delay:calc(var(--i, 0) * 70ms + 80ms); }
.motion .cgal:has(.cgal__head h2:not(.is-in)) .cgal__item:nth-child(-n+5){ opacity:0; transform:translate3d(40px,0,0); }

/* =====================================================
   FAQ
   ===================================================== */
#viewCourse .faq summary{ min-height:52px; align-items:center; padding-block:.35rem; }
#viewCourse .faq__ico{ margin-top:0; }
.faq__ico::after{ transition:transform .3s var(--ease), opacity .3s var(--ease); }
.faq details[open]:not(.is-closing) .faq__ico::after{ transform:rotate(0deg); opacity:0; }
.faq details[open].is-closing .faq__ico::after{ transform:rotate(90deg); opacity:1; }
.motion .faq__a p{ opacity:0; transform:translate3d(0,-6px,0); transition:opacity .32s .06s var(--ease), transform .32s .06s var(--ease); }
.motion .faq details[open]:not(.is-closing) .faq__a p{ opacity:1; transform:none; }
.motion .faq details.is-closing .faq__a p{ transition-duration:.18s; transition-delay:0s; }

/* =====================================================
   VARIANTY - posuvný rámik nad štítkami
   ===================================================== */
.variants--js .variants__ind{
  position:absolute; left:0; right:0; top:0; z-index:2; height:0;
  border:1.5px solid var(--green); border-radius:var(--r-s);
  box-shadow:0 0 0 4px rgba(58,170,55,.08);
  pointer-events:none; opacity:0;
  transition:transform .42s var(--ease), height .42s var(--ease), opacity .2s var(--ease);
}
.variants--js .variants__ind.is-ready{ opacity:1; }
.variants--js .variant:has(input:checked){ border-color:var(--line); }

/* =====================================================
   KALENDÁR + ZDIEĽANIE
   ===================================================== */
.buybox__tools, .course__tools{ position:relative; }
.course__tools{ display:none; flex-wrap:wrap; gap:.5rem; margin-top:1.2rem; }
@media (max-width:960px){ .course__tools{ display:flex; } .buybox__tools{ display:none; } }
.tool{
  display:inline-flex; align-items:center; gap:.5rem; cursor:pointer;
  padding:.5rem .95rem; border-radius:999px; border:1.5px solid var(--line); background:#fff; color:var(--ink);
  font-family:var(--sans); font-size:.85rem; font-weight:500; line-height:1; white-space:nowrap;
  transition:border-color .25s var(--ease), color .25s var(--ease), transform .3s var(--ease);
}
@media (hover:none){ .tool{ min-height:44px; } }
@media (max-width:960px){
  .buybox__tools, .course__tools{ gap:.4rem; }
  .tool{ padding:.5rem .72rem; gap:.4rem; font-size:.8rem; }
}
.tool__ico{ position:relative; display:inline-block; width:18px; height:18px; flex:none; }
.tool__svg{
  position:absolute; inset:0; width:18px; height:18px;
  fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round;
  transition:opacity .22s var(--ease), transform .22s var(--ease);
}
.tool__svg--b{ opacity:0; transform:scale(.85); color:var(--green-ink); stroke-width:1.8; }
.is-done .tool__svg--a{ opacity:0; transform:scale(.85); }
.is-done .tool__svg--b{ opacity:1; transform:none; }
.tool.is-done{ border-color:rgba(58,170,55,.45); color:var(--green-ink); }
@media (hover:hover) and (pointer:fine){
  .tool:hover{ border-color:var(--green); color:var(--green-ink); }
}
.tool-pop{
  position:absolute; z-index:5; min-width:190px; display:grid; padding:.35rem;
  background:#fff; border:1px solid var(--line); border-radius:16px;
  box-shadow:0 18px 44px -20px rgba(29,31,29,.3);
  opacity:0; transform:translate3d(0,-6px,0) scale(.98); transform-origin:12px 0; pointer-events:none;
  transition:opacity .22s var(--ease), transform .22s var(--ease);
}
.tool-pop.is-open{ opacity:1; transform:none; pointer-events:auto; }
.tool-pop > *{
  display:block; text-align:left; padding:.62rem .8rem; border-radius:11px; border:0; background:none; cursor:pointer;
  font:500 .86rem/1.2 var(--sans); color:var(--ink); transition:background .2s var(--ease), color .2s var(--ease);
}
.tool-pop > *:hover, .tool-pop > *:focus-visible{ background:var(--bg-2); color:var(--green-ink); outline:none; }
.tool--cart{ margin:.2rem 0 .8rem; }
.tool--cart .tool__ico{ margin-right:.1rem; }

/* =====================================================
   MOBILNÁ LIŠTA - CTA: štítky naskladané v jednej bunke (šírka sa nemení)
   ===================================================== */
.js .stickybar__cta{ display:inline-grid; place-items:center; }
.js .stickybar__cta .lbl{ display:inline-flex; align-items:center; gap:.4rem; grid-area:1 / 1; visibility:hidden; }
.js .stickybar__cta[data-state="add"] .lbl--add,
.js .stickybar__cta[data-state="in"] .lbl--in,
.js .stickybar__cta[data-state="sold"] .lbl--sold{ visibility:visible; }