/* 30 dni dla Siebie - storytelling pages R7326
   Tylko omnie.html i oprojekcie.html.
   Bez efektow ruchu grafiki. Czytelny tekst, stala grafika, pelny sticky pasek. */

body.about-story-page{
  overflow-x:hidden;
}

.about-story-main{
  position:relative;
  isolation:isolate;
  overflow:clip;
  padding-bottom:44px;
}

.about-story-shell{
  position:relative;
  z-index:3;
  max-width:1180px;
}

/* =========================
   STICKY QUICK NAV
   ========================= */
.about-story-quicknav{
  position:fixed;
  z-index:3500;
  left:50%;
  top:10px;
  width:min(940px,calc(100% - 28px));
  transform:translate(-50%,-130%);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:transform .18s ease,opacity .14s ease,visibility .14s ease;
}

html.story-quicknav-visible .about-story-quicknav{
  transform:translate(-50%,0);
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

.about-story-quicknav__inner{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  align-items:center;
  gap:6px;
  width:100%;
  padding:7px;
  border:1px solid color-mix(in srgb,var(--border) 88%,transparent);
  border-radius:999px;
  background:color-mix(in srgb,var(--surface) 96%,transparent);
  box-shadow:0 12px 34px rgba(17,24,39,.12);
  backdrop-filter:blur(18px) saturate(1.2);
  -webkit-backdrop-filter:blur(18px) saturate(1.2);
}

.about-story-quicknav a{
  width:100%;
  min-width:0;
  min-height:34px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:7px 7px;
  border:1px solid var(--border);
  border-radius:999px;
  background:var(--surface);
  color:var(--text);
  font-size:10.5px;
  line-height:1;
  font-weight:850;
  text-align:center;
  text-decoration:none;
  white-space:nowrap;
}

.about-story-quicknav a:hover,
.about-story-quicknav a.is-active{
  border-color:var(--orange);
  background:var(--orange);
  color:#fff;
}

.about-story-quicknav a[data-story-home]{
  border-color:color-mix(in srgb,var(--orange) 42%,var(--border));
}

/* =========================
   STATIC ART
   ========================= */
.about-story-art{
  position:fixed;
  z-index:1;
  left:78%;
  top:39%;
  width:min(58vw,800px);
  max-width:none;
  pointer-events:none;
  opacity:.82;
  transform:translate(-50%,-50%) rotate(-3deg) scale(.9);
  transform-origin:center;
  filter:drop-shadow(0 24px 30px rgba(17,24,39,.07));
}

.about-story-art img{
  display:block;
  width:100%;
  height:auto;
  user-select:none;
  -webkit-user-drag:none;
}

/* Po wejsciu w social footer grafika znika calkowicie. */
html.story-art-footer-hidden .about-story-art{
  display:none!important;
}

/* =========================
   CONTENT
   ========================= */
.story-section{
  position:relative;
  z-index:3;
  width:min(61%,720px);
  margin:30px 0;
  padding:35px 37px;
  border:1px solid var(--border);
  border-radius:28px;
  background:var(--surface);
  box-shadow:0 18px 48px rgba(17,24,39,.065);
}

.story-section.story-align-right{
  margin-left:auto;
}

.story-section.story-wide{
  width:100%;
  max-width:none;
}

.story-section.story-naked{
  border:0;
  background:transparent;
  box-shadow:none;
  padding-left:0;
  padding-right:0;
}

.story-hero{
  min-height:650px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  margin-top:0;
  padding-top:58px;
  padding-bottom:58px;
  background:transparent;
  box-shadow:none;
  border:0;
}

.story-hero h1{
  margin:8px 0 18px;
  max-width:770px;
  font-size:clamp(48px,6.25vw,80px);
  line-height:.96;
  letter-spacing:-.05em;
  color:var(--text);
}

.story-lead{
  margin:0;
  max-width:690px;
  font-size:clamp(18px,1.5vw,21px);
  line-height:1.6;
  color:var(--text)!important;
}

.story-kicker{
  display:inline-flex;
  width:max-content;
  margin:0 0 5px;
  color:var(--orange);
  font-size:11px;
  line-height:1.15;
  font-weight:900;
  letter-spacing:.15em;
  text-transform:uppercase;
}

.story-section h2{
  margin:6px 0 14px;
  max-width:820px;
  font-size:clamp(30px,4vw,50px);
  line-height:1.05;
  letter-spacing:-.035em;
  color:var(--text);
}

.story-section h3{
  margin:0 0 7px;
  font-size:18px;
  line-height:1.2;
  color:var(--text);
}

.story-section p{
  margin:0;
  color:var(--text)!important;
  font-size:15px;
  line-height:1.76;
}

.story-section p + p{
  margin-top:12px;
}

.story-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:24px;
}

.story-actions .btn{
  min-height:44px;
}

.story-chip-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:20px;
}

.story-chip{
  display:inline-flex;
  align-items:center;
  min-height:34px;
  padding:7px 12px;
  border:1px solid var(--border);
  border-radius:999px;
  background:var(--surface);
  color:var(--text);
  font-size:11px;
  font-weight:850;
}

.story-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin-top:20px;
}

.story-grid--4{
  grid-template-columns:repeat(4,minmax(0,1fr));
}

.story-mini,
.story-example{
  position:relative;
  z-index:4;
  padding:19px;
  border:1px solid var(--border);
  border-radius:20px;
  background:var(--surface);
}

.story-example{
  border-color:color-mix(in srgb,var(--orange) 18%,var(--border));
  background:color-mix(in srgb,var(--orange-pale) 32%,var(--surface));
}

.story-mini strong,
.story-example strong{
  display:block;
  margin-bottom:7px;
  color:var(--text);
  font-size:16px;
  line-height:1.2;
}

.story-example strong{
  color:var(--orange-dark);
  font-size:14px;
}

.story-mini p,
.story-example p{
  font-size:13px;
  line-height:1.62;
}

.story-quote,
.story-final{
  position:relative;
  z-index:4;
  width:100%;
  margin:32px 0;
  border-radius:28px;
  background:#161b22;
  color:#fff;
  box-shadow:0 22px 50px rgba(17,24,39,.14);
}

.story-quote{
  padding:34px 38px;
}

.story-final{
  padding:42px;
  background:
    radial-gradient(circle at 88% 12%,rgba(255,90,0,.22),transparent 34%),
    #161b22;
}

.story-quote .story-kicker,
.story-final .story-kicker{
  color:#ff945f;
}

.story-quote h2,
.story-quote p,
.story-quote strong,
.story-final h2,
.story-final p{
  color:#fff!important;
}

.story-quote h2{
  margin:6px 0 12px;
  font-size:clamp(30px,4.6vw,54px);
  line-height:1.04;
}

.story-quote p,
.story-final p{
  max-width:880px;
  font-size:16px;
  line-height:1.7;
}

.story-final h2{
  max-width:860px;
  margin:7px 0 14px;
  font-size:clamp(34px,5vw,60px);
  line-height:1;
  letter-spacing:-.04em;
}

.story-final .btn--ghost{
  background:#fff;
  border-color:#fff;
  color:#111827;
}

.story-faq{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin-top:20px;
}

.story-faq details{
  border:1px solid var(--border);
  border-radius:18px;
  background:var(--surface);
  overflow:hidden;
}

.story-faq summary{
  cursor:pointer;
  list-style:none;
  padding:16px 18px;
  color:var(--text);
  font-size:14px;
  font-weight:850;
}

.story-faq summary::-webkit-details-marker{
  display:none;
}

.story-faq summary::after{
  content:"+";
  float:right;
  color:var(--orange);
  font-size:20px;
  line-height:1;
}

.story-faq details[open] summary::after{
  content:"-";
}

.story-faq details p{
  padding:0 18px 17px;
  font-size:13px;
  line-height:1.65;
}

/* Stopka: oba napisy maja dokladnie taka sama typografie. */
body.about-story-page .site-mountain-origin-control,
body.about-story-page .site-ai-details>summary.site-ai-details__title{
  font-family:Manrope,system-ui,sans-serif!important;
  font-size:10px!important;
  line-height:1.25!important;
  font-weight:800!important;
  letter-spacing:0!important;
}

/* Bez animacji wejsc sekcji. */
.js .story-section[data-story-section],
.js .story-quote[data-story-section],
.js .story-final[data-story-section]{
  opacity:1!important;
  transform:none!important;
  transition:none!important;
}

html[data-theme="dark"] .story-section{
  background:var(--surface);
  box-shadow:0 18px 48px rgba(0,0,0,.16);
}

html[data-theme="dark"] .story-section.story-naked,
html[data-theme="dark"] .story-hero{
  background:transparent;
  box-shadow:none;
}

html[data-theme="dark"] .story-mini,
html[data-theme="dark"] .story-faq details{
  background:var(--surface-2);
}

html[data-theme="dark"] .story-example{
  background:color-mix(in srgb,var(--orange) 12%,var(--surface));
}

html[data-theme="dark"] .about-story-art{
  filter:
    brightness(1.1)
    saturate(1.08)
    drop-shadow(0 28px 38px rgba(0,0,0,.26));
}

@media (max-width:980px){
  .story-section{
    width:min(72%,700px);
  }

  .story-grid--4{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .about-story-art{
    left:76%;
    top:38%;
    width:min(72vw,720px);
  }
}

@media (max-width:760px){
  .about-story-main{
    overflow:hidden;
  }

  .about-story-shell{
    padding-left:16px;
    padding-right:16px;
  }

  .about-story-quicknav{
    top:7px;
    width:calc(100% - 12px);
  }

  .about-story-quicknav__inner{
    grid-template-columns:repeat(6,minmax(0,1fr));
    gap:4px;
    padding:5px;
    border-radius:20px;
  }

  .about-story-quicknav a{
    min-height:32px;
    padding:5px 2px;
    font-size:8.6px;
    line-height:1.05;
    white-space:normal;
  }

  /* Na telefonie grafika nie jest widoczna na starcie.
     Pojawia sie dopiero po osiagnieciu markera pod hero. */
  .about-story-art{
    display:none;
    left:71%;
    top:52%;
    width:124vw;
    opacity:.2;
    transform:translate(-50%,-50%) rotate(-2deg);
    filter:drop-shadow(0 14px 22px rgba(17,24,39,.05));
  }

  html.story-art-mobile-visible .about-story-art{
    display:block;
  }

  html.story-art-footer-hidden .about-story-art{
    display:none!important;
  }

  .story-section,
  .story-section.story-align-right{
    width:100%;
    margin:18px 0;
    padding:24px 20px;
    border-radius:23px;
    background:var(--surface);
  }

  .story-section.story-naked{
    padding-left:0;
    padding-right:0;
    background:transparent;
  }

  /* Hero jest juz czysty, bez grafiki pod tekstem. */
  .story-hero{
    min-height:auto;
    padding:70px 0 42px;
    justify-content:flex-start;
  }

  .story-hero h1{
    max-width:100%;
    font-size:clamp(40px,11.2vw,58px);
    line-height:.97;
  }

  .story-lead{
    max-width:100%;
    font-size:16px;
    line-height:1.55;
  }

  .story-section h2{
    font-size:clamp(29px,8vw,40px);
  }

  .story-grid,
  .story-grid--4{
    grid-template-columns:1fr;
  }

  .story-quote{
    margin:22px 0;
    padding:27px 22px;
    border-radius:24px;
  }

  .story-final{
    padding:30px 22px;
    border-radius:25px;
  }

  .story-faq{
    grid-template-columns:1fr;
  }

  .story-actions{
    display:grid;
    grid-template-columns:1fr;
  }

  .story-actions .btn{
    width:100%;
    justify-content:center;
  }

  body.about-story-page .site-mountain-origin-control,
  body.about-story-page .site-ai-details>summary.site-ai-details__title{
    font-size:9px!important;
    line-height:1.25!important;
    font-weight:800!important;
  }
}

@media (max-width:420px){
  .about-story-quicknav a{
    font-size:8.2px;
  }

  .about-story-art{
    width:128vw;
  }

  body.about-story-page .site-mountain-origin-control,
  body.about-story-page .site-ai-details>summary.site-ai-details__title{
    font-size:8.5px!important;
  }
}

/* =========================================================
   R7327 - MOBILE ONLY
   Grafika ma byc ostra i widoczna miedzy sekcjami.
   Desktop pozostaje bez zmian.
   ========================================================= */
@media (max-width:760px){

  /* Obraz jest wiekszy i wyrazniejszy.
     Nie ma rozmycia, cienia ani dodatkowych efektow. */
  .about-story-art{
    left:72%!important;
    top:54%!important;
    width:142vw!important;
    max-width:none!important;
    opacity:.70!important;
    transform:translate(-50%,-50%) rotate(-2deg)!important;
    filter:none!important;
  }

  html[data-theme="dark"] .about-story-art{
    filter:none!important;
    opacity:.64!important;
  }

  .about-story-art img{
    image-rendering:auto;
  }

  /* Na poczatku nadal nie pokazujemy grafiki.
     Widoczna jest dopiero od markera ustawionego w R7326. */
  .about-story-art{
    display:none!important;
  }

  html.story-art-mobile-visible .about-story-art{
    display:block!important;
  }

  html.story-art-footer-hidden .about-story-art{
    display:none!important;
  }

  /* Wyrazne przerwy miedzy wszystkimi blokami.
     Wlasnie w tych przerwach widac grafike procesu logo. */
  .about-story-shell > [data-story-section]{
    margin-top:92px!important;
    margin-bottom:0!important;
  }

  .about-story-shell > .story-hero{
    margin-top:0!important;
    padding-bottom:155px!important;
  }

  /* Pierwsza przestrzen po chipach na O mnie ma pokazac grafike od razu. */
  .story-hero .story-chip-row{
    margin-bottom:0!important;
  }

  /* Karty sa calkowicie kryjace, dzieki czemu grafika nie przechodzi przez tekst. */
  .story-section:not(.story-naked),
  .story-quote,
  .story-final{
    position:relative!important;
    z-index:4!important;
    background:var(--surface)!important;
  }

  .story-quote,
  .story-final{
    background:#161b22!important;
  }

  /* Troche wiecej przestrzeni na dole ostatniego bloku,
     zanim zacznie sie czesc social/footer. */
  .about-story-shell > [data-story-section]:last-child{
    margin-bottom:72px!important;
  }
}

@media (max-width:430px){
  .about-story-art{
    left:73%!important;
    width:148vw!important;
  }

  .about-story-shell > [data-story-section]{
    margin-top:88px!important;
  }

  .about-story-shell > .story-hero{
    padding-bottom:145px!important;
  }
}


/* =========================================================
   R7329 - MOBILE ART REGION
   Desktop bez zmian.
   Na mobile grafika zaczyna sie dopiero pod hero/chipami i
   konczy razem z trescia strony, przed paskiem social/footer.
   ========================================================= */
@media (max-width:760px){

  /* Stary fixed obraz jest na mobile calkowicie wylaczony. */
  .about-story-art{
    display:none!important;
  }

  html.story-art-mobile-visible .about-story-art,
  html.story-art-footer-hidden .about-story-art{
    display:none!important;
  }

  /* Region zaczyna sie bezposrednio po hero.
     Wszystkie kolejne sekcje maja rowne przerwy. */
  .story-mobile-art-region{
    position:relative;
    z-index:2;
    display:flex;
    flex-direction:column;
    gap:92px;
    margin:0;
    padding:92px 0 26px;
    isolation:isolate;
  }

  /* Jedna ciagla, ostra warstwa puzzli tylko w tym regionie. */
  .story-mobile-art-region::before{
    content:"";
    position:absolute;
    z-index:0;
    inset:0;
    pointer-events:none;
    background-image:url("../img/logo-process-r7324.webp");
    background-repeat:repeat-y;
    background-position:center top;
    background-size:142vw auto;
    opacity:.36;
  }

  html[data-theme="dark"] .story-mobile-art-region::before{
    opacity:.34;
  }

  .story-mobile-art-region > [data-story-section]{
    position:relative!important;
    z-index:2!important;
    margin:0!important;
  }

  /* Karty sa w 100% kryjace. Puzzle widac tylko w rownych przerwach. */
  .story-mobile-art-region > .story-section:not(.story-naked){
    background:var(--surface)!important;
  }

  .story-mobile-art-region > .story-quote,
  .story-mobile-art-region > .story-final{
    background:#161b22!important;
  }

  /* Hero jest czysty. Grafika zaczyna sie dopiero pod nim. */
  .about-story-shell > .story-hero{
    min-height:auto!important;
    margin:0!important;
    padding:70px 0 34px!important;
  }

  /* Usuwamy poprzednie duze marginesy, bo odstepy robi gap regionu. */
  .about-story-shell > [data-story-section]{
    margin-top:0!important;
    margin-bottom:0!important;
  }

  /* Stop regionu jest tuz przed dalsza czescia serwisu. */
  .story-mobile-art-region > [data-story-section]:last-child{
    margin-bottom:0!important;
  }
}

@media (max-width:430px){
  .story-mobile-art-region{
    gap:88px;
    padding-top:88px;
    padding-bottom:24px;
  }

  .story-mobile-art-region::before{
    background-size:148vw auto;
    opacity:.37;
  }
}


/* =========================================================
   R7330 - MOBILE STATIC ART WITH EXACT BOUNDARIES
   Obraz jest nieruchomy wzgledem ekranu.
   Tresc scrolluje sie nad nim.
   Zaczyna sie dokladnie pod markerem startowym.
   Konczy sie dokladnie NAD paskiem sociali.
   ========================================================= */
@media (max-width:760px){

  /* Kasujemy powtarzane tlo z R7329. */
  .story-mobile-art-region::before{
    content:none!important;
    display:none!important;
    background:none!important;
  }

  /* Region zostaje tylko do rownych odstepow miedzy sekcjami. */
  .story-mobile-art-region{
    position:relative!important;
    z-index:2!important;
    display:flex!important;
    flex-direction:column!important;
    gap:92px!important;
    margin:0!important;
    padding:92px 0 26px!important;
    isolation:isolate!important;
  }

  /* Jeden statyczny obraz, dokladnie jak na desktopie.
     JS zmienia WYŁĄCZNIE przyciecie gory i dolu.
     Pozycja, skala i obrot nie zmieniaja sie przy scrollowaniu. */
  .about-story-art{
    display:block!important;
    position:fixed!important;
    z-index:1!important;
    left:72%!important;
    top:54%!important;
    width:142vw!important;
    max-width:none!important;
    opacity:.42!important;
    pointer-events:none!important;
    transform:translate(-50%,-50%) rotate(-2deg)!important;
    filter:none!important;

    --story-mobile-clip-top:100vh;
    --story-mobile-clip-bottom:0px;

    clip-path:inset(
      var(--story-mobile-clip-top)
      0
      var(--story-mobile-clip-bottom)
      0
    )!important;
    -webkit-clip-path:inset(
      var(--story-mobile-clip-top)
      0
      var(--story-mobile-clip-bottom)
      0
    )!important;
  }

  html[data-theme="dark"] .about-story-art{
    opacity:.38!important;
    filter:none!important;
  }

  /* Karty sa nieprzezroczyste, puzzle widac w przerwach. */
  .story-mobile-art-region > [data-story-section]{
    position:relative!important;
    z-index:3!important;
    margin:0!important;
  }

  .story-mobile-art-region > .story-section:not(.story-naked){
    background:var(--surface)!important;
  }

  .story-mobile-art-region > .story-quote,
  .story-mobile-art-region > .story-final{
    background:#161b22!important;
  }

  /* Hero pozostaje czysty. */
  .about-story-shell > .story-hero{
    min-height:auto!important;
    margin:0!important;
    padding:70px 0 34px!important;
  }
}

@media (max-width:430px){
  .about-story-art{
    left:73%!important;
    width:148vw!important;
  }

  .story-mobile-art-region{
    gap:88px!important;
    padding-top:88px!important;
    padding-bottom:24px!important;
  }
}