/* YABI 2.0 v3 – Prípadové štúdie: zoznam (/pripadove-studie/) + spoločná šablóna detailu (/pripadove-studie/<slug>/).
   Návrh: design/pages/pripadove-studie, devio, pathfinder, lumi, expresta (desktop 1440, mobil 390).
   Breakpointy ako base.css: desktop ≥ 1200, 1024–1199, tablet 768–1023, mobil < 768. */

.cs{--tx:var(--paper);--c:var(--primary)}
.cs--blue{--c:var(--primary);--tx:var(--paper)}
.cs--red{--c:var(--red);--tx:var(--paper)}
.cs--green{--c:var(--green);--tx:var(--ink)}
.cs--orange{--c:var(--orange);--tx:var(--ink)}
/* QA-105: zadná časť oranžového priečinka (záložka s bielym textom) plnou farbou od Dizajnu namiesto zmesi #AE7811. */
.cs--orange .folder__back::before,.cs--orange .folder__back::after{background:#9e6d0f}

/* ---------- Spoločné typo ---------- */
.cs-title{font-size:clamp(44px,4.445vw,64px);--lh:1em;line-height:var(--lh);letter-spacing:-.04em}
.cs-display{font-size:clamp(44px,6.667vw,96px);--lh:1em;line-height:var(--lh);letter-spacing:-.05em}
.cs-h3{font-size:32px;--lh:32px;line-height:var(--lh);letter-spacing:-.8px}
.cs-h4{font-size:24px;--lh:26px;line-height:var(--lh);letter-spacing:-.7px}

/* ---------- Hero (zoznam aj detail) ---------- */
.cs-hero{display:flex;align-items:flex-end;justify-content:space-between;gap:48px;padding-top:160px;padding-bottom:80px}
.cs-hero__head{display:flex;flex-direction:column;align-items:flex-start;gap:24px}
.cs-hero__title{font-size:clamp(44px,8.334vw,120px);line-height:1;letter-spacing:-.05em}
.cs-hero__title span{display:block}
.cs-hero__aside{display:flex;flex-direction:column;align-items:flex-start;gap:24px;flex:0 0 350px}
.cs-hero__icon{display:flex;align-items:center;justify-content:center;width:132.36px;height:108.33px}
.cs-hero__icon img{width:123px;height:96px;transform:rotate(6deg)}
.page-studie .cs-hero{padding-bottom:80px}

/* ---------- Sekcie ---------- */
.cs-sec{padding-block:var(--section-y)}
.cs-sec--tint{background:var(--paper-dark)}
.cs-sec--ink{background:var(--ink);color:var(--paper)}
.cs-sec>.container{display:flex;flex-direction:column;gap:48px}
.cs-head{display:flex;align-items:flex-end;justify-content:space-between;gap:48px}
.cs-head__main{display:flex;flex-direction:column;align-items:flex-start;gap:20px;max-width:760px}
.cs-head__lead{flex:0 0 400px}

/* ---------- Priečinok (karta projektu, obálka detailu) ----------
   Zadná strana = farba priečinka stmavená 30 % Ink (Folder / Back shade), uško podľa SVG z návrhu (clip-path),
   predná strana = plná farba. */
.folder{position:relative;display:flex;flex-direction:column;color:var(--tx);--tab:226px;--tab-h:40px}
.folder__back{position:absolute;inset:0;z-index:0;filter:drop-shadow(0 20px 22px rgba(0,10,23,.1))}
.folder__back::before,.folder__back::after{content:"";position:absolute;background:var(--c);background:color-mix(in srgb,var(--c) 70%,#000b16)}
.folder__back::before{left:0;top:0;width:calc(var(--tab) + 52px);height:calc(var(--tab-h) + 1px);clip-path:path("M0 22C0 7.333 7.333 0 22 0H226C236.667 0 244 4.667 248 14L256 28C260 36 267.333 40 278 40V41H0Z")}
.folder__back::after{left:0;right:0;bottom:0;top:var(--tab-h);border-radius:0 var(--r-main) var(--r-main) var(--r-main)}
.folder__tab{position:absolute;z-index:1;left:24px;top:12px;display:flex;align-items:center;gap:12px;height:24px;color:var(--paper);white-space:nowrap}
.folder__tab b{font-size:16px;font-weight:700;letter-spacing:-.16px}
.folder__tab span{font-size:14px;font-weight:500;letter-spacing:-.14px}
.folder__front{position:relative;z-index:2;border-radius:var(--r-main);background:var(--c);box-shadow:0 -6px 18px -6px rgba(0,10,23,.16)}

/* Karta projektu (zoznam, „Ďalší projekt“) – 628 × 620 / 350 × 500 */
.pcard{padding-top:300px;min-height:620px;transition:transform .2s ease}
.pcard__preview{position:absolute;z-index:1;left:calc((100% - (100% - 64px)) / 2 - 5.4px);top:81.75px;width:calc(100% - 64px);height:300px;overflow:hidden;border-radius:var(--r-btn);background:var(--paper);box-shadow:0 8px 20px -4px rgba(0,10,23,.18);transform:rotate(2deg)}
.pcard__preview img{position:absolute;left:-12px;top:-12px;width:calc(100% + 24px);height:calc(100% + 24px);max-width:none;object-fit:cover}
.pcard .folder__front{display:flex;flex-direction:column;justify-content:space-between;gap:20px;min-height:320px;padding:32px}
.pcard__copy{display:flex;flex-direction:column;gap:12px}
.pcard__name{font-size:64px;line-height:64px;letter-spacing:-2.56px}
.pcard__meta{display:flex;align-items:center;justify-content:space-between;gap:16px}
.pcard__tags{display:flex;flex-wrap:wrap;gap:8px;flex:1 1 0;min-width:0}
.pcard__tag{max-width:100%;padding:7px 12px;border:1px solid currentColor;border-radius:var(--r-chip);font-size:14px;font-weight:500;line-height:20px;letter-spacing:-.14px}
.pcard__arrow{flex:none;width:56px;height:56px;transition:transform .2s ease}
.pcard:hover .pcard__arrow,.pcard:focus-visible .pcard__arrow{transform:translateX(4px)}
.pcard:hover .pcard__preview{transform:rotate(2deg) translateY(-6px)}
.pcard__preview{transition:transform .2s ease}
.pcard:focus-visible{outline-offset:6px;border-radius:var(--r-main)}

/* Ukážka „pred / po“ (Expresta) – v karte aj na obálke */
.ba{display:flex;flex-direction:column;align-items:flex-start;gap:16px;color:var(--ink)}
.pcard__preview .ba{position:absolute;left:36px;top:44px}
.ba__row{display:flex;align-items:center;gap:16px;white-space:nowrap}
.ba__label{flex:none;width:40px;font-size:12px;font-weight:500;letter-spacing:-.4px;text-transform:uppercase}
.ba__btn{flex:none;padding:14px 24px;border-radius:var(--r-btn);background:var(--paper-dark);font-size:16px;font-weight:500;line-height:24px;letter-spacing:-.16px}
.ba__btn--after{background:var(--primary);color:var(--paper)}
.ba__note{font-size:14px;line-height:20px;letter-spacing:-.14px}

/* ---------- Zoznam ---------- */
.cs-list{padding-top:96px;padding-bottom:96px}
.cs-list>.container{display:flex;flex-direction:column;gap:48px}
.cs-filter{display:flex;flex-wrap:wrap;gap:8px}
.cs-filter__btn{display:inline-flex;align-items:center;gap:10px;padding:10px 12px 10px 16px;border:1px solid var(--ink);border-radius:var(--r-full);background:var(--paper);color:var(--ink);font-size:16px;font-weight:500;line-height:24px;letter-spacing:-.16px;cursor:pointer;transition:background-color .15s ease}
.cs-filter__btn:hover{background:var(--paper-dark)}
.cs-filter__count{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:var(--r-full);background:var(--paper-dark);font-size:14px;line-height:20px;letter-spacing:-.14px}
.cs-filter__btn[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.cs-filter__btn[aria-pressed="true"] .cs-filter__count{background:var(--paper);color:var(--ink)}
.cs-filter__label{margin-block:-2px}
/* Bez JS filter nefunguje → tlačidlá skryť, karty ostanú všetky viditeľné (filter.js ich ovláda len so skriptom). */
@media (scripting:none){.cs-filter{display:none}}
.cs-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px 24px}
.cs-grid>li{display:flex;flex-direction:column}
.cs-grid>li[hidden]{display:none}
.cs-grid .pcard{flex:1 1 auto}
.cs-more{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;min-height:620px;padding:48px;border:2px dashed var(--ink);border-radius:var(--r-main);text-align:center}
.cs-more__icon{display:flex;align-items:center;justify-content:center;width:132.36px;height:108.33px}
.cs-more__icon img{width:123px;height:96px;transform:rotate(-6deg)}
.cs-more__title{font-size:48px;--lh:48px;line-height:var(--lh);letter-spacing:-2.16px}
.cs-more__text{max-width:420px}

/* ---------- Detail: obálka (Case file 1280 × 820) ---------- */
.case{--tab:276px;--tab-h:52px;min-height:820px}
.case .folder__back::before{clip-path:path("M0 22C0 7.333 7.333 0 22 0H276C286.667 0 294 4.667 298 14L306 40C310 48 317.333 52 328 52V53H0Z")}
.case .folder__tab{top:17px}
.case__visual{position:relative;z-index:1;width:calc(100% - 96px);margin:105.4px 0 0 40.47px;aspect-ratio:1184/560;border-radius:var(--r-btn);box-shadow:0 10px 24px -4px rgba(0,10,23,.2);transform:rotate(1.5deg)}
.case__visual img{width:100%;height:100%;border-radius:var(--r-btn);object-fit:cover}
.case__visual--ba{display:flex;flex-direction:column;justify-content:flex-start;padding:56px;background:var(--paper);aspect-ratio:auto;height:560px}
.case__visual--ba .ba{gap:32px}
.case__visual--ba .ba__row{gap:24px}
.case__visual--ba .ba__label{width:48px}
.case__visual--ba .ba__btn{padding:20px 40px;font-size:24px;font-weight:400;line-height:26px;letter-spacing:-.7px}
.case__visual--ba .ba__note{font-size:18px;line-height:24px;letter-spacing:-.36px}
.case .folder__front{display:flex;align-items:flex-end;gap:24px;min-height:260px;margin-top:-105.4px;padding:48px}
.case__meta{display:flex;flex-direction:column;gap:8px;flex:1 1 0;min-width:0}
.case__meta dt{font-size:12px;font-weight:500;letter-spacing:-.4px;text-transform:uppercase}
.case__meta dd{margin:0;font-size:24px;line-height:26px;letter-spacing:-.7px}
.cs-cover{padding-top:48px}

/* ---------- Zadanie: poznámky so zahnutým rohom ---------- */
.notes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:stretch}
.note{--cut:48px;position:relative;display:flex;filter:drop-shadow(0 12px 14px rgba(0,10,23,.07))}
.note__paper{display:flex;flex-direction:column;flex:1;gap:16px;padding:40px;background:var(--paper-dark);border-radius:var(--r-main)}
.note__flap{display:none}

/* ---------- Ukážky (fotky v rámikoch) ---------- */
.photo{background:var(--paper);padding:12px;border-radius:var(--r-main);box-shadow:0 18px 36px -8px rgba(0,10,23,.14)}
.photo img{width:100%;height:auto;border-radius:var(--r-btn)}
.photos{position:relative;aspect-ratio:1280/var(--h,900)}
.photos .photo{position:absolute;left:var(--x);top:var(--y);width:var(--w);transform:rotate(var(--r))}

/* ---------- Postup (metro) ---------- */
.metro{position:relative;height:300px;--inset:30px;--dot:44px;--line:147px}
.metro::before{content:"";position:absolute;left:var(--inset);right:var(--inset);top:var(--line);height:6px;border-radius:3px;background:var(--ink)}
.metro__st{position:absolute;top:0;bottom:0;left:calc(var(--inset) + (100% - 2 * var(--inset)) * var(--i) / (var(--n) - 1));width:0}
.metro__dot{position:absolute;left:calc(var(--dot) / -2);top:calc(var(--line) + 3px - var(--dot) / 2);display:flex;align-items:center;justify-content:center;width:var(--dot);height:var(--dot);border:5px solid var(--paper);border-radius:var(--r-full);background:var(--sc);color:var(--st);font-size:14px;font-weight:500;line-height:20px;letter-spacing:-.14px}
.metro__label{position:absolute;left:-60px;width:120px;font-size:16px;font-weight:500;line-height:24px;letter-spacing:-.16px;text-align:center}
.metro__st::after{content:"";position:absolute;left:-1px;width:2px;height:18px;background:var(--ink)}
.metro__st:nth-child(odd) .metro__label{bottom:calc(300px - 100px)}
.metro__st:nth-child(odd)::after{top:108px}
.metro__st:nth-child(even) .metro__label{top:200px}
.metro__st:nth-child(even)::after{top:174px}
.metro__st:nth-child(4n+1){--sc:var(--red);--st:var(--paper)}
.metro__st:nth-child(4n+2){--sc:var(--primary);--st:var(--paper)}
.metro__st:nth-child(4n+3){--sc:var(--green);--st:var(--ink)}
.metro__st:nth-child(4n){--sc:var(--orange);--st:var(--ink)}
/* Expresta: 6 staníc, väčšie bodky, bez značiek */
.metro--lg{height:260px;--inset:80px;--dot:56px;--line:127px}
.metro--lg .metro__dot{border-width:6px;font-size:16px;font-weight:700;line-height:24px;letter-spacing:-.16px}
.metro--lg .metro__label{left:-90px;width:180px;font-size:18px;letter-spacing:-.36px}
.metro--lg .metro__st::after{display:none}
.metro--lg .metro__st:nth-child(odd) .metro__label{bottom:calc(260px - 91px)}
.metro--lg .metro__st:nth-child(even) .metro__label{top:180px}

/* ---------- Výskum: bubliny + citáty ---------- */
.bubbles{position:relative;height:440px}
.bubble{position:absolute;left:var(--x);top:var(--y);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:var(--s);height:var(--s);border-radius:var(--r-full);background:var(--bc);color:var(--bt);text-align:center}
.bubble__num{font-size:96px;line-height:96px;letter-spacing:-4.8px;white-space:nowrap}
.bubble--sm .bubble__num{font-size:64px;line-height:64px;letter-spacing:-2.56px}
.bubble__text{width:60%;font-size:16px;line-height:24px;letter-spacing:-.16px}
.quotes{display:flex;gap:48px}
.quote{display:flex;gap:16px;flex:1 1 0;min-width:0}
.quote__mark{flex:none;font-size:120px;line-height:120px;letter-spacing:-6px;color:var(--orange)}
.quote p{flex:1 1 0;min-width:0;font-size:32px;line-height:32px;letter-spacing:-.8px}
.stat-quote{display:flex;align-items:center;gap:64px}
.stat-quote .bubbles{flex:0 0 420px;height:360px}

/* ---------- Persóna ---------- */
.persona{display:flex;border:1px solid var(--ink);border-radius:var(--r-main);overflow:hidden}
.persona__id{display:flex;flex-direction:column;align-items:flex-start;gap:16px;flex:0 0 400px;padding:48px;background:var(--c);color:var(--tx)}
.persona__avatar{display:flex;align-items:center;justify-content:center;width:120px;height:120px;border-radius:var(--r-full);background:var(--paper);color:var(--c);font-size:96px;line-height:96px;letter-spacing:-4.8px}
.cs--green .persona__avatar{color:var(--ink)}
.persona__name{font-size:64px;line-height:64px;letter-spacing:-2.56px}
.persona__quote{font-size:32px;line-height:32px;letter-spacing:-.8px}
.persona__details{display:flex;flex:1 1 0;min-width:0}
.persona__detail{display:flex;flex-direction:column;align-items:flex-start;gap:16px;flex:1 1 0;min-width:0;padding:40px}
.persona__detail+.persona__detail{border-left:1px solid var(--ink)}
.icon-dot{display:flex;align-items:center;justify-content:center;flex:none;width:48px;height:48px;border-radius:var(--r-full);font-size:24px;font-weight:700;line-height:26px}
.icon-dot--green{background:var(--green);color:var(--ink)}
.icon-dot--red{background:var(--red);color:var(--paper)}
.icon-dot--orange{background:var(--orange);color:var(--ink)}
.icon-dot--blue{background:var(--primary);color:var(--paper)}

/* ---------- Tabuľka (konkurencia, audit) ---------- */
.ctable{width:100%;border-collapse:collapse;border-radius:var(--r-main);background:var(--paper);overflow:hidden;text-align:left}
.ctable th,.ctable td{padding:24px;vertical-align:middle}
.ctable thead th{background:var(--ink);color:var(--paper);font-size:12px;font-weight:500;line-height:normal;letter-spacing:-.4px;text-transform:uppercase}
.ctable thead th:first-child{width:320px}
.ctable--audit thead th:first-child{width:360px}
.ctable tbody tr{border-top:1px solid var(--ink)}
.ctable tbody th{font-weight:400;font-size:24px;line-height:26px;letter-spacing:-.7px}
.ctable__name{display:flex;align-items:center;gap:14px}
.ctable__cell{display:flex;align-items:center;gap:12px}
.ctable__cell p{flex:1 1 0;min-width:0}
.mini-dot{display:flex;align-items:center;justify-content:center;flex:none;width:28px;height:28px;border-radius:var(--r-full);font-size:14px;font-weight:500;line-height:20px;letter-spacing:-.14px}
.num-dot{display:flex;align-items:center;justify-content:center;flex:none;width:40px;height:40px;border-radius:var(--r-full);font-size:14px;font-weight:500;line-height:20px;letter-spacing:-.14px}
.ctable tbody tr:nth-child(4n+1) .num-dot,.legend li:nth-child(1) .num-dot{background:var(--red);color:var(--paper)}
.ctable tbody tr:nth-child(4n+2) .num-dot{background:var(--primary);color:var(--paper)}
.ctable tbody tr:nth-child(4n+3) .num-dot,.legend li:nth-child(3) .num-dot{background:var(--green);color:var(--ink)}
.ctable tbody tr:nth-child(4n) .num-dot,.legend li:nth-child(2) .num-dot{background:var(--orange);color:var(--ink)}
.mini-dot--plus,.mini-dot--ok{background:var(--green);color:var(--ink)}
.mini-dot--minus,.mini-dot--bad{background:var(--red);color:var(--paper)}

/* ---------- Test / riešenia: obrazovka s pinmi + legenda ---------- */
.pinned{display:flex;align-items:center;gap:48px}
.pinned__screen{position:relative;flex:0 0 760px;max-width:100%;aspect-ratio:760/500;border-radius:var(--r-main);background:var(--paper-dark)}
.pinned__screen>img{width:100%;height:100%;border-radius:var(--r-main);object-fit:cover}
.pin{position:absolute;left:var(--x);top:var(--y);display:flex;align-items:center;justify-content:center;width:52px;height:52px;border:4px solid var(--paper);border-radius:var(--r-full);box-shadow:0 6px 12px rgba(0,0,0,.3);font-size:16px;font-weight:700;line-height:24px;letter-spacing:-.16px}
.pin--1{background:var(--red);color:var(--paper)}
.pin--2{background:var(--orange);color:var(--ink)}
.pin--3{background:var(--green);color:var(--ink)}
.legend{display:flex;flex-direction:column;gap:24px;flex:1 1 0;min-width:0}
.legend li{display:flex;align-items:flex-start;gap:16px}
.legend__text{display:flex;flex-direction:column;gap:6px;flex:1 1 0;min-width:0}

/* Expresta: makety riešení */
.mock{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:40px;flex:0 0 760px;max-width:100%;padding:56px;border-radius:var(--r-main);background:var(--orange);color:var(--ink)}
.mock .pin{width:48px;height:48px;left:auto;right:20px}
.mock__row{display:flex;gap:16px}
.mock__btn{padding:16px 24px;border-radius:var(--r-btn);background:var(--paper-dark);font-size:16px;font-weight:500;line-height:24px;letter-spacing:-.16px;white-space:nowrap}
.mock__btn--after{background:var(--primary);color:var(--paper)}
.mock__code{display:flex;flex-direction:column;gap:8px}
.mock__digits{display:flex;gap:8px}
.mock__digits span{display:flex;align-items:center;justify-content:center;width:48px;height:56px;border-radius:var(--r-btn);background:var(--paper);font-size:24px;line-height:26px;letter-spacing:-.7px}
.mock__digits span.is-focus{border:2px solid var(--ink)}
.mock__skip{padding:9px 13px;border:3px solid var(--ink);border-radius:var(--r-btn);background:var(--paper);font-size:16px;font-weight:500;line-height:24px;letter-spacing:-.16px;white-space:nowrap}

/* ---------- Finálny návrh ---------- */
.sheets{display:flex;flex-direction:column;align-items:center;gap:40px}
.sheets .photo{width:100%;max-width:1280px}

/* ---------- Zistenia (tmavá sekcia) ---------- */
.outcome__head{display:flex;flex-direction:column;align-items:flex-start;gap:20px}
.outcome__title{max-width:1100px}
.outcome__lists{display:flex;gap:64px}
.outcome__list{display:flex;flex-direction:column;gap:20px;flex:1 1 0;min-width:0}
.outcome__list ul{display:flex;flex-direction:column;gap:20px}
.outcome__list li{display:flex;gap:16px}
.outcome__list li::before{content:"";flex:none;width:12px;height:12px;margin:6px 4px 0;border-radius:2px;background:var(--m,var(--orange));transform:rotate(45deg)}
.outcome__list--next{--m:var(--green)}

/* ---------- Ďalší projekt ---------- */
.next{display:flex;align-items:center;gap:64px}
.next__copy{display:flex;flex-direction:column;align-items:flex-start;gap:20px;flex:1 1 0;min-width:0}
.next__copy .cs-title{max-width:560px}
.next .pcard{flex:0 0 628px;max-width:100%}

/* ---------- 1024–1199 ---------- */
@media (max-width:1199px){
  .cs-hero__aside{flex-basis:320px}
  .cs-head__lead{flex-basis:340px}
  .persona__id{flex-basis:320px;padding:40px}
  .persona__detail{padding:32px}
  .pinned__screen,.mock{flex-basis:56%}
  .next{gap:40px}
  .next .pcard{flex-basis:56%}
  .pcard__name{font-size:56px;line-height:56px}
  .ctable thead th:first-child{width:240px}
  .ctable--audit thead th:first-child{width:280px}
}

/* ---------- Tablet 768–1023 ---------- */
@media (max-width:1023px){
  .cs-hero{padding-top:140px}
  .cs-head{flex-direction:column;align-items:flex-start;gap:16px}
  .cs-head__lead{flex:none;max-width:560px}
  .cs-sec>.container,.cs-list>.container{gap:40px}
  .case{min-height:0}
  .case .folder__front{flex-wrap:wrap;gap:24px 20px;padding:32px}
  .case__meta{flex:0 0 calc(50% - 10px)}
  .case__visual--ba{height:auto;min-height:320px;padding:40px}
  .photos{aspect-ratio:auto;display:flex;flex-direction:column;align-items:center;gap:24px}
  .photos .photo{position:static;width:min(100%,640px);transform:rotate(var(--rm,1deg))}
  .metro{height:auto;display:flex;flex-direction:column;gap:18px}
  .metro::before{left:18px;right:auto;top:20px;bottom:20px;width:4px;height:auto;border-radius:2px}
  .metro__st{position:static;display:flex;align-items:center;gap:16px;width:auto}
  .metro__st::after{display:none}
  .metro__dot,.metro--lg .metro__dot{position:relative;left:0;top:0;width:40px;height:40px;border-width:4px;font-size:14px;font-weight:500;line-height:20px}
  .metro__label,.metro--lg .metro__label,.metro__st:nth-child(n) .metro__label{position:static;width:auto;text-align:left;font-size:16px;letter-spacing:-.16px}
  .bubbles{height:auto;display:flex;flex-direction:column;align-items:center;gap:16px}
  .bubble{position:static;width:var(--sm,var(--s));height:var(--sm,var(--s))}
  .bubble__num,.bubble--sm .bubble__num{font-size:44px;line-height:48px;letter-spacing:-1.32px}
  .stat-quote{flex-direction:column;align-items:stretch;gap:32px}
  .stat-quote .bubbles{flex:none;height:auto}
  .quotes{flex-direction:column;gap:24px}
  .persona{flex-direction:column}
  .persona__id{flex:none}
  .persona__details{flex-direction:column}
  .persona__detail+.persona__detail{border-left:0;border-top:1px solid var(--ink)}
  .pinned{flex-direction:column;align-items:stretch;gap:24px}
  .pinned__screen,.mock{flex:none;width:100%}
  .outcome__lists{flex-direction:column;gap:32px}
  .next{flex-direction:column;align-items:stretch;gap:24px}
  .next .pcard{flex:none;width:100%;max-width:628px}
}

/* ---------- Mobil < 768 (návrh 390) ---------- */
@media (max-width:767px){
  .cs-title{font-size:44px;--lh:48px;letter-spacing:-1.32px}
  .cs-display{font-size:44px;--lh:48px;letter-spacing:-1.32px}
  .cs-hero{flex-direction:column;align-items:flex-start;gap:24px;padding-top:145px;padding-bottom:0}
  .cs-hero__title{font-size:44px;line-height:48px;letter-spacing:-1.32px}
  .cs-hero__aside{flex:none;width:100%}
  .cs-hero__aside .trim{margin-block:0}
  .cs-sec>.container,.cs-list>.container{gap:32px}
  .cs-head__lead.trim{margin-block:0}

  /* zoznam */
  .cs-list{padding-top:48px;padding-bottom:64px}
  .cs-list>.container{gap:48px}
  .cs-filter{flex-wrap:nowrap;overflow-x:auto;margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter);scrollbar-width:none}
  .cs-filter::-webkit-scrollbar{display:none}
  .cs-filter__btn{flex:none}
  .cs-grid{grid-template-columns:minmax(0,1fr);gap:32px}
  .cs-more{min-height:0;padding:32px}
  .cs-more__title{font-size:32px;--lh:36px;letter-spacing:-.8px}
  .cs-more__title.trim,.cs-more__text.trim{margin-block:0}

  /* karta */
  .folder{--tab:166px}
  .folder__back::before{clip-path:path("M0 22C0 7.333 7.333 0 22 0H166C176.667 0 184 4.667 188 14L196 28C200 36 207.333 40 218 40V41H0Z")}
  .pcard{padding-top:250px;min-height:500px}
  .pcard__preview{left:calc((100% - (100% - 48px)) / 2 - 3.9px);top:67.2px;width:calc(100% - 48px);height:220px}
  .pcard .folder__front{gap:16px;min-height:250px;padding:24px}
  .pcard__name{font-size:44px;line-height:48px;letter-spacing:-1.32px}
  .pcard__copy p{font-size:16px;letter-spacing:-.16px}
  .pcard__arrow{width:48px;height:48px}
  .pcard__preview .ba{left:20px;top:28px;gap:12px}
  .ba__row{gap:12px}
  .ba__label{width:36px}
  .ba__btn{padding:10px 16px;font-size:14px;line-height:20px;letter-spacing:-.14px}
  .pcard__preview .ba__note{display:none}

  /* obálka 350 × 396 */
  .case{--tab:176px;--tab-h:40px}
  .case .folder__back::before{clip-path:path("M0 22C0 7.333 7.333 0 22 0H176C186.667 0 194 4.667 198 14L206 28C210 36 217.333 40 228 40V41H0Z")}
  .case .folder__tab{top:12px}
  .case__visual{width:calc(100% - 48px);margin:65.9px 0 0 20.7px;aspect-ratio:302/250}
  .case .folder__front{flex-direction:row;flex-wrap:wrap;align-items:flex-start;gap:20px;margin-top:-41.9px;min-height:0;padding:24px}
  .case__meta{flex:0 0 calc(50% - 10px)}
  .case__meta dd{font-size:16px;line-height:24px;letter-spacing:-.16px}
  .case__visual--ba{aspect-ratio:auto;height:320px;padding:24px}
  .case__visual--ba .ba{gap:20px}
  .case__visual--ba .ba__row{flex-direction:column;align-items:flex-start;gap:8px;white-space:normal}
  .case__visual--ba .ba__btn{padding:12px 20px;font-size:16px;line-height:24px;letter-spacing:-.16px}
  .case__visual--ba .ba__note{font-size:14px;line-height:20px;letter-spacing:-.14px}
  .cs-cover{padding-top:32px}

  .notes{grid-template-columns:minmax(0,1fr)}
  .note{--cut:36px}
  .note__paper{padding:24px}
  .note__paper .cs-h3{--lh:36px}
  .note__paper .t-p-lg{font-size:16px;letter-spacing:-.16px}
  .note__paper .trim{margin-block:0}

  .photo{padding:8px}
  .photos .photo{width:100%}

  .bubble__text{font-size:16px}
  .quote{gap:8px}
  .quote__mark{font-size:96px;line-height:96px;letter-spacing:-4.8px}
  .quote p{font-size:32px;line-height:36px}

  .persona__id{padding:28px}
  .persona__avatar{width:88px;height:88px;font-size:44px;line-height:48px;letter-spacing:-1.32px}
  .persona__name{font-size:44px;line-height:48px;letter-spacing:-1.32px}
  .persona__quote{line-height:36px}
  .persona__detail{padding:24px}
  .persona__detail .t-p-lg{font-size:16px;letter-spacing:-.16px}

  /* tabuľka → karty */
  .ctable,.ctable tbody,.ctable tr,.ctable th,.ctable td{display:block}
  .ctable{background:none;border-radius:0;overflow:visible}
  .ctable thead{display:none}
  .ctable tbody{display:flex;flex-direction:column;gap:16px}
  .ctable tbody tr{display:flex;flex-direction:column;gap:16px;padding:24px;border-top:0;border-radius:var(--r-main);background:var(--paper)}
  .ctable th,.ctable td{padding:0}
  .ctable td .ctable__cell{align-items:flex-start}
  .ctable td p{font-size:16px;line-height:24px;letter-spacing:-.16px}
  .ctable--audit .num-dot{width:36px;height:36px}

  .pin{width:40px;height:40px}
  .pinned__screen{aspect-ratio:350/230}
  .legend .t-p-md{font-size:16px}
  .mock{gap:28px;padding:28px 28px 28px 40px}
  .mock .pin{left:-16px;right:auto;width:36px;height:36px;font-size:14px;line-height:20px}
  .mock__btn{padding:12px 16px;font-size:14px;line-height:20px;letter-spacing:-.14px}
  .mock__digits span{width:36px;height:44px;font-size:20px}
  .mock__skip{font-size:14px;line-height:20px;letter-spacing:-.14px}

  .sheets{gap:24px}
  .outcome__list li{font-size:16px;letter-spacing:-.16px}
  .next .pcard{max-width:none}
}
@media (prefers-reduced-motion:reduce){
  .pcard:hover .pcard__arrow,.pcard:hover .pcard__preview{transform:none}
  .pcard:hover .pcard__preview{transform:rotate(2deg)}
}

.cs-filter__btn{font-size:16px;line-height:24px}

/* Reset native dl margins so the folder front reaches the bottom edge. */
.folder__front{margin:0}
.case .folder__front{margin-bottom:0}
/* Equal-height list cards must also carry their front to the backing's edge. */
.pcard .folder__front{flex:1 0 auto}