/* =================================================================================================
   STOPKA cco.expert — czysty CSS, bez Kubio (31.07.2026)
   Wartości NIE są wymyślone: każda przepisana z pomiaru starej stopki Kubio na ekranie 1440 px.
   Zmierzone: tło rgb(35,32,57); tytuły kolumn 18 px Work Sans waga 300 odstęp liter 1,5 px
   WERSALIKI biel pełna; nagłówki grup 12,8 px odstęp 1 px WERSALIKI biel pełna; pozycje list
   14,4 px Lato waga 300 biel 72 % (najechanie = pełna biel), link padding 4/3 px, interlinia 21,6 px;
   adres 14,4 px Lato biel pełna; logo 164 px; szerokości kolumn 24 / 24 / 27 / 25 %.
   ⚠️ Odstępy pionowe też są z pomiaru — patrz komentarze przy poszczególnych regułach.
   ================================================================================================= */

.cco-ft {
  background: rgb(35, 32, 57);
  padding: 7px 0 1px;            /* zmierzone na sekcji Kubio */
  color: #fff;
  font-family: Lato, Helvetica, Arial, sans-serif;
}
.cco-ft__wrap {
  display: flex;
  align-items: flex-start;
  padding-top: 8px;              /* tytuły startowały 8 px poniżej krawędzi treści */
  padding-bottom: 30px;          /* zmierzony luz pod ikoną LinkedIn do końca stopki */
}
.cco-ft__kol {
  box-sizing: border-box;
  padding: 0 39px;               /* 8 px kontenera + 31 px wcięcia = zmierzone 39 px do litery */
  min-width: 0;
}
.cco-ft__kol--uslugi     { width: 24%; }
.cco-ft__kol--srodowisko { width: 24%; }
.cco-ft__kol--szkolenia  { width: 27%; }
.cco-ft__kol--firma      { width: 25%; }

/* --- nagłówki ------------------------------------------------------------------------------- */
.cco-ft__tytul,
.cco-ft__grupa {
  font-family: "Work Sans", Helvetica, Arial, sans-serif;
  font-weight: 300;
  text-transform: uppercase;
  color: #fff;
  margin: 0;
}
.cco-ft__tytul { font-size: 18px;   letter-spacing: 1.5px; line-height: 1.6; }
.cco-ft__grupa { font-size: 12.8px; letter-spacing: 1px;   line-height: 1.6; margin-top: 20px; }
/* Kolumna „Środowisko" nie ma własnego tytułu — jej nagłówek grupy musi stanąć w jednej linii
   z „Energetyka" z kolumny obok (zmierzone: 49 px poniżej linii tytułów). */
.cco-ft__grupa--bez-tytulu { margin-top: 49px; }
/* Odstęp między listą usług a nagłówkiem drugiej grupy w tej samej kolumnie.
   41 px — w wersji Kubio między listą a nagłówkiem stała jeszcze pusta linia nagłówka
   (blok bez tekstu). Odtwarzamy sam odstęp, bez pustego znacznika. */
.cco-ft__grupa--druga { margin-top: 41px; }

/* --- listy ---------------------------------------------------------------------------------- */
.cco-ft__lista {
  list-style: none;
  margin: 16px 0 0;              /* zmierzony odstęp nagłówek → pierwsza pozycja */
  padding: 0;
}
.cco-ft__lista li { margin: 0; }
.cco-ft__lista a {
  display: block;
  padding: 4px 3px;
  font-size: 14.4px;
  font-weight: 300;
  letter-spacing: 1px;                /* bez tego dłuższe pozycje mieszczą się w jednej linii
                                         i cała kolumna skraca się wobec oryginału */
  line-height: 21.6px;
  color: rgba(255, 255, 255, 0.72);   /* kontrast ~8,7:1 na granatowym tle */
  text-decoration: none;
  transition: color .2s ease;
}
.cco-ft__lista a:hover,
.cco-ft__lista a:focus { color: #fff; }

/* --- kolumna FIRMA -------------------------------------------------------------------------- */
.cco-ft__adres {
  margin: 15px 0 0;              /* tytuł kończy się 3139, adres startuje 3154 */
  font-size: 14.4px;
  font-weight: 300;
  letter-spacing: 1px;
  line-height: 21.6px;
  color: #fff;
}
.cco-ft__adres a { color: #fff; text-decoration: none; }
.cco-ft__adres a:hover { text-decoration: underline; }
.cco-ft__kol--firma .cco-ft__lista { margin-top: 24px; }
.cco-ft__logo {
  display: block;
  width: 164px;                  /* plik ma 436 px — w stopce zawsze o połowę węższy */
  height: auto;
  margin-top: 17px;
}
.cco-ft__social {
  display: block;
  width: 32px;
  margin: 0 10px 0 auto;   /* w wersji Kubio ikona stała przy PRAWEJ krawędzi kolumny */
  color: #fff;
}
/* 32×43 px — proporcja z oryginalnego znaku (viewBox 384×512), NIE kwadrat. */
.cco-ft__social svg { display: block; width: 32px; height: auto; fill: currentColor; }
.cco-ft__social:hover { opacity: .8; }

/* --- pasek pod stopką ----------------------------------------------------------------------- */
.cco-ft__pasek { line-height: 0; }
.cco-ft__pasek img { display: block; width: 100%; height: auto; }

/* --- telefon doklejany przez mu-plugin `cco-telefon.php` ------------------------------------- */
.cco-ft__adres .cco-tel-foot { color: #fff; text-decoration: none; }

/* --- mniejsze ekrany ------------------------------------------------------------------------ */
@media (max-width: 991px) {
  .cco-ft__wrap { flex-wrap: wrap; }
  .cco-ft__kol--uslugi, .cco-ft__kol--srodowisko { width: 50%; }
  .cco-ft__kol--szkolenia, .cco-ft__kol--firma   { width: 50%; margin-top: 34px; }
}
@media (max-width: 640px) {
  .cco-ft__kol { width: 100% !important; padding: 0 24px; }
  .cco-ft__kol + .cco-ft__kol { margin-top: 34px; }
  .cco-ft__grupa--bez-tytulu { margin-top: 20px; }
  .cco-ft__pasek { display: none; }   /* w wersji Kubio pasek też był ukryty na telefonie */
}