/* Podstrona realizacji: tylko to, czego nie ma w motywie (motyw.css). Układ zaakceptowany 2026-11-12 na ZZ Bayer. */
.cs-label{font-family:var(--d);font-weight:600;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.cs-label a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none}.cs-label a:hover{color:var(--ink)}

.cs-top{padding:clamp(28px,4vw,56px) 0 clamp(96px,11vw,160px)}
.cs-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:clamp(32px,5vw,80px);align-items:end;margin-top:22px}
.cs-hero h1{font-family:var(--d);font-weight:700;text-transform:uppercase;font-size:clamp(2.2rem,4.4vw,4rem);line-height:1.08;letter-spacing:.015em;text-wrap:balance}
.cs-hero .lead{max-width:44ch}
.cs-shot{display:block;aspect-ratio:3/2;overflow:hidden;background:var(--grey);outline:1px solid var(--line);outline-offset:-1px}
.cs-shot img{width:100%;height:100%;object-fit:cover;object-position:top}
.cs-facts{margin-top:clamp(32px,4vw,56px);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--ink)}
.cs-facts div{padding:18px 22px}
.cs-facts div+div{border-left:1px solid var(--ink)}
.cs-facts dd{margin-top:4px;font-weight:500;line-height:1.4;overflow-wrap:anywhere}

.cs-two{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,5vw,80px);align-items:start}
.cs-two .herocta{margin-top:28px}

/* zdania w jednej ramce: wybrane odwraca się na czarno, odpowiedź stoi obok */
.z2{margin-top:clamp(40px,5vw,64px);display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);border:1px solid var(--ink)}
.z2-it{display:contents}
.z2-tab{grid-column:1;display:flex;justify-content:space-between;align-items:center;gap:20px;width:100%;min-height:44px;padding:clamp(18px,1.7vw,24px) clamp(24px,3vw,40px);text-align:left;background:#fff;color:var(--ink);border:0;border-top:1px solid var(--ink);cursor:pointer;font-family:var(--d);font-weight:600;text-transform:uppercase;font-size:clamp(24px,2.4vw,32px);line-height:1.16;letter-spacing:.01em;transition:background .25s var(--ease),color .25s}
.z2-it:first-child .z2-tab{border-top:0}
.z2-tab:hover{background:#f0f0f0}
.z2-tab i{flex:none;font-size:22px;opacity:0;transition:opacity .25s}
.z2-tab[aria-expanded="true"]{background:var(--ink);color:#fff}
.z2-tab[aria-expanded="true"] i{opacity:1}
.z2-tab[aria-expanded="true"]::selection{background:#fff;color:var(--ink)}
.z2-tab:focus-visible{outline:2px solid var(--ink);outline-offset:-6px}
.z2-tab[aria-expanded="true"]:focus-visible{outline-color:#fff}
.z2-panel{grid-column:2;grid-row:1 / span var(--n,4);display:none;flex-direction:column;justify-content:space-between;gap:28px;padding:clamp(28px,3.4vw,48px);border-left:1px solid var(--ink)}
.z2-it.on .z2-panel{display:flex}
.z2-a{font-size:18px;font-weight:500;max-width:46ch}
.z2-panel .cs-list{margin-top:0}

.cs-ekrany picture{display:block;width:100%;height:100%}
.cs-list{list-style:none;margin-top:22px}
.cs-list li{display:flex;gap:10px;padding:12px 0;border-top:1px solid var(--line);font-size:16px;line-height:1.45}
.cs-list li:last-child{border-bottom:1px solid var(--line)}
.cs-list li i{margin-top:3px}
.cs-list-0{margin-top:0}

.cs-phones{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.6vw,40px)}
.cs-phones figure{margin:0}
.cs-phone{aspect-ratio:390/720;overflow:hidden;background:var(--grey);outline:1px solid var(--line);outline-offset:-1px}
.cs-phone img{width:100%;height:100%;object-fit:cover;object-position:top}
.cs-phones figcaption{margin-top:10px;font-size:14px;color:var(--ink-2)}

.cs-band .w{align-items:center}
/* pasmo bez liczb: sama opinia albo samo zdanie na całą szerokość */
.cs-band-1 .w{grid-template-columns:1fr}
.cs-band-1 blockquote,.cs-band-1 .cs-say{max-width:22ch}
.cs-say{font-family:var(--d);font-weight:600;text-transform:uppercase;font-size:clamp(2.2rem,4.6vw,4.4rem);line-height:1.1;text-wrap:balance}
.cs-nums{display:grid;gap:22px}
.cs-nums div{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:center;border-top:1px solid #4a4a4a;padding-top:20px}
.cs-nums div b{min-width:1.1ch}
.cs-nums b{display:block;font-family:var(--d);font-weight:800;font-size:clamp(2.2rem,3.4vw,3.2rem);line-height:.9;letter-spacing:.01em}
.cs-nums span{display:block;color:#bdbdbd;font-size:14px;line-height:1.6}

.cs-more{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,2.6vw,40px);margin-top:40px}
.cs-more a{text-decoration:none}
.cs-more h3{margin-top:14px;padding-top:14px;border-top:1px solid var(--ink);font-family:var(--d);font-weight:700;text-transform:uppercase;letter-spacing:.04em;font-size:22px;line-height:1.14}
.cs-more p{color:var(--ink-2);font-size:14px}
.cs-more a:hover h3{text-decoration:underline;text-decoration-thickness:2px}
/* lista wszystkich realizacji: te same kafle w trzech kolumnach */
.cs-more-lista{row-gap:clamp(40px,5vw,72px)}
.cs-all{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-top:28px;font-weight:500}

/* zamknięcie strony: jedno pytanie i „Napisz”, bez czarnego bloku i bez formularza */
.cs-cta{padding:clamp(72px,8vw,120px) 0 clamp(40px,5vw,72px)}
.cs-cta-in{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:24px 48px;border-top:1px solid var(--ink);padding-top:32px}
.cs-cta h2{font-family:var(--d);font-weight:700;text-transform:uppercase;font-size:clamp(24px,2.4vw,32px);line-height:1.14;letter-spacing:.03em;text-wrap:balance;max-width:30ch}
.cs-cta-a{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px}
.cs-cta-a span{color:var(--ink-2);font-size:15px}
.cs-cta-a span a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink);font-weight:500}
.faq-ask{justify-content:flex-start}

@media (max-width:900px){
  .cs-hero,.cs-two{grid-template-columns:1fr}
  .z2{grid-template-columns:1fr}
  .z2-tab i{transform:rotate(90deg)}
  .z2-panel{grid-column:1;grid-row:auto;border-left:0;border-top:1px solid var(--ink)}
  .cs-komputer{display:none}
  /* na telefonie kadr jest pionowy, żeby zrzut z telefonu dało się przeczytać */
  .cs-ekrany .frame .img{aspect-ratio:3/4}
  .cs-hero{align-items:start}
  .cs-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cs-facts div{padding:16px 14px}
  .cs-facts div:nth-child(3){border-left:0}
  .cs-facts div:nth-child(n+3){border-top:1px solid var(--ink)}
  /* zrzuty z telefonu jako pasek przesuwany palcem, jak realizacje na stronie głównej */
  .cs-phones{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 calc(var(--g) * -1);padding:0 var(--g) 12px;scrollbar-width:thin}
  .cs-phones figure{flex:0 0 62vw;scroll-snap-align:start}
  .cs-nums{margin-top:8px}
  .cs-more{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;margin-left:calc(var(--g) * -1);margin-right:calc(var(--g) * -1);padding:0 var(--g) 12px;scroll-padding-left:var(--g);scrollbar-width:thin}
  .cs-more a{flex:0 0 76vw;scroll-snap-align:start}
  .cs-cta-in{display:block}
  .cs-cta-a{margin-top:20px}
  .cs-more-lista{display:grid;grid-template-columns:1fr;overflow:visible;margin:40px 0 0;padding:0}
}