/* =============================================================================
   CCO — STANDARDY ARTYKUŁÓW (PUBLIKACJE)
   Jedno źródło prawdy dla typografii i odstępów treści publikacji.
   Zmieniasz wartość w PANELU STEROWANIA poniżej → działa na wszystkie publikacje
   objęte scope. Odcięcie od per-instancyjnych ustawień Kubio (style-local-*).

   STATUS: ROLLOUT — scope = body.cco-pub (WSZYSTKIE publikacje, kat. „publikacja").
   Baner „Jak możemy Ci pomóc?" celuje w .cco-help (filtr w functions.php),
   CTA „Skorzystaj…" w uniwersalny hook [class*="YA3RvDAkV8D"].
   Wyjątki świadome: 4210 = osobny wariant banera (z przyciskiem) — nie ruszamy jego banera;
   kikuty 6509/6493/5355 = treść w template (Faza 4), nie łapią się przez .entry-content.

   Jednostki: px. Mobile = osobna sekcja @media na dole (osobne wartości).
   ============================================================================= */

/* ============================== PANEL STEROWANIA (DESKTOP) ================== */
body.cco-pub{            /* [SCOPE] */

  /* ====== KRÓJ TYTUŁÓW — wspólny dla WSZYSTKICH nagłówków ======
     ⚙ PRECYZYJNY WEIGHT: wpisuj liczbę, nie bold/normal.
     Dostępne warianty Lato (wczytane): 300=light · 400=regular · 600=semibold · 700=bold
     (UWAGA: 500 NIE jest wczytany → spadłby do fallbacku/syntezy). */
  --art-title-font: "Lato", Helvetica, Arial, sans-serif;

  /* --- HERO / tytuł na banerze --- */
  --art-hero-title-color: rgba(var(--kubio-color-7),1);  /* ZIELONY marki = 133,158,34 (jak oryginał) */
  --art-hero-title-size: 42px;
  --art-hero-title-font: var(--art-title-font);  /* wspólny krój tytułów */
  --art-hero-title-weight: 300;             /* PRECYZYJNIE: 300/400/600/700 (oryginał renderuje 300) */
  --art-hero-title-lh: 1.2;
  --art-hero-title-align: right;            /* left | right | center | justify (user: do prawej) */
  --art-hero-title-maxwidth: none;          /* dociągnięcie prawej krawędzi (np. 680px) */
  --art-hero-content-top: 0px;              /* odstęp modułu treści od topu strony */
  --art-hero-banner-pad: 0px;               /* odstęp treści od krawędzi banera */
  --art-hero-content-width: 100%;           /* procentowa szerokość treści na banerze */

  /* --- Moduł 1 (z logo LinkedIn z boku) --- */
  --art-lead-color: inherit;                /* kolor czcionki modułu z LinkedIn */
  --art-lead-gap-from-banner: 28px;         /* odstęp od banera */
  --art-lead-align: left;                   /* left | center | justify */
  --art-linkedin-size: 24px;                /* rozmiar ikony LinkedIn */
  --art-linkedin-gap: 12px;                 /* odstęp ikony od tekstu */

  /* --- Moduły tekstowe (standard, bez LinkedIn) --- */
  --art-mod-gap: 22px;                      /* odstęp przed śródtytułem/kolejnym modułem */
  --art-head-to-body: 14px;                 /* odstęp temat → treść (większy oddech) */
  --art-head-color: #232039;                /* kolor tematu = navy/kubio-color-1 (jak prod) */
  --art-head-size: 2.3em;                   /* = prod (natywne em, render 1:1; ~37px) */
  --art-head-weight: 300;                   /* light, jak H1; 300/400/600/700 */
  --art-head-lh: 1.3;
  --art-body-color: #000000;                /* 100% czarny (oryginał = kubio-color-6-variant-3, ciemnoszary) */
  --art-body-size: 16px;
  --art-body-lh: 1.7;
  --art-body-weight: 300;                   /* waga tekstu body w dalszych sekcjach (jak było) */
  --art-lead-weight: 400;                   /* waga leadu pod H1 (.h-lead) — cięższy (+100) */
  --art-body-align: justify;                /* left | justify */

  /* --- Tabele (Ninja Tables) — jedyny art. z tabelami = 5929 --- */
  --art-table-gap: 22px;                    /* odstęp nad/pod tabelą = rytm modułów (--art-mod-gap) */

  /* --- Odstęp MIĘDZY sekcjami treści (ujednolicenie per-instancyjnych paddingów Kubio) --- */
  --art-section-gap: 26px;                  /* padding-top sekcji treści; bije bloaty typu 24% (wzorzec 6509 ≈2%) */

  /* --- Baner „Jak możemy Ci pomóc?” (OSOBNY standard) --- */
  --art-help-title-color: rgba(var(--kubio-color-7),1);  /* zielony jak tytuł */
  --art-help-title-size: 48px;              /* większy niż H1 (42px) */
  --art-help-title-weight: 300;             /* light; 300/400/600/700 */
  --art-help-title-align: left;             /* do lewej */
  --art-help-gap-before: 40px;              /* odstęp banera od treści powyżej */

  /* --- CTA „Skorzystaj z bezpłatnej konsultacji” (OSOBNY standard) --- */
  --art-cta-title-color: #ffffff;           /* biały */
  --art-cta-title-size: 42px;               /* jak H1 (element zostaje h3) */
  --art-cta-title-weight: inherit;          /* PRECYZYJNIE: 300/400/600/700 (inherit=jak oryginał) */
  --art-cta-title-align: center;            /* wyśrodkowane na banerze */
  --art-cta-gap-before: -5px;               /* odstęp nad CTA (dostrojony) */

  /* --- Punktatory „v” (Kubio icon-list) --- */
  --art-bullet-gap-before: 10px;            /* odstęp listy od treści poprzedzającej */
  --art-bullet-gap-after: 18px;             /* odstęp POD listą (normalizacja — stały dla wszystkich) */
  --art-bullet-icon-gap: 12px;              /* odstęp znaku „v” od tekstu w linijce */
  --art-bullet-align: flex-start;           /* flex-start = v do TOP (zawijanie) | center */
  --art-bullet-icon-nudge: 2px;             /* dociągnięcie v na linię tekstu (niżej = większa wartość) */
  --art-bullet-icon-size: 16px;             /* rozmiar znaczka „v” (dopasowany do tekstu) */
  --art-bullet-lh: 1.4;                     /* line-height punktatorów (mniejszy = ciaśniej) */
  --art-bullet-item-gap: 6px;               /* odstęp MIĘDZY punktami (po ukryciu dividerów Kubio) */

  /* --- Box autora --- */
  --art-author-gap-top: 32px;               /* odstęp NAD autorem (tekst→autor) */
  --art-author-gap-bottom: 32px;            /* = gap-top: odstęp POD autorem MA być równy odstępowi NAD (tekst→autor) */
  --art-author-foto: 64px;                  /* rozmiar zdjęcia autora */
  --art-author-name-color: #232039;
  --art-author-name-size: 16px;
  --art-author-name-weight: 700;
  --art-author-role-color: rgba(var(--kubio-color-7),1);  /* zielony jak tytuł — np. „Ekspert ds. ESG…” */
  --art-author-role-size: 13px;
  --art-author-bio-color: #363636;
  --art-author-bio-size: 15px;
  --art-author-bio-lh: 1.6;
  --art-author-bio-align: justify;          /* opis autora wyjustowany */
}

/* ============================== REGUŁY (stosują tokeny) ===================== */

/* --- HERO / tytuł --- */
body.cco-pub .entry-content h1.wp-block-kubio-heading__text{   /* [SCOPE] */
  color: var(--art-hero-title-color) !important;
  font-size: var(--art-hero-title-size) !important;
  font-family: var(--art-hero-title-font) !important;
  font-weight: var(--art-hero-title-weight) !important;
  line-height: var(--art-hero-title-lh) !important;
  text-align: var(--art-hero-title-align) !important;
  max-width: var(--art-hero-title-maxwidth) !important;
  margin-top: var(--art-hero-content-top) !important;
}
/* szerokość treści hero + padding od krawędzi banera (najwyższa sekcja w treści) */
body.cco-pub .entry-content > .wp-block-kubio-section:first-of-type .wp-block-kubio-section__inner{ /* [SCOPE] */
  max-width: var(--art-hero-content-width) !important;
  padding: var(--art-hero-banner-pad) !important;
}

/* --- Moduł 1 z LinkedIn (jedyne social-icons w treści = hero; stopka jest poza .entry-content) --- */
body.cco-pub .entry-content .wp-block-kubio-social-icons{       /* [SCOPE] */
  margin-top: var(--art-lead-gap-from-banner) !important;
  justify-content: var(--art-lead-align) !important;
  gap: var(--art-linkedin-gap) !important;
}
body.cco-pub .entry-content .wp-block-kubio-social-icon__icon{  /* [SCOPE] */
  width: var(--art-linkedin-size) !important;
  height: var(--art-linkedin-size) !important;
}

/* --- Moduły tekstowe: nagłówek (temat) — WYKLUCZAMY baner pomocy (.cco-help) i CTA (hook YA3RvDAkV8D) --- */
body.cco-pub .entry-content h2.wp-block-kubio-heading__text:not(.cco-help):not([class*="YA3RvDAkV8D"]),
body.cco-pub .entry-content h3.wp-block-kubio-heading__text:not(.cco-help):not([class*="YA3RvDAkV8D"]){ /* [SCOPE] */
  color: var(--art-head-color) !important;
  font-family: var(--art-title-font) !important;   /* ta sama czcionka co reszta tytułów */
  font-size: var(--art-head-size) !important;
  font-weight: var(--art-head-weight) !important;
  line-height: var(--art-head-lh) !important;
  margin: 0 0 var(--art-head-to-body) 0 !important;   /* temat → treść */
  padding-top: 0 !important;
  padding-bottom: 0 !important;   /* Kubio dawał padding-bottom:2% (~24px) → stąd „za duży” gap */
}
/* odstęp ZA modułem (nagłówek rozpoczyna nowy moduł → margines górny) — bez banera/CTA */
body.cco-pub .entry-content h2.wp-block-kubio-heading:not(.cco-help):not([class*="YA3RvDAkV8D"]),
body.cco-pub .entry-content h3.wp-block-kubio-heading:not(.cco-help):not([class*="YA3RvDAkV8D"]){ /* [SCOPE] */
  margin-top: var(--art-mod-gap) !important;
}

/* --- Baner „Jak możemy Ci pomóc?” — stabilny zaczep .cco-help (filtr w functions.php) --- */
body.cco-pub .entry-content h2.cco-help,
body.cco-pub .entry-content h3.cco-help{                        /* [SCOPE] */
  color: var(--art-help-title-color) !important;
  font-family: var(--art-title-font) !important;
  font-size: var(--art-help-title-size) !important;
  font-weight: var(--art-help-title-weight) !important;
  text-align: var(--art-help-title-align) !important;
  margin-top: var(--art-help-gap-before) !important;
}

/* --- CTA „Skorzystaj z bezpłatnej konsultacji” — uniwersalny hook YA3RvDAkV8D (wszystkie publikacje) --- */
body.cco-pub .entry-content h3[class*="YA3RvDAkV8D"]{            /* [SCOPE] */
  color: var(--art-cta-title-color) !important;
  font-family: var(--art-title-font) !important;
  font-size: var(--art-cta-title-size) !important;
  font-weight: var(--art-cta-title-weight) !important;
  text-align: var(--art-cta-title-align) !important;
  margin-top: var(--art-cta-gap-before) !important;
}

/* --- Moduły tekstowe: treść --- */
body.cco-pub .entry-content .wp-block-kubio-text__text,
body.cco-pub .entry-content .wp-block-kubio-text p,
body.cco-pub .entry-content .wp-block-kubio-text__text p,
body.cco-pub .entry-content p.wp-block-paragraph{              /* core'owe akapity też — [SCOPE] */
  color: var(--art-body-color) !important;
  font-size: var(--art-body-size) !important;
  font-weight: var(--art-body-weight) !important;   /* +100 (bije globalny [data-kubio]* 300) */
  line-height: var(--art-body-lh) !important;
  text-align: var(--art-body-align) !important;
  margin-top: 0 !important;   /* gap tytuł→tekst = tylko z nagłówka (--art-head-to-body), jednolicie */
}
/* Lead pod H1 (.h-lead) — osobna, cięższa waga (bije regułę body powyżej: 2 klasy > 1) */
body.cco-pub .entry-content .wp-block-kubio-text__text.h-lead{   /* [SCOPE] */
  font-weight: var(--art-lead-weight) !important;
}

/* --- Punktatory „v” (Kubio icon-list) --- */
body.cco-pub .entry-content .wp-block-kubio-iconlist__outer{    /* [SCOPE] */
  margin-top: var(--art-bullet-gap-before) !important;
  margin-bottom: var(--art-bullet-gap-after) !important;   /* stały odstęp pod listą = normalizacja */
}
/* „v" i tekst w JEDNEJ linii (row); przy zawijaniu tekstu „v" zostaje przy PIERWSZEJ linii.
   Kubio na niektórych listach dawał flex-direction:column (ikona NAD tekstem) — wymuszamy row. */
body.cco-pub .entry-content .wp-block-kubio-iconlistitem__text-wrapper{ /* [SCOPE] */
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: var(--art-bullet-align) !important;   /* flex-start = v przy 1. linii */
}
body.cco-pub .entry-content .wp-block-kubio-iconlistitem__item{ /* [SCOPE] */
  align-items: var(--art-bullet-align) !important;
}
body.cco-pub .entry-content .wp-block-kubio-iconlistitem__text{ /* [SCOPE] */
  flex: 1 1 auto !important;                  /* tekst wypełnia resztę i zawija w obrębie linii */
  margin-left: var(--art-bullet-icon-gap) !important;
  color: var(--art-body-color) !important;   /* tekst punktatora też 100% czarny */
  font-size: var(--art-body-size) !important;     /* ujednolicenie z tekstem body */
  line-height: var(--art-bullet-lh) !important;   /* ciaśniejszy line-height punktatorów */
}
body.cco-pub .entry-content .wp-block-kubio-iconlistitem__icon{ /* [SCOPE] */
  flex: 0 0 auto !important;                 /* „v” nie rozciąga się ani nie ścieśnia */
  width: var(--art-bullet-icon-size) !important;
  height: var(--art-bullet-icon-size) !important;
  margin-top: var(--art-bullet-icon-nudge) !important;  /* dociągnięcie v do górnej linii */
}

/* --- Box autora (nasz mu-plugin cco-eksperci.php) --- */
/* przesunięcie modułu autora ku formularzowi (góra↑ pod artykułem, dół↓ nad formularzem) */
body.cco-pub .cco-autor-wrap{                                   /* [SCOPE] */
  margin-top: var(--art-author-gap-top) !important;
  margin-bottom: var(--art-author-gap-bottom) !important;
}
body.cco-pub .cco-autor__foto,
body.cco-pub .cco-ekspert__foto{                                /* [SCOPE] */
  width: var(--art-author-foto) !important;
  height: var(--art-author-foto) !important;
}
body.cco-pub .cco-autor__nazwa,
body.cco-pub .cco-ekspert__nazwa{                               /* [SCOPE] */
  color: var(--art-author-name-color) !important;
  font-size: var(--art-author-name-size) !important;
  font-weight: var(--art-author-name-weight) !important;
}
body.cco-pub .cco-autor__rola,
body.cco-pub .cco-autor__tytul,
body.cco-pub .cco-ekspert__tytul{                               /* [SCOPE] */
  color: var(--art-author-role-color) !important;
  font-size: var(--art-author-role-size) !important;
}
body.cco-pub .cco-autor__bio{                                   /* [SCOPE] */
  color: var(--art-author-bio-color) !important;
  font-size: var(--art-author-bio-size) !important;
  line-height: var(--art-author-bio-lh) !important;
  text-align: var(--art-author-bio-align) !important;   /* justify */
}


/* Kubio wstawia puste „divider-wrapper" między punktami (puste linie nad/pod tekstem,
   wymuszone height:auto!important) → ukrywamy je i robimy jednolity odstęp itemów. */
body.cco-pub .entry-content .wp-block-kubio-iconlistitem__divider-wrapper{ display:none !important; }
body.cco-pub .entry-content .wp-block-kubio-iconlistitem__item{ margin:0 0 var(--art-bullet-item-gap) 0 !important; }


/* GŁÓWNY FIX punktatorów: część punktów ma tekst owinięty w <p> (z edycji Kubio).
   <p> jest blokowy + globalne marginesy WP (~24px) → puste linie nad/pod i łamanie.
   Neutralizujemy: <p> w punkcie = inline, zero marginesów/paddingu. */
body.cco-pub .entry-content .wp-block-kubio-iconlistitem__text p{
  display: inline !important;
  margin: 0 !important;
  padding: 0 !important;
}


/* === Baner „Jak możemy Ci pomóc?" — KOMPONENT full-width (shortcode [cco_help]) ===
   Pasek tła od krawędzi do krawędzi + grafika/klawisz wjeżdżająca z prawego boku. */
body.cco-pub .entry-content .cco-help-banner{
  position:relative;
  width:100vw; left:50%; right:50%;
  margin-left:-50vw; margin-right:-50vw;   /* full-bleed: tło od krawędzi do krawędzi */
  margin-top:40px; margin-bottom:40px;
  background:rgba(var(--kubio-color-10),1); /* jasne tło marki */
  overflow:hidden;
}
body.cco-pub .entry-content .cco-help-banner__inner{
  max-width:1240px; margin:0 auto; padding:44px 0;   /* lewa krawędź banera = krawędź bloków treści (1240) */
  box-sizing:border-box;
}
body.cco-pub .entry-content .cco-help-banner__text{ max-width:62%; }
body.cco-pub .entry-content .cco-help-banner h2.cco-help{ margin:0 0 12px 0 !important; }
body.cco-pub .entry-content .cco-help-banner p{
  margin:0; color:var(--art-body-color); font-size:var(--art-body-size);
  font-weight:var(--art-body-weight); line-height:var(--art-body-lh); text-align:left;
}
/* grafika „wjeżdża" z prawej krawędzi paska */
body.cco-pub .entry-content .cco-help-banner__graphic{
  position:absolute; bottom:0; top:0;
  /* spoczynek GŁĘBIEJ: przy prawej krawędzi treści (1240px) + zapas (--art-helpbanner-graphic-depth) */
  right:max(16px, calc((100vw - 1240px)/2 + var(--art-helpbanner-graphic-depth, 45px)));
  display:flex; align-items:center; line-height:0;
  transition:transform .7s cubic-bezier(.16,.8,.24,1), opacity .6s ease;
}
body.cco-pub .entry-content .cco-help-banner__graphic img{
  display:block; height:auto; width:340px; max-width:34vw;
}
/* WJAZD z prawej: stan startowy (poza prawą krawędzią ekranu) gdy JS gotowy; .is-in = wjechane głębiej */
body.cco-pub .entry-content .cco-help-banner.cco-anim-ready .cco-help-banner__graphic{
  transform:translateX(160%); opacity:0;
}
body.cco-pub .entry-content .cco-help-banner.cco-anim-ready.is-in .cco-help-banner__graphic{
  transform:translateX(0); opacity:1;
}
@media (prefers-reduced-motion:reduce){
  body.cco-pub .entry-content .cco-help-banner.cco-anim-ready .cco-help-banner__graphic{ transform:none; opacity:1; }
}
@media (max-width:900px){
  /* na wąskich: grafika nie nachodzi na tekst — chowamy lub zmniejszamy */
  body.cco-pub .entry-content .cco-help-banner__inner{ padding-left:24px; padding-right:24px; }
  body.cco-pub .entry-content .cco-help-banner__text{ max-width:100%; }
  body.cco-pub .entry-content .cco-help-banner__graphic{ display:none; }
  body.cco-pub .entry-content .cco-help-banner p{ text-align:left; }
}


/* === NORMALIZACJA odstępów wokół boxu autora (żeby = WYŁĄCZNIE z tokenów, jak wzorzec 6509) ===
   Box autora (cco-eksperci.php render_block) jest wstrzykiwany TUŻ PRZED sekcją formularza.
   Per-instancyjne paddingi sekcji wokół niego rozjeżdżają odstępy → zerujemy/ujednolicamy. */
body.cco-pub .entry-content .wp-block-kubio-section__outer:has(+ .cco-autor-wrap){
  padding-bottom:0 !important;   /* tekst→autor = wyłącznie --art-author-gap-top */
}
body.cco-pub .entry-content .cco-autor-wrap + .wp-block-kubio-section__outer{
  padding-top:0 !important;   /* 0: cały odstęp autor→CTA pochodzi WYŁĄCZNIE z margin-bottom boxu (=gap-top) → symetria */
}
/* REALNY sprawca odstępu autor→CTA (potwierdzony w DOM live): KOLUMNA z formularzem
   (.wp-block-kubio-column__inner zawierająca kubio/contact) ma margin-top:8% (~99px na 1240px).
   Zerujemy ją — cały odstęp autor→CTA pochodzi wtedy WYŁĄCZNIE z margin-bottom boxu autora (=gap-top → symetria). */
body.cco-pub .entry-content .wp-block-kubio-section:has(.wp-block-kubio-contact) .wp-block-kubio-column__inner:has(.wp-block-kubio-contact){
  margin-top:0 !important;
}

/* === NORMALIZACJA odstępów wokół TABEL Ninja (art. 5929) ===
   Za dużo miejsca nad/pod tabelą bo: (1) blok kubio/shortcode z tabelą ma zaszyty
   padding-bottom:40px (style-AYGI…-outer), (2) Ninja dokłada własny margin:1em na .ui.table.
   Zerujemy oba i dajemy JEDEN spójny odstęp = --art-table-gap (rytm modułów). */
body.cco-pub .entry-content .wp-block-kubio-shortcode__outer:has(.ninja_table_wrapper){
  padding-top:0 !important; padding-bottom:0 !important;   /* kasuje zaszyte 40px */
}
body.cco-pub .entry-content .ninja_table_wrapper{
  margin: var(--art-table-gap) 0 !important;   /* jednolity odstęp nad/pod tabelą */
}
body.cco-pub .entry-content .ninja_table_wrapper .ui.table,
body.cco-pub .entry-content table.ui.table{
  margin:0 !important;   /* zeruj własny margin:1em Ninja (gap robi już wrapper) */
}

/* === NORMALIZACJA pionowego odstępu MIĘDZY SEKCJAMI treści ===
   Złe artykuły mają per-instancyjny padding-top sekcji (np. 24%!) → ogromna dziura baner→1.H2
   i tekst→śródtytuł. Wzorzec 6509 ≈2%. Pinujemy padding-top sekcji treści do --art-section-gap.
   Pomijamy: hero (first-of-type, osobny), sekcję formularza (kubio-contact), sekcje menu stopki.
   Tylko padding-TOP (bottom zostaje — nie ruszamy normalizacji boxu autora). */
body.cco-pub .entry-content > .wp-block-kubio-section__outer:not(:first-of-type):not(:has(.wp-block-kubio-contact)):not(:has(#menu-footer-menu)){
  padding-top: var(--art-section-gap) !important;
}

/* ============================== MOBILE (≤781px) — OSOBNE WARTOŚCI =========== */
@media (max-width: 781px){
  body.cco-pub{           /* [SCOPE] */
    --art-hero-title-size: 30px;
    --art-hero-title-lh: 1.25;
    --art-hero-content-top: 0px;
    --art-hero-content-width: 100%;
    --art-hero-banner-pad: 0px;

    --art-lead-gap-from-banner: 20px;
    --art-linkedin-size: 22px;

    --art-mod-gap: 26px;
    --art-head-to-body: 12px;
    --art-head-size: 24px;            /* śródtytuły na mobile — większe (było 19px, blisko body 16px) */
    --art-head-lh: 1.3;

    --art-cta-title-size: 26px;       /* CTA „Skorzystaj…" mniejszy na mobile — żeby nie wychodził z granatowej kafelki (desktop 42px) */
    --art-body-size: 16px;
    --art-body-lh: 1.65;

    --art-bullet-gap-before: 8px;
    --art-bullet-icon-gap: 10px;
    --art-bullet-icon-nudge: 2px;

    --art-author-foto: 56px;
    --art-author-name-size: 15px;
    --art-author-role-size: 12px;
    --art-author-bio-size: 14px;
    --art-author-bio-lh: 1.55;
  }
}