/* Sociálne siete ako horizontálny pás (Claude, 31. 10. 2026, faza2-88).
   PC: sekcia sa pri rolovaní na chvíľu pripne a štyri karty prejdú zľava doprava (rolovanie nadol = posun pásu).
   Mobil a obmedzený pohyb: karty sa prechádzajú prstom do strán (natívne, so zachytením na kartu).
   Pôvodné social.css ostáva (farby, karty, typografia); tu je len rozloženie pásu. ChatGPT: doladiť môžeš tu. */
.social{overflow-x:clip;padding-bottom:70px}
.social .section-meta{margin-bottom:0}
.social{--strip-card-w:clamp(280px,23vw,400px);--strip-gap:clamp(18px,1.8vw,30px)}

/* Krokovanie a stav pásu pod kartami */
.social-strip-hint{display:none;align-items:center;justify-content:flex-start;gap:18px;margin-top:22px;color:#a6b3a8;font-size:11px;letter-spacing:.04em}
.social-strip-hint .social-strip-steps{display:flex;gap:8px;order:-1}
.social-strip-hint button{display:grid;place-items:center;width:44px;height:44px;border:1px solid #e9e8df40;border-radius:50%;background:transparent;color:var(--paper);font:inherit;font-size:16px;cursor:pointer;transition:background .25s,color .25s,opacity .25s}
.social-strip-hint button:hover:not(:disabled){background:var(--paper);color:var(--ink)}
.social-strip-hint button:disabled{opacity:.3;cursor:default}

/* ---------- PC: pripnutý pás ---------- */
@media(min-width:701px) and (prefers-reduced-motion:no-preference){
 .social-pin{position:relative;height:calc(100vh + var(--social-travel,0px))}
 .social-pin>.social-layout{position:sticky;top:0;height:100vh;min-height:560px;display:flex;align-items:center;gap:clamp(36px,4.5vw,80px)}
 .social-pin .social-intro{position:relative;top:auto;flex:0 0 clamp(250px,25vw,390px);padding:0}
 .social-pin .social h2,.social-pin h2{font-size:clamp(46px,4.6vw,82px)}
 .social-pin .social-intro>.serif{font-size:clamp(23px,2vw,33px);margin-top:26px}
 .social-pin .social-copy{margin-top:16px}
 .social-pin .social-index{margin-top:34px}
 .social-pin .social-cards{display:flex;flex-wrap:nowrap;gap:var(--strip-gap);padding:0;will-change:transform;transform:translate3d(calc(var(--social-shift,0) * -1px),0,0)}
 .social-pin .social-card{flex:0 0 var(--strip-card-w);width:var(--strip-card-w)}
 .social-pin .social-photo{aspect-ratio:1.08}
 .social-pin .social-platform-name{font-size:clamp(32px,2.7vw,48px)}
 .social-pin .social-card-meta{align-items:flex-start;gap:14px;padding:20px 22px 22px}
 .social-pin .social-card-description{font-size:14px}
 .social-pin .social-follow{font-size:0;gap:0}
 .social-strip-hint{display:flex}
}

/* ---------- Mobil a obmedzený pohyb: potiahnutie prstom ---------- */
@media(max-width:700px),(prefers-reduced-motion:reduce){
 .social-pin{height:auto}
 .social-pin>.social-layout{display:block}
 .social-pin .social-intro{position:relative;top:auto;padding:0;margin:0 0 30px}
 .social-pin .social-cards{display:flex;flex-wrap:nowrap;gap:14px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);margin-inline:calc(var(--gutter) * -1);padding:4px var(--gutter) 10px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
 .social-pin .social-cards::-webkit-scrollbar{display:none}
 .social-pin .social-card{flex:0 0 min(82vw,360px);scroll-snap-align:start;clip-path:none!important}
 .social-pin .social-photo{aspect-ratio:1.12}
 .social-strip-hint{display:flex}
}
@media(max-width:700px){
 .social{padding-bottom:56px}
 .social-pin{margin-top:38px}
 .social-pin h2{font-size:clamp(44px,11vw,64px)}
 .social-pin .social-intro>.serif{font-size:25px;margin-top:20px}
 .social-pin .social-copy{display:none}
 .social-pin .social-index{margin-top:22px}
}
@media(min-width:701px) and (prefers-reduced-motion:reduce){
 .social-pin{margin-top:60px}
 .social-pin .social-card{flex-basis:var(--strip-card-w)}
}

.social-pin+.social-footnote{margin-top:18px}
@media(min-width:701px) and (prefers-reduced-motion:no-preference){.social-strip-hint{position:absolute;left:0;bottom:clamp(22px,4vh,46px);width:clamp(250px,25vw,390px)}.social-pin>.social-layout{padding-bottom:40px}}

/* PC: karty pri posune zachádzajú pod úvodný text (nie cez neho) – úvod má vlastné pozadie a jemný prechod. */
@media(min-width:701px) and (prefers-reduced-motion:no-preference){
 .social-pin .social-intro{align-self:stretch;display:flex;flex-direction:column;justify-content:center;z-index:2;isolation:isolate}
 .social-pin .social-intro::before{content:'';position:absolute;z-index:-1;top:0;bottom:0;right:0;left:calc(-1 * var(--gutter) - 2px);background:#19211e}
 .social-pin .social-intro::after{content:'';position:absolute;z-index:-1;top:0;bottom:0;left:100%;width:clamp(30px,3vw,60px);background:linear-gradient(90deg,#19211e,#19211e00)}
 .social-strip-hint{z-index:3}
}

/* Rozbaľovanie kariet podľa polohy v páse (faza2-89): --social-focus 0 … 1 nastavuje social-strip.js. */
.social-pin .social-card{--social-focus:1;will-change:transform}
.social-pin .social-card-meta{opacity:calc(.48 + .52 * var(--social-focus));transition:opacity .2s linear}
.social-pin .social-photo>:is(img,.social-art){transform:translateY(var(--social-image-y,0px)) scale(calc(1.22 - .1 * var(--social-focus)))}
.social-pin .social-photo::before{content:'';position:absolute;inset:0;background:#09110b;opacity:calc(.42 - .42 * var(--social-focus));pointer-events:none}
@media(min-width:701px) and (prefers-reduced-motion:no-preference){
 .social-pin .social-cards{cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none}
 .social-pin .social-cards.is-dragging{cursor:grabbing}
 .social-pin .social-cards.is-dragging .social-card{pointer-events:none}
}
@media(prefers-reduced-motion:reduce){.social-pin .social-card{--social-focus:1!important}}