/* Schodisko príbehu – náš príbeh v čase (Claude, 1. 11. 2026, faza4-98). Podstránka /o-nas/.
   Bez triedy .stairs-live (bez JS / obmedzený pohyb) je to obyčajný zoznam míľnikov. ChatGPT: farby a jemnosť ladiť tu. */
.stairs{position:relative;margin:0 var(--gutter);padding:30px 0 90px;border-top:1px solid var(--about-line,#e9e8df2b);color:var(--about-paper,#eeeae3);--stairs-gold:#d9c9a3}
.stairs-copy>.eyebrow{color:var(--about-soft,#b9c3b7);margin:0 0 34px}
.stairs-milestones{list-style:none;margin:0;padding:0}
.stairs-milestone{margin:0 0 56px}
.stairs-milestone small{display:block;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--stairs-gold);margin-bottom:12px}
.stairs-year{display:block;font-size:clamp(64px,8vw,138px);line-height:.88;letter-spacing:-.065em;font-weight:400;color:var(--about-paper,#eeeae3)}
.stairs-milestone h3{margin:22px 0 0;max-width:460px;font-family:Bradford,Georgia,serif;font-weight:400;font-size:clamp(26px,2.5vw,40px);line-height:1.12;letter-spacing:-.025em;color:var(--about-paper,#eeeae3)}
.stairs-milestone p{margin:16px 0 0;max-width:430px;font-size:15px;line-height:1.6;color:var(--about-soft,#b9c3b7)}
.stairs-photos{display:flex;gap:10px;margin:26px 0 0}
.stairs-photos img{width:clamp(110px,11vw,170px);aspect-ratio:4/5;height:auto;object-fit:cover;object-position:center 25%;border-radius:8px;background:#202a23}
.stairs-nav,.stairs-clock{display:none}
.stairs-scene{display:none}

/* ---------- živá verzia: pripnutá scéna, schody = roky (3D ako karusel ponúk) ---------- */
.stairs-live{height:calc(100svh + var(--stairs-run,2700px));padding:0;margin:0;border-top:0}
.stairs-live .stairs-pin{position:sticky;top:0;height:100svh;display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:clamp(20px,4vw,60px);align-items:center;padding:88px var(--gutter) 34px;overflow:hidden}
.stairs-live .stairs-copy{position:relative;z-index:2;align-self:center}
.stairs-live .stairs-copy>.eyebrow{margin-bottom:18px}
.stairs-live .stairs-clock{display:block;min-height:.86em;font-size:clamp(72px,8.6vw,150px);line-height:.86;letter-spacing:-.065em;font-weight:400;color:var(--about-paper,#eeeae3);margin:0 0 26px;white-space:nowrap}
.stairs-live .stairs-clock.is-word{letter-spacing:-.055em}
.stairs-live .stairs-milestones{display:grid}
.stairs-live .stairs-milestone{grid-area:1/1;margin:0;opacity:0;translate:0 18px;filter:blur(5px);transition:opacity .5s ease,translate .8s var(--mx-ease,cubic-bezier(.22,.72,.16,1)),filter .6s ease;pointer-events:none}
.stairs-live .stairs-milestone.is-current{opacity:1;translate:0 0;filter:blur(0);pointer-events:auto}
.stairs-live .stairs-milestone .stairs-year,.stairs-live .stairs-photos{display:none}
.stairs-live .stairs-milestone h3{margin-top:12px}
.stairs-live .stairs-nav{display:flex;align-items:center;gap:12px;margin-top:34px;font-size:11px;letter-spacing:.12em;color:var(--about-soft,#b9c3b7)}
.stairs-live .stairs-count{white-space:nowrap;flex:0 0 auto}
.stairs-arrow{flex:0 0 auto}
/* šípky = webový komponent .motion-arrow (icons.css) – tlačidlo je len obal bez vlastného rámika */
.stairs-arrow{display:grid;place-items:center;padding:0;border:0;border-radius:8px;background:none;color:var(--about-paper,#eeeae3);cursor:pointer;transition:opacity .25s}
.stairs-arrow:focus-visible{outline:2px solid var(--stairs-gold);outline-offset:3px}
.stairs-arrow:disabled{opacity:.32;cursor:default;pointer-events:none}
.stairs-live .stairs-dots{display:flex;margin-left:8px}
.stairs-live .stairs-dots i{display:block;width:30px;height:18px;cursor:pointer;background:linear-gradient(#e9e8df2e,#e9e8df2e) center/26px 2px no-repeat;transition:background .4s}
.stairs-live .stairs-dots i.is-on{background-image:linear-gradient(var(--stairs-gold),var(--stairs-gold))}

.stairs-live .stairs-scene{display:block;position:relative;height:100%;min-height:420px;perspective:1500px;perspective-origin:50% 16%;touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none}
.stairs-live.is-dragging .stairs-scene{cursor:grabbing}
.stairs-scene::before{content:'';position:absolute;inset:14% 4% 6%;border-radius:50%;background:radial-gradient(closest-side,#d9c9a317,#d9c9a300);pointer-events:none}
.stairs-helix{position:absolute;left:50%;top:50%;width:0;height:0;transform-style:preserve-3d}
.stairs-axis{position:absolute;left:-1px;top:-70vh;width:2px;height:140vh;background:linear-gradient(#d9c9a300,#d9c9a34d 30%,#d9c9a34d 70%,#d9c9a300);pointer-events:none}
.stairs-card{position:absolute;left:0;top:0;display:block;transform-style:preserve-3d;border-radius:16px;cursor:pointer;will-change:transform,opacity;
 background:linear-gradient(165deg,#eeeae31c,#eeeae306 60%,#eeeae30f);border:1px solid #eeeae32b;box-shadow:0 30px 60px -30px #000c,inset 0 1px 0 #ffffff1f}
.stairs-card[hidden]{display:none}
.stairs-card::after{content:'';position:absolute;inset:-1px;border-radius:inherit;background:#0e1411;opacity:var(--shade,0);pointer-events:none;transition:opacity .2s}
.stairs-tread{position:absolute;left:-6%;top:100%;width:112%;height:var(--tread,70px);border-radius:0 0 14px 14px;transform-origin:50% 0;transform:rotateX(90deg);
 background:linear-gradient(#eeeae324,#eeeae308);border:1px solid #eeeae324;box-shadow:inset 0 1px 0 #ffffff2e;pointer-events:none}
.stairs-card-year{position:absolute;left:0;right:0;bottom:16%;text-align:center;font-weight:400;font-size:clamp(34px,3.6vw,56px);letter-spacing:-.06em;line-height:1;color:#eeeae3d9}
.stairs-card.has-photo{border-color:#d9c9a359;background:#151c18}
.stairs-card.is-key:not(.has-photo){border-color:#d9c9a366;background:linear-gradient(165deg,#d9c9a32b,#d9c9a30a 58%,#d9c9a31a)}
.stairs-card.is-key:not(.has-photo) .stairs-card-year{color:#f1e7cf}
.stairs-card.is-word .stairs-card-year{font-size:clamp(28px,3vw,46px);letter-spacing:-.05em;padding:0 10px}
.stairs-card-label{position:absolute;left:14px;right:14px;top:14px;font-size:9px;line-height:1.35;letter-spacing:.14em;text-transform:uppercase;color:var(--stairs-gold)}
.stairs-card-photos{position:absolute;inset:0;display:flex;border-radius:inherit;overflow:hidden}
.stairs-card-photos img{flex:1 1 0;min-width:0;width:100%;height:100%;object-fit:cover;object-position:center 22%;pointer-events:none}
.stairs-card-photos.n2 img+img{border-left:1px solid #0e141199}
.stairs-card-photos::after{content:'';position:absolute;inset:0;background:linear-gradient(#0e141100 42%,#0e1411e6)}
.stairs-card-meta{position:absolute;left:14px;right:14px;bottom:13px;display:grid;gap:5px}
.stairs-card-meta small{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--stairs-gold)}
.stairs-card-meta b{font-weight:400;font-size:clamp(28px,2.6vw,40px);letter-spacing:-.055em;line-height:.9;color:#eeeae3}
.stairs-card.is-current{border-color:#d9c9a399}
.stairs-card.is-current .stairs-card-year{color:#eeeae3}
.stairs-card.is-current .stairs-tread{border-color:#d9c9a366;background:linear-gradient(#d9c9a333,#d9c9a30a)}

@media(max-width:1000px){.stairs-live .stairs-pin{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
@media(max-width:700px){
 .stairs{margin:0 22px}
 .stairs-photos img{width:96px}
 .stairs-live .stairs-pin{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto;gap:4px;padding:64px 22px 80px;align-items:end}
 .stairs-live .stairs-scene{grid-row:1;min-height:0;perspective:900px;perspective-origin:50% 14%;margin:0 -22px}
 .stairs-live .stairs-copy{grid-row:2;align-self:end}
 .stairs-live .stairs-copy>.eyebrow{margin-bottom:8px}
 .stairs-live .stairs-clock{font-size:58px;margin-bottom:12px}
 .stairs-live .stairs-nav{gap:9px}
 .stairs-live .stairs-dots{display:none} /* na mobile stačí počítadlo – bodky by narážali do plávajúceho tlačidla „hore“ */
 .stairs-card.is-word .stairs-card-year{font-size:27px}
 .stairs-live .stairs-milestone h3{margin-top:8px;font-size:22px}
 .stairs-live .stairs-milestone p{margin-top:8px;font-size:13px;line-height:1.5}
 .stairs-live .stairs-nav{margin-top:16px}
 .stairs-card{border-radius:12px}
 .stairs-card-year{font-size:34px}
 .stairs-card-meta{left:10px;right:10px;bottom:9px}
 .stairs-card-meta b{font-size:26px}
 .stairs-card-meta small{font-size:8px}
 .stairs-card-label{left:10px;right:10px;top:10px;font-size:8px}
}
@media(prefers-reduced-motion:reduce){.stairs-live .stairs-milestone{transition:none}}

/* ux-123: words must fit the text column; years keep their original size. */
.stairs-live .stairs-copy{min-width:0}
.stairs-live .stairs-clock.is-word{font-size:clamp(34px,3.6vw,64px);line-height:1.03;letter-spacing:-.045em;white-space:normal;overflow-wrap:normal;word-break:normal;text-wrap:balance;max-width:100%}
@media(max-width:700px){.stairs-live .stairs-clock.is-word{font-size:clamp(28px,7.6vw,38px);line-height:1.05}}

/* copy143: original portrait cover, with the ceiling cropped by its frame. */
.stairs-card-photos img[src$="dnes-obalka-143.jpeg"]{object-fit:cover;object-position:50% 100%;filter:saturate(.96) contrast(1.02)}

/* story149: frame the supplied portrait without changing the original photo. */
.stairs-card-photos img[src$="dnes-spolu-149.png"]{object-fit:cover;object-position:50% 72%}