/* Realizace: příběhy projektů jako zeď z karet, pod nimi kostky s logem jako na úvodu */
@property --u{syntax:'<length>';inherits:true;initial-value:0px}
.rl{--rl-g:clamp(12px,1.5vw,20px)}
.rl-hero{padding-top:var(--hl-h,80px)}
.rl-hero>.sv-wrap{padding-block:clamp(30px,5vw,72px) clamp(20px,2.6vw,36px)}
.sv-page .rl-h1{margin:14px 0 0;font-family:var(--f-display);font-size:clamp(2rem,.8rem + 4.6vw,5rem);font-stretch:125%;font-weight:600;line-height:1.04;letter-spacing:-.015em;text-transform:uppercase}
.rl-h1 .ln{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}
.rl-h1 .ln>span{display:block;animation:svUp .43s var(--ease) backwards}
.rl-h1 .ln:nth-child(2)>span{animation-delay:.05s}

.rl-g{padding-bottom:clamp(48px,6vw,96px)}
.sv-page.sv-js .rl-top[data-in],.sv-page.sv-js .rl-c[data-in]{opacity:0;transform:translateY(20px);transition:opacity .43s ease,transform .62s var(--ease)}
.sv-page.sv-js .rl-top[data-in].is-in,.sv-page.sv-js .rl-c[data-in].is-in{opacity:1;transform:none}

/* okno prohlížeče v hlavní referenci */
.rl-w{position:relative;display:block;overflow:hidden;border-radius:14px;background:#fff;box-shadow:0 0 0 1px var(--win-ring),var(--shadow-s)}
.rl-b{display:flex;align-items:center;gap:10px;height:30px;padding:0 12px;background:var(--a-bar);border-bottom:1px solid var(--a-line)}
.rl-b .dots{display:flex;flex:none;gap:5px}
.rl-b .dots i{display:block;width:8px;height:8px;border-radius:50%;background:#ff605c}
.rl-b .dots i:nth-child(2){background:#ffbd44}
.rl-b .dots i:nth-child(3){background:#00ca4e}
.rl-u{overflow:hidden;font:500 10.5px/1 var(--f-mono);color:var(--a-mute);text-overflow:ellipsis;white-space:nowrap}
.rl-v{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;background:var(--a-chip)}
.rl-v img{display:block;width:100%;height:auto}

/* hlavní reference */
.rl-top{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);align-items:center;gap:clamp(20px,4vw,64px);overflow:clip;padding:clamp(22px,3.4vw,52px);border-radius:clamp(20px,2.6vw,32px);background:linear-gradient(100deg,rgba(9,15,28,.94),rgba(9,15,28,.72) 56%,rgba(9,15,28,.4)),url(/assets/imgs/works/full/welcome-plzen.jpg) center/cover;color:#fff}
.rl-tag{display:inline-block;margin:0 0 12px;padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.14);font:500 12px/1 var(--f-mono)}
.sv-page .rl-top-h{margin:0;font-family:var(--f-display);font-size:clamp(1.7rem,1rem + 2.2vw,3.1rem);font-stretch:125%;font-weight:600;line-height:1.08;letter-spacing:-.02em;color:#fff;text-transform:none}
.rl-top-p{max-width:32em;margin:12px 0 0;font:400 clamp(15px,.9rem + .2vw,17px)/1.5 var(--f-body);color:rgba(255,255,255,.82)}
.rl-top-c{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:clamp(16px,2vw,26px)}
.sv-page .rl-top .sv-link,.sv-page .rl-top .sv-link:hover{color:#fff}
.sv-page .rl-b1,.sv-page .rl-b1:hover{background:#fff;color:var(--ink)}
.rl-top-w{box-shadow:0 0 0 1px rgba(255,255,255,.2),0 34px 60px -30px rgba(0,0,0,.8)}

/* ostatní příběhy: zeď z karet. Řádek mřížky je 1/20 šířky sloupce (mezera mezi kartami je jeden řádek), karta zabere `--s` řádků
   a mřížka ji dá do nejkratšího sloupce. Šablona si to spočítá taky, proto ví, které karty jsou v prostředním sloupci (data-l2, data-l3). */
.rl-zed{container-type:inline-size;margin-top:var(--rl-g)}
.rl-pr{--n:1;--u:calc(100cqi / (var(--n) * 21 - 1));display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));grid-auto-rows:var(--u);grid-auto-flow:row dense;column-gap:var(--u);margin:0;padding:0;list-style:none}
.rl-p{grid-row:span var(--s);min-width:0}
.rl-pd{--s:var(--s1)}
.rl-p>a:not(.sv-btn),.rl-pd{height:calc(var(--u) * (var(--s) - 1))}
.rl-p>a:not(.sv-btn){position:relative;isolation:isolate;container-type:inline-size;display:flex;flex-direction:column;justify-content:flex-end;overflow:clip;padding:clamp(18px,1.8vw,26px);border-radius:clamp(18px,1.9vw,26px);background:#0e1116;color:#fff;text-decoration:none}
.rl-pv{position:absolute;inset:-7% 0;z-index:0;transition:scale 1.2s var(--ease)}
.rl-pv>img{display:block;width:100%;height:100%;object-fit:cover}
.rl-p>a:not(.sv-btn)::before,.rl-p>a:not(.sv-btn)::after{content:"";position:absolute;inset:0;pointer-events:none}
/* ::after drží čitelné logo, ::before ztmaví víc karty pod textem a zatržítky */
.rl-p>a:not(.sv-btn)::before{z-index:1;background:linear-gradient(180deg,rgba(9,12,18,0) 8%,rgba(9,12,18,.5) 42%,rgba(9,12,18,.84));transition:opacity .45s}
.rl-p>a:not(.sv-btn)::after{z-index:2;background:linear-gradient(180deg,rgba(9,12,18,0) 40%,rgba(9,12,18,.5) 64%,rgba(9,12,18,.92))}
.rl-pb{position:relative;z-index:4;display:block}
.sv-page .rl-ph{margin:0;line-height:0}
.rl-ph img{display:block;width:auto;max-width:min(100%,280px);height:calc(clamp(30px,2.9vw,44px)*var(--z,1));object-fit:contain;object-position:0 50%}
.rl-pt{display:grid;grid-template-rows:1fr;max-width:30em;margin-top:10px}
.rl-pt>div{min-height:0;overflow:hidden}
.sv-page .rl-pt p{margin:0;font:400 clamp(14.5px,.86rem + .15vw,16px)/1.45 var(--f-body);color:rgba(255,255,255,.88)}
/* zatržítka: to nejdůležitější ze sekce Co všechno vzniklo v příběhu */
.sv-page .rl-pl{display:grid;gap:7px;margin:12px 0 0;padding:0;list-style:none}
.sv-page .rl-pl li{display:flex;align-items:center;gap:9px;margin:0;font:500 clamp(13px,.78rem + .12vw,14.5px)/1.3 var(--f-body);color:#fff}
.rl-pl i{display:grid;place-items:center;flex:none;width:18px;height:18px;border-radius:50%;background:var(--mint);color:var(--a-on-accent)}
.rl-pl svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
.rl-pq{position:absolute;top:clamp(14px,1.5vw,20px);right:clamp(14px,1.5vw,20px);z-index:5;display:flex;align-items:center;height:36px;padding:0 10px;border-radius:999px;background:rgba(9,12,18,.5);color:#fff;font:500 12px/1 var(--f-mono);transition:background-color .3s,color .3s,padding .45s var(--ease)}
.rl-pq b{max-width:0;overflow:hidden;font-weight:500;white-space:nowrap;transition:max-width .45s var(--ease),margin .45s var(--ease)}
.rl-pq svg{flex:none;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.rl-p>a:not(.sv-btn):focus-visible{outline:2px solid var(--mint);outline-offset:3px}
.rl-pd{position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;overflow:hidden;padding:clamp(20px,2.2vw,32px);border-radius:clamp(18px,1.9vw,26px);background:radial-gradient(90% 130% at 100% 0,#14493b,#0c1512 64%);color:#fff}
.rl-pd .sv-btn{margin-top:clamp(14px,1.8vw,22px)}
.rl-dal{margin-top:clamp(36px,4.6vw,64px)}

/* příchod: karta vyjede a fotka se v ní usadí, karty v dalších sloupcích přijdou o chvilku později */
.sv-page.sv-js .rl-p[data-in]{opacity:0;transform:translateY(44px);transition:opacity .55s ease,transform 1s var(--ease)}
.sv-page.sv-js .rl-p[data-in].is-in{opacity:1;transform:none}
.sv-page.sv-js .rl-p[data-in] .rl-pv{scale:1.16}
.sv-page.sv-js .rl-p[data-in].is-in .rl-pv{scale:1}

/* rolování: prostřední sloupec začne níž a dorovná se, než dojede konec zdi, fotky se v kartách mírně posouvají.
   Karty a hlavní reference mají overflow: clip, s hidden by byly samy rolovací oblastí a view() by se nehýbalo. */
@supports (animation-timeline:view()){
@media (prefers-reduced-motion:no-preference){
.rl-pr{view-timeline:--rlz block}
.rl-p{animation:rlZed linear both;animation-timeline:--rlz;animation-range:entry 0% contain 100%}
.rl-pv{animation:rlFoto linear both;animation-timeline:view();animation-range:cover}
.rl-top-w{animation:rlOkno linear both;animation-timeline:view();animation-range:cover}
}}
@keyframes rlZed{from{translate:0 var(--dy,0px)}}
@keyframes rlFoto{from{translate:0 -5.5%}to{translate:0 5.5%}}
@keyframes rlOkno{from{translate:0 18px}to{translate:0 -18px}}

/* kostky */
.rl-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(24px,2.8vw,40px) var(--rl-g);margin:clamp(16px,2vw,28px) 0 0;padding:0;list-style:none}
.rl-c{min-width:0}
.rl-c a{display:block;color:inherit;text-decoration:none}
.rl-i{position:relative;display:block;aspect-ratio:1;overflow:hidden;border-radius:clamp(12px,1.3vw,18px);background:var(--a-chip)}
.rl-i::before,.rl-i::after{content:"";position:absolute;z-index:1;inset:0;background:linear-gradient(rgba(0,0,0,.26),rgba(0,0,0,.5))}
.rl-i::after{background:rgba(0,0,0,.36);opacity:0;transition:opacity .3s}
.rl-i img{position:absolute;transition:transform .45s var(--ease)}
.rl-if{inset:0;width:100%;height:100%;object-fit:cover}
.rl-il{left:50%;top:50%;z-index:2;width:56%;max-height:38%;object-fit:contain;transform:translate(-50%,-50%)}
.rl-c a:hover .rl-i::after,.rl-c a:focus-visible .rl-i::after{opacity:1}
.rl-c a:hover .rl-if{transform:scale(1.06)}
.rl-c a:hover .rl-il{transform:translate(-50%,-50%) scale(1.06)}
.rl-m{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-top:12px}
.rl-t{display:block;font:600 clamp(16px,.95rem + .2vw,18px)/1.25 var(--f-display);font-stretch:112%;letter-spacing:-.008em;color:var(--ink)}
.rl-st{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}
.rl-st em{padding:5px 9px;border-radius:999px;background:var(--card-2);color:var(--ink-2);font:500 11.5px/1 var(--f-mono);font-style:normal}
.rl-o{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:50%;background:var(--card-2);color:var(--ink);transition:background .2s,color .2s,transform .3s var(--ease)}
.rl-o svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.rl-c a:hover .rl-o{background:var(--mint);color:var(--a-on-accent);transform:rotate(8deg)}
.rl-c a:focus-visible{outline:none}
.rl-c a:focus-visible .rl-i{outline:2px solid var(--mint);outline-offset:3px}

@media (min-width:576px){.rl-pr{--n:2}
.rl-pd{--s:var(--s2)}}
@media (min-width:576px) and (max-width:991.98px){.rl-p[data-l2="1"]{--dy:clamp(40px,8vw,72px)}
.sv-page.sv-js .rl-p[data-l2="1"]{transition-delay:.08s}}
@media (min-width:992px){.rl-pr{--n:3}
.rl-pd{--s:var(--s3)}
.rl-p[data-l3="1"]{--dy:clamp(64px,8vw,128px)}
.sv-page.sv-js .rl-p[data-l3="1"]{transition-delay:.08s}
.sv-page.sv-js .rl-p[data-l3="2"]{transition-delay:.16s}
.sv-page.sv-js .rl-c[data-in]:nth-child(4n+2){transition-delay:.05s}
.sv-page.sv-js .rl-c[data-in]:nth-child(4n+3){transition-delay:.1s}
.sv-page.sv-js .rl-c[data-in]:nth-child(4n){transition-delay:.15s}}
/* najetí myší nebo fokus: fotka se přiblíží a štítek se rozbalí na Příběh projektu */
@media (hover:hover){.sv-page.sv-js .rl-p[data-in].is-in:is(:hover,:focus-within) .rl-pv{scale:1.05}
.rl-p:is(:hover,:focus-within) .rl-pq{padding:0 12px 0 15px;background:var(--mint);color:var(--a-on-accent)}
.rl-p:is(:hover,:focus-within) .rl-pq b{max-width:10em;margin-right:8px}}
/* s myší jsou text a zatržítka schované a ukážou se po najetí na kartu, na dotykových displejích jsou vidět pořád.
   Schovávají se sbalením řádku: při omezených animacích sluzba.css vrátí všemu uvnitř [data-in] plnou neprůhlednost. */
@media (hover:hover) and (min-width:992px){.sv-js .rl-p>a:not(.sv-btn)::before{opacity:0}
.sv-js .rl-pt{grid-template-rows:0fr;margin-top:0;opacity:0;transition:grid-template-rows .5s var(--ease),margin-top .5s var(--ease),opacity .3s}
.sv-js .rl-pl li{opacity:0;translate:0 6px;transition:opacity .3s,translate .45s var(--ease)}
.sv-js .rl-p:is(:hover,:focus-within)>a:not(.sv-btn)::before{opacity:1}
.sv-js .rl-p:is(:hover,:focus-within) .rl-pt{grid-template-rows:1fr;margin-top:10px;opacity:1;transition-delay:0s,0s,.08s}
.sv-js .rl-p:is(:hover,:focus-within) .rl-pl li{opacity:1;translate:0 0;transition-delay:calc(.14s + var(--i) * .06s)}}
@media (max-width:991.98px){.rl-top{grid-template-columns:minmax(0,1fr)}
.rl-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:575.98px){.rl-list{gap:24px 12px}
.rl-o{display:none}
.rl-t{font-size:15px}}
@media (prefers-reduced-motion:reduce){.rl-i img{transition:none}}