/* ==========================================================================================
 * CCO — wygląd komponentów stron. JEDNO miejsce na cały wygląd treści.
 *
 * ⚠️ Kolory bierzemy ze zmiennych marki, nie wpisujemy ich w regułach — dzięki temu zmiana
 *    palety w jednym miejscu przechodzi przez całą witrynę, a plik przeżyje zmianę motywu.
 * ⚠️ Nic tu nie zależy od Kubio ani od `vertice` — to ma działać także na GeneratePress.
 * ========================================================================================== */

:root {
  --cco-granat:  #232039;
  --cco-zielen:  #859e22;
  --cco-szary:   #f6f7f8;
  --cco-linia:   #e3e4e8;
  --cco-tekst:   #2b2b33;
  --cco-cichy:   #6b6b78;
  --cco-szer:    1200px;   /* szerokość kolumny treści */
  --cco-odstep:  clamp(48px, 6vw, 88px);
}

/* --- wspólne --------------------------------------------------------------------------- */
.cco-sekcja, .cco-proces, .cco-baner, .cco-kontakt, .cco-hero { box-sizing: border-box; }
.cco-sekcja *, .cco-proces *, .cco-baner *, .cco-kontakt *, .cco-hero * { box-sizing: border-box; }

.cco-sekcja__srodek, .cco-hero__srodek, .cco-baner__srodek, .cco-kontakt__srodek, .cco-srodek {
  max-width: var(--cco-szer); margin: 0 auto; padding-left: 24px; padding-right: 24px; box-sizing: border-box;
}
.cco-tlo--bialy  { background: #fff; }
.cco-tlo--szary  { background: var(--cco-szary); }
.cco-tlo--granat { background: var(--cco-granat); color: #fff; }
.cco-tlo--granat .cco-sekcja__tytul, .cco-tlo--granat a { color: #fff; }

.cco-sekcja, .cco-proces { padding-block: var(--cco-odstep); }
.cco-sekcja__tytul, .cco-baner__tytul, .cco-kontakt__tytul {
  font-size: clamp(26px, 3vw, 38px); font-weight: 300; line-height: 1.25;
  color: var(--cco-granat); margin: 0 0 18px;
}
.cco-sekcja__podtytul { font-size: 17px; color: var(--cco-cichy); margin: 0 0 28px; max-width: 78ch; }
.cco-sekcja__tresc { font-size: 17px; line-height: 1.7; color: var(--cco-tekst); }
.cco-sekcja__tresc p { margin: 0 0 1em; }
.cco-sekcja__tresc ul { padding-left: 1.2em; margin: 0 0 1em; }
.cco-sekcja__tresc li { margin-bottom: .45em; }

/* --- przyciski ------------------------------------------------------------------------- */
.cco-btn {
  display: inline-block; padding: 14px 30px; border-radius: 8px; text-decoration: none;
  font-size: 15px; letter-spacing: .06em; text-transform: uppercase; font-weight: 400;
  transition: background-color .25s ease, color .25s ease;
}
.cco-btn--glowny { background: var(--cco-granat); color: #fff; }
.cco-btn--glowny:hover { background: var(--cco-zielen); color: #fff; }
.cco-btn--drugi { background: transparent; color: var(--cco-granat); border: 1px solid var(--cco-granat); }
.cco-btn--drugi:hover { background: var(--cco-granat); color: #fff; }

/* --- hero ------------------------------------------------------------------------------ */
.cco-hero { background: var(--cco-szary); padding-block: var(--cco-odstep) 0; }
.cco-hero__srodek { display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: center; }
.cco-hero__tytul { font-size: clamp(30px, 4vw, 48px); font-weight: 300; line-height: 1.15; color: var(--cco-granat); margin: 0 0 20px; }
.cco-hero__opis { font-size: 17px; line-height: 1.7; color: var(--cco-tekst); }
.cco-hero__opis p { margin: 0 0 1em; }
.cco-hero__przyciski { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 26px; }
.cco-hero__foto img { width: 100%; height: auto; border-radius: 12px; display: block; }
.cco-hero__liczby {
  max-width: var(--cco-szer); margin: var(--cco-odstep) auto 0; padding: 0 24px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
.cco-liczba { display: flex; gap: 14px; align-items: flex-start; background: #fff; border-radius: 12px; padding: 22px 24px; box-shadow: 0 4px 10px rgba(59,73,105,.12); }
.cco-liczba__ikona { width: 38px; height: 38px; flex: 0 0 auto; }
.cco-liczba__wartosc { display: block; font-size: 28px; font-weight: 600; color: var(--cco-granat); line-height: 1.1; }
.cco-liczba__opis { display: block; font-size: 14px; color: var(--cco-cichy); margin-top: 6px; line-height: 1.5; }

/* --- siatka i karty -------------------------------------------------------------------- */
.cco-siatka { display: grid; gap: 24px; margin-top: 8px; }
.cco-siatka--1 { grid-template-columns: 1fr; }
.cco-siatka--2 { grid-template-columns: repeat(2, 1fr); }
.cco-siatka--3 { grid-template-columns: repeat(3, 1fr); }
.cco-siatka--4 { grid-template-columns: repeat(4, 1fr); }
.cco-karta { background: #fff; border: 1px solid var(--cco-linia); border-radius: 12px; padding: 28px 26px; }
.cco-karta--klikalna { text-decoration: none; color: inherit; transition: box-shadow .25s ease, transform .25s ease; display: block; }
.cco-karta--klikalna:hover { box-shadow: 0 8px 20px rgba(59,73,105,.15); transform: translateY(-2px); }
.cco-karta__ikona { width: 44px; height: 44px; margin-bottom: 16px; }
.cco-karta__tytul { font-size: 19px; font-weight: 500; color: var(--cco-granat); margin: 0 0 12px; line-height: 1.35; }
.cco-karta__tresc { font-size: 16px; line-height: 1.65; color: var(--cco-tekst); }
.cco-karta__tresc p:last-child { margin-bottom: 0; }

/* --- proces ---------------------------------------------------------------------------- */
.cco-proces__kroki { list-style: none; counter-reset: krok; padding: 0; margin: 0; display: grid; gap: 18px; }
.cco-krok { counter-increment: krok; position: relative; background: #fff; border: 1px solid var(--cco-linia); border-radius: 12px; padding: 24px 26px 24px 78px; }
.cco-krok::before {
  content: counter(krok); position: absolute; left: 24px; top: 24px;
  width: 36px; height: 36px; border-radius: 50%; background: var(--cco-granat); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 500;
}
.cco-krok__tytul { font-size: 18px; font-weight: 500; color: var(--cco-granat); margin: 0 0 8px; }
.cco-krok__tresc { font-size: 16px; line-height: 1.65; }
.cco-krok__tresc p:last-child { margin-bottom: 0; }

/* --- baner ----------------------------------------------------------------------------- */
.cco-baner { background: var(--cco-granat); color: #fff; padding-block: var(--cco-odstep); }
.cco-baner__tytul { color: #fff; font-size: clamp(24px, 2.6vw, 34px); margin: 0 0 22px; }
.cco-baner__pozycje { list-style: none; padding: 0; margin: 0 0 28px; display: grid; gap: 10px; }
.cco-pozycja { position: relative; padding-left: 30px; font-size: 16px; line-height: 1.6; }
.cco-pozycja::before { content: ""; position: absolute; left: 0; top: .55em; width: 14px; height: 8px; border-left: 2px solid var(--cco-zielen); border-bottom: 2px solid var(--cco-zielen); transform: rotate(-45deg); }
.cco-baner .cco-btn--glowny { background: var(--cco-zielen); }
.cco-baner .cco-btn--glowny:hover { background: #fff; color: var(--cco-granat); }

/* --- kontakt --------------------------------------------------------------------------- */
.cco-kontakt { padding-block: var(--cco-odstep); background: var(--cco-szary); }
.cco-kontakt__srodek { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.cco-kontakt__tresc { font-size: 17px; line-height: 1.7; }
.cco-kontakt__osoba-box { margin-top: 26px; background: #fff; border-radius: 12px; padding: 24px; }
.cco-kontakt__foto { width: 92px; height: 92px; border-radius: 50%; object-fit: cover; display: block; margin-bottom: 14px; }
.cco-kontakt__intro { margin: 0 0 4px; color: var(--cco-cichy); font-size: 15px; }
.cco-kontakt__osoba { margin: 0 0 8px; font-size: 18px; font-weight: 500; color: var(--cco-granat); }
.cco-kontakt__tel, .cco-kontakt__mail { display: block; color: var(--cco-granat); text-decoration: none; font-size: 17px; }
.cco-kontakt__tel:hover, .cco-kontakt__mail:hover { color: var(--cco-zielen); }
.cco-kontakt__prawa { background: #fff; border-radius: 12px; padding: 28px 26px; }
.cco-kontakt__formularz-tytul { margin: 0 0 18px; font-size: 20px; font-weight: 500; color: var(--cco-granat); }

/* --- propozycje AI do zatwierdzenia ------------------------------------------------------
   ⚠️ Redaktor widzi je wyraźnie; czytelnik nie widzi nic szczególnego. */
.cco-propozycja { background: #fff4cc; box-shadow: 0 0 0 2px #f0c000 inset; border-radius: 3px; padding: 0 3px; }
.cco-propozycja--cicha { background: none; box-shadow: none; padding: 0; }

/* --- telefon --------------------------------------------------------------------------- */
@media (max-width: 980px) {
  .cco-hero__srodek, .cco-kontakt__srodek { grid-template-columns: 1fr; gap: 32px; }
  .cco-hero__liczby { grid-template-columns: 1fr; }
  .cco-siatka--2, .cco-siatka--3, .cco-siatka--4 { grid-template-columns: 1fr; }
}
@media (min-width: 981px) and (max-width: 1200px) {
  .cco-siatka--3, .cco-siatka--4 { grid-template-columns: repeat(2, 1fr); }
}

/* Hero bez zdjęcia — jedna kolumna na pełną szerokość (patrz komentarz w kodzie komponentu). */
.cco-hero--bez-foto .cco-hero__srodek { grid-template-columns: 1fr; }
.cco-hero--bez-foto .cco-hero__opis { max-width: 86ch; }
.cco-hero--bez-foto .cco-hero__tytul { max-width: 20ch; }

/* ==========================================================================================
 * NAGŁÓWEK BEZ KUBIO — odwzorowanie obecnego paska (zmierzone 11.09: 57 px, #232039,
 * Lato 14 px / 300 / wersaliki / #f6f7f8).
 * ========================================================================================== */
.cco-nag { background: var(--cco-granat); position: relative; z-index: 20; }
.cco-nag__pasek {
  max-width: var(--cco-szer); margin: 0 auto; padding: 0 24px;
  min-height: 57px; display: flex; align-items: center; gap: 24px;
}
.cco-nag__logo { display: flex; align-items: center; flex: 0 0 auto; }
.cco-nag__logo img { height: 28px; width: auto; display: block; }
.cco-nag__menu { margin-left: auto; }
/* 15.09: napisy ZAWSZE białe (na home 4 pozycje to kotwice „/#…", WordPress znaczy je jako bieżące —
   zieleń „bieżącej" robiła z menu pstrokaciznę; oryginał nie koloruje bieżącej ani po najechaniu).
   Odstęp 34 px = 6 px przerwy + 2×14 px wewnętrznego marginesu linku (jak w Kubio: padding 5px 14px,
   wiersz 21 px → pozycja 31 px). Ujemny margines z prawej trzyma tekst ostatniej pozycji tam,
   gdzie był (przy krawędzi kolumny). */
.cco-nag__lista { list-style: none; display: flex; align-items: center; gap: 6px; margin: 0 -14px 0 0; padding: 0; }
.cco-nag__lista li { position: relative; }
.cco-nag__lista a {
  font-family: Lato, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 300;
  text-transform: uppercase; color: #f6f7f8; text-decoration: none; line-height: 21px;
  padding: 5px 14px; display: block;
}
/* Efekt najechania wg oryginału (Kubio „bordered-active-item / grow-from-center"): kreska 2 px
   w kolorze #9896a6 rośnie od środka na całą szerokość w 0,3 s. Kolor liter się NIE zmienia.
   Zmierzone 15.09 na cco.expert. ⚠️ Oryginał ma DWIE kreski (nad i pod) — właściciel 15.09:
   „bez tego akcentu nad nazwą, zostaw sam akcent pod spodem" → tylko dolna. */
.cco-nag__lista li::after {
  content: ""; position: absolute; left: 50%; right: 50%; bottom: 0; height: 2px; background: #9896a6;
  opacity: 0; transition: .3s; pointer-events: none;
}
.cco-nag__lista li:hover::after, .cco-nag__lista li:focus-within::after { left: 0; right: 0; opacity: 1; }
.cco-nag__lista .sub-menu { display: none; }
.cco-nag__hamburger { display: none; background: none; border: 0; padding: 10px; margin-left: auto; cursor: pointer; }
.cco-nag__hamburger span { display: block; width: 22px; height: 2px; background: #f6f7f8; margin: 4px 0; }

@media (max-width: 980px) {
  .cco-nag__hamburger { display: block; }
  .cco-nag__menu { display: none; margin-left: 0; width: 100%; }
  .cco-nag__menu--otwarte { display: block; }
  .cco-nag__pasek { flex-wrap: wrap; padding-block: 8px; }
  .cco-nag__lista { flex-direction: column; align-items: flex-start; gap: 0; width: 100%; margin-right: 0; }
  .cco-nag__lista a { line-height: 1; padding: 14px 0; }
  .cco-nag__lista li::after { display: none; }
}

/* Treść strony w szablonie bez Kubio */
.cco-main { display: block; }

/* Wariant „artykuł" — węższa kolumna tekstu, bo publikacje czyta się, a nie skanuje.
   ⚠️ 1240 px na publikacjach to standard z `article-standards.css`; tutaj tekst dostaje 820 px. */
.cco-sekcja--artykul .cco-sekcja__srodek { max-width: 880px; }
.cco-sekcja--artykul .cco-sekcja__tresc { font-size: 18px; line-height: 1.75; }
.cco-sekcja--artykul .cco-sekcja__tresc h3 { font-size: 21px; font-weight: 500; color: var(--cco-granat); margin: 1.6em 0 .6em; }

/* Okienko z terminem i ceną szkolenia (dane z arkusza, przez wtyczkę cco-terminy). */
.cco-termin { background: #fff; border: 1px solid var(--cco-linia); border-radius: 12px; padding: 26px 24px; box-shadow: 0 6px 16px rgba(59,73,105,.12); }
.cco-termin__naglowek { margin: 0 0 12px; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--cco-cichy); }
.cco-termin__lista { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 10px; }
.cco-termin__data { display: flex; flex-direction: column; line-height: 1.3; }
.cco-termin__dzien { font-size: 14px; color: var(--cco-cichy); }
.cco-termin__reszta { font-size: 19px; font-weight: 500; color: var(--cco-granat); }
.cco-termin__godzina { margin: 0 0 16px; font-size: 14px; color: var(--cco-cichy); }
.cco-termin__cena { margin: 0 0 18px; font-size: 26px; font-weight: 600; color: var(--cco-granat); }
.cco-termin__cena span { display: block; font-size: 13px; font-weight: 400; color: var(--cco-cichy); letter-spacing: .04em; }
.cco-termin .cco-btn { width: 100%; text-align: center; }

/* Układ „treść + okienko z terminem" */
.cco-sekcja--zterminem .cco-sekcja__tresc { display: grid; grid-template-columns: 1fr 320px; gap: 40px; align-items: start; }
@media (max-width: 980px) { .cco-sekcja--zterminem .cco-sekcja__tresc { grid-template-columns: 1fr; } }

/* Listy budowane z danych witryny */
.cco-lista__naglowek { font-size: 15px; letter-spacing: .1em; text-transform: uppercase; color: var(--cco-cichy); margin: 28px 0 14px; }
.cco-siatka--zwarta .cco-karta { padding: 18px 20px; }
.cco-siatka--zwarta .cco-karta__tytul { margin: 0; font-size: 17px; }
.cco-karta__data { margin: 0 0 8px; font-size: 14px; color: var(--cco-zielen); font-weight: 600; }
.cco-karta__cena { margin: 10px 0 0; font-size: 15px; color: var(--cco-cichy); }
.cco-karta__obraz { width: 100%; height: 170px; object-fit: cover; border-radius: 8px; margin-bottom: 14px; display: block; }
.cco-karta--publikacja { padding: 16px; }

/* Formularz Contact Form 7 wewnątrz naszej sekcji kontaktu.
   ⚠️ Bez tego pola mają swoje własne szerokości i wypychają stronę w bok (11.09: strona
   przewijała się w poziomie o 450 px). */
.cco-kontakt__prawa .wpcf7 { max-width: 100%; }
.cco-kontakt__prawa .wpcf7 p { margin: 0 0 14px; }
.cco-kontakt__prawa input[type="text"], .cco-kontakt__prawa input[type="email"],
.cco-kontakt__prawa input[type="tel"], .cco-kontakt__prawa input[type="number"],
.cco-kontakt__prawa input[type="url"], .cco-kontakt__prawa textarea,
.cco-kontakt__prawa select {
  width: 100% !important; max-width: 100%; box-sizing: border-box;
  padding: 12px 14px; border: 1px solid var(--cco-linia); border-radius: 8px;
  font-size: 15px; font-family: inherit; background: #fff; color: var(--cco-tekst);
}
.cco-kontakt__prawa textarea { min-height: 120px; }
.cco-kontakt__prawa label { display: block; font-size: 14px; color: var(--cco-cichy); }
.cco-kontakt__prawa input[type="submit"] {
  background: var(--cco-granat); color: #fff; border: 0; border-radius: 8px;
  padding: 14px 30px; font-size: 15px; letter-spacing: .06em; text-transform: uppercase; cursor: pointer;
}
.cco-kontakt__prawa input[type="submit"]:hover { background: var(--cco-zielen); }
.cco-kontakt__prawa .wpcf7-list-item { margin: 0; }
.cco-kontakt__prawa .wpcf7-acceptance label { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; }
.cco-kontakt__prawa input[type="checkbox"] { width: 14px; height: 14px; margin-top: 3px; flex: 0 0 auto; }

/* Liczniki „Nasze doświadczenia" */
.cco-liczniki { display: grid; gap: 24px; margin-top: 36px; }
.cco-liczniki--5 { grid-template-columns: repeat(5, 1fr); }
.cco-licznik { text-align: center; }
.cco-licznik__opis { display: block; font-size: 14px; line-height: 1.5; color: var(--cco-cichy); margin-bottom: 10px; min-height: 4.5em; }
.cco-licznik__liczba { display: block; font-size: clamp(34px, 4vw, 52px); font-weight: 300; color: var(--cco-granat); line-height: 1; }
.cco-licznik__sufiks { font-size: .6em; }
@media (max-width: 980px) { .cco-liczniki--5 { grid-template-columns: repeat(2, 1fr); } .cco-licznik__opis { min-height: 0; } }

/* Sekcja ze zdjęciem obok tekstu (jak „O nas" i „Jak możemy Ci pomóc?" na oryginale) */
.cco-sekcja--zfoto .cco-sekcja__srodek { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; }
.cco-sekcja--foto-lewo .cco-sekcja__kolumna { order: 2; }
.cco-sekcja--foto-lewo .cco-sekcja__foto { order: 1; }
.cco-sekcja__foto img { width: 100%; height: auto; display: block; border-radius: 12px; }
@media (max-width: 980px) {
  .cco-sekcja--zfoto .cco-sekcja__srodek { grid-template-columns: 1fr; gap: 28px; }
  .cco-sekcja--foto-lewo .cco-sekcja__kolumna, .cco-sekcja--foto-lewo .cco-sekcja__foto { order: initial; }
}

/* ==========================================================================================
 * HERO STRONY GŁÓWNEJ — odwzorowanie oryginału (zmierzone 11.09 na żywej stronie przy 1280 px):
 * sekcja 484 px, zdjęcie w tle `cover` od góry, grafika po lewej 354×142, tytuł po prawej
 * 32 px / waga 300 / granat / wyrównany do prawej, przycisk-pigułka 252×44, promień 60 px.
 * ========================================================================================== */
.cco-hero--tlo { background-size: cover; background-position: 50% 0%; background-repeat: no-repeat; padding-block: 0; }
.cco-hero--tlo .cco-hero__srodek { min-height: 484px; align-items: center; }
.cco-hero--grafika-lewo .cco-hero__srodek { grid-template-columns: 1fr 1fr; gap: 40px; }
.cco-hero--grafika-lewo .cco-hero__foto { order: 1; }
.cco-hero--grafika-lewo .cco-hero__tekst { order: 2; text-align: right; }
.cco-hero--grafika-lewo .cco-hero__tytul { font-size: 32px; font-weight: 300; color: var(--cco-granat); margin: 0 0 26px; }
.cco-hero--grafika-lewo .cco-hero__przyciski { justify-content: flex-end; }
.cco-hero--grafika-lewo .cco-hero__foto img { border-radius: 0; max-width: 354px; margin: 0 auto; }
.cco-hero--grafika-lewo .cco-btn { border-radius: 60px; text-transform: none; letter-spacing: normal; font-size: 16px; padding: 11px 28px; }
@media (max-width: 980px) {
  .cco-hero--grafika-lewo .cco-hero__srodek { grid-template-columns: 1fr; }
  .cco-hero--grafika-lewo .cco-hero__tekst { order: 1; text-align: center; }
  .cco-hero--grafika-lewo .cco-hero__foto { order: 2; }
  .cco-hero--grafika-lewo .cco-hero__przyciski { justify-content: center; }
}

/* Kolumny obok siebie (sekcja „Usługi" na stronie głównej — trzy grupy) */
.cco-kolumny { display: grid; gap: 40px; align-items: start; }
.cco-kolumny--2 { grid-template-columns: repeat(2, 1fr); }
.cco-kolumny--3 { grid-template-columns: repeat(3, 1fr); }
.cco-kolumny--4 { grid-template-columns: repeat(4, 1fr); }
.cco-kolumna__tytul {
  text-align: center; text-transform: uppercase; letter-spacing: .12em;
  font-size: 16px; font-weight: 400; color: var(--cco-granat); margin: 0 0 22px;
}
@media (max-width: 980px) { .cco-kolumny--2, .cco-kolumny--3, .cco-kolumny--4 { grid-template-columns: 1fr; } }

/* ==========================================================================================
 * KAFELKI USŁUG (Smart Post Show) — granatowy pasek z nazwą, wsunięty na dolną część zdjęcia.
 * ⚠️ NA ORYGINALE TEN WYGLĄD JEST PRZYPADKIEM: reguła `top:-47px; background:#232039ab` jest
 *    przypisana do INNEGO modułu (`.pcp-wrapper-2385`), a kafelki usług łapią ją tylko dlatego,
 *    że siedzą w jego zagnieżdżeniu. Tutaj zapisujemy ją wprost dla naszych kolumn — dzięki temu
 *    wygląd nie zależy od układu cudzej wtyczki. Wartości zmierzone na żywej stronie 11.09.
 * ========================================================================================== */
.cco-kolumna .sp-pcp-post .sp-pcp-title {
  position: relative; top: -47px; height: 35px; margin: 0;
  background-color: rgba(35, 32, 57, .67);
  display: flex; align-items: center; justify-content: flex-end;
  padding: 0 14px; font-size: 20px; font-weight: 300; line-height: 1.2;
}
.cco-kolumna .sp-pcp-post .sp-pcp-title a { color: #fff; text-decoration: none; }
/* ⚠️ BEZ `overflow:hidden` — pasek tytułu jest wsunięty w górę (top:-47px) i wystaje poza ten
   pojemnik; obcięcie zjadało cały pasek (moja pomyłka 11.09). */
.cco-kolumna .sp-pcp-post-details { height: 12px; }
.cco-kolumna .sp-pcp-post { padding: 0; background: transparent; }
.cco-kolumna .sp-pcp-row [class*='sp-pcp-col-'] { padding: 0; }

/* ==========================================================================================
 * DOPASOWANIE HERO DO ORYGINAŁU — zmierzone 11.09 przy 1280 px (oryginał → u nas):
 *   wysokość sekcji 484 px (było 580), krój Lato (był systemowy = grubszy), odstęp liter 1 px,
 *   przycisk 252×44 waga 300 padding 12/24 (było 232×41 waga 400), kolumna treści 1240 px.
 * ========================================================================================== */
.cco-nag, .cco-hero, .cco-sekcja, .cco-proces, .cco-baner, .cco-kontakt, .cco-kolumny, .cco-liczniki {
  font-family: Lato, Helvetica, Arial, sans-serif;
}
.cco-hero--tlo { min-height: 484px; padding-top: 35px; padding-bottom: 0; display: flex; align-items: center; }
.cco-hero--tlo .cco-hero__srodek { min-height: 0; flex: 1 1 auto; max-width: 1240px; padding-left: 20px; padding-right: 20px; }
.cco-hero--grafika-lewo .cco-hero__tytul { letter-spacing: 1px; line-height: 1.143; }
.cco-hero--grafika-lewo .cco-btn {
  font-weight: 300; padding: 12px 24px; line-height: 1.25; letter-spacing: normal;
}

/* Dopasowanie szerokości kolumn hero do oryginału (grafika 354 px + tekst obok; całość ~1040 px
   wyśrodkowana — na oryginale grafika zaczyna się 124 px od krawędzi, tytuł kończy 154 px przed prawą).
   ⚠️ Odstęp liter na przycisku bierze się na oryginale z reguły `[data-kubio] *`; u nas wprost. */
.cco-hero--tlo.cco-hero--grafika-lewo .cco-hero__srodek { max-width: 1040px; grid-template-columns: 354px 1fr; gap: 40px; }
.cco-hero--grafika-lewo .cco-btn { letter-spacing: 1px; }

/* ⚠️ Hero jest kontenerem elastycznym (flex), więc samo `margin: 0 auto` na środku nie wystarcza —
   kontener trzeba wyśrodkować jawnie, inaczej cała treść siedzi przy lewej krawędzi (11.09). */
.cco-hero--tlo { justify-content: center; }

/* ==========================================================================================
 * PASEK GÓRNY I HERO — pozycje 1:1 z oryginałem (zmierzone przy oknie 1265 px):
 *   logo `logo_cut-1.gif` 90×56 przy lewej krawędzi kolumny (lewa=117),
 *   menu wyrównane do prawej, ostatnia pozycja kończy się na 1138, odstępy 42 px,
 *   kolumna treści ≈1022 px wyśrodkowana;
 *   hero: grafika od 124 px, tytuł kończy się na 1126 px.
 * ========================================================================================== */
.cco-nag__pasek { max-width: 1022px; padding-left: 0; padding-right: 0; gap: 0; }
.cco-nag__logo img { height: 56px; width: auto; }
.cco-nag__lista { gap: 42px; }
.cco-nag__lista a { line-height: 57px; }

.cco-hero--tlo.cco-hero--grafika-lewo .cco-hero__srodek {
  max-width: 1002px; padding-left: 0; padding-right: 0;
  grid-template-columns: 354px 1fr; gap: 40px; margin-left: auto; margin-right: auto;
}

/* Pozycje menu mają na oryginale własny odstęp wewnętrzny (~16 px z każdej strony) i wysokość 31 px,
   wyśrodkowane w pasku — bez tego napisy stoją zbyt gęsto i menu zaczyna się za daleko w prawo. */
.cco-nag__lista { align-items: center; }
.cco-nag__lista a { padding: 0 16px; line-height: 31px; }

/* ⚠️ Hero NIE jest już kontenerem elastycznym. Przy `display:flex` kolumna treści uparcie siadała
   przy lewej krawędzi (mimo `margin:0 auto` i `justify-content:center`) — 11.09 kosztowało to
   kilka podejść. Zwykły blok + `margin-inline:auto` centruje przewidywalnie, a treść wyśrodkowaną
   w pionie robi siatka z `align-content`. */
.cco-hero--tlo { display: block; }
.cco-hero--tlo.cco-hero--grafika-lewo .cco-hero__srodek {
  display: grid; align-content: center; align-items: center;
  min-height: 449px; margin-inline: auto;
}

/* ==========================================================================================
 * PASEK PRZYKLEJONY DO GÓRY + ZMNIEJSZANIE PRZY PRZEWIJANIU (prośba właściciela 11.09).
 * Po przewinięciu o 40 px skrypt dokłada `cco-nag-male` na <html>; wszystko poniżej to CSS,
 * więc nie ma skakania układu ani przeliczania w JS.
 * ========================================================================================== */
.cco-nag { position: sticky; top: 0; z-index: 50; transition: background-color .2s ease; }
.cco-nag__pasek, .cco-nag__logo img, .cco-nag__lista a {
  transition: min-height .22s ease, height .22s ease, line-height .22s ease;
}
.cco-nag-male .cco-nag { box-shadow: 0 2px 12px rgba(0, 0, 0, .25); }
.cco-nag-male .cco-nag__pasek { min-height: 44px; }
.cco-nag-male .cco-nag__logo img { height: 40px; }
/* (pozycje menu mają stałą wysokość 31 px — pasek centruje je sam, nic nie trzeba zmniejszać) */

/* Logo bliżej lewej krawędzi niż kolumna treści (prośba właściciela) — menu zostaje na miejscu. */
.cco-nag__logo { margin-left: -90px; }
@media (max-width: 1220px) { .cco-nag__logo { margin-left: 0; } }

/* Grafika w hero (tabliczka CCO) DOKŁADNIE jak na oryginale: 354×142 (zmierzone na żywej home
   przy 1280/1366/1600 — stała, nie skaluje się z oknem). 12.09: właściciel cofnął wcześniejsze
   „nieco niższa" (310 px) — ma być identyczna z oryginałem. */
.cco-hero--grafika-lewo .cco-hero__foto img { max-width: 354px; }

/* Kolumna grafiki równa jej szerokości — inaczej grafika „odjeżdża" w prawo, bo byłaby
   wyśrodkowana w szerszej kolumnie. */
.cco-hero--tlo.cco-hero--grafika-lewo .cco-hero__srodek { grid-template-columns: 354px 1fr; }
.cco-hero--grafika-lewo .cco-hero__foto img { margin-left: 0; margin-right: auto; }

/* ==========================================================================================
 * PROŚBY WŁAŚCICIELA 11.09 (wieczór):
 * 1) cieńszy tekst na stronie — na oryginale akapity idą krojem Lato w grubości 300
 *    (reguła `[data-kubio] *` żąda 100, ale taka grubość Lato nie jest wczytana, więc
 *    przeglądarka i tak rysuje 300). Ustawiamy 300 wprost.
 * 2) napisy na kafelkach usług WYŚRODKOWANE i POD kafelkiem, zamiast wsuniętych na zdjęcie.
 * ========================================================================================== */
.cco-sekcja__tresc, .cco-hero__opis, .cco-karta__tresc, .cco-krok__tresc, .cco-kontakt__tresc,
.cco-sekcja__podtytul, .cco-pozycja { font-weight: 300; }
.cco-sekcja__tresc strong, .cco-karta__tresc strong { font-weight: 600; }

.cco-kolumna .sp-pcp-post .sp-pcp-title {
  top: 0; justify-content: center; text-align: center; height: auto; min-height: 44px;
  padding: 10px 14px; font-weight: 300;
}
.cco-kolumna .sp-pcp-post-details { height: auto; }

/* Pasek z nazwą leży teraz POD zdjęciem, więc półprzezroczysty granat robił się szary —
   pod kafelkiem daje pełny kolor marki. */
.cco-kolumna .sp-pcp-post .sp-pcp-title { background-color: var(--cco-granat); }

/* ==========================================================================================
 * NAGŁÓWKI SEKCJI — 1:1 z oryginalną stroną główną (zmierzone 11.09, okno 1265 px):
 *   38,4 px / waga 300 / Lato / granat / odstęp liter 1 px,
 *   podkreślenie: kolor #9896a6, grubość 4 px, odsunięte 12 px od tekstu,
 *   domyślnie WYŚRODKOWANE (tak ma większość sekcji).
 * Wyjątki obsługują przełączniki skrótu: `wyrownanie="lewo"`, `podkreslenie="nie"`,
 * `tytul_kolor="zielen"`, `tytul_rozmiar="duzy"`.
 * ========================================================================================== */
.cco-sekcja__tytul, .cco-proces .cco-sekcja__tytul {
  font-family: Lato, Helvetica, Arial, sans-serif;
  font-size: 38.4px; font-weight: 300; color: var(--cco-granat);
  letter-spacing: 1px; text-align: center; margin: 0 0 34px;
  text-decoration: underline; text-decoration-color: #9896a6;
  text-decoration-thickness: 4px; text-underline-offset: 12px;
}
.cco-sekcja--tytul-lewo .cco-sekcja__tytul { text-align: left; }
.cco-sekcja--bez-kreski .cco-sekcja__tytul { text-decoration: none; }
.cco-sekcja--tytul-zielen .cco-sekcja__tytul { color: var(--cco-zielen); }
.cco-sekcja--tytul-duzy .cco-sekcja__tytul { font-size: 54.4px; }

/* Nagłówki kolumn usług — na oryginale to Work Sans 18 px, wersaliki, odstęp liter 1,5 px. */
.cco-kolumna__tytul {
  font-family: "Work Sans", Lato, Helvetica, Arial, sans-serif;
  font-size: 18px; font-weight: 300; letter-spacing: 1.5px; text-transform: uppercase;
  text-align: center; color: var(--cco-granat); margin: 0 0 22px;
}

/* Podpisy kafelków usług — WRACAJĄ do postaci z oryginału: delikatny, półprzezroczysty pasek
   wsunięty na dolną część zdjęcia, tekst do prawej, Lato 20 px/300, odstęp liter 1 px.
   ⚠️ Wersję „wyśrodkowane pod kafelkiem" zostawiam zakomentowaną niżej — gdyby właściciel wrócił
   do tamtego pomysłu, to jedna linijka. */
.cco-kolumna .sp-pcp-post .sp-pcp-title {
  position: relative; top: -47px; height: 35px; min-height: 0; margin: 0;
  background-color: rgba(35, 32, 57, .67);
  display: flex; align-items: center; justify-content: flex-end;
  padding: 0 14px; font-size: 20px; font-weight: 300; letter-spacing: 1px; line-height: 1.2;
  text-align: right;
}
.cco-kolumna .sp-pcp-post-details { height: 12px; }

/* Szerokość kolumny treści — na oryginale sekcje mają ~910–1015 px (zmierzone: „Usługi" 911,
   „Szkolenia" 1014, „Nasze mocne strony" 886). Ustawiamy 1010 px, tak jak hero. */
:root { --cco-szer: 1010px; }

/* ==========================================================================================
 * PODPIS KAFELKA USŁUGI — teraz DOKŁADNIE jak w oryginale (zmierzone 11.09):
 *   pasek 35 px, tło rgba(35,32,57,.67), BEZ odstępu wewnętrznego, tekst do prawej,
 *   odnośnik rozciągnięty na całą szerokość paska (`display: inherit`), Lato 20/300, ls 1 px,
 *   wysokość wiersza 24 px. U mnie było `flex` z odstępem 14 px — napis nie dotykał krawędzi.
 * ========================================================================================== */
.cco-kolumna .sp-pcp-post .sp-pcp-title {
  display: block; padding: 0; text-align: right; justify-content: normal;
}
.cco-kolumna .sp-pcp-post .sp-pcp-title a { display: inherit; }
/* ⚠️ 12.09 (właściciel: „grubość podpisów usług identyczna jak na oryginale"). Sam nagłówek miał 300,
   ale ODNOŚNIK w środku dziedziczył z wtyczki Smart Post Show grubość 400 — a to on niesie tekst.
   Oryginał: Lato 16 px / 300 na <a>. */
.cco-kolumna .sp-pcp-post .sp-pcp-title a { font-weight: 300; }

/* Trzy kolumny usług mają na oryginale 277 px każda, odstęp 40 px → razem 911 px.
   ⚠️ Szerokość liczymy dla SAMYCH kolumn, nie dla całej sekcji — sekcje na oryginale mają różne
   szerokości (886–1015 px) i to ta trójka wyznacza siatkę kafelków. */
.cco-kolumny--3 { max-width: 911px; margin-inline: auto; gap: 40px; }

/* Pas z grafiką „pasek.png" — na oryginale nagłówki „Publikacje" i „Współpracują z nami"
   siedzą na takim pasie o wysokości 115 px, obraz `cover`, bez powtarzania. */
.cco-tlo--paski {
  background-color: #fff;
  background-image: url(/wp-content/uploads/2025/02/pasek.png);
  background-repeat: no-repeat; background-size: cover; background-position: center;
}
.cco-tlo--paski.cco-sekcja { min-height: 115px; padding-block: 0; display: flex; align-items: center; }
.cco-tlo--paski .cco-sekcja__srodek { width: 100%; }
.cco-tlo--paski .cco-sekcja__tytul { margin: 0; }
.cco-tlo--paski .cco-sekcja__tresc:empty { display: none; }

/* ==========================================================================================
 * TEKST SEKCJI — 1:1 z oryginałem (zmierzone 11.09): 16 px, waga 300, wysokość wiersza 25,6 px,
 * wyrównanie OBUSTRONNE. Miałem 17 px / 28,9 px / do lewej, przez co bloki tekstu układały się
 * inaczej i strona wyglądała na węższą.
 * ⚠️ Szerokość kolumny tekstu na oryginale to ~905–911 px, a NIE szerokość nagłówka (ta bywa mniejsza).
 * ========================================================================================== */
.cco-sekcja__tresc { font-size: 16px; line-height: 25.6px; text-align: justify; }
.cco-sekcja__tresc li { text-align: left; }
.cco-hero__opis { font-size: 16px; line-height: 25.6px; }
.cco-karta__tresc, .cco-krok__tresc { font-size: 16px; line-height: 25.6px; }

/* Gdy sekcja ma podaną szerokość (atrybut `szerokosc`), liczy się ona jako szerokość TREŚCI —
   inaczej odstęp wewnętrzny 24 px zjadał po 48 px i kolumna wychodziła węższa niż na oryginale. */
.cco-sekcja__srodek[style*="max-width"] { padding-left: 0; padding-right: 0; }
@media (max-width: 1100px) { .cco-sekcja__srodek[style*="max-width"] { padding-left: 20px; padding-right: 20px; } }

/* ==========================================================================================
 * KARUZELA SZKOLEŃ — wymiary 1:1 z oryginałem (zmierzone 11.09, okno 1265 px):
 *   slajd 391×308, karta 361×308 (biała, promień 5 px, cień rgba(2,110,159,.2) 0 8px 15px),
 *   data 16/300 wyśrodkowana, tytuł 16/300 granat (blok ~270 px),
 *   przycisk 134×40, granat, promień 5, padding 12/24, napis 12/300 biały, odstęp liter 1 px,
 *   pod spodem kropki, bez strzałek.
 * Przewijanie palcem robi natywny scroll z zatrzaskiem — bez bibliotek.
 * ========================================================================================== */
.cco-szk { position: relative; }
.cco-szk__tor {
  display: flex; gap: 0; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; -ms-overflow-style: none; padding-bottom: 4px;
}
.cco-szk__tor::-webkit-scrollbar { display: none; }
.cco-szk__slajd { flex: 0 0 391px; max-width: 100%; scroll-snap-align: center; display: flex; justify-content: center; }
.cco-szk__karta {
  width: 361px; max-width: 100%; min-height: 308px; background: #fff; border-radius: 5px;
  box-shadow: rgba(2, 110, 159, .2) 0 8px 15px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 28px 30px; text-align: center; box-sizing: border-box;
}
.cco-szk__data { margin: 0 0 .5em; font-size: 16px; font-weight: 300; color: var(--cco-granat); line-height: 1.4; }
.cco-szk__tytul { margin: 0 0 22px; font-size: 16px; font-weight: 300; line-height: 1.5; max-width: 270px; }
.cco-szk__tytul a { color: var(--cco-granat); text-decoration: none; }
.cco-szk__tytul a:hover { color: var(--cco-zielen); }
.cco-szk__btn {
  background: var(--cco-granat); color: #fff; border-radius: 5px; padding: 12px 24px;
  font-size: 12px; font-weight: 300; letter-spacing: 1px; text-decoration: none; display: inline-block;
  transition: background-color .25s ease;
}
.cco-szk__btn:hover { background: var(--cco-zielen); color: #fff; }
.cco-szk__kropki { display: flex; justify-content: center; gap: 10px; margin-top: 26px; }
.cco-szk__kropka {
  width: 10px; height: 10px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
  background: #c9cad2; transition: background-color .2s ease;
}
.cco-szk__kropka--aktywna { background: var(--cco-granat); }
@media (max-width: 1023px) { .cco-szk__slajd { flex-basis: 100%; } }

/* Dociągnięcie karuzeli do wymiarów oryginału: karta dokładnie 308 px wysokości,
   przycisk 134×40 (wysokość wiersza 16 px, minimalna szerokość 134 px). */
.cco-szk__karta { min-height: 308px; height: 308px; padding: 24px 30px; }
.cco-szk__btn { line-height: 16px; min-width: 134px; text-align: center; box-sizing: border-box; }

/* ==========================================================================================
 * SZEROKOŚĆ ROBOCZA STRONY = 1173 px (decyzja właściciela 11.09).
 * ⚠️ WSZYSTKIE elementy — hero, sekcje, kolumny usług, karuzela, formularze — trzymają tę samą
 *    szerokość i te same krawędzie lewą i prawą. Wcześniej dawałem każdej sekcji szerokość
 *    zmierzoną z oryginału (911 / 586 / 886 / 1014) i strona „skakała" na bokach.
 * ========================================================================================== */
:root { --cco-szer: 1173px; }
.cco-kolumny--3 { max-width: none; }
.cco-hero--tlo.cco-hero--grafika-lewo .cco-hero__srodek { max-width: 1173px; }

/* ⚠️ 12.09 (właściciel: „odstęp nad ilustracją z tabliczką za duży na górze i na dole — jak na oryginale").
   Na oryginale sekcja hero ma 484 px, ale `margin-top:-32px` WSUWA ją pod pasek górny — widać 452 px,
   a tabliczka stoi 157 px pod paskiem i 153 px nad dołem sekcji (1366 px). U nas sekcja zaczynała się
   POD paskiem, więc te 32 px dokładały się nad tabliczką (189 px). Zamiast ujemnego marginesu (pasek
   nie jest u nas warstwą nad treścią) skracamy sekcję o te 32 px od góry: 452 px, padding-top 3. */
.cco-hero--tlo.cco-hero--grafika-lewo { min-height: 452px; padding-top: 3px; }
.cco-nag__pasek { max-width: 1173px; }

/* Górna krawędź karty szkolenia — cień oryginału pada tylko w dół, więc góra karty ginęła w tle. */
.cco-szk__karta {
  border-top: 1px solid var(--cco-linia);
  box-shadow: rgba(2, 110, 159, .2) 0 8px 15px, rgba(2, 110, 159, .08) 0 -2px 6px;
}

/* ⚠️ Ujemny margines logo był potrzebny, gdy pasek miał 1022 px. Po przejściu na szerokość roboczą
   1173 px logo i tak stoi przy lewej krawędzi — bez tego wychodziło poza ekran (lewa = -44 px). */
.cco-nag__logo { margin-left: 0; }

/* Moduł „Jak możemy Ci pomóc?" (`[cco_help]` z motywu) idzie z treści na pełną szerokość okna —
   na naszych stronach ma trzymać szerokość roboczą jak wszystko inne.
   ⚠️ Reguła scopowana klasą szablonu, żeby nie ruszyć tego modułu na pozostałych stronach serwisu. */
/* 14.09 (właściciel): na desktopie TŁO pasa od krawędzi do krawędzi ekranu, a sam moduł (tekst + grafika)
   na szerokości roboczej 1173 px — jak reszta strony. */
.cco-bez-kubio .cco-help-banner { max-width: none; width: 100%; margin-inline: 0; }
.cco-bez-kubio .cco-help-banner__inner { max-width: var(--cco-szer); margin-inline: auto; position: relative; }

/* ==========================================================================================
 * MODUŁ „Jak możemy Ci pomóc?" na naszych stronach.
 * ⚠️ Jego style w motywie są przypisane do `body.cco-pub .entry-content` — u nas nie ma ani tej
 *    klasy na <body>, ani `.entry-content`, więc moduł renderował się BEZ UKŁADU: grafika lądowała
 *    pod tekstem zamiast po prawej stronie (zgłoszone 11.09). Przenosimy tu te same zasady:
 *    jasne tło marki, tekst z lewej na 62% szerokości, grafika 340 px dosunięta do prawej krawędzi.
 * ========================================================================================== */
.cco-bez-kubio .cco-help-banner {
  position: relative; overflow: hidden;
  background: rgba(var(--kubio-color-10), 1);
  margin: 40px auto; padding: 0;
}
.cco-bez-kubio .cco-help-banner__inner { max-width: var(--cco-szer); margin-inline: auto; position: relative; padding: 44px 0; box-sizing: border-box; }
.cco-bez-kubio .cco-help-banner__text { max-width: 62%; }
.cco-bez-kubio .cco-help-banner h2.cco-help {
  margin: 0 0 12px !important; font-size: 54.4px; font-weight: 300; color: var(--cco-zielen);
  letter-spacing: 1px; text-align: left; text-decoration: none;
}
.cco-bez-kubio .cco-help-banner p {
  margin: 0; font-size: 16px; font-weight: 300; line-height: 25.6px; color: var(--cco-tekst); text-align: left;
}
.cco-bez-kubio .cco-help-banner__graphic {
  position: absolute; top: 0; bottom: 0; right: max(0px, calc((100% - var(--cco-szer)) / 2));  /* przy prawej krawędzi MODUŁU (1173), nie ekranu */
  display: flex; align-items: center; line-height: 0;
}
.cco-bez-kubio .cco-help-banner__graphic img { display: block; width: 340px; max-width: 34vw; height: auto; }
@media (max-width: 900px) {
  .cco-bez-kubio .cco-help-banner__text { max-width: 100%; }
  .cco-bez-kubio .cco-help-banner__graphic { position: static; justify-content: center; margin-top: 20px; }
  .cco-bez-kubio .cco-help-banner h2.cco-help { font-size: 34px; }
}

/* ==========================================================================================
 * KARUZELA PUBLIKACJI — wymiary z oryginału (zmierzone 11.09): okno 1080 px, karta 336×471,
 * grafika karty 336×252 przy samej górze karty.
 * ⚠️ U nas karty wychodziły 290×525 (węższe i wyższe), a grafika pierwszej karty była zsunięta
 *    o 16 px w dół — stąd „grafiki na różnych wysokościach".
 * ========================================================================================== */
/* ⚠️ Moduł liczy szerokość karty z szerokości okna karuzeli — dlatego ustawiamy dokładnie
   1080 px (tyle ma na oryginale), a nie „do 1080". Przy 943 px karty wychodziły 290 zamiast 336. */
/* Karuzela to rząd: strzałka (46) + okno + strzałka (46). Przy szerokości roboczej 1173 px
   okno ma wyjść na 1080 px (tyle ma oryginał), więc odstępy między strzałkami a oknem = 0,
   a samo okno niech się rozciąga. Bez tego okno miało 943 px i karty 290 zamiast 336. */
.cco-bez-kubio .cco-pubs-carousel { gap: 0; }
.cco-bez-kubio .cco-pubs-carousel__viewport { flex: 1 1 auto; width: auto; max-width: none; }
.cco-bez-kubio .cco-pub-card > *:first-child { margin-top: 0; }
.cco-bez-kubio .cco-pub-card p:empty { display: none; }

/* Strzałki karuzeli publikacji NA WIERZCHU okna (a nie obok niego) — dzięki temu samo okno ma
   dokładnie 1080 px jak na oryginale, a karty wychodzą 336 px. */
.cco-bez-kubio .cco-pubs-carousel { position: relative; }
.cco-bez-kubio .cco-pubs-preview__inner { max-width: 1080px; margin-inline: auto; }
.cco-bez-kubio .cco-pubs-preview { padding-left: 0; padding-right: 0; }
.cco-bez-kubio .cco-pubs-carousel__arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
}
.cco-bez-kubio .cco-pubs-carousel__arrow--prev { left: -56px; }
.cco-bez-kubio .cco-pubs-carousel__arrow--next { right: -56px; }
@media (max-width: 1260px) {
  .cco-bez-kubio .cco-pubs-carousel__arrow--prev { left: 4px; }
  .cco-bez-kubio .cco-pubs-carousel__arrow--next { right: 4px; }
}
/* ⚠️ 12.09 (właściciel: „strzałka oprócz tego, że przewija, to ucieka i zmienia kolor").
   Motyw (style.css) ma na :hover `transform: scale(1.08)` i `:active scale(.96)` — u nas strzałka
   stoi na `transform: translateY(-50%)`, więc hover KASOWAŁ to przesunięcie i strzałka skakała
   o pół wysokości w górę. Do tego motyw rozjaśnia tło na fiolet. Tu: położenie stałe, a kolor po
   najechaniu = ZIELEŃ MARKI (#859e22), ta sama, którą świecą karty „Nasze mocne strony" (właściciel
   12.09: „może zmieniać kolor, ale na ten firmowy — jak wewnątrz modułów nasze mocne strony"). */
.cco-bez-kubio .cco-pubs-carousel__arrow:hover,
.cco-bez-kubio .cco-pubs-carousel__arrow:active,
.cco-bez-kubio .cco-pubs-carousel__arrow:focus-visible {
  transform: translateY(-50%); background: var(--cco-zielen);
}

/* ⚠️ Nasza typografia sekcji (16 px / 25,6 px) wlewała się do modułu publikacji i rozpychała karty:
   blok autora miał 108 px zamiast 57, przez co karta rosła z 471 na 543 px. Moduł ma własne
   rozmiary — przywracamy mu naturalną wysokość wiersza. */
.cco-bez-kubio .cco-pubs-preview { line-height: normal; }
/* 15.09: karta publikacji na oryginale dziedziczy wagę 400 (opis pod grafiką), u nas szablon daje 300.
   Nasza sekcja justuje tekst i daje akapitom dolny margines (0,92 em) — na oryginale tytuł na grafice
   i opis są wyrównane do lewej, akapit opisu bez marginesu (karta 462 px, u nas była 477). */
.cco-bez-kubio .cco-pub-card { font-weight: 400; text-align: left; }
.cco-bez-kubio .cco-pub-card p.cco-pub-card__desc { margin: 0; }
.cco-bez-kubio .cco-pub-card p:empty, .cco-bez-kubio .cco-pubs-preview p:empty { display: none; }

/* ==========================================================================================
 * OSTRE KRAWĘDZIE GRAFIK (prośba właściciela 11.09): żadnych zaokrągleń na zdjęciach —
 * hero, „O nas", kafelki usług, karty publikacji, zdjęcia w sekcjach. Kąt prosty wszędzie.
 * ========================================================================================== */
.cco-hero__foto img,
.cco-sekcja__foto img,
.cco-karta__ikona,
.cco-karta__obraz,
.cco-kolumna .sp-pcp-post img,
.cco-kolumna .pcp-post-thumb-wrapper,
.cco-bez-kubio .cco-help-banner__graphic img { border-radius: 0 !important; }
/* ⚠️ 15.09: karty publikacji WYJĘTE z listy powyżej — właściciel: „lekko zaokrąglone na home karty
   powinny być" = jak oryginał (moduł mu-pluginu daje 14 px na karcie; baner w środku jest ucinany
   przez overflow:hidden, więc rogi grafiki też wychodzą zaokrąglone jak na cco.expert). */

/* Trzy PEŁNE artykuły obok siebie: okno 1080 px, karta 336 px, odstęp 36 px → 336×3 + 36×2 = 1080.
   ⚠️ Wcześniej odstęp wynosił 64 px (krok 400 px), więc trzecia karta była ucięta. */
.cco-bez-kubio .cco-pubs-carousel__track { gap: 36px; }
.cco-bez-kubio .cco-pub-card { margin-right: 0; }

/* „Nasze mocne strony" — 1:1 z oryginałem: ikona `punkt_granat.png` 60×60 przy lewej, tekst
   odsunięty o 74 px, 13,6 px / waga 300 / wysokość wiersza 17,68 px. */
.cco-sekcja--mocne .cco-sekcja__tresc ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 18px; }
.cco-sekcja--mocne .cco-sekcja__tresc li {
  position: relative; min-height: 60px; padding-left: 74px; margin: 0;
  font-size: 13.6px; font-weight: 300; line-height: 17.68px; text-align: left;
  display: flex; flex-direction: column; justify-content: center;
}
.cco-sekcja--mocne .cco-sekcja__tresc li::before {
  content: ""; position: absolute; left: 0; top: 0; width: 60px; height: 60px;
  background: url(/wp-content/uploads/2025/01/punkt_granat.png) no-repeat center / 60px 60px;
}
.cco-sekcja--mocne .cco-sekcja__tresc li strong { font-weight: 600; }

/* Sekcja o stałej wysokości (pas ze zdjęciem) — treść wyśrodkowana w pionie, bez własnych odstępów. */
.cco-sekcja--stala-wysokosc { padding-block: 0; display: flex; align-items: center; }
.cco-sekcja--stala-wysokosc .cco-sekcja__srodek { width: 100%; }

/* ==========================================================================================
 * LICZNIKI „Nasze doświadczenia" — 1:1 z oryginałem (zmierzone 11.09):
 *   granatowy pas na całą szerokość, 5 kolumn oddzielonych pionowymi kreskami,
 *   liczba 64 px / waga 300 / kolor #f6f7f8 NAD opisem, opis 16 px / 300 / #f6f7f8, wyśrodkowany.
 * ⚠️ Nagłówek i akapit są na oryginale WYŻEJ, na białym tle — pas z liczbami to osobna sekcja.
 * ========================================================================================== */
.cco-tlo--granat .cco-liczniki { margin-top: 0; gap: 0; }
.cco-tlo--granat .cco-licznik { padding: 0 22px; border-left: 1px solid rgba(246, 247, 248, .25); }
.cco-tlo--granat .cco-licznik:first-child { border-left: 0; }
.cco-tlo--granat .cco-licznik__liczba { font-size: 64px; font-weight: 300; color: #f6f7f8; line-height: 1.2; margin-bottom: 10px; }
.cco-tlo--granat .cco-licznik__opis { font-size: 16px; font-weight: 300; color: #f6f7f8; line-height: 1.4; min-height: 0; }

/* „Nasze mocne strony" — na oryginale to wąska kolumna wyśrodkowana: ikona 60 px + tekst 711 px
   (razem 771), pozycje co 76 px. Wcześniej rozciągały się na całą szerokość roboczą. */
.cco-sekcja--mocne .cco-sekcja__tresc ul { max-width: 771px; margin-inline: auto; gap: 23px; }
.cco-sekcja--mocne .cco-sekcja__tresc li { min-height: 53px; }

/* Nagłówek w sekcji o stałej wysokości nie dokłada własnego marginesu — na oryginale pas
   z napisem „Szkolenia" ma 110 px i tyle (u mnie było 226 px przez odstępy sekcji). */
.cco-sekcja--stala-wysokosc .cco-sekcja__tytul { margin: 0; }

/* Odstępy wokół pasa z nagłówkiem „Szkolenia" — na oryginale nad nim jest 43 px, pod nim 0
   (od razu zaczyna się pas ze zdjęciem). Sekcja z karuzelą publikacji dokładała u nas 72 px. */
.cco-sekcja--stala-wysokosc { margin: 0 !important; }
.cco-bez-kubio .cco-sekcja:has(.cco-pubs-preview) { padding-bottom: 17px; }
.cco-bez-kubio .cco-pubs-preview { margin-bottom: 0; }

/* ==========================================================================================
 * „Nasze mocne strony" — WERSJA WŁAŚCICIELA (11.09): szerzej i w kartach z zaokrągleniem i cieniem.
 * ⚠️ To świadome odejście od oryginału (tam była wąska kolumna bez tła) — nie poprawiać „z powrotem".
 * Cień i promień jak na kartach szkoleń, żeby strona miała jeden język.
 * ========================================================================================== */
.cco-sekcja--mocne .cco-sekcja__tresc ul { max-width: none; margin-inline: 0; gap: 18px; }
.cco-sekcja--mocne .cco-sekcja__tresc li {
  background: #fff; border-radius: 8px; box-shadow: rgba(2, 110, 159, .2) 0 8px 15px;
  padding: 24px 30px 24px 104px; min-height: 0;
  border-top: 1px solid var(--cco-linia);
}
.cco-sekcja--mocne .cco-sekcja__tresc li::before { left: 28px; top: 50%; transform: translateY(-50%); }

/* Karty „mocnych stron": boczne krawędzie zaokrąglone na całą wysokość (bez prostych odcinków)
   + zmiana koloru po najechaniu. ⚠️ Promień musi być większy niż połowa wysokości karty,
   inaczej na bokach zostają proste kawałki; `9999px` zawsze daje pełny łuk.
   Odstęp z lewej powiększony, żeby ikona nie wchodziła w łuk. */
.cco-sekcja--mocne .cco-sekcja__tresc li {
  border-radius: 9999px; padding: 24px 44px 24px 116px; border-top: 0;
  transition: background-color .25s ease, color .25s ease, box-shadow .25s ease;
}
.cco-sekcja--mocne .cco-sekcja__tresc li::before { left: 40px; }
.cco-sekcja--mocne .cco-sekcja__tresc li:hover {
  background: var(--cco-granat); color: #f6f7f8;
  box-shadow: rgba(2, 110, 159, .35) 0 10px 20px;
}
.cco-sekcja--mocne .cco-sekcja__tresc li:hover strong { color: #fff; }

/* Najechanie na kartę „mocnych stron" — zieleń marki (#859e22), czyli ten sam kolor, którym
   oryginał podświetla klawisze i odnośniki (reguła `.frozenSpace:hover` z CSS właściciela). */
.cco-sekcja--mocne .cco-sekcja__tresc li:hover { background: var(--cco-zielen); color: #fff; }

/* Wszystkie karty „mocnych stron" tej samej wysokości, tekst wyśrodkowany w pionie —
   niezależnie od tego, czy zajmuje jeden wiersz, czy dwa (prośba właściciela 11.09).
   ⚠️ `min-height`, a nie `height`: przy wąskim ekranie tekst może zająć trzy wiersze i karta
   ma wtedy urosnąć, a nie przycinać treść. */
.cco-sekcja--mocne .cco-sekcja__tresc li { min-height: 83px; justify-content: center; }

/* Mniejszy odstęp między pasem „Publikacje" a kartami (prośba właściciela). */
.cco-bez-kubio .cco-sekcja:has(.cco-pubs-preview) { padding-top: 24px; }
.cco-bez-kubio .cco-pubs-preview { margin-top: 0; }

/* Niższe karty „mocnych stron". */
.cco-sekcja--mocne .cco-sekcja__tresc li { min-height: 66px; padding-top: 16px; padding-bottom: 16px; }

/* Moduł „Jak możemy Ci pomóc?" — 12.09: grubość liter DOBRANA DO ORYGINAŁU. Żywa home rysuje
   nagłówek i akapit Lato 300 (Kubio żąda 100, ale odmiany 100 nie wczytuje, więc przeglądarka daje
   300). Wersja 100 z 11.09 była ledwo czytelna na jasnym tle — właściciel poprosił o właściwą grubość.
   Reszta zmierzona na oryginale (1366 px): h2 wys. wiersza 62,18 px (1,143) i BEZ dolnego marginesu
   (akapit zaczyna się tuż pod nim), akapit 16/25,6 wyrównany obustronnie, kolor #0a0e14. */
.cco-bez-kubio .cco-help-banner h2.cco-help { font-weight: 300; line-height: 1.143; padding-top: 10px; margin-bottom: 0 !important; }
.cco-bez-kubio .cco-help-banner p { font-weight: 300; text-align: justify; color: #0a0e14; }

/* Grafika „Skorzystaj z konsultacji!" — na oryginale SKALUJE SIĘ Z OKNEM: 259 px przy 1280,
   276 przy 1366, 324 przy 1600, 388 przy 1920 = dokładnie 20,2 % szerokości okna (25,25 % kontenera
   Kubio, który ma 80 vw). Sztywne 340 px było za duże na laptopie i za małe na 1920. */
.cco-bez-kubio .cco-help-banner__graphic img { width: 20.2vw; max-width: 400px; }

/* Moduł pomocy stoi poza sekcjami, więc nie łapał reguły z krojem — stąd systemowy bezszeryfowy. */
.cco-bez-kubio .cco-help-banner, .cco-bez-kubio .cco-help-banner * { font-family: Lato, Helvetica, Arial, sans-serif; }

/* ==========================================================================================
 * „O NAS" — 12.09 (właściciel: „wielkość grafiki i odstępy pod grafiką nadal nieprawidłowe").
 * Zmierzone na oryginale (1366 px): sekcja 391 px z odstępami 14 px góra/dół, grafika o_nas.webp
 * 539×357 zaczyna się 14 px pod hero i kończy 14 px nad sekcją „Usługi"; kolumna tekstu 437 px.
 * U nas sekcja miała 82 px odstępu góra/dół, a grafika 485 px (kolumna .9fr z siatki) — stąd
 * 69 px pustki nad grafiką i 90 px pod nią. Grafika dostaje sztywne 539 px, siatka: tekst = reszta.
 * ========================================================================================== */
.cco-bez-kubio #onas.cco-sekcja { padding-top: 14px; padding-bottom: 14px; }
.cco-bez-kubio #onas .cco-sekcja__srodek { grid-template-columns: minmax(0, 1fr) 539px; gap: 48px; align-items: start; }
.cco-bez-kubio #onas .cco-sekcja__foto img { width: 539px; max-width: 100%; }
@media (max-width: 1000px) {
  .cco-bez-kubio #onas .cco-sekcja__srodek { grid-template-columns: 1fr; }
  .cco-bez-kubio #onas .cco-sekcja__foto img { width: 100%; }
}
/* Pod grafiką „O nas" oryginał ma tylko 14 px sekcji + 29,5 px górnego odstępu nagłówka „Usługi"
   (sekcja „Usługi" bez własnego paddingu). U nas sekcja „Usługi" dokładała 82 px. */
.cco-bez-kubio #uslugi.cco-sekcja { padding-top: 30px; }

/* ==========================================================================================
 * KARTY SZKOLEŃ — 12.09 (właściciel: „klawisze ZAPISZ SIĘ zawsze na jednym poziomie").
 * Karta centrowała całą zawartość w pionie, więc klawisz wędrował z długością tytułu
 * (200 / 212 / 224 px od góry przy 2 / 3 / 4 wierszach). Teraz: data zawsze 45 px od góry,
 * tytuł zajmuje resztę i jest w niej wyśrodkowany (do 4 wierszy), klawisz ZAWSZE 224 px od góry
 * (= dół karty − 44 px), czyli tam, gdzie stał przy najdłuższym tytule.
 * ========================================================================================== */
.cco-szk__karta { justify-content: flex-start; padding-top: 45px; padding-bottom: 44px; }
.cco-szk__btn { flex: 0 0 auto; }
/* 12.09 (właściciel, doprecyzowanie): kolejność TYTUŁ → DATA → ZAPISZ SIĘ. Tytuł ZAWSZE zaczyna się
   45 px od góry (dłuższy zajmuje więcej wierszy w dół, krótszy zostaje jedną linią); data (bez dnia
   tygodnia, nieco mniejsza) i klawisz ZAWSZE na jednym poziomie przy dole — pustka rośnie MIĘDZY
   tytułem a datą (`margin-top:auto` na dacie), nie nad tytułem. */
.cco-szk__tytul { flex: 0 0 auto; display: block; margin: 0; }
/* ⚠️ `.cco-sekcja__tresc p` (0,1,1) bije `.cco-szk__data` (0,1,0) i zerowało `margin-top:auto` — stąd selektor z kartą. */
.cco-szk__karta .cco-szk__data { margin: auto 0 10px; font-size: 14px; }

/* ⚠️ 12.09 (właściciel: „na samym początku prawa karta jest krótsza, po pierwszym przewinięciu OK").
   Tor karuzeli siedział w `.cco-sekcja__srodek` z odstępem 24 px z każdej strony → 1125 px, a trzy
   slajdy to 3 × 391 = 1173 px. Trzecia karta wystawała 33 px poza tor i była PRZYCIĘTA (overflow),
   dopóki snap nie wyśrodkował jej po pierwszym przewinięciu. Tor wychodzi na pełne 1173 px
   ujemnym marginesem równym odstępowi kolumny. Na telefonie (slajd = 100 %) odstęp wraca. */
.cco-bez-kubio .cco-szk { margin-inline: -24px; }
@media (max-width: 1023px) { .cco-bez-kubio .cco-szk { margin-inline: 0; } }

/* ==========================================================================================
 * STRONY USŁUG — 12.09.2026. Wszystko wyprowadzone z ORYGINAŁU `/odbiorca-przemyslowy/` (Kubio),
 * zmierzone przy 1366 px (kolumna treści oryginału 1093 = 80 vw; u nas obowiązuje szerokość
 * robocza 1173 — decyzja właściciela). Wysokości i odstępy w pionie 1:1.
 * ========================================================================================== */

/* LISTA Z PTASZKIEM (Kubio iconlist „check"): ikona 14×19 px, tekst Lato 16/300, wiersz 25,6, ls 1 px.
   Proces: ikona x=351, tekst x=381 → 30 px odstępu, pozycja 30 px wysoka (4 px luzu pod wierszem).
   „Co zyskujesz?": ikona x=167, tekst x=213 → 46 px, pozycje po 77 px (3 wiersze + 8 px). */
.cco-lista { list-style: none; margin: 0; padding: 0; }
.cco-lista__poz { display: flex; align-items: flex-start; gap: 16px; margin: 0 0 8px; padding: 0;
  font-family: Lato, Helvetica, Arial, sans-serif; font-size: 13.6px; font-weight: 300; line-height: 21.76px;
  letter-spacing: 1px; color: #121315; text-align: left; }
/* ⚠️ Zmierzone na NAJGŁĘBSZYM elemencie tekstu (span), nie na <li> Kubio: pytania i proces 13,6 px /
   wiersz 21,76 / #121315, pozycje co ~28–30 px; „Co zyskujesz?" 14,4 px / 23,04, pozycje co 77 px. */
.cco-lista__ikona { flex: 0 0 14px; width: 14px; height: 19px; margin-top: 1px; }
.cco-lista--zielen .cco-lista__ikona { fill: var(--cco-zielen); }
.cco-lista--granat .cco-lista__ikona { fill: var(--cco-granat); }
.cco-lista__tekst { flex: 1 1 auto; }
/* ⚠️ Wewnątrz `.cco-sekcja__tresc` reguły `.cco-sekcja__tresc ul/li` (0,1,1) biją `.cco-lista` (0,1,0):
   dawały wcięcie 1,2 em, margines dolny 1 em, justowanie i kolor tekstu sekcji. Stąd powtórka z sekcją. */
.cco-sekcja__tresc .cco-lista { padding: 0; margin: 0; }
.cco-sekcja__tresc .cco-lista__poz { margin: 0 0 8px; text-align: left; letter-spacing: 1px; color: #121315; line-height: 21.76px; font-size: 13.6px; }

/* PAS ZE ZDJĘCIEM (320 px, cover 50% 52%) — bez treści, bez odstępów. */
.cco-sekcja--us-pas { padding: 0; }
.cco-sekcja--us-pas .cco-sekcja__srodek { padding: 0; }

/* WSTĘP: h1 38,4/300 granat do lewej BEZ podkreślenia, 27 px pod pasem (y404 przy pasie do 377);
   akapit 16/300, wiersz 24 px, ls 1 px, granat, OBUSTRONNIE, zaczyna 1 px pod h1 (y454 = 404+49);
   lista pytań zaraz pod akapitem (y595 = 454+142 − 1); pod listą 48 px do karty kalkulatora. */
/* ⚠️ `.cco-bez-kubio .cco-sekcja` (0,2,0) bije `.cco-sekcja--us-wstep` (0,1,0) — stąd przedrostek. */
.cco-bez-kubio .cco-sekcja--us-wstep { padding-top: 27px; padding-bottom: 48px; }
.cco-sekcja--us-wstep .cco-sekcja__tytul { margin: 0; line-height: 38.4px; padding-bottom: 11px; }
.cco-sekcja--us-wstep .cco-sekcja__tresc { font-size: 16px; line-height: 24px; letter-spacing: 1px; color: var(--cco-granat); font-weight: 300; }
.cco-sekcja--us-wstep .cco-sekcja__tresc p { margin: 0; text-align: justify; }
/* Lista pytań: ptaszek 20 px od lewej krawędzi kolumny (x157 przy kolumnie od 137), tekst 12 px za ikoną. */
.cco-sekcja--us-wstep .cco-sekcja__tresc .cco-lista { padding-left: 20px; }
.cco-sekcja--us-wstep .cco-sekcja__tresc .cco-lista__poz { margin-bottom: 6px; gap: 13px; }

/* KALKULATOR: karta 1035 px wyśrodkowana (moduł ma własne style); sekcja bez własnych odstępów,
   pod kartą 66 px do „Jak możemy Ci pomóc?" (1592 → 1658). */
.cco-sekcja--us-kalkulator { padding: 0 0 66px; }
.cco-sekcja--us-kalkulator .cco-sekcja__srodek { padding: 0; }
/* ⚠️ NIE zerować akapitów w tej sekcji — moduł kalkulatora ma własne <p> z marginesami (intro → etykieta). */

/* „JAK MOŻEMY CI POMÓC?" na usłudze: sekcja 251 px, tekst 782 px (57 % okna), grafika 300×193
   przy prawej krawędzi kolumny (x 929–1229), tytuł na samej górze sekcji (bez 44 px paddingu z home). */
/* 14.09 (właściciel): pas „Jak możemy Ci pomóc?" na usłudze i publikacji ma być STRUKTURALNIE jak na stronie głównej
   (tytuł 54,4 px, tekst 62%, grafika po prawej, 44 px góra/dół) — wcześniejsze warianty per typ strony wycofane. */

/* PROCES: grafika jak2.gif 171×153 po lewej (x137, 54 px pod górą sekcji), tytuł h2 38,4/300 do lewej
   bez podkreślenia w kolumnie od x351 (171 + 43 odstępu), lista 878 px tuż pod tytułem (y1970 = 1923+47).
   Sekcja: 14 px nad tytułem (1909 → 1923), 27 px pod listą (2184 → 2211). */
.cco-sekcja--us-proces { padding: 14px 0 27px; }
.cco-sekcja--us-proces .cco-sekcja__srodek { display: grid; grid-template-columns: 171px minmax(0, 1fr); gap: 43px; align-items: start; }
.cco-sekcja--us-proces .cco-sekcja__kolumna { order: 2; }
.cco-sekcja--us-proces .cco-sekcja__foto { order: 1; padding-top: 54px; }
.cco-sekcja--us-proces .cco-sekcja__foto img { width: 171px; height: auto; border-radius: 0; }
.cco-sekcja--us-proces .cco-sekcja__tytul { margin: 0 0 9px; line-height: 38.4px; }   /* lista 47 px pod górą tytułu */
.cco-sekcja--us-proces .cco-lista { max-width: 878px; }
.cco-sekcja--us-proces .cco-sekcja__tresc .cco-lista__poz { margin-bottom: 8px; }

/* „CO ZYSKUJESZ?": sekcja 438 px na biało, dwie kolumny 546 px (lewa lista od x167 = 30 px wcięcia,
   pozycje po 77 px; prawa = grafika `contain` od góry ze znakiem zapytania i BIAŁY tytuł 38,4/300
   do prawej, 4 px od góry, 54 px od prawej krawędzi kolumny). */
.cco-zysk { background: #fff; padding: 0; }
.cco-zysk__srodek { max-width: var(--cco-szer); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; min-height: 438px; }
.cco-zysk__lista { padding: 30px 0 0 30px; box-sizing: border-box; }
.cco-zysk__lista .cco-lista__poz { gap: 32px; margin: 0; min-height: 77px; align-items: center; font-size: 14.4px; line-height: 23.04px; }
.cco-zysk__lista .cco-lista__ikona { margin-top: 0; }
.cco-zysk__lista .cco-lista__tekst { max-width: 440px; }
.cco-zysk__foto { position: relative; background-size: contain; background-position: 100% 0; background-repeat: no-repeat; min-height: 438px; }
.cco-zysk__tytul { position: absolute; top: 4px; right: 54px; margin: 0; font-family: Lato, Helvetica, Arial, sans-serif;
  font-size: 38.4px; font-weight: 300; line-height: 38.4px; letter-spacing: 1px; color: #fff; text-align: right; }
@media (max-width: 900px) {
  .cco-zysk__srodek { grid-template-columns: 1fr; }
  .cco-zysk__lista { padding: 24px 16px; }
  .cco-zysk__foto { min-height: 60vw; background-position: 50% 0; }
}

/* LOGOTYPY na usłudze: sekcja 251 px, tytuł 30 px od góry bez podkreślenia, potem karuzela. */
.cco-sekcja--us-logotypy { padding: 30px 0 0; min-height: 251px; }
.cco-sekcja--us-logotypy .cco-sekcja__tytul { margin-bottom: 30px; }

.cco-sekcja--us-logotypy .cco-sekcja__tytul { line-height: 1.143; }

/* „NASZE MOCNE STRONY" na usłudze — INNY wariant niż na stronie głównej: kolumna 956 px (x205),
   tekst Lato 16/300, wiersz 25,6, ls 1 px, #0a0e14; karty co 76 px (7 kart = 532 px); sekcja 637 px:
   tytuł 30 px od góry (wiersz 1,143), lista 74 px pod górą tytułu, 0 px pod listą. */
.cco-usluga .cco-sekcja--mocne { padding: 30px 0 0; min-height: 637px; }
.cco-usluga .cco-sekcja--mocne .cco-sekcja__tytul { line-height: 1.143; margin-bottom: 30px; }
.cco-usluga .cco-sekcja--mocne .cco-sekcja__tresc ul { max-width: 956px; margin-inline: auto; gap: 16px; }
.cco-usluga .cco-sekcja--mocne .cco-sekcja__tresc li { font-size: 13.6px; line-height: 17.68px; letter-spacing: 1px; color: #0a0e14; text-align: justify; min-height: 60px; padding: 12px 31px 12px 103px; }   /* tekst x308 w822 (karta 205–1161) */
.cco-usluga .cco-sekcja--mocne .cco-sekcja__tresc li::before { left: 26px; }   /* ikona 60 px, 26 px od lewej krawędzi karty (x231 przy karcie od 205) */

/* Karuzela logotypów wypychała stronę w bok na telefonie (dokument 408 px przy oknie 390) —
   slajdy poza oknem swipera nie były przycinane. */
.cco-bez-kubio .cco-sekcja:has(.sp-logo-carousel) .cco-sekcja__tresc { overflow: hidden; }
/* Proces na telefonie: siatka 171 px + 43 px + kolumna wychodziła 18 px poza okno 390 → jedna kolumna. */
@media (max-width: 900px) {
  .cco-sekcja--us-proces .cco-sekcja__srodek { grid-template-columns: 1fr; gap: 16px; }
  .cco-sekcja--us-proces .cco-sekcja__foto { order: 1; padding-top: 0; }
  .cco-sekcja--us-proces .cco-sekcja__kolumna { order: 2; }
}

/* ═══════════════════════════════════════════════════════════════════════════════════════
   PUBLIKACJE (artykuły) — 14.09.2026, z ORYGINAŁU `/oplata-mocowa/` przy 1366 px (artykul.php)
   ═══════════════════════════════════════════════════════════════════════════════════════ */
.cco-pas-pub, .cco-pas-pub *, .cco-art, .cco-art * { box-sizing: border-box; }
.cco-pas-pub, .cco-art { font-family: Lato, Helvetica, Arial, sans-serif; }
.cco-pas-pub { position: relative; min-height: 325px; background-size: cover; background-repeat: no-repeat; overflow: hidden; }
.cco-pas-pub__ksztalt { position: absolute; inset: -2px 0; background-size: cover; background-position: 50% 50%; background-repeat: no-repeat; pointer-events: none; }
.cco-pas-pub__nakladka { position: absolute; inset: -2px 0; background: linear-gradient(214deg, rgba(255,255,255,.9) 52%, rgba(255,255,255,.1) 94%); pointer-events: none; }
.cco-pas-pub__srodek { position: relative; display: flex; justify-content: flex-end; padding-top: 63px; padding-bottom: 38px; }
.cco-pas-pub__kolumna { width: 788px; max-width: 100%; }
.cco-pas-pub__tytul { font-size: 42px; font-weight: 300; line-height: 50.4px; letter-spacing: 1px; color: var(--cco-zielen); text-align: right; margin: 0 0 10px; }
.cco-pas-pub__wstep { font-size: 16px; font-weight: 400; line-height: 27.2px; letter-spacing: 1px; color: #000; text-align: justify; }
.cco-pas-pub__wstep p { margin: 0; }

.cco-art { background: #fff; padding: 0; }
.cco-art--pierwszy { padding-top: 27px; }
.cco-art__srodek { position: relative; }
.cco-art__linkedin { position: absolute; right: 41px; top: 36px; width: 32px; height: 32px; color: var(--cco-granat); }
.cco-art__linkedin svg { width: 32px; height: 32px; fill: currentColor; opacity: .5; }
.cco-art__linkedin:hover svg { opacity: 1; }
.cco-art__tresc { font-size: 16px; font-weight: 300; line-height: 27.2px; letter-spacing: 1px; color: #000; }
.cco-art__tresc h2 { font-size: 36.8px; font-weight: 300; line-height: 47.84px; letter-spacing: 1px; color: var(--cco-granat); text-align: left; margin: 22px 0 14px; max-width: 892px; }
.cco-art__tresc h3 { font-size: 28px; font-weight: 300; line-height: 1.3; letter-spacing: 1px; color: var(--cco-granat); margin: 18px 0 10px; }
.cco-art__tresc p { margin: 0 0 20px; text-align: justify; }
.cco-art__tresc p:last-child { margin-bottom: 0; }
.cco-art__tresc strong, .cco-art__tresc b { font-weight: 700; }
/* Linki w treści: na oryginale NIEwidoczne (kolor tekstu #0d0d0d, bez podkreślenia); decyzja właściciela 14.09
   (machina SEO): link wyróżnia się delikatną zmianą koloru dopiero po najechaniu. */
.cco-art__tresc a, .cco-pas-pub__wstep a { color: #0d0d0d; text-decoration: none; transition: color .15s; }
.cco-art__tresc a:hover, .cco-pas-pub__wstep a:hover { color: var(--cco-zielen); text-decoration: none; }
.cco-art__tresc .cco-lista { margin: 10px 0 18px; padding: 0; }
.cco-art__tresc .cco-lista--art .cco-lista__poz { gap: 12px; margin: 0 0 6px; text-align: left; font-size: 16px; font-weight: 300; line-height: 22px; letter-spacing: 1px; color: #0a0e14; }
.cco-lista__ikona--art { flex: 0 0 16px; width: 16px; height: 16px; margin-top: 3px; }
.cco-lista--granat .cco-lista__ikona--art { fill: var(--cco-granat); }
/* Podsumowanie po pasie „Jak możemy Ci pomóc?": pas ma własny odstęp dolny, h2 daje 22 px marginesu. */
.cco-art + .cco-help-banner { margin-top: 40px; }
@media (max-width: 900px) {
  .cco-pas-pub__kolumna { width: 100%; }
  .cco-pas-pub__tytul { font-size: 32px; line-height: 1.2; text-align: left; }
  .cco-pas-pub__wstep, .cco-art__tresc p { text-align: left; }
  .cco-art__tresc h2 { font-size: 28px; line-height: 1.25; }
  .cco-art__linkedin { position: static; display: block; width: 28px; height: 28px; margin: 0 0 10px auto; }
  .cco-art__linkedin svg { width: 28px; height: 28px; }
}

/* ═══════════════════════════════════════════════════════════════════════════════════════
   STRONA SZKOLENIA — 14.09.2026, z ORYGINAŁU `/wdrozenie-kompletnego-systemu-…-eudr-…/` (szkolenie-strona.php)
   ═══════════════════════════════════════════════════════════════════════════════════════ */
.cco-strszk, .cco-strszk * { box-sizing: border-box; }
.cco-strszk { font-family: Lato, Helvetica, Arial, sans-serif; background: #fff; padding-top: 41px; padding-bottom: 16px; }
.cco-strszk__srodek { padding-left: 24px; padding-right: 24px; }
.cco-strszk__rzad { display: flex; align-items: flex-start; gap: 0; }
.cco-strszk__tresc { flex: 1 1 auto; min-width: 0; padding: 0 15px; font-size: 16px; font-weight: 300; line-height: 25.6px; letter-spacing: 1px; color: #0a0e14; }
.cco-strszk__bok { flex: 0 0 328px; padding: 0 15px; align-self: stretch; }
/* Okienka „przyklejone": na oryginale `position:fixed` bez `top` (miejsce zależy od wysokości okna, przy 900 px
   potrafi wylądować poza ekranem). U nas jednoznacznie: startują na wysokości tytułu (y=98) i jadą z przewijaniem
   (sticky, 41 px pod przyklejonym nagłówkiem); skrypt bileciki.js chowa je, gdy wjeżdża formularz. */
.cco-strszk__bok .frozen-box { position: sticky; top: 98px; }
.cco-strszk__tytul { max-width: none; width: auto; font-size: 38.4px; font-weight: 300; line-height: 38.4px; letter-spacing: 1px; color: var(--cco-zielen); text-align: left; margin: 0 0 20px; }
.cco-strszk__tresc p { margin: 0; padding-bottom: 40px; text-align: justify; }
.cco-strszk__tresc h2 { font-size: 38.4px; font-weight: 300; line-height: 43.89px; letter-spacing: 1px; color: var(--cco-granat); text-align: left; margin: 0; padding: 20px 0; }
.cco-strszk__tresc h2:first-of-type { padding-top: 0; }
.cco-strszk__tresc a { color: inherit; text-decoration: none; transition: color .15s; }
.cco-strszk__tresc a:hover { color: var(--cco-zielen); }
.cco-strszk__tresc .cco-lista { margin: 0; padding: 0 0 40px; }
.cco-strszk__tresc .cco-lista--szk .cco-lista__poz { align-items: center; gap: 10px; margin: 0 0 8px; text-align: left; font-size: 16px; font-weight: 300; line-height: 25.6px; letter-spacing: 1px; color: #0a0e14; }
.cco-lista__ikona--szk { flex: 0 0 19px; width: 19px; height: 19px; margin: 0; }
.cco-lista--granat .cco-lista__ikona--szk { fill: var(--cco-granat); }
/* okienka terminów: klasy oryginału (frozen-box…) mają CSS w kubio-przejete.css; tu tylko geometria kolumny */
.cco-strszk__bok .frozen-box { width: 286px; }
.cco-strszk__bok .frozen-box-pb { width: 286px; min-height: 228px; height: auto; margin-bottom: 25px; font-size: 16px; font-weight: 300; line-height: 25.6px; letter-spacing: 1px; color: #0a0e14; }
.cco-strszk__bok .frozen-box-pb p { margin: 16px 0; }
/* na oryginale <strong> w okienku renderuje się CIENKO (300) — Kubio nadpisywał pogrubienie; „Szkolenie online" i cena */
.cco-strszk__bok .frozen-box-pb strong { font-weight: 300; }
.cco-strszk__bok .frozen-box-pb > p:first-child { margin-top: 16px; }
.cco-strszk__bok .frozen-box-pb p span[style*="25px"] { line-height: 40px; }
.cco-strszk__bok .frozenSpace { width: 100%; text-align: center; margin-top: .1em; }
.cco-strszk__bok .frozenSpace a { color: #fff; font-weight: 300; font-size: 1.3em; line-height: 31.2px; letter-spacing: 1px; white-space: nowrap; text-decoration: none; }
/* akordeon programu */
.cco-akordeon { margin: 0; padding: 0 0 0; }
.cco-akordeon__poz { margin: 0; }
.cco-akordeon__tytul { display: flex; align-items: center; justify-content: space-between; gap: 12px; list-style: none; cursor: pointer;
  margin: 0 4px 8px; padding: 12px 24px; min-height: 55px; background: var(--cco-granat); color: #f6f7f8; border-radius: 5px;
  box-shadow: rgba(2, 110, 159, 0.2) 0 10px 20px 2px;
  font-size: 20.8px; font-weight: 300; line-height: 31.2px; letter-spacing: 1px; transition: background .2s; }
.cco-akordeon__tytul::-webkit-details-marker { display: none; }
.cco-akordeon__tytul::marker { content: ''; }
.cco-akordeon__poz[open] > .cco-akordeon__tytul { background: var(--cco-zielen); }
.cco-akordeon__ikona { flex: 0 0 18px; width: 18px; height: 18px; fill: #121315; }
.cco-akordeon__ikona--minus { display: none; }
.cco-akordeon__poz[open] .cco-akordeon__ikona--plus { display: none; }
.cco-akordeon__poz[open] .cco-akordeon__ikona--minus { display: block; }
.cco-akordeon__tresc { padding: 12px 24px; font-size: 16px; font-weight: 300; line-height: 25.6px; letter-spacing: 1px; color: var(--cco-granat); }
.cco-akordeon__lista { list-style: none; margin: 0; padding: 0; }
.cco-akordeon__punkt { display: flex; align-items: flex-start; gap: 11px; margin: 0 0 8px; }
.cco-akordeon__ptaszek { flex: 0 0 15px; width: 15px; height: 16px; margin-top: 5px; fill: var(--cco-granat); }
.cco-strszk__tresc .cco-akordeon + h2 { padding-top: 20px; }   /* 18.09: na oryginale belka→tekst H2 = 28 px (8 + 20), u nas było 8 */
@media (max-width: 900px) {
  .cco-strszk__rzad { flex-direction: column; }
  .cco-strszk__bok { flex: 1 1 auto; width: 100%; padding: 10px 15px 0; }
  .cco-strszk__bok .frozen-box { position: static; width: 100%; }
  .cco-strszk__bok .frozen-box-pb { width: 100%; max-width: 302px; margin: 0 auto 25px; }
  .cco-strszk__tytul { font-size: 30px; line-height: 1.2; }
  .cco-strszk__tresc p { text-align: left; }
  .cco-strszk__tresc h2 { font-size: 30px; line-height: 1.2; }
}
/* 14.09 (właściciel): box autora NA SZEROKOŚĆ TEKSTU artykułu (kolumna 1173 minus wcięcie 24 = 1125), nie szerszy.
   Motyw (article-standards.css) daje mu `min(80vw,1240px) !important` — u nas kolumna jest węższa, stąd własna reguła. */
@media (min-width: 1024px) {
  body.cco-bez-kubio.cco-artykul .cco-autor-wrap { max-width: calc(var(--cco-szer) - 48px) !important; margin-left: auto !important; margin-right: auto !important; }
}
@media (max-width: 1023px) {
  body.cco-bez-kubio.cco-artykul .cco-autor-wrap { max-width: none !important; margin-left: 24px !important; margin-right: 24px !important; }
}

/* ── usługi: wstęp ze znakiem + pytaniami, pigułka przy tytule (14.09, z `/audyt-sladu-weglowego/`) ── */
.cco-pytania { display: flex; align-items: center; gap: 0; margin-top: 0; }
.cco-pytania__foto { flex: 0 0 217px; }
.cco-pytania__foto img { display: block; width: 206px; max-width: 100%; height: auto; }
.cco-pytania__lista { flex: 1 1 auto; min-width: 0; padding-left: 17px; }
.cco-pytania--bez-foto .cco-pytania__lista { padding-left: 0; }
.cco-sekcja--us-wstep .cco-sekcja__tresc .cco-pytania .cco-lista { padding-left: 0; }
/* ⚠️ typografia z NAJGŁĘBSZEGO spana oryginału: 13,6/21,76 (na <li> Kubio pokazuje 16 px — pułapka z 12.09) */
.cco-sekcja--us-wstep .cco-sekcja__tresc .cco-pytania .cco-lista__poz { margin-bottom: 8px; gap: 16px; font-size: 13.6px; line-height: 21.76px; color: #121315; }
.cco-sekcja--us-wstep .cco-sekcja__tresc .cco-pytania .cco-lista__poz:last-child { margin-bottom: 0; }
.cco-sekcja--us-wstep .cco-sekcja__tresc p + .cco-pytania { margin-top: 0; }
.cco-us-tytulrzad { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.cco-us-tytulrzad .cco-sekcja__tytul { flex: 1 1 auto; }
.cco-us-pigulka { flex: 0 0 auto; display: inline-block; margin-top: 0; padding: 12px 18px; border: 2px solid var(--cco-zielen); border-radius: 30px;
  background: var(--cco-zielen); color: #fff; font-size: 12px; font-weight: 300; line-height: 12px; letter-spacing: 1px; text-transform: uppercase; text-decoration: none; white-space: nowrap; transition: background .2s, color .2s; }
.cco-us-pigulka:hover { background: #fff; color: var(--cco-zielen); }
@media (max-width: 900px) {
  .cco-pytania { flex-direction: column; align-items: flex-start; gap: 16px; }
  .cco-pytania__foto { flex: none; }
  .cco-pytania__lista { padding-left: 0; }
  /* 29.09 telefon: pigułka na środku luki tytuł↔tekst (~30/32 px); h1 ma padding-bottom w style="" → !important */
  .cco-us-tytulrzad { flex-direction: column; gap: 0; }
  .cco-us-tytulrzad .cco-sekcja__tytul { padding-bottom: 0 !important; }
  .cco-us-pigulka { white-space: normal; line-height: 1.3; margin: 34px 0 30px; }
}

/* ═══════════════════════════════════════════════════════════════════════════════════════
   STRONA „O NAS" — 14.09.2026, z ORYGINAŁU `/o-nas/` przy 1366 px (`_cco-onas-sekcje.mjs`); treść: bezkubio/onas.txt
   ═══════════════════════════════════════════════════════════════════════════════════════ */
.cco-onas-pas, .cco-onas-wartosci, .cco-onas-eksperci, .cco-onas-swiat, .cco-onas-pytania { font-family: Lato, Helvetica, Arial, sans-serif; box-sizing: border-box; }
.cco-onas-pas *, .cco-onas-wartosci *, .cco-onas-eksperci *, .cco-onas-swiat *, .cco-onas-pytania * { box-sizing: border-box; }
/* 0. hero: 505 px, zdjęcie cover 50% 56%, tytuł 41,6/300 biały, podtytuł 28,8/300 biały (12 px pod) — tekst od 330 px */
.cco-bez-kubio .cco-sekcja--onas-hero { min-height: 505px; padding: 360px 0 0; }
.cco-sekcja--onas-hero .cco-sekcja__srodek { padding: 0 24px; }
.cco-onas-hero__tytul { margin: 0; font-size: 41.6px; font-weight: 300; line-height: 47.55px; letter-spacing: 1px; color: #fff; text-align: center; }
/* 28.09: `.cco-sekcja__tresc p { margin: 0 … }` zerowało `auto` → blok 900 px stał przy lewej; wyśrodkowany jak na produkcji */
.cco-onas-hero__pod, .cco-sekcja__tresc .cco-onas-hero__pod { margin: 12px auto 0; max-width: none; font-size: 28.8px; font-weight: 300; line-height: 32.92px; letter-spacing: 1px; color: #fff; text-align: center; }
/* 1./6. pasy z akapitem: szary 33/32, granat 55/27; tekst 16/300 lh 22,4 justify */
.cco-onas-pas p { margin: 0; font-size: 16px; font-weight: 300; line-height: 22.4px; letter-spacing: 1px; text-align: justify; }
.cco-onas-pas--szary { background: #e3e4e7;   /* 28.09: kolor z oryginału (piksel zrzutu), nie ogólny szary */ padding: 33px 0 32px; color: var(--cco-granat); }
.cco-onas-pas--granat { background: var(--cco-granat); padding: 55px 0 27px; color: #f6f7f8; }
/* 2. wartości: tytuł 25,6/300 wyśrodkowany, 5 kart po 219 px (wnętrze 189), tło 15% szarości, ikona 50, nazwa 14,4/300, opis justify */
.cco-onas-wartosci { background: #fff; padding: 20px 0 10px; }
.cco-onas-wartosci__tytul { margin: 0 0 1px; padding-bottom: 30px; font-size: 25.6px; font-weight: 300; line-height: 29.26px; letter-spacing: 1px; color: var(--cco-granat); text-align: center; }
.cco-onas-wartosci__siatka { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; }
/* karty NA PRZEMIAN: 1., 3., 5. szare (15% szarości), 2. i 4. białe — tak jest na oryginale */
.cco-onas-wartosci__karta { padding: 5px 15px 20px; }
.cco-onas-wartosci__karta:nth-child(odd) { background: rgba(152, 150, 166, .15); }
.cco-onas-wartosci__ikona { height: 70px; }
.cco-onas-wartosci__ikona img { display: block; width: 50px; height: 50px; }
.cco-onas-wartosci__nazwa { margin: 0; min-height: 46px; padding-bottom: 20px; font-size: 14.4px; font-weight: 300; line-height: 23.04px; letter-spacing: 1px; color: var(--cco-granat); text-align: center; }
.cco-onas-wartosci__opis { margin: 0; font-size: 14.4px; font-weight: 300; line-height: 23.04px; letter-spacing: 1px; color: var(--cco-granat); text-align: center; }
/* 28.09: nazwa i opis kart WYŚRODKOWANE, bez justowania — jak na produkcji (ikona zostaje po lewej, tak jak tam) */
/* 3. eksperci: 20/30; lewa 728 (tytuł 25,6/300 ZIELONY, lista 8 × 16/300 lh 25,6 granatowy ptaszek 14×19, 34 px pod tytułem), prawa 285 (koło od 25 px) */
.cco-onas-eksperci { background: #fff; padding: 20px 0 30px; }
.cco-onas-eksperci__rzad { display: flex; align-items: flex-start; }
.cco-onas-eksperci__lewa { flex: 0 0 728px; max-width: 100%; }
.cco-onas-eksperci__tytul { margin: 0 0 34px; font-size: 25.6px; font-weight: 300; line-height: 29.26px; letter-spacing: 1px; color: var(--cco-zielen); text-align: left; }
.cco-onas-eksperci__lewa .cco-lista__poz { margin: 0 0 4.4px; gap: 16px; font-size: 16px; font-weight: 300; line-height: 25.6px; letter-spacing: 1px; color: #0a0e14; }
.cco-onas-eksperci__foto { flex: 0 0 285px; padding-top: 25px; }
.cco-onas-eksperci__foto img { display: block; width: 285px; height: auto; }
/* 4. świat: zdjęcie 814 × 796 + beż 552 z tekstem 20,8/300 lh 33,28 justify #0a0e14 od 94 px */
.cco-onas-swiat { display: flex; min-height: 796px; background: #dcd5c2; }
.cco-onas-swiat__foto { flex: 0 0 59.6%; }
.cco-onas-swiat__foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cco-onas-swiat__tekst { flex: 1 1 auto; padding: 94px 60px 40px 56px; }
.cco-onas-swiat__tekst p { margin: 0; font-size: 20.8px; font-weight: 300; line-height: 33.28px; letter-spacing: 1px; color: #0a0e14; text-align: justify; }
/* 5. pytania: szary 27/27; grafika 250 w kolumnie 328 (wyśrodkowana), tekst od 464 (w 765), 16/300 lh 22,4 justify granat, 19 px od góry */
.cco-onas-pytania { background: var(--cco-szary); padding: 27px 0; }
.cco-onas-pytania__rzad { display: flex; align-items: flex-start; }
.cco-onas-pytania__foto { flex: 0 0 328px; display: flex; justify-content: center; }
.cco-onas-pytania__foto img { display: block; width: 250px; height: auto; }
.cco-onas-pytania__tekst { flex: 0 0 765px; max-width: 100%; padding-top: 19px; }
.cco-onas-pytania__tekst p { margin: 0; font-size: 16px; font-weight: 300; line-height: 22.4px; letter-spacing: 1px; color: var(--cco-granat); text-align: justify; }
@media (max-width: 900px) {
  .cco-bez-kubio .cco-sekcja--onas-hero { min-height: 0; padding-top: 220px; }
  .cco-onas-hero__tytul { font-size: 30px; line-height: 1.2; } .cco-onas-hero__pod { font-size: 20px; line-height: 1.3; }
  .cco-onas-wartosci__siatka { grid-template-columns: 1fr; gap: 12px; }
  .cco-onas-eksperci__rzad, .cco-onas-pytania__rzad, .cco-onas-swiat { flex-direction: column; }
  .cco-onas-eksperci__lewa, .cco-onas-eksperci__foto, .cco-onas-pytania__foto, .cco-onas-pytania__tekst, .cco-onas-swiat__foto { flex: none; width: 100%; }
  .cco-onas-swiat { min-height: 0; } .cco-onas-swiat__foto img { height: auto; } .cco-onas-swiat__tekst { padding: 30px 24px; }
  .cco-onas-pas p, .cco-onas-swiat__tekst p, .cco-onas-pytania__tekst p { text-align: left; }
}
/* nagłówki niższych rzędów w publikacjach (polityka prywatności: h5 18/300, h6 12,8/300 — Kubio) */
.cco-art__tresc h4 { font-size: 22px; font-weight: 300; line-height: 1.3; letter-spacing: 1px; color: var(--cco-granat); margin: 18px 0 10px; }
.cco-art__tresc h5 { font-size: 18px; font-weight: 300; line-height: 1.4; letter-spacing: 1px; color: var(--cco-granat); margin: 22px 0 12px; }
.cco-art__tresc h6 { font-size: 12.8px; font-weight: 300; line-height: 1.5; letter-spacing: 1px; color: var(--cco-granat); text-transform: none; margin: 14px 0 8px; }
/* strona szkolenia: nagłówki h3–h6 w treści (np. zielony dopisek „…w ciągu 48 godzin…" na stronie „Jak liczyć ślad węglowy") */
.cco-strszk__tresc h3 { font-size: 28px; font-weight: 300; line-height: 1.3; letter-spacing: 1px; color: var(--cco-granat); margin: 0; padding: 16px 0; }
.cco-strszk__tresc h4 { font-size: 20.8px; font-weight: 300; line-height: 1.4; letter-spacing: 1px; color: var(--cco-zielen); margin: 0; padding: 10px 0 30px; }
.cco-strszk__tresc h5, .cco-strszk__tresc h6 { font-size: 16px; font-weight: 300; line-height: 1.5; letter-spacing: 1px; color: var(--cco-granat); margin: 0; padding: 8px 0 20px; }
/* tabele (Ninja Tables) w publikacji: pełna szerokość kolumny, odstęp jak akapit */
.cco-art__tresc .ninja_table_wrapper, .cco-art__tresc table { margin: 0 0 20px; max-width: 100%; }

/* ── widoki listy (archiwum / wyszukiwarka / 404) — szablon-lista.php, 14.09 ── */
.cco-lista-sekcja { font-family: Lato, Helvetica, Arial, sans-serif; background: #fff; padding: 48px 0 64px; min-height: 40vh; }
.cco-lista-sekcja__tytul { margin: 0 0 18px; font-size: 36.8px; font-weight: 300; line-height: 1.2; letter-spacing: 1px; color: var(--cco-granat); }
.cco-lista-sekcja__opis { margin: 0; font-size: 16px; font-weight: 300; line-height: 27.2px; letter-spacing: 1px; color: #000; }
.cco-lista-sekcja__opis a { color: var(--cco-zielen); }
.cco-lista-wpisow { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 22px; }
.cco-lista-wpisow__link { font-size: 20.8px; font-weight: 300; letter-spacing: 1px; color: var(--cco-granat); text-decoration: none; }
.cco-lista-wpisow__link:hover { color: var(--cco-zielen); }
.cco-lista-wpisow__opis { margin: 6px 0 0; font-size: 15px; font-weight: 300; line-height: 24px; letter-spacing: .5px; color: #2b2b33; }
.cco-lista-strona .pagination, .cco-lista-strona .navigation { margin-top: 28px; font-family: Lato, sans-serif; }
.cco-lista-strona .page-numbers { display: inline-block; padding: 6px 12px; margin-right: 6px; border: 1px solid var(--cco-linia); border-radius: 6px; color: var(--cco-granat); text-decoration: none; }
.cco-lista-strona .page-numbers.current { background: var(--cco-granat); color: #fff; }


/* ==========================================================================================
 * 15.09 — KRÓJ BAZOWY I BOX AUTORA PUBLIKACJI
 * Oryginał (motyw vertice, fse-base-style.css) ma `html{font-family:sans-serif}` — na naszym szablonie
 * ten plik nie jest ładowany, więc wszystko bez własnego kroju (box autora) szło w Times New Roman.
 * Box autora: właściciel chce Yantramanav (krój ładowany razem z Lato z Google Fonts, 400/700).
 * ========================================================================================== */
body.cco-bez-kubio { font-family: sans-serif; }
body.cco-bez-kubio .cco-autor-wrap,
body.cco-bez-kubio .cco-autor-wrap * { font-family: Yantramanav, sans-serif; }

/* Odstęp autor → formularz na publikacji 2× mniejszy (właściciel 15.09). Było: 15 (margines opisu)
   + 20 (dół boxu) + 32 (margines pod boxem) + 61 (góra sekcji formularza) = 128 px; jest 64 px. */
body.cco-bez-kubio.cco-artykul .cco-autor-wrap { margin-bottom: 0 !important; }
body.cco-bez-kubio.cco-artykul .cco-form { padding-top: 29px; }

/* ==========================================================================================
 * BANER SZKOLENIA W ARTYKULE (15.09) — baner-szkolenia.php. Granat marki, zieleń na etykiecie i przycisku,
 * szerokość modułu 1173 jak reszta publikacji. Na telefonie przycisk pod tekstem.
 * ========================================================================================== */
.cco-bez-kubio .cco-baner-szk { max-width: var(--cco-szer); margin: 36px auto; box-sizing: border-box; }
.cco-bez-kubio .cco-baner-szk__inner {
  display: flex; align-items: center; justify-content: space-between; gap: 28px;
  background: rgba(var(--kubio-color-1), 1); color: #fff; padding: 26px 32px; border-left: 6px solid var(--cco-zielen);
}
.cco-bez-kubio .cco-baner-szk__tekst { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cco-bez-kubio .cco-baner-szk__etykieta { font-size: 12px; font-weight: 400; letter-spacing: 2px; text-transform: uppercase; color: var(--cco-zielen); }
.cco-bez-kubio .cco-baner-szk__tytul { font-size: 22px; font-weight: 300; line-height: 1.3; color: #fff !important; text-decoration: none; letter-spacing: 0.5px; }
.cco-bez-kubio .cco-baner-szk__tytul:hover { color: var(--cco-zielen) !important; }
.cco-bez-kubio .cco-baner-szk__meta { font-size: 15px; font-weight: 300; color: #d9d8e2; }
.cco-bez-kubio .cco-baner-szk__meta b { font-weight: 400; color: #fff; }
.cco-bez-kubio .cco-baner-szk__btn {
  flex: 0 0 auto; background: var(--cco-zielen); color: #fff !important; text-decoration: none; text-transform: uppercase;
  font-size: 13px; font-weight: 400; letter-spacing: 1.5px; padding: 14px 22px; white-space: nowrap; transition: background .2s;
}
.cco-bez-kubio .cco-baner-szk__btn:hover { background: rgba(var(--kubio-color-7), .85); }
@media (max-width: 800px) {
  .cco-bez-kubio .cco-baner-szk { margin: 28px 16px; }
  .cco-bez-kubio .cco-baner-szk__inner { flex-direction: column; align-items: flex-start; padding: 22px 20px; }
  .cco-bez-kubio .cco-baner-szk__tytul { font-size: 19px; }
  .cco-bez-kubio .cco-baner-szk__btn { white-space: normal; }
}

/* ==========================================================================================
 * 18.09.2026 — SZEROKOŚĆ PUBLIKACJI JAK NA PRODUKCJI (zgłoszenie właściciela: „na produkcji mamy szerzej").
 * Zmierzone na oryginale (1265/1440/1920 px): pas tytułowy = kolumna 57 % szerokości okna, odsunięta 31 % od lewej
 * (prawa krawędź na 88 %); treść właściwa = 79 % okna, sufit 1240 px; H2 w treści = 92 % kolumny. Nasze były stałe
 * (788 / 1125 / 892) — na szerokim ekranie węższe niż oryginał. Tylko publikacje (body.cco-artykul); home bez zmian.
 * ========================================================================================== */
@media (min-width: 901px) {
  body.cco-artykul .cco-pas-pub__srodek { max-width: none; margin: 0; padding: 63px 11.2vw 38px 30.6vw; }   /* lewa 30,6 %, prawa krawędź 88,8 % (zmierzone na oryginale) */
  body.cco-artykul .cco-pas-pub__kolumna { width: 100%; max-width: none; }
  body.cco-artykul .cco-baner-szk { max-width: min(1240px, 79vw); }   /* baner szkolenia = szerokość treści (18.09, właściciel) */
  body.cco-artykul .cco-art__srodek { max-width: 1288px; width: calc(79vw + 48px); }
  body.cco-artykul .cco-art__tresc h2 { max-width: 92%; }
}
@media (min-width: 901px) {
  /* pas „Jak możemy Ci pomóc?" i box autora na publikacji — ta sama szerokość co treść (79 % okna, sufit 1240);
     tekst pasa = 71,6 % kolumny (zmierzone: 887/1240, 816/1140, 716/1000). Home bez zmian (tam 1173 / 727). */
  body.cco-artykul .cco-help-banner__inner { max-width: 1288px; width: calc(79vw + 48px); padding-left: 24px; padding-right: 24px; }
  body.cco-artykul .cco-help-banner__text { max-width: 71.6%; }
  body.cco-artykul .cco-help-banner__graphic { right: max(0px, calc((100% - min(1288px, 79vw + 48px)) / 2 + 24px)); }
}
@media (min-width: 1024px) {
  body.cco-bez-kubio.cco-artykul .cco-autor-wrap { max-width: min(1240px, 79vw) !important; }
}
@media (min-width: 901px) {
  /* 18.09 (właściciel): ikona LinkedIn przy pierwszym temacie NA WYSOKOŚCI ŚRODKA nagłówka H2 (47,84 px wiersz → środek 24 px;
     ikona 32 px → góra 8 px). Wcześniej top 36 px = 28 px za nisko. */
  body.cco-artykul .cco-art--pierwszy .cco-art__linkedin { top: 8px; }
}

/* ==========================================================================================
 * 18.09 — STRONA SZKOLENIA: szerokość użytkowa jak na publikacjach po dzisiejszej poprawce (79 % okna, sufit 1240),
 * czyli treść + okienka terminów w tej samej kolumnie co artykuł. Do tego odstępy jak na oryginale (zmierzone):
 * każdy H2 ma 20 px nad sobą (u nas pierwszy H2 KAŻDEGO bloku tracił górny odstęp — regułą :first-of-type, która miała
 * dotyczyć tylko pierwszego H2 strony), a akapit poprzedzający listę ma 20 px pod sobą, nie 40.
 * ========================================================================================== */
@media (min-width: 901px) {
  body.cco-bez-kubio .cco-strszk__srodek { max-width: 1288px; width: calc(79vw + 48px); }
  .cco-strszk__tresc h2:first-of-type { padding-top: 20px; }
  .cco-strszk__rzad > .cco-strszk__tresc:first-child > h2:first-child { padding-top: 0; }   /* tylko pierwszy H2 strony (jak „Cele szkolenia" w oryginale) */
  .cco-strszk__tresc p:has(+ ul), .cco-strszk__tresc p:has(+ .cco-lista) { padding-bottom: 20px; }
}
@media (min-width: 901px) {
  /* krawędzie jak w artykule: tekst od lewej krawędzi kolumny (bez 15 px wcięcia), okienka do prawej krawędzi (bok 286 bez wcięcia) */
  body.cco-bez-kubio .cco-strszk__tresc { padding-left: 0; }
  body.cco-bez-kubio .cco-strszk__bok { flex-basis: 286px; padding-right: 0; padding-left: 30px; }
}

/* 18.09 (właściciel) — STRONA SZKOLENIA: białe pole tekst→„Zapisz się na szkolenie" 2× mniejsze (było lista 40 + sekcja 16 + formularz 61 = 117 px;
   teraz 40 + 0 + 20 = 60 px). Odstępy między akapitami = jedna linia (25,6 px) zamiast 40 — oryginał łamie akapity przez <br><br>;
   40 px zostaje tylko przed nagłówkiem H2, 20 px przed listą (jak oryginał). */
@media (min-width: 901px) {
  body.cco-szkolenie .cco-strszk { padding-bottom: 0; }
  body.cco-szkolenie .cco-form { padding-top: 20px; }
}
body.cco-szkolenie .cco-strszk__tresc p { padding-bottom: 25.6px; }
body.cco-szkolenie .cco-strszk__tresc p:has(+ h2) { padding-bottom: 40px; }
body.cco-szkolenie .cco-strszk__tresc p:has(+ ul), body.cco-szkolenie .cco-strszk__tresc p:has(+ .cco-lista) { padding-bottom: 20px; }

/* 18.09 (właściciel): „logo w top nie dociągnięte do lewej krawędzi tekstu w artykule". Na stronach artykułów
   i szkoleń pasek górny trzyma tę samą kolumnę co tekst: min(1256px, 79vw + 16px) — logo zaczyna się dokładnie
   nad lewą krawędzią tekstu (1920: 333, 1440: 143, 1265: 125 — oryginał: 188/135/116), menu kończy się nad prawą. */
@media (min-width: 901px) {
  body.cco-artykul .cco-nag__pasek, body.cco-szkolenie .cco-nag__pasek { max-width: min(1256px, 79vw + 16px); }
}

/* 18.09 (właściciel, desktop): tytuł po belkach akordeonu („Korzyści ze szkolenia") o 7 px dalej od belek (20 → 27),
   pozostałe tytuły („Adresaci szkolenia" itd.) o 15 px bliżej poprzedniego tekstu (40 + 20 → 40 + 5). Pierwszy tytuł na stronie bez zmian (20). */
@media (min-width: 901px) {
  body.cco-szkolenie .cco-strszk__tresc h2 { padding-top: 5px; }
  body.cco-szkolenie .cco-strszk__tresc h2:first-of-type { padding-top: 5px; }
  body.cco-szkolenie .cco-strszk__tresc > h2:first-child { padding-top: 20px; }   /* tytuł otwierający blok (bez tekstu nad nim) */
  body.cco-szkolenie .cco-strszk__rzad > .cco-strszk__tresc:first-child > h2:first-child { padding-top: 0; }
  body.cco-szkolenie .cco-strszk__tresc .cco-akordeon + h2 { padding-top: 27px; }
}

/* 18.09 (właściciel): lista z „✓" → następny akapit („…wyrównawczych. / Uwaga: Dyrektywa…") = 20 px, jak akapit → lista.
   Lista przed tytułem H2 i ostatnia przed formularzem zostają przy 40. */
body.cco-szkolenie .cco-strszk__tresc .cco-lista:has(+ p) { padding-bottom: 20px; }

/* ==========================================================================================
 * 18.09 (właściciel): STRONA GŁÓWNA na tej samej kolumnie co artykuły i szkolenia — min(1240px, 79vw)
 * (1920: 340..1580 zamiast 366..1539; 1440: 151..1289; poniżej 1470 px kolumna jest odrobinę węższa
 * niż dawne 1173, bo trzyma 79 % okna jak tekst artykułu). Elementy, które miały 1173 wpisane na sztywno
 * (pasek górny, hero, slajdy karuzeli szkoleń 3 × 391), liczą się teraz ze zmiennej. Karuzela publikacji
 * (1080) zachowuje ten sam odstęp od kolumny (93 px) — karty liczą się z okna karuzeli (%).
 * Formularze (1035) bez zmian. Kopia: komponenty.css.przed-szerokosc-home-20260918
 * ========================================================================================== */
@media (min-width: 1024px) {
  body.home.cco-bez-kubio { --cco-szer: min(1240px, 79vw); }
  body.home .cco-nag__pasek { max-width: var(--cco-szer); }
  body.home .cco-hero--tlo.cco-hero--grafika-lewo .cco-hero__srodek { max-width: var(--cco-szer); }
  body.home .cco-szk__slajd { flex-basis: calc(var(--cco-szer) / 3); }
  body.home.cco-bez-kubio .cco-pubs-preview__inner { max-width: calc(var(--cco-szer) - 93px); }
}

/* 25.09 „Nasze doświadczenia" (home): odstęp tekst → granatowa belka 2× mniejszy
   (było 16 px marginesu akapitu + --cco-odstep; teraz połowa tej sumy na każdej szerokości),
   a belka z licznikami ma 15 px nad i pod pionowymi kreskami. */
.cco-bez-kubio #doswiadczenia.cco-sekcja { padding-bottom: calc((var(--cco-odstep) - 16px) / 2); }
.cco-bez-kubio .cco-sekcja.cco-tlo--granat:has(.cco-liczniki) { padding-top: 15px; padding-bottom: 15px; }
/* 25.09 Karuzela logotypów („Współpracują z nami"): na desktopie 30 px nad i pod logo (było --cco-odstep ≈ 86 px). */
@media (min-width: 981px) { .cco-bez-kubio .cco-sekcja:has(.sp-logo-carousel) { padding-top: 30px; padding-bottom: 30px; } }
/* 25.09 „Nasze mocne strony" (home): na desktopie 35 px szarości nad nagłówkiem i pod ostatnią belką (było --cco-odstep ≈ 86 px). */
@media (min-width: 981px) { body.home.cco-bez-kubio #mocne-strony.cco-sekcja { padding-top: 35px; padding-bottom: 35px; } }   /* 28.09: TYLKO home — przeciekało na usługi */
/* 25.09 Formularze pod „Nasze mocne strony" (home): na tym samym szarym tle, a pierwszy 15 px niżej niż
   koniec sekcji (35 + 15 = 50 px od ostatniej belki na desktopie). */
body.home.cco-bez-kubio #mocne-strony ~ .cco-form { background: var(--cco-szary); }
body.home.cco-bez-kubio #mocne-strony + .cco-form { padding-top: 15px; padding-bottom: 35px; }
body.home.cco-bez-kubio #mocne-strony + .cco-form + .cco-form { padding-top: 0; }   /* między formularzami 35 px */

/* 25.09 (właściciel) KARTY SZKOLEŃ — WYSOKOŚĆ Z NAJDŁUŻSZEGO TYTUŁU zamiast sztywnych 308 px.
   Wysokość = padding (45 góra / 44 dół, jak było) + wiersze NAJDŁUŻSZEGO tytułu + JEDNA pusta linia + data + klawisz.
   Bez skryptu: tor to jeden rząd flex (align-items: stretch), więc najwyższa karta wyznacza wysokość rzędu,
   a pozostałe karty się do niej rozciągają. Liczone na żywo przy każdej szerokości (na telefonie tytuł łamie się inaczej).
   W karcie z najdłuższym tytułem odstęp tytuł → data = dokładnie jedna linia (1,5em = wiersz tytułu 16/1,5);
   w krótszych data i klawisz zostają przy dole (decyzja 12.09: klawisze ZAPISZ SIĘ zawsze na jednym poziomie). */
.cco-szk__tor { align-items: stretch; }
.cco-szk__slajd { align-items: stretch; }
.cco-szk__karta { height: auto; min-height: 0; }
.cco-szk__tytul { margin-bottom: 1.5em; }

/* ── Box autora pod publikacją (28.09) ─────────────────────────────────────────────────────────
   Opis (bio) zaczyna się od LEWEJ KRAWĘDZI ZDJĘCIA: zdjęcie + rola/imię/tytuł w jednym rzędzie, opis pod
   spodem na całą szerokość. `display: contents` wyjmuje dzieci `.cco-autor__body` do siatki boxu — HTML
   z mu-pluginu cco-eksperci.php bez zmian. Telefon (≤ 600 px) zostaje jak był: kolumna, wyśrodkowana. */
@media (min-width: 601px) {
  /* rzędy 1 i 5 (1fr) zbierają nadmiar wysokości zdjęcia → rola/imię/tytuł zwarte i na środku wysokości zdjęcia */
  body.cco-bez-kubio .cco-autor { display: grid; grid-template-columns: auto 1fr; grid-template-rows: 1fr auto auto auto 1fr auto; column-gap: 20px; row-gap: 0; align-items: start; }
  body.cco-bez-kubio .cco-autor__body { display: contents; }
  body.cco-bez-kubio .cco-autor__foto { grid-column: 1; grid-row: 1 / 6; align-self: center; }
  body.cco-bez-kubio .cco-autor__rola,
  body.cco-bez-kubio .cco-autor__nazwa,
  body.cco-bez-kubio .cco-autor__tytul { grid-column: 2; }
  body.cco-bez-kubio .cco-autor__rola { grid-row: 2; }
  body.cco-bez-kubio .cco-autor__nazwa { grid-row: 3; }
  body.cco-bez-kubio .cco-autor__tytul { grid-row: 4; }
  body.cco-bez-kubio .cco-autor__bio { grid-column: 1 / -1; grid-row: 6; margin: 16px 0 0; }
}

/* ── „O nas" (28.09, właściciel): KOLUMNA STRONY = szerokość modułu z akapitem „AA1000SES" na oryginale.
   Zmierzone na cco.expert/o-nas/: tekst ZAWSZE 80% okna, bez górnego limitu (1366 → 1093, 1920 → 1536). Wszystkie sekcje
   strony (hero, pasy, wartości, eksperci, pytania, mocne strony, formularz) biorą tę samą kolumnę przez --cco-szer
   (kontener = kolumna + 2 × 24 px wcięcia). Telefon/tablet (≤ 900 px) bez zmian. */
@media (min-width: 901px) {
  body.page-id-1512.cco-bez-kubio,
  body.cco-usluga.cco-bez-kubio { --cco-szer: calc(80vw + 48px); }   /* 28.09: strony usług — ta sama kolumna co „O nas” */
  /* moduł „Jak możemy Ci pomóc?”: tekst od lewej krawędzi KOLUMNY i 71,5% jej szerokości (oryginał 1366: x 137, 782 px),
     grafika przy prawej krawędzi kolumny — kontener modułu nie ma wcięcia 24 px jak reszta sekcji */
  body.page-id-1512.cco-bez-kubio .cco-help-banner__inner,
  body.cco-usluga.cco-bez-kubio .cco-help-banner__inner { padding-inline: 24px; }
  body.page-id-1512.cco-bez-kubio .cco-help-banner__text,
  body.cco-usluga.cco-bez-kubio .cco-help-banner__text { max-width: 71.5%; }
  body.page-id-1512.cco-bez-kubio .cco-help-banner__graphic,
  body.cco-usluga.cco-bez-kubio .cco-help-banner__graphic { right: max(0px, calc((100% - var(--cco-szer)) / 2 + 24px)); }
}

/* 28.09 (właściciel): test szerokości 80% na stronie głównej COFNIĘTY — treść wraca na min(1240px, 79vw) z 18.09.
   ZOSTAJE tylko górne menu: na desktopie na kolumnie „O nas”/usług (80% okna + 2 × 24 px wcięcia), jak na tamtych stronach. */
@media (min-width: 1024px) {
  /* 28.09 (właściciel: „menu na usługach się zwęża — ma być zawsze jak na głównej”): ta sama szerokość NA KAŻDEJ stronie */
  body.cco-bez-kubio .cco-nag__pasek { max-width: calc(80vw + 48px); }
}

/* 28.09 (właściciel: „top grafikę, logo, napis i klawisz rozmieść jak na oryginale”) — hero strony głównej.
   Zmierzone na cco.expert przy 1366/1600/1920: blok hero ma STAŁE 1016 px, wyśrodkowane (tabliczka od 175 px przy 1366,
   od 452 przy 1920 — nie idzie za kolumną treści). Napis: prawa krawędź liter 16 px przed prawą krawędzią bloku,
   10 px niżej niż u nas; klawisz: 22 px przed krawędzią bloku, 39 px pod literami napisu (u nas było 26).
   Przesunięcia względne (position: relative) — nie ruszają wysokości hero ani położenia tabliczki. */
@media (min-width: 1024px) {
  body.home .cco-hero--tlo.cco-hero--grafika-lewo .cco-hero__srodek { max-width: 1016px; padding-left: 0; padding-right: 0; }
  body.home .cco-hero--grafika-lewo .cco-hero__tytul { position: relative; top: 10px; right: 16px; }
  body.home .cco-hero--grafika-lewo .cco-hero__przyciski { position: relative; top: 23px; right: 22px; }
}

/* 28.09 (właściciel: „rozmieszczenie tekstu i grafiki w module O nas na głównej jak na produkcyjnej”).
   Zmierzone na cco.expert przy 1366 i 1920: moduł = 72,5% okna, wyśrodkowany (1366: 188..1178, 1920: 264..1656);
   tekst 44,15% modułu (437 / 615 px), zdjęcie w reszcie przy prawej krawędzi, 14 px od tekstu, najwyżej 600 px
   (539 / 600 px); tekst wyśrodkowany w pionie do zdjęcia; zdjęcie 14 px pod hero, sekcja kończy się 20 px pod nim.
   Akapit: odstęp liter 1 px i kolor #0a0e14 jak na oryginale (od tego zależy łamanie linii). */
@media (min-width: 1024px) {
  body.home.cco-bez-kubio #onas.cco-sekcja { padding-top: 14px; padding-bottom: 20px; }
  body.home.cco-bez-kubio #onas .cco-sekcja__srodek { max-width: 72.5vw; padding-left: 0; padding-right: 0; grid-template-columns: 44.15% minmax(0, 1fr); gap: 0; align-items: center; }
  body.home.cco-bez-kubio #onas .cco-sekcja__foto { display: flex; justify-content: flex-end; padding-left: 14px; }
  body.home.cco-bez-kubio #onas .cco-sekcja__foto img { width: 100%; max-width: 600px; height: auto; }
  body.home.cco-bez-kubio #onas .cco-sekcja__tresc p { letter-spacing: 1px; color: #0a0e14; }
}

/* 28.09 grafika „Skorzystaj z konsultacji!” v3 (skorzystaj-mobile-v3.webp, 540 px zamiast 613 w v2): ta sama skala
   pikseli co v2 (20,2 vw na 613 px) — napis w pigułce zostaje tej samej wielkości, mniejsze jest tylko koło.
   20,2 × 540 / 613 = 17,8 vw; limit 400 × 540 / 613 = 352 px. */
.cco-bez-kubio .cco-help-banner__graphic img { width: 17.8vw; max-width: 352px; }
/* v4 (535 px): niższa pigułka z marginesami przed i po napisie — ta sama skala pikseli: 20,2 × 535 / 613 = 17,63 vw, limit 349 px */
.cco-bez-kubio .cco-help-banner__graphic img { width: 17.63vw; max-width: 349px; }

/* 28.09 (właściciel: „kolejne moduły dociągnąć do modułu O nas, bo tak jest na oryginale”) — strona główna, desktop.
   Oryginał: „Usługi” 72% okna (1366: 191..1175, 1920: 269..1651 — praktycznie krawędzie „O nas” 72,5%);
   „Jak możemy Ci pomóc?”: tekst od lewej krawędzi „O nas”, grafika przy prawej. „Nasze doświadczenia” — ta sama kolumna.
   Publikacje / szkolenia / mocne strony / formularze mają na oryginale własne szerokości — bez zmian. */
@media (min-width: 1024px) {
  body.home.cco-bez-kubio #uslugi .cco-sekcja__srodek,
  body.home.cco-bez-kubio #doswiadczenia .cco-sekcja__srodek { max-width: 72vw; padding-left: 0; padding-right: 0; }
  body.home.cco-bez-kubio .cco-help-banner__inner { max-width: 72.5vw; padding-left: 0; padding-right: 0; }
  body.home.cco-bez-kubio .cco-help-banner__text { max-width: 68%; }
  body.home.cco-bez-kubio .cco-help-banner__graphic { right: calc((100% - 72.5vw) / 2); }
}

/* 28.09 wjazd grafiki „Skorzystaj z konsultacji!” z prawej — jak Kubio fadeInRight na oryginale (animate.css:
   z przezroczystości i przesunięcia o 100% szerokości do miejsca, 1 s). Skrypt w naglowek.php. */
@keyframes cco-fadeInRight { from { opacity: 0; transform: translate3d(100%, 0, 0); } to { opacity: 1; transform: none; } }
.cco-wjazd-gotowy .cco-help-banner__graphic img { opacity: 0; }
.cco-wjazd-gotowy .cco-help-banner__graphic.cco-wjazd img { animation: cco-fadeInRight 1s ease both; }

/* 28.09 (właściciel) „Odbiorca przemysłowy”: kalkulator „Status odbiorcy przemysłowego – policz swoje potencjalne
   oszczędności” — na desktopie 15 px mniej nad tabelą (lista → karta: 72 → 57 px) i 40 px mniej pod nią
   (karta → „Jak możemy Ci pomóc?”: 156 → 116 px). Odstęp zdejmujemy z wnętrza samego kalkulatora (.kop: 18/50 → 3/10). */
@media (min-width: 1024px) {
  body.cco-bez-kubio section.kop { padding-top: 3px; padding-bottom: 10px; }
}

/* 28.09 (właściciel, „odbiorca przemysłowy” → „zrób to standardem w innych usługach”): akapit → lista z ptaszkami
   = 20 px (było 0 — lista przyklejona do tekstu). Ta sama wartość co lista → akapit na szkoleniach (18.09). */
body.cco-usluga .cco-sekcja__tresc p + .cco-lista { margin-top: 20px; }

/* 28.09 (właściciel) USŁUGI, desktop i telefon:
   1) wstęp kończy się listą z ptaszkami, a pod nim moduł „Jak możemy Ci pomóc?” (np. Ocena EcoVadis): ostatni ptaszek →
      krawędź modułu 94 → 58 px (6 marginesu punktu + 12 + 40 marginesu modułu) — tyle co ptaszki → kalkulator na
      „Odbiorcy przemysłowym” (57 px). Gdy pod wstępem stoi coś innego (kalkulator), nie ruszamy.
   2) pod formularzem „Skorzystaj z bezpłatnej konsultacji” 2× mniej: 50 → 25 px.
   ⚠️ Reguły home z 25.09 (#mocne-strony + formularz na szarym, 35/15) są od dziś zawężone do body.home — przeciekały na usługi. */
/* 28.09 (druga runda, właściciel: „pod formularzem jeszcze 2× mniej, pod ptaszkami co najmniej 10 px mniej — też w innych”):
   ptaszki → „Jak możemy Ci pomóc?” 58 → 48 px; ptaszki → inny moduł (kalkulator na Odbiorcy) 57 → 47 px. */
/* ⚠️ `.cco-lista:last-child` BEZ „> ” — na części usług (Atestacja, EUDR, Audyt śladu) lista siedzi w dodatkowym bloku
   i reguła z bezpośrednim dzieckiem jej nie łapała (tam zostawało 132 px zamiast 92). */
body.cco-usluga.cco-bez-kubio section.cco-sekcja--us-wstep:has(.cco-sekcja__tresc .cco-lista:last-child) { padding-bottom: 38px; }
body.cco-usluga.cco-bez-kubio section.cco-sekcja--us-wstep:has(.cco-sekcja__tresc .cco-lista:last-child):has(+ .cco-help-banner) { padding-bottom: 8px; }
/* ostatni punkt listy bez marginesu — inaczej lista w dodatkowym bloku dawała 42 px, a zwykła 48 px (margines 6 px punktu gubił się raz tak, raz tak) */
body.cco-usluga.cco-bez-kubio section.cco-sekcja--us-wstep .cco-lista:last-child > li:last-child { margin-bottom: 0; }
/* ZAWSZE wolna linia (20 px) między tekstem a ptaszkami we wstępie usługi — także gdy akapit i lista są w osobnych
   blokach (ISO 14001, EUDR), gdzie reguła „p + .cco-lista” nie łapała. Lista na samym początku treści zostaje bez odstępu. */
body.cco-usluga.cco-bez-kubio .cco-sekcja--us-wstep .cco-sekcja__tresc .cco-lista:not(:first-child),
body.cco-usluga.cco-bez-kubio .cco-sekcja--us-wstep .cco-sekcja__tresc > p + :has(.cco-lista) { margin-top: 20px; }   /* EUDR/Atestacja: lista w bloku „pytania” (grafika + lista) */
/* 28.09 (poprawka właściciela): chodziło o odstęp pod KALKULATOREM, nie pod formularzem kontaktowym — ten wraca do 50 px.
   Karta kalkulatora → „Jak możemy Ci pomóc?”: 116 → 58 px (10 dołu kalkulatora + 8 dołu sekcji + 40 marginesu modułu). */
@media (min-width: 1024px) { body.cco-usluga.cco-bez-kubio section.cco-sekcja--us-kalkulator { padding-bottom: 8px; } }

/* 28.09 (właściciel): „O nas” — przerwa przed formularzem jak na innych stronach: ostatnia belka „Nasze mocne strony” →
   karta formularza 143 → 61 px (dół sekcji 82 → 0, tak jak `.cco-usluga .cco-sekcja--mocne`). */
body.page-id-1512.cco-bez-kubio .cco-sekcja--mocne { padding-bottom: 0; }

/* 28.09 tytuł sekcji jako link (`[cco_sekcja tytul_link="…"]`, np. „O nas” na głównej): bez podkreśleń i bez zmiany
   wyglądu — ten sam kolor co nagłówek; po najechaniu tylko zieleń CCO. Kreska pod nagłówkiem (dekoracja sekcji) zostaje. */
.cco-sekcja__tytul-link, .cco-sekcja__tytul-link:visited { color: inherit; text-decoration: none; transition: color .2s ease; }
.cco-sekcja__tytul-link:hover, .cco-sekcja__tytul-link:focus-visible { color: var(--cco-zielen); text-decoration: none; }

/* 28.09 (właściciel) strona główna — nagłówki wyśrodkowane w pionie na białym tle (desktop):
   „Szkolenia”: biały pas 158 px (koniec „Publikacji” + sekcja), nagłówek z kreską stał 89 px od góry i 24 px od zdjęcia
   karuzeli → podniesiony o 32 px (po 57 px). Przesunięcie względne — wysokość pasa i położenie karuzeli bez zmian.
   „Nasze doświadczenia”: nagłówek + akapit 92 px od góry, 79 px do granatowej belki → 6,5 px z góry przeniesione na dół. */
@media (min-width: 1024px) {
  body.home.cco-bez-kubio #szkolenia .cco-sekcja__tytul { position: relative; top: -36px; }   /* do kart publikacji ≈ do zdjęcia karuzeli */
  body.home.cco-bez-kubio #doswiadczenia.cco-sekcja { padding-top: calc(var(--cco-odstep) - 19.5px); padding-bottom: calc((var(--cco-odstep) - 16px) / 2 + 19.5px); }   /* pomiar pikselowy: było 85/59 */
}

/* 28.09 (właściciel: „pod mocnymi stronami raz formularz szerszy, raz węższy — unormuj jak na głównej”).
   Było: lista „Nasze mocne strony” 1031/1192 px (główna), 1093/1536 (O nas), 956 (usługi), a formularz wszędzie 1035.
   Jest: NA KAŻDEJ STRONIE lista i karta formularza mają szerokość listy ze strony głównej (kolumna główna − 2×24 px),
   więc formularz zawsze równa się z belkami nad nim. Poniżej 1101 px zostaje dotychczasowe zachowanie formularza. */
@media (min-width: 1101px) {
  body.cco-bez-kubio { --cco-mocne-szer: calc(min(1240px, 79vw) - 48px); }
  body.cco-bez-kubio .cco-sekcja--mocne .cco-sekcja__tresc > ul { max-width: var(--cco-mocne-szer); margin-left: auto; margin-right: auto; }
  body.cco-bez-kubio .cco-form__karta { width: var(--cco-mocne-szer); max-width: calc(100% - 48px); }
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════════
   28.09 TELEFON — STRONA GŁÓWNA WG PRODUKCJI (właściciel: „przeleć staging mobile i popraw zgodnie z mobile na produkcji”).
   Zmierzone na cco.expert przy 390 px (iPhone). Wszystko ≤ 767 px — próg telefonu w Kubio; tablet/desktop bez zmian.
   ═══════════════════════════════════════════════════════════════════════════════════════════════ */
/* sekcja „Wartości…” — na produkcji WYŁĄCZNIE na telefonie (kubio-hide-on-desktop/tablet) */
@media (min-width: 768px) { .cco-sekcja--tylko-telefon { display: none; } }
@media (max-width: 767px) {
  /* nagłówek strony: ciemny pas 77 px jak na produkcji (390 px; zrzut właściciela z iPhone'a 430 px daje 75 — zgodne) */
  body.cco-bez-kubio .cco-nag__pasek { padding-top: 0; padding-bottom: 0; min-height: 77px; }

  /* HERO: tabliczka CCO 175 px z lewej (x 31), 87 px pod nagłówkiem; pod nią napis 20,8 px wyrównany do prawej (prawa krawędź 49 px
     od brzegu), 53 px pod tabliczką; klawisz przy prawej, 24 px pod napisem. Desktopowa kolumna „354 px + reszta” działała też na
     telefonie → tabliczka miała 0 px szerokości (niewidoczna), a duży napis wchodził w tło. */
  body.home .cco-hero--tlo.cco-hero--grafika-lewo .cco-hero__srodek { grid-template-columns: 1fr; align-content: start; min-height: 447px; padding: 0; }
  /* tło hero przesunięte w lewo, żeby na telefonie było widać ptaki (jak na produkcji); tabliczka i napisy bez zmian */
  body.home .cco-hero--tlo.cco-hero--grafika-lewo { background-position: 75% 17%; }   /* produkcja ma 70% — właściciel: jeszcze trochę w lewo, żeby słuchawka nie zasłaniała ptaka */
  body.home .cco-hero--grafika-lewo .cco-hero__foto { order: 1; }
  body.home .cco-hero--grafika-lewo .cco-hero__foto { line-height: 0; }
  body.home .cco-hero--grafika-lewo .cco-hero__foto img { width: 175px; max-width: 175px; margin: 66px 0 0 31px; }
  body.home .cco-hero--grafika-lewo .cco-hero__tekst { order: 2; text-align: right; padding: 0 49px 0 5px; margin-top: 53px; }   /* 28.09: 40 px niżej niż produkcja — biały napis nachodził na jasny fragment tła */
  body.home .cco-hero--grafika-lewo .cco-hero__tytul { font-size: 20.8px; line-height: 24px; margin: 0 0 24px; position: static; color: #f6f7f8; }   /* na telefonie jasny, jak na produkcji */
  body.home .cco-hero--grafika-lewo .cco-hero__przyciski { justify-content: flex-end; margin-top: 0; position: static; }

  /* O NAS: 40 px pod hero, tekst i zdjęcie 39 px od brzegów, zdjęcie zaraz pod tekstem (było 64 px przerwy) */
  body.home.cco-bez-kubio #onas.cco-sekcja { padding-top: 40px; padding-bottom: 20px; }
  body.home.cco-bez-kubio #onas .cco-sekcja__srodek { padding: 0 39px; row-gap: 0; gap: 0; }
  body.home.cco-bez-kubio #onas .cco-sekcja__tresc p { letter-spacing: 1px; color: #0a0e14; }
  body.home.cco-bez-kubio #onas .cco-sekcja__foto { padding-left: 0; }
  /* WARTOŚCI (tylko telefon): szare tło, 40 px nad tekstem, 39 px od brzegów — ciągnie się w szarą sekcję „Usługi” */
  body.home.cco-bez-kubio #wartosci.cco-sekcja { padding: 40px 0 0; }
  body.home.cco-bez-kubio #wartosci .cco-sekcja__srodek { padding: 0 39px; }
  body.home.cco-bez-kubio #wartosci .cco-sekcja__tresc p { font-size: 16px; line-height: 25.6px; letter-spacing: 1px; text-align: justify; font-weight: 300; margin: 0; }
  /* USŁUGI: 40 px nad nagłówkiem, treść i kafelki 55 px od brzegów (kafelek 281 × 160 jak na produkcji) */
  body.home.cco-bez-kubio #uslugi.cco-sekcja { padding-top: 40px; }
  body.home.cco-bez-kubio #uslugi .cco-sekcja__srodek { padding: 0 55px; }
  body.home.cco-bez-kubio #uslugi .cco-sekcja__tresc > p { letter-spacing: 1px; }

  /* JAK MOŻEMY CI POMÓC: tekst 39 px od brzegów (był od krawędzi do krawędzi), grafika pod tekstem 278 px */
  body.home.cco-bez-kubio .cco-help-banner__inner, body.cco-bez-kubio .cco-help-banner__inner { padding-left: 39px; padding-right: 39px; }
  body.cco-bez-kubio .cco-help-banner__text { max-width: 100%; }
  body.cco-bez-kubio .cco-help-banner h2.cco-help { font-size: 54.4px; line-height: 62px; }   /* na produkcji na telefonie tak samo duży jak na desktopie */
  body.cco-bez-kubio .cco-help-banner__graphic { position: static; justify-content: flex-start; margin-top: 6px; }
  body.cco-bez-kubio .cco-help-banner__graphic img { width: 278px; max-width: 100%; }

  /* PUBLIKACJE: jedna karta 238 px na środku, strzałki POZA kartą (24 px od brzegów) — jak na produkcji */
  body.home.cco-bez-kubio .cco-pubs-preview__inner { max-width: none; padding: 0; }
  /* ⚠️ okno karuzeli to element elastyczny (flex: 1 1 auto) — samo `width` nie działało, stąd flex-basis 238 */
  body.home.cco-bez-kubio .cco-pubs-carousel { justify-content: center; }
  body.home.cco-bez-kubio .cco-pubs-carousel__viewport { flex: 0 0 238px; width: 238px; margin: 0 auto; padding-left: 0; padding-right: 0; }
  body.home.cco-bez-kubio .cco-pubs-carousel__arrow--prev { left: 0; }
  body.home.cco-bez-kubio .cco-pubs-carousel__arrow--next { right: 0; }

  /* NASZE DOŚWIADCZENIA: nagłówek na całą szerokość (mieści się w jednej linii), tekst 56 px od brzegów */
  body.home.cco-bez-kubio #doswiadczenia .cco-sekcja__srodek { padding: 0 56px; }
  body.home.cco-bez-kubio #doswiadczenia .cco-sekcja__tytul { margin-left: -56px; margin-right: -56px; }
  body.home.cco-bez-kubio #doswiadczenia .cco-sekcja__tresc p { letter-spacing: 1px; }

  /* LICZNIKI: jedna kolumna, liczby 64 px, 15/39/30 px wewnątrz granatu — jak na produkcji */
  body.home.cco-bez-kubio .cco-tlo--granat:has(.cco-liczniki) .cco-sekcja__srodek { padding: 0 39px; }
  body.home.cco-bez-kubio .cco-liczniki--5 { grid-template-columns: 1fr; row-gap: 18px; }
  body.home.cco-bez-kubio .cco-tlo--granat .cco-licznik { border-left: 0; padding: 0; }

  /* NASZE MOCNE STRONY: karty jak na produkcji — prostokąt 253 px, ikona 60 px na górze, tekst 13,6 px pod nią,
     cień 0 19 38; 10 px między kartami. Na desktopie zostają „pigułki”. */
  /* 02.10 (właściciel): na telefonie karty jak na usługach — 341 px, tekst 75 px od góry, 12 px dół, bez dodatkowej przerwy (było 253 px z oryginału) */
  body.home.cco-bez-kubio #mocne-strony .cco-sekcja__tresc ul { max-width: none; gap: 0; grid-template-columns: minmax(0, 1fr); }   /* kolumna nie rośnie do 341 px na 360 px — karta mieści się w ekranie */
  body.home.cco-bez-kubio #mocne-strony .cco-sekcja__tresc li { display: block; width: 341px; max-width: 100%; min-height: 0; margin: 0 auto 10px; padding: 75px 22px 12px 10px;
    border-radius: 0; box-shadow: 0 19px 38px rgba(0, 0, 0, .16); font-size: 13.6px; line-height: 17.68px; letter-spacing: 1px; text-align: justify; }
  body.home.cco-bez-kubio #mocne-strony .cco-sekcja__tresc li::before { left: calc(50% - 36px); top: 10px; transform: none; }
}

/* 28.09 TELEFON — „O NAS” WG PRODUKCJI (390 px):
   hero = PIONOWE zdjęcie `o-nas_-wysokie` (cover, 49% 22%), granatowe tło, 135 px nad nagłówkiem 41,6 px, podtytuł 24/27,4;
   karty „WARTOŚCI…” na telefonie i tablecie UKRYTE (kubio-hide-on-tablet/mobile na produkcji);
   pasy, „eksperci”, tekst o świecie, pytania: 39 px od brzegów, tekst wyjustowany (pas z akapitem: 59 px);
   mocne strony: karty 341 px (tu szersze niż na głównej), ikona na górze. */
@media (max-width: 1023px) { .cco-onas-wartosci { display: none; } }
@media (max-width: 767px) {
  .cco-bez-kubio .cco-sekcja--onas-hero { background-image: url(/wp-content/uploads/2025/03/o-nas_-wysokie-scaled.webp) !important; background-position: 49% 22% !important;
    background-color: #232039; min-height: 433px; padding: 135px 0 30px; }
  .cco-sekcja--onas-hero .cco-sekcja__srodek { padding: 0 10px; }
  .cco-onas-hero__tytul { font-size: 41.6px; line-height: 47.55px; }
  .cco-onas-hero__pod, .cco-sekcja__tresc .cco-onas-hero__pod { font-size: 24px; line-height: 27.43px; margin-top: 25px; }
  .cco-onas-pas--szary { padding: 30px 0 30px; }
  .cco-onas-pas .cco-srodek, .cco-onas-pas .cco-sekcja__srodek { padding-left: 59px; padding-right: 59px; }
  .cco-onas-pas p, .cco-onas-swiat__tekst p, .cco-onas-pytania__tekst p { text-align: justify; }
  .cco-onas-eksperci { padding: 40px 0 30px; }
  .cco-onas-eksperci .cco-srodek { padding-left: 39px; padding-right: 39px; }
  .cco-onas-eksperci__foto { display: flex; justify-content: center; }
  .cco-onas-eksperci__foto img { width: 300px; max-width: 100%; }
  .cco-onas-swiat__tekst { padding: 39px 39px 39px 39px; }
  .cco-onas-pytania .cco-srodek { padding-left: 39px; padding-right: 39px; }
  .cco-onas-pytania__tekst { padding-left: 20px; padding-right: 20px; }
  /* mocne strony jako karty 341 px — NA WSZYSTKICH PODSTRONACH (O nas, usługi, szkolenia…), jak na produkcji; główna ma 253 px */
  body.cco-bez-kubio:not(.home) .cco-sekcja--mocne .cco-sekcja__tresc ul { max-width: none; gap: 0; grid-template-columns: minmax(0, 1fr); }   /* 02.10: na 360 px karta 341 wychodziła 5 px poza ekran */
  body.cco-bez-kubio:not(.home) .cco-sekcja--mocne .cco-sekcja__tresc li { display: block; width: 341px; max-width: 100%; min-height: 0; margin: 0 auto 10px; padding: 90px 22px 20px 10px;
    border-radius: 0; box-shadow: 0 19px 38px rgba(0, 0, 0, .16); font-size: 13.6px; line-height: 17.68px; letter-spacing: 1px; text-align: justify; padding-top: 75px; padding-bottom: 12px; }   /* ikona 25 px od góry, tekst 75 px — jak na produkcji */
  body.cco-bez-kubio:not(.home) .cco-sekcja--mocne .cco-sekcja__tresc li::before { left: calc(50% - 36px); top: 10px; transform: none; }
}

/* 28.09 TELEFON — USŁUGI WG PRODUKCJI (390 px, zmierzone na Ocenie EcoVadis):
   pas ze zdjęciem 220 px (było 320); wstęp 59 px od brzegów, lista z ptaszkami 16 px, 10 px dalej niż tekst;
   „Jak przebiega” — bez grafiki ze strzałką (na produkcji ukryta na telefonie), tekst 69 px od brzegów;
   „Co zyskujesz?” — NAJPIERW pas ze zdjęciem i znakiem zapytania (220 px, tytuł w pionie na środku), POTEM lista;
   grafika „Skorzystaj z konsultacji” na środku. */
@media (max-width: 767px) {
  body.cco-usluga .cco-sekcja--us-pas { min-height: 220px !important; height: 220px !important; }
  body.cco-usluga .cco-sekcja--us-wstep .cco-sekcja__srodek { padding-left: 59px; padding-right: 59px; }
  body.cco-usluga .cco-sekcja--us-wstep .cco-lista, body.cco-usluga .cco-sekcja--us-proces .cco-lista { padding-left: 10px; }
  body.cco-usluga .cco-sekcja--us-wstep .cco-lista__poz, body.cco-usluga .cco-sekcja--us-proces .cco-lista__poz { font-size: 16px; line-height: 21.6px; }
  body.cco-usluga .cco-sekcja--us-proces .cco-sekcja__foto { display: none; }
  body.cco-usluga .cco-sekcja--us-proces .cco-sekcja__srodek { padding-left: 69px; padding-right: 64px; }
  body.cco-usluga .cco-zysk__foto { order: -1; min-height: 220px; background-size: cover; background-position: 50% 50%; }
  body.cco-usluga .cco-zysk__tytul { top: 50%; transform: translateY(-50%); right: 10px; left: 30px; text-align: left; }   /* na produkcji od lewej, na znaku zapytania */
  body.cco-usluga .cco-zysk__lista { padding: 20px 45px 20px 60px; }
  /* grafika pod tekstem, przytulona do PRAWEJ krawędzi tekstu (ten sam margines 39 px co tekst), wjeżdża z prawej */
  /* 28.09 (właściciel): na telefonie KOLEJNOŚĆ nagłówek → grafika „Skorzystaj z konsultacji” (przy prawej) → tekst — na KAŻDEJ
     stronie z tym modułem (główna + wszystkie usługi). W HTML grafika stoi ZA blokiem tekstu, więc moduł staje się jedną kolumną
     (`display: contents` na opakowaniach), a kolejność ustawia `order`. Wypełnienie przechodzi z opakowania na sam moduł. */
  body.cco-bez-kubio .cco-help-banner { display: flex; flex-direction: column; padding: 44px 39px; box-sizing: border-box; width: auto; max-width: 100%; }   /* border-box — inaczej 2×39 px doliczało się do szerokości i strona jeździła w bok */
  body.cco-bez-kubio .cco-help-banner__inner, body.cco-bez-kubio .cco-help-banner__text { display: contents; }
  body.cco-bez-kubio .cco-help-banner h2.cco-help { order: 1; }
  body.cco-bez-kubio .cco-help-banner__graphic { order: 2; justify-content: flex-end; padding: 0; margin: 10px 0 18px; }
  body.cco-bez-kubio .cco-help-banner__text p { order: 3; }
  /* Odbiorca przemysłowy: karta kalkulatora → moduł pomocy 140 → 58 px (10 + 8 + 40), jak na desktopie */
  body.cco-bez-kubio section.kop { padding-bottom: 10px; }
  body.cco-usluga.cco-bez-kubio section.cco-sekcja--us-kalkulator { padding-bottom: 8px; }
}

/* 28.09 telefon: nic nie może przesuwać strony w bok (karuzela logotypów przy 360 px wystawała o 6 px).
   `clip`, nie `hidden` — `hidden` robi z body kontener przewijania i psuje przyklejony pasek menu. */
@media (max-width: 767px) { html, body.cco-bez-kubio { overflow-x: clip; } }

/* 28.09: PRZEŁĄCZNIK JĘZYKA (GTranslate) w nagłówku bez Kubio. Właściciel: „na polskiej wersji EN, a na angielskiej PL"
   — bez rozwijanej listy. Wcześniej lista była schowana na stałe i klik w „PL" nic nie dawał.
   Link-rodzic (bieżący język) znika, lista EN/PL staje w wierszu menu, a naglowek.php chowa pozycję bieżącego języka. */
.cco-nag .menu-item-gtranslate > a { display: none; }
.cco-nag .menu-item-gtranslate > .sub-menu { display: block; list-style: none; margin: 0; padding: 0; }
.cco-nag .menu-item-gtranslate > .sub-menu li[hidden] { display: none; }
.cco-nag .menu-item-gtranslate::after { display: none; }

/* 29.09.2026 (właściciel, strona główna): baner „Jak możemy Ci pomóc?" BEZ białych pasów nad i pod nim (to były marginesy
   40 px, przez które prześwitywało białe tło strony), baner na BIAŁYM tle i niższy o 10 px u góry i 10 px u dołu (44 → 34). Tylko home. */
body.home.cco-bez-kubio .cco-help-banner { margin-top: 0; margin-bottom: 0; background: #fff; }
body.home.cco-bez-kubio .cco-help-banner__inner { padding-top: 34px; padding-bottom: 34px; }
@media (max-width: 767px) {   /* ten sam próg co układ banera na telefonie (wyżej) */
  body.home.cco-bez-kubio .cco-help-banner { padding-top: 34px; padding-bottom: 34px; }
  body.home.cco-bez-kubio .cco-help-banner__inner { padding-top: 0; padding-bottom: 0; }
}
/* 29.09.2026 (właściciel, strona główna, desktop): szary pas pod ostatnim rzędem kafelków usług 2× węższy
   (dolne wypełnienie #uslugi = --cco-odstep → połowa; 88 → 44 px przy 1600 px). Telefon bez zmian. */
@media (min-width: 768px) { body.home.cco-bez-kubio #uslugi.cco-sekcja { padding-bottom: calc(var(--cco-odstep) / 2 - 10px); } }   /* +29.09: jeszcze −10 px */
/* 29.09.2026 (właściciel, strona główna, desktop): biała przestrzeń pod nagłówkiem „Szkolenia" (do pasa karuzeli) taka sama
   jak pod „Nasze doświadczenia" (do tekstu): 68 → 38 px. Sekcja ma STAŁĄ wysokość (inline min-height:110px) i treść
   wyśrodkowaną, więc: wysokość −30 px, a przesunięcie nagłówka −36 → −21 px (środek zjechał o 15 — oddajemy je), żeby odstęp NAD nagłówkiem się nie zmienił. */
@media (min-width: 1024px) {   /* ten sam próg co przesunięcie −36 px wyżej */
  body.home.cco-bez-kubio #szkolenia.cco-sekcja { min-height: 80px !important; }
  body.home.cco-bez-kubio #szkolenia .cco-sekcja__tytul { top: -21px; }
}

/* 02.10: pogrubienie (B) w tytułach z edytora — tytuły mają wagę 300, a samo „bolder” dawałoby ledwie 400 */
.cco-main :is(h1, h2, h3, h4, h5, h6, summary) :is(strong, b) { font-weight: 700; }

/* 02.10 (właściciel): karuzela logotypów „Współpracują z nami” na komputerze od lewej do prawej krawędzi ekranu
   (wszędzie ta sama karuzela 6840 co na stronie głównej; 40 px marginesu, żeby skrajne logo nie dotykało krawędzi). */
@media (min-width: 981px) {
  .cco-bez-kubio .cco-sekcja:has(.sp-logo-carousel) .cco-sekcja__srodek { max-width: none; width: 100%; padding-inline: 40px; box-sizing: border-box; }
}

/* 02.10: FAQ [cco_faq] — rozwijane pytania (jak program szkolenia, jaśniej: biała karta, granatowe pytanie, zielony plus). */
.cco-faq { margin: 24px 0 8px; }
.cco-faq__tytul { margin: 0 0 18px; font-size: 36.8px; font-weight: 300; line-height: 1.2; letter-spacing: 1px; color: var(--cco-granat); }
.cco-faq__poz { margin: 0 0 10px; background: #fff; border: 1px solid var(--cco-linia); border-radius: 8px; box-shadow: 0 4px 14px rgba(35, 32, 57, .06); }
.cco-faq__pytanie { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 20px; list-style: none; cursor: pointer; }
.cco-faq__pytanie::-webkit-details-marker { display: none; }
.cco-faq__pytanie::marker { content: ''; }
.cco-faq__tekst { margin: 0; font-size: 18px; font-weight: 400; line-height: 1.45; letter-spacing: .5px; color: var(--cco-granat); }
.cco-faq__ikona { flex: 0 0 18px; width: 18px; height: 18px; fill: var(--cco-zielen); transition: transform .2s; }
.cco-faq__poz[open] .cco-faq__ikona { transform: rotate(45deg); }
.cco-faq__poz[open] > .cco-faq__pytanie { border-bottom: 1px solid var(--cco-linia); }
.cco-faq__odp { padding: 14px 20px 6px; font-size: 16px; font-weight: 300; line-height: 27.2px; letter-spacing: 1px; color: #0a0e14; }
.cco-faq__odp p { margin: 0 0 12px; }
.cco-sekcja--faq .cco-faq { max-width: 956px; margin: 0 auto; }
@media (max-width: 767.98px) { .cco-faq__tytul { font-size: 28px; } .cco-faq__tekst { font-size: 16.5px; } .cco-faq__pytanie, .cco-faq__odp { padding-left: 14px; padding-right: 14px; } }
/* FAQ w artykule i szkoleniu: reguły śródtytułów kolumny (h3 28 px, marginesy) nie mogą przejąć pytania */
.cco-faq h3.cco-faq__tekst, .cco-art__tresc .cco-faq h3.cco-faq__tekst, .cco-strszk__tresc .cco-faq h3.cco-faq__tekst { margin: 0; padding: 0; font-size: 18px; font-weight: 400; line-height: 1.45; letter-spacing: .5px; color: var(--cco-granat); }
@media (max-width: 767.98px) { .cco-faq h3.cco-faq__tekst, .cco-art__tresc .cco-faq h3.cco-faq__tekst, .cco-strszk__tresc .cco-faq h3.cco-faq__tekst { font-size: 16.5px; } }

/* 05.10 (właściciel: „każdy klawisz Zapisz się dokładnie na tym samym poziomie”): data karty szkolenia jest <p> z `margin-top:auto`,
   który spycha datę + klawisz na dół karty. Reguła narzędzia „Odstępy” na wszystkie akapity (4.10: p · odstęp nad 7 px, komputer)
   nadpisała auto i klawisze rozjechały się z długością tytułu. Ten odstęp karty jest częścią układu — nie do nadpisania z narzędzia. */
.cco-szk .cco-szk__karta .cco-szk__data { margin-top: auto !important; }

/* 05.10 (właściciel): baner szkolenia dodany RĘCZNIE w treść publikacji stoi w kolumnie tekstu (węższej o jej marginesy) i na telefonie
   „Zobacz program i zapisz się” spadało do drugiej linii (360/390 px); automatyczne banery stoją między kolumnami i mieściły się.
   Na telefonie: baner w tekście bez dodatkowych marginesów, klawisz na całą szerokość, jedna linia (12 px, odstęp liter 1 px). */
@media (max-width: 800px) {
  .cco-bez-kubio .cco-art__tresc .cco-baner-szk { margin-left: 0; margin-right: 0; }
  .cco-bez-kubio .cco-baner-szk__btn { align-self: stretch; text-align: center; white-space: nowrap; font-size: 12px; letter-spacing: 1px; padding: 14px 12px; }
}