/* ============ STORYTELLING — metodyka. Doladowywane RAZEM z piosenki.css na /storytelling/.
   Reuzywa .dzial-hero / .song* / .songs-cta z piosenki.css; tu tylko sekcje metodyki. ============ */
.story-section{position:relative;padding:clamp(2.6rem,6vh,4.4rem) 0}
.story-head{max-width:54ch;margin:0 0 clamp(1.5rem,3.5vh,2.4rem)}
.story-head h2{margin:.45rem 0 0;text-wrap:balance}
.story-lead{color:var(--ink-2);font-size:1.05rem;line-height:1.65;max-width:62ch;margin:0 0 1rem}
.story-lead:last-child{margin-bottom:0}
.story-lead strong{color:var(--ink);font-weight:700}

/* dlaczego + cytat */
.story-cite{margin:1.6rem 0 0;padding:1.1rem 1.3rem;border:1px solid rgba(255,255,255,.1);border-radius:var(--radius);background:rgba(255,255,255,.025);font-size:.92rem;line-height:1.55;color:var(--ink-3);max-width:62ch}
.story-cite .sc-label{display:block;font:800 .7rem/1 var(--font-display);letter-spacing:.16em;text-transform:uppercase;color:rgba(var(--warm),.9);margin:0 0 .55rem}
.story-cite strong{color:var(--ink-2);font-weight:700}

/* 6 krokow */
.story-steps-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1rem,2.2vw,1.6rem)}
.story-step{position:relative;padding:1.5rem 1.55rem 1.6rem;border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-lg);background:rgba(255,255,255,.025);transition:border-color .35s,transform .45s cubic-bezier(.2,.7,.2,1),background .35s}
.story-step:hover{border-color:rgba(var(--warm),.45);transform:translateY(-3px);background:rgba(255,255,255,.05)}
.st-no{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:12px;background:rgba(var(--warm),.14);border:1px solid rgba(255,196,150,.32);color:rgba(var(--warm),.97);font:900 1.08rem/1 var(--font-display);margin:0 0 1rem}
.story-step h3{font:800 1.1rem/1.25 var(--font-display);letter-spacing:-.01em;color:var(--ink);margin:0 0 .5rem;text-wrap:balance}
.story-step p{margin:0;color:var(--ink-2);font-size:.98rem;line-height:1.55}
.story-step .en{color:var(--ink);font-style:italic}

/* tempo / roznorodnosc — callout */
.story-callout{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(1.1rem,2.4vw,1.6rem);align-items:start;padding:clamp(1.6rem,3vw,2.2rem);border:1px solid rgba(255,196,150,.24);border-radius:var(--radius-lg);background:rgba(255,196,150,.05)}
.story-callout .co-ic{flex:0 0 auto;width:52px;height:52px;border-radius:14px;display:grid;place-items:center;background:rgba(var(--warm),.16);border:1px solid rgba(255,196,150,.3);color:rgba(var(--warm),.97)}
.story-callout .co-ic svg{width:26px;height:26px}
.story-callout h2{margin:0 0 .6rem;font-size:clamp(1.3rem,2.2vw,1.65rem)}
.story-callout p{margin:0 0 .85rem;color:var(--ink-2);font-size:1.02rem;line-height:1.6;max-width:60ch}
.story-callout p:last-child{margin-bottom:0}

/* ksiazki — intro + grid 2x2 + outro */
.story-books .story-intro{color:var(--ink-2);font-size:1.05rem;line-height:1.6;max-width:58ch;margin:0 0 clamp(1.8rem,4vh,2.6rem)}
.story-books .dzial-list{grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(1rem,1.8vw,1.5rem)}
.story-books .song-title{font-size:1rem}
.story-books .song-note{font-size:.92rem}
.story-outro{margin:clamp(2.6rem,6vh,4rem) 0 0;padding-top:2rem;border-top:1px solid rgba(255,255,255,.08);color:var(--ink-2);font-size:1.02rem;line-height:1.65;max-width:60ch}
.story-outro strong{color:var(--ink);font-weight:700}

@media (max-width:1024px){ .story-books .dzial-list{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:880px){
  .story-steps-list{grid-template-columns:1fr;gap:1rem}
  .story-callout{grid-template-columns:1fr}
}
@media (max-width:560px){ .story-books .dzial-list{grid-template-columns:1fr} }
@media (prefers-reduced-motion:reduce){ .story-step{transition:none} }