/* ==========================================================
   Podstrona case study (np. vivefit.html)
   korzysta z css/style.css, tu tylko elementy specyficzne
   ========================================================== */

/* okładka */
.cs-hero { padding: clamp(28px, 4vw, 56px) 0 0; }
.cs-back { display: inline-flex; align-items: center; gap: 8px; margin-bottom: clamp(28px, 4vw, 48px); font-size: 15px; font-weight: 600; text-decoration: none; color: var(--muted); }
.cs-back:hover { color: var(--ink); }
.cs-hero .kicker { display: flex; }
.cs-title { max-width: 1100px; font-size: clamp(38px, 6vw, 88px); line-height: 0.98; font-weight: 800; letter-spacing: -0.04em; word-spacing: 0.1em; }
.cs-title--hero { max-width: 1200px; font-size: clamp(36px, min(7.2vw, 10.4vh), 114px); line-height: 1; letter-spacing: -0.045em; word-spacing: 0; } /* ten sam rozmiar co H1 na stronie głównej */
.cs-lead { max-width: 640px; margin-top: clamp(18px, 2vw, 28px); font-size: clamp(17px, 1.4vw, 20px); line-height: 1.6; color: var(--ink-2); }
.cs-cover { margin: clamp(32px, 4vw, 56px) 0 0; overflow: hidden; border-radius: 18px; background: #EDEAF5; aspect-ratio: 16 / 9; }
.cs-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* najważniejsze fakty pod okładką */
.cs-facts { margin: clamp(28px, 3vw, 40px) 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line-2); }
.cs-facts > div { padding: 18px 20px 0 0; }
.cs-facts dt { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.cs-facts dd { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ink-2); }
@media (max-width: 900px) { .cs-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 8px; } }
@media (max-width: 520px) { .cs-facts { grid-template-columns: 1fr; } }

/* sekcje */
.cs-sec { padding: clamp(56px, 7vw, 100px) 0 0; }
.cs-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 28px clamp(40px, 6vw, 96px); align-items: start; }
@media (max-width: 960px) { .cs-split { grid-template-columns: 1fr; } }
.cs-split__head .h2 { margin-bottom: 20px; }
.cs-split__body { display: flex; flex-direction: column; gap: 18px; }
.cs-p { font-size: 18px; line-height: 1.65; color: var(--ink-2); max-width: 680px; }
.cs-p--sm { font-size: 16px; margin-bottom: 18px; }
.cs-label { margin: 8px 0 0; font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-btn); }
.cs-split__head .cs-label { margin-bottom: 6px; }
.cs-h3 { font-size: clamp(24px, 2.4vw, 34px); font-weight: 800; letter-spacing: -0.04em; line-height: 1.05; }
.head--sub { margin-top: clamp(48px, 6vw, 80px); }

/* karty z numerami */
.cs-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.cs-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cs-cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 700px) { .cs-cards--3, .cs-cards--2 { grid-template-columns: 1fr; } }
.cs-cards > * { display: flex; flex-direction: column; gap: 8px; padding: 20px; border-radius: 14px; background: #FFFFFF; border: 1px solid var(--line); }
.cs-cards__wide { grid-column: 1 / -1; }
.cs-cards__num { font-size: 12px; font-weight: 800; letter-spacing: .1em; color: var(--accent-btn); }
.cs-cards strong { font-size: 17px; font-weight: 800; letter-spacing: -0.01em; }
.cs-cards span:not(.cs-cards__num) { font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.cs-cards--plain .cs-label { margin: 0; }

/* listy */
.cs-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.cs-list li { position: relative; padding-left: 22px; font-size: 16px; line-height: 1.55; color: var(--ink-2); }
.cs-list li::before { content: ""; position: absolute; left: 0; top: .6em; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }

/* persona */
.persona { display: grid; grid-template-columns: 280px minmax(0, 1fr); overflow: hidden; border-radius: 18px; background: #FFFFFF; border: 1px solid var(--line); }
@media (max-width: 800px) { .persona { grid-template-columns: 1fr; } }
.persona__side { background: var(--dark); color: #FFFFFF; padding-bottom: 28px; }
.persona__side img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.persona__side h3 { margin: 24px 24px 16px; font-size: 22px; font-weight: 800; letter-spacing: -0.02em; }
.persona__side ul { margin: 0 24px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.persona__side li { position: relative; padding-left: 18px; font-size: 14px; color: rgba(255,255,255,.82); }
.persona__side li::before { content: ""; position: absolute; left: 0; top: .5em; width: 7px; height: 7px; background: var(--accent); }
.persona__main { padding: clamp(24px, 3vw, 40px); display: flex; flex-direction: column; gap: 14px; }
.persona__main blockquote { margin: 0 0 8px; font-size: clamp(20px, 2vw, 26px); font-weight: 700; line-height: 1.3; letter-spacing: -0.02em; font-style: italic; }
.persona__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 32px; padding-bottom: 18px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
@media (max-width: 600px) { .persona__grid { grid-template-columns: 1fr; } }
.persona__grid .cs-label { margin: 0 0 6px; }
.persona__grid p:not(.cs-label) { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ink-2); }

/* zrzuty ekranów */
.cs-shot { margin: 0; }
.cs-shot img { display: block; width: 100%; height: auto; border-radius: 14px; box-shadow: 0 0 0 1px var(--line), 0 30px 60px -36px rgba(11,11,11,.35); background: #FFFFFF; }
.cs-shot--soft img { border-radius: 18px; }
.cs-shot figcaption { margin-top: 12px; font-size: 14px; font-weight: 600; color: var(--muted); }
.cs-media { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 3fr); gap: 28px clamp(28px, 4vw, 56px); align-items: start; }
@media (max-width: 960px) { .cs-media { grid-template-columns: 1fr; } }
.cs-list--side { padding-top: 8px; }
.cs-gallery { display: grid; grid-template-columns: 1fr 1fr 2fr; gap: 20px; align-items: start; }
@media (max-width: 900px) { .cs-gallery { grid-template-columns: 1fr 1fr; } .cs-gallery > :last-child { grid-column: 1 / -1; } }
@media (max-width: 520px) { .cs-gallery { grid-template-columns: 1fr; } }

/* paleta kolorów (zakodowana, nie obrazek) */
.palette { padding: clamp(20px, 3vw, 32px); border-radius: 18px; background: #FFFFFF; border: 1px solid var(--line); }
.palette__name { margin: 0 0 10px; font-size: 15px; font-weight: 800; }
.palette__row { list-style: none; margin: 0 0 22px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 10px 8px; }
.palette__row:last-child { margin-bottom: 0; }
.palette__row li { display: flex; flex-direction: column; gap: 3px; font-size: 10.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.palette__row li::before { content: ""; height: 40px; border-radius: 8px; background: var(--c); box-shadow: inset 0 0 0 1px rgba(11,11,11,.06); margin-bottom: 4px; }
.palette__row b { font-size: 11px; color: var(--ink); }
.palette__row--alerts { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* wynik */
.cs-score { margin: 8px 0 0; font-size: 28px; font-weight: 700; letter-spacing: -0.02em; }
.cs-score span { font-size: clamp(80px, 10vw, 140px); font-weight: 800; line-height: 1; letter-spacing: -0.05em; color: var(--accent); }

/* cytat z wnioskiem */
.cs-quote { margin: 8px 0; padding: 24px 28px; border-left: 4px solid var(--accent); border-radius: 0 14px 14px 0; background: #FFFFFF; font-size: clamp(19px, 1.8vw, 24px); font-weight: 700; line-height: 1.4; letter-spacing: -0.015em; }
.cs-quote cite { display: block; margin-top: 12px; font-style: normal; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }

/* zakończenie */
.cs-next { padding: clamp(72px, 9vw, 128px) 0 clamp(64px, 8vw, 112px); }
.cs-next__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.cs-split__head .cs-p { margin-bottom: 22px; }
.cs-score { margin-bottom: 14px; }

/* ===== elementy dodane dla case study IMSET ===== */
.cs-cover--navy { background: #0D1235; aspect-ratio: auto; }
.cs-cover--navy img { height: auto; max-height: 720px; object-fit: contain; object-position: center top; }

/* lista kroków z numerami (pionowa) */
.cs-steps { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 22px; }
.cs-steps li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; }
.cs-steps strong { display: block; font-size: 18px; font-weight: 800; margin-bottom: 4px; }
.cs-steps p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--ink-2); }
.cs-steps .cs-cards__num { padding-top: 4px; }

/* ścieżka klienta jako pigułki ze strzałkami */
.cs-path { list-style: none; margin: 10px 0 28px; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 0; }
.cs-path li { padding: 10px 18px; border-radius: 999px; background: #FFFFFF; border: 1px solid var(--line); font-size: 15px; font-weight: 700; }
.cs-path li.is-first { background: var(--ink); border-color: var(--ink); color: #FFFFFF; }
.cs-path li + li::before { content: "→"; display: inline-block; margin: 0 14px 0 -32px; width: 18px; color: var(--muted); font-weight: 700; }
.cs-path li + li { margin-left: 32px; }

/* dwie warstwy strony + efekt */
.cs-layers { margin-top: 10px; display: grid; grid-template-columns: 1fr 1fr minmax(0, .7fr); gap: 14px; }
@media (max-width: 900px) { .cs-layers { grid-template-columns: 1fr; } }
.cs-layers__card { display: flex; flex-direction: column; gap: 8px; padding: 22px; border-radius: 14px; background: #FFFFFF; border: 1px solid var(--line); }
.cs-layers__card strong { font-size: clamp(20px, 1.8vw, 24px); font-weight: 800; letter-spacing: -0.02em; }
.cs-layers__card span:not(.cs-cards__num) { font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.cs-layers__card--dark { background: var(--dark); border-color: var(--dark); color: #FFFFFF; justify-content: center; }
.cs-layers__card--dark strong { font-size: 19px; line-height: 1.35; }

/* zrzuty parami i trójkami */
.cs-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.cs-trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: start; }
@media (max-width: 800px) { .cs-pair, .cs-trio { grid-template-columns: 1fr; } }
.cs-shot figcaption { line-height: 1.55; font-weight: 500; color: var(--ink-2); }
.cs-shot figcaption b { font-weight: 700; color: var(--ink); }

/* punkty przełamania */
.cs-bp { list-style: none; margin: 24px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 1000px) { .cs-bp { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .cs-bp { grid-template-columns: 1fr; } }
.cs-bp li { display: flex; flex-direction: column; gap: 4px; padding: 18px; border-radius: 14px; background: #FFFFFF; border: 1px solid var(--line); font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.cs-bp strong { font-size: 20px; font-weight: 800; color: var(--ink); }
.cs-bp__meta { font-size: 12px; font-weight: 700; letter-spacing: .06em; color: var(--accent-btn); }
.cs-media--rev { margin-top: clamp(48px, 6vw, 80px); grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); align-items: center; }
.cs-media--rev .cs-h3 { margin-bottom: 18px; }
@media (max-width: 960px) { .cs-media--rev { grid-template-columns: 1fr; } }

/* paleta z dłuższymi nazwami */
.palette__row--wide { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }

/* opisy mikrointerakcji */
.cs-specs { display: flex; flex-direction: column; gap: 22px; }
.cs-specs h3 { margin: 0 0 8px; font-size: 18px; font-weight: 800; }
.cs-specs p { margin: 0 0 6px; font-size: 14.5px; line-height: 1.55; color: var(--ink-2); }
.cs-specs b { color: var(--ink); }
.cs-media:has(.cs-specs) { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
@media (max-width: 960px) { .cs-media:has(.cs-specs) { grid-template-columns: 1fr; } }

/* ===== elementy dodane dla case study My Centre (CHTC) ===== */
.cs-cover--chtc { background: #173450; aspect-ratio: auto; padding: clamp(24px, 4vw, 56px) clamp(24px, 6vw, 96px) 0; }
.cs-cover--chtc img { height: auto; border-radius: 12px 12px 0 0; }
.cs-role { margin-top: 8px; padding: 24px 28px; border-radius: 14px; background: #173450; color: #FFFFFF; }
.cs-role .cs-label { margin: 0 0 8px; color: #8CC63F; }
.cs-role p:not(.cs-label) { margin: 0; font-size: 18px; line-height: 1.6; color: rgba(255,255,255,.88); }
.cs-role strong { color: #8CC63F; }
.cs-pair--wide { grid-template-columns: 1fr 1fr; align-items: center; }
.cs-shot--narrow { max-width: 760px; margin-left: auto; margin-right: auto; }
.cs-shot--mid { max-width: 960px; margin-left: auto; margin-right: auto; } /* mniejszy, wyśrodkowany zrzut ekranu */

/* ===== elementy dodane dla case study Ecol-Unicon ===== */
.cs-cover--logo { aspect-ratio: 16 / 6; display: flex; align-items: center; justify-content: center; background-color: #F7F7F7;
  background-image: linear-gradient(rgba(11,11,11,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(11,11,11,.08) 1px, transparent 1px);
  background-size: 64px 64px; box-shadow: inset 0 0 0 1px var(--line); }
.cs-cover--logo img { width: min(38%, 420px); height: auto; object-fit: contain; }
.cs-personas { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.cs-personas li { padding: 9px 16px; border-radius: 999px; border: 1px solid var(--line-2); font-size: 14px; font-weight: 600; background: #FFFFFF; }
.cs-personas li.is-on { background: var(--ink); border-color: var(--ink); color: #FFFFFF; }
.cs-ia { display: grid; gap: 28px; }
.cs-note { max-width: 760px; margin: 24px 0 0; font-size: 17px; line-height: 1.6; color: var(--ink-2); padding-left: 18px; border-left: 3px solid var(--accent); }
.cs-wf { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin: 10px 0 36px; }
@media (max-width: 1000px) { .cs-wf { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .cs-wf { grid-template-columns: 1fr; } }
.cs-wf figure { margin: 0; }
.cs-wf__frame { max-height: 420px; overflow-y: auto; border-radius: 12px; background: #FFFFFF; box-shadow: 0 0 0 1px var(--line), 0 24px 48px -32px rgba(11,11,11,.35); scrollbar-width: thin; }
.cs-wf__frame img { display: block; width: 100%; height: auto; }
.cs-wf figcaption { margin-top: 10px; font-size: 14px; font-weight: 700; }
.cs-store { margin-top: 24px; } /* link do aplikacji w Google Play */