/* 3D vodorovná galéria projektov. Telefón: scroll-snap s veľkými kartami (ďalšia vykukuje), náklon a paralaxa podľa ťahu.
   Počítač: pripnutá vodorovná galéria (sticky), paralaxa, náklon pointerom aj ťahom myšou, zotrvačnosť.
   Pohyb kreslí js/gallery.js priamo do transform; tu je len základ. */
.gx{position:relative}
/* rám telefónu (rovnaký ako v css/mp.css, aby úvod nemusel načítať celý mp.css) */
.gx .device{position:absolute;left:0;top:0;width:413px;padding:10px;background:var(--surface);border-radius:56px;box-shadow:inset 0 0 0 2px #4a4a4e;transform:scale(var(--s));transform-origin:0 0}
.gx .screen-clip{position:relative;width:393px;height:852px;border-radius:46px;overflow:hidden;background:#000}
.gx .island{position:absolute;top:11px;left:50%;width:112px;height:32px;margin-left:-56px;border-radius:var(--r-2);background:#000;z-index:3;pointer-events:none}
.gx-bleed{margin-inline:calc(var(--gut) * -1)}
.gx-row{--cw:340px;position:relative;display:flex;gap:12px;align-items:stretch;margin:0;padding:6px var(--gut) 14px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gut);scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.gx-row::-webkit-scrollbar{display:none}
.gx-row:focus-visible{outline-offset:-3px}
.gx-card{position:relative;flex:0 0 min(84%,380px);scroll-snap-align:center;display:grid;align-content:start;gap:14px;padding:16px 16px 20px;border-radius:var(--r-2);background:var(--card);box-shadow:inset 0 0 0 2px var(--surface-3)}
.gx-shots{position:relative;height:198px;transform-style:preserve-3d;will-change:transform}
.gx-desk{position:absolute;left:0;top:0;width:88%;border-radius:var(--r-1);overflow:hidden;background:#000;box-shadow:0 14px 40px rgba(0,0,0,.5)}
.gx-desk img{display:block;width:100%;height:auto;aspect-ratio:1000/595;object-fit:cover;object-position:top}
.gx-desk video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity var(--dur-2)}
.gx-desk video.is-on{opacity:1}
.gx-desk.is-raw{padding-top:22px}
.gx-desk.is-raw img{aspect-ratio:1000/570}
.gx-bar{position:absolute;left:0;right:0;top:0;display:flex;align-items:center;gap:6px;height:22px;padding-left:10px;background:#e9e9ec}
.gx-bar i{display:block;width:7px;height:7px;border-radius:50%;background:#ff5f57}
.gx-bar i:nth-child(2){background:#febc2e}
.gx-bar i:nth-child(3){background:#28c840}
.gx-phone{--s:.227;position:absolute;right:0;bottom:0;width:calc(413px * var(--s));height:calc(872px * var(--s));filter:drop-shadow(0 10px 24px rgba(0,0,0,.55))}
.gx-phone .screen-clip{background:#000}
.gx-phone img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top}
html:not(.js) .gx img[data-src]{display:none}
.gx-glare{position:absolute;inset:0;z-index:2;border-radius:var(--r-1);background:radial-gradient(circle at var(--gx,50%) var(--gy,30%),rgba(255,255,255,.13),rgba(255,255,255,0) 58%);opacity:0;pointer-events:none;transition:opacity var(--dur-2)}
.gx-shots.is-lit .gx-glare{opacity:1}
.gx-no{color:var(--mute);font-size:var(--fs-xs);letter-spacing:.06em;margin-bottom:6px}
.gx-name{font-size:clamp(26px,7vw,38px);letter-spacing:-.035em;line-height:1.03}
.gx-cat{margin-top:6px;color:var(--mute);font-size:var(--fs-md);line-height:1.35}
.gx-sum{display:none;margin-top:10px;font-size:var(--fs-md);line-height:1.5;max-width:44ch}
.gx-tags{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-top:12px}
.gx-host{color:var(--mute);font-size:var(--fs-xs);overflow-wrap:anywhere}
.gx-open{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:48px;margin-top:12px;padding:0 20px;border-radius:var(--r-pill);box-shadow:inset 0 0 0 2px var(--field);font-size:var(--fs-md);font-weight:600;text-decoration:none;-webkit-tap-highlight-color:transparent}
.gx-open.gx-whole{margin-top:8px;padding:0;justify-content:flex-start;box-shadow:none;font-size:var(--fs-md)}
.gx-open.gx-whole::after{content:"";position:absolute;inset:0;z-index:5;border-radius:var(--r-2)}
.gx-open.gx-whole:focus-visible{outline:none}
.gx-card:has(.gx-open.gx-whole:focus-visible){outline:2px solid var(--focus);outline-offset:3px}
.gx-card:target{outline:2px solid var(--fg);outline-offset:3px}
.gx-group{flex:0 0 40%;scroll-snap-align:start;display:grid;align-content:center;padding:8px 6px 8px 0}
.gx-gname{font-size:clamp(34px,10vw,110px);font-weight:600;letter-spacing:-.05em;line-height:.96}
.gx-group .gx-gname{color:var(--bg);-webkit-text-stroke:3px var(--fg);paint-order:stroke fill}
.gx-gcount{margin-top:10px;color:var(--text-3);font-size:var(--fs-sm);letter-spacing:.06em;text-transform:uppercase}
.gx-end{flex:0 0 min(80%,340px);scroll-snap-align:start;display:grid;align-content:center;gap:8px;padding:8px 8px 8px 12px}
.gx-end .btn{justify-self:start;margin-top:12px}
.gx-end-d{display:none}
.gx-prog{position:relative;height:2px;margin-top:6px;background:var(--axis)}
.gx-prog i{position:absolute;inset:0;background:var(--fg);transform-origin:0 50%;transform:scaleX(var(--gp,0))}

/* počítač bez zníženého pohybu: pripnutá galéria, karty bez rámu, snímky dostávajú hĺbku */
@media (min-width:900px){
  .gx.is-pin .gx-track{position:relative;height:calc(100vh + var(--travel,1800px))}
  .gx.is-pin .gx-stick{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;flex-direction:column;justify-content:center}
  .gx.is-pin .gx-row{--cw:620px;display:flex;align-items:center;gap:90px;width:max-content;max-width:none;margin:0;padding:0 max(var(--gut),8vw);overflow:visible;scroll-snap-type:none;will-change:transform}
  .gx.is-pin .gx-group{flex:none;width:min(460px,34vw);padding:0}
  .gx.is-pin .gx-card{flex:none;width:var(--cw);padding:0;gap:22px;background:transparent;box-shadow:none;border-radius:0;cursor:default}
  .gx.is-pin .gx-shots{height:calc(var(--cw) * .66)}
  .gx.is-pin .gx-phone{--s:var(--ps,.4)}
  .gx.is-pin .gx-desk .gx-bar{height:calc(var(--cw) * .04)}
  .gx.is-pin .gx-desk.is-raw{padding-top:calc(var(--cw) * .04)}
  .gx.is-pin .gx-cap{padding-right:10%}
  .gx.is-pin .gx-sum{display:block}
  .gx.is-pin .gx-open.gx-whole::after{border-radius:0}
  .gx.is-pin .gx-end{flex:none;width:min(560px,40vw);padding:0}
  .gx.is-pin .gx-prog{position:absolute;left:max(var(--gut),8vw);right:max(var(--gut),8vw);bottom:34px;margin:0}
  .gx.is-pin.gx-stage .gx-stick{justify-content:center}
  .gx-end-m{display:none}
  .gx-end-d{display:grid}
  /* znížený pohyb: mriežka, bez pripnutia */
  .rm .gx .gx-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;margin:0;padding:6px 0 14px;overflow:visible}
  .rm .gx-group,.rm .gx-end{grid-column:1/-1}
  .rm .gx-card{flex:none}
  .rm .gx-shots{height:calc(min(46vw,520px) * .5)}
  .rm .gx-sum{display:block}
  .rm .gx-prog{display:none}
}
.rm .gx-glare{display:none}
@media (hover:hover) and (pointer:fine){
  .gx-open:not(.gx-whole):hover{box-shadow:inset 0 0 0 2px var(--fg)}
  .gx-card:hover .gx-open.gx-whole span:first-child{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}
  .gx.is-pin .gx-stick{cursor:grab}
  .gx.is-pin .gx-stick.is-drag{cursor:grabbing}
  .gx.is-pin .gx-stick.is-drag .gx-card{pointer-events:none}
}