/* fx/chip-rail.css - modul chip-rail
   Mobil (<=760px): lepivá lišta kategórií s kapsulami, posuvná tmavá kapsula
   pod aktívnou kategóriou a jemné stmievanie okrajov (dve prekryvné vrstvy
   na nescrollujúcej .chipbar, žiadna maska na scrolleri).
   Všetko je viazané na .cr, ktorú pridá chip-rail.js - bez JS (alebo ak modul
   zlyhá) zostáva základný vzhľad záložiek zo site.css.
   Desktop (761px+) sa nemení; FLIP preusporiadanie dlaždíc rieši iba JS. */

/* mriežka sa pri prepnutí kategórie plynulo zmenšuje/zväčšuje; scroll anchoring by pri tom
   skokom posunul stránku - dlaždice preto nie sú kandidátmi na kotvu */
.chipbar.cr ~ #tiles{ overflow-anchor:none; }

/* strážca pre IntersectionObserver: absolútny v statickej polohe (bez top/left), mimo toku -
   neblokuje skladanie okrajov medzi hlavičkou sekcie a lištou */
.cr-sentinel{ position:absolute; display:block; width:1px; height:1px; pointer-events:none; visibility:hidden; }

@media (max-width:760px){
  .chipbar.cr{
    position:sticky; top:var(--top-h); z-index:50;
    margin-inline:calc(-1 * var(--gutter));
    margin-top:clamp(1rem, 4vw, 1.4rem); margin-bottom:1.1rem;
    background:rgba(255,255,255,0);
    box-shadow:0 1px 0 rgba(230,230,227,0);
    transform:translate3d(0, var(--cr-y, 0px), 0);
    transition:background-color .2s linear, box-shadow .2s linear;
  }
  /* hlavička je preč (html.hdr-away): lišta sa lepí rovno na vrch, JS to prepne ešte pred prilepením */
  .chipbar.cr.cr-top0{ top:0; }
  .chipbar.cr.is-stuck{ background:#fff; box-shadow:0 1px 0 var(--line); }   /* nepriehľadná: dlaždice pod ňou nepresvitajú */
  /* prilepená lišta nasleduje hlavičku transformom (--cr-y nastavuje chip-rail.js) */
  .motion .chipbar.cr{
    transition:background-color .2s linear, box-shadow .2s linear, transform .38s var(--ease);
  }

  /* stmievanie okrajov - vrstvy nad kapsulami, iba opacita */
  .chipbar.cr::before,
  .chipbar.cr::after{
    content:""; position:absolute; top:0; bottom:0; width:32px; z-index:3;
    pointer-events:none; opacity:0; transition:opacity .2s linear;
  }
  .chipbar.cr::before{ left:0;  background:linear-gradient(90deg, #fff 18%, rgba(255,255,255,0)); }
  .chipbar.cr::after{  right:0; background:linear-gradient(270deg, #fff 18%, rgba(255,255,255,0)); }
  .chipbar.cr.is-fl::before,
  .chipbar.cr.is-fr::after{ opacity:1; }

  .cr .filters{
    display:flex; flex-wrap:nowrap; justify-content:flex-start; gap:.5rem;
    margin:0; padding:.6rem max(var(--gutter), env(safe-area-inset-right)) .6rem max(var(--gutter), env(safe-area-inset-left));
    border:0; border-radius:0; background:none;
    overflow-x:auto; overflow-y:hidden; overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch;
    scrollbar-width:none; scroll-padding-inline:var(--gutter);
    isolation:isolate;
  }
  .cr .filters::-webkit-scrollbar{ display:none; }
  .cr .filters.is-fit{ justify-content:center; }

  /* kapsula: sivé lôžko; aktívnu prekryje tmavá kapsula s bielou kópiou popisu */
  .cr .filter{
    flex:none; display:inline-flex; align-items:center; justify-content:center;
    height:40px; padding:.12em 1.05rem 0; border-radius:999px; background:var(--bg-2);
    font-size:1.08rem; letter-spacing:.08em; line-height:1; color:var(--ink);
    -webkit-tap-highlight-color:transparent;
  }
  .cr .filter + .filter::before{ content:none; }
  .cr .filter::after{ content:""; position:absolute; inset:-2px -3px; }   /* 44 px dotyková plocha */
  .cr .filter.is-active{ color:var(--ink); }

  .cr .filters__ind{
    display:block; position:absolute; left:0; top:0; height:40px; width:0; overflow:hidden;
    border-radius:999px; background:var(--ink); z-index:3; opacity:0; pointer-events:none;
    transition:none;
  }
  .cr .filters__ind.is-ready{ opacity:1; }
  .cr-ink{ position:absolute; left:0; top:0; display:block; }
  .cr-ink__t{
    position:absolute; left:0; top:0; display:flex; align-items:center; justify-content:center;
    padding:.12em 0 0; white-space:nowrap;
    font-family:var(--display); font-size:1.08rem; letter-spacing:.08em; line-height:1;
    text-transform:uppercase; color:#fff;
  }
  .motion .cr .filters__ind{ transition:transform .42s var(--ease), clip-path .42s var(--ease), -webkit-clip-path .42s var(--ease); }
  /* bez podpory orezu (html.no-clip) zostáva prechod šírky */
  .motion.no-clip .cr .filters__ind{ transition:transform .42s var(--ease), width .42s var(--ease); }
  .motion .cr .cr-ink{ transition:transform .42s var(--ease); }
}

@media (max-width:760px) and (hover:hover){
  .cr .filter:hover{ color:var(--ink); background:var(--bg-3); }
}
/* desktop: kópia sa neukazuje (jadro kreslí podčiarknutie) */
@media (min-width:761px){ .cr-ink{ display:none; } }

@media (prefers-reduced-motion:reduce){
  .chipbar.cr, .chipbar.cr::before, .chipbar.cr::after{ transition:none; }
  .cr .filters__ind, .cr-ink{ transition:none !important; }
}