/* ==========================================================================
   KARTY REALIZACJI (.ccard) DLA STRON, KTÓRE NIE WCZYTUJĄ content.css
   ==========================================================================
   🔴 Powód powstania pliku — uwaga Karola z 12.08.2026 (przegląd komputera):
     • „Takie wyniki może mieć też Twoja firma — przenieś kafelki z case study,
       żeby wyglądało tak samo",
     • „Tak samo we wszystkich kategoriach usługowych, też w sekcji »Efekty,
       które możesz sprawdzić«".
   Karta realizacji mieszkała wyłącznie w `content.css` (sekcja 12), a ten arkusz
   wczytują tylko strony treściowe: /case-study/, /blog/, /o-nas/, /kontakt/.
   Strona główna nie wczytuje go wcale, a podstrony usług biorą `svc.css`.

   DLACZEGO OSOBNY PLIK, A NIE DOŁOŻENIE content.css TAM, GDZIE GO BRAK:
   `content.css` ma 2666 linii i niesie cały układ wpisu blogowego, listy,
   tabel i strony kontaktu. Doładowanie go do dziewięciu kolejnych stron to
   zarówno waga do pobrania, jak i dziewięć nowych okazji na to, żeby któraś
   z jego reguł ruszyła coś, czego nikt nie sprawdzał. Tu jest tylko to, co
   rysuje kartę.

   ⚠️ TE SAME WARTOŚCI STOJĄ W `content.css` (sekcja 12 i „wspólna skala").
   To świadome powtórzenie, nie przeoczenie: żadna strona nie wczytuje obu
   plików naraz, więc nie ma się co z czym bić. Zmieniasz kartę — zmieniasz
   w OBU miejscach. Uzasadnienie wyglądu (pomiar kontrastu na wzorach
   z rynku) jest opisane w `content.css`, nie powtarzam go tutaj.

   ⚠️ WYŻSZA WAGA SELEKTORÓW ROZMIARÓW PISMA (`.ccard .ccard__svc` zamiast
   samego `.ccard__svc`) — bo na podstronach usług karta stoi w środku `.svc`,
   a `svc.css` ma tam reguły typu `.svc p { font-size: … }`. Selektor z dwóch
   klas bije selektor „klasa + znacznik" i karta zostaje w swojej skali.
   ========================================================================== */

.cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}
@media (max-width: 900px) {
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .cards { grid-template-columns: minmax(0, 1fr); }
}

.cards--cs { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }

.ccard {
  display: flex;
  flex-direction: column;
  padding: 28px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.085);
  text-decoration: none;
  color: inherit;
  transition: background 0.22s ease, transform 0.22s ease;
}
.ccard:hover {
  background: rgba(255, 255, 255, 0.13);
  transform: translateY(-3px);
}

.ccard .ccard__svc {
  margin: 0 0 14px;
  font-size: var(--skala-podpis);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-default, #ff2c2c);
}
.ccard .ccard__client {
  margin: 0 0 4px;
  color: #fff;
  font-size: var(--skala-grupa);
  font-weight: 700;
  line-height: 1.15;
}
.ccard .ccard__branza {
  margin: 0 0 24px;
  color: var(--text-body, rgba(255, 255, 255, 0.8));
  font-size: var(--skala-tekst);
  line-height: 1.65;
}

.ccard__metric {
  margin: auto 0 0;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.ccard .ccard__num {
  font-family: var(--type-family-display), "Zalando Sans", "DM Sans", sans-serif;
  letter-spacing: -0.03em;
  color: #fff;
  font-variant-numeric: tabular-nums;
  /* odstep tysiecy: w Zalando 900 zwykla spacja rozpycha '44 000' na dwie liczby */
  word-spacing: -0.16em;
  font-size: var(--skala-grupa);
  font-weight: 900;
  line-height: 1.1;
}
.ccard .ccard__lab {
  color: #fff;
  font-weight: 500;
  font-size: var(--skala-etykieta);
  line-height: 1.5;
}
.ccard__arr {
  width: 17px;
  height: 17px;
  margin-left: auto;
  flex: none;
  align-self: center;
  transition: transform 0.22s ease;
}
.ccard:hover .ccard__arr { transform: translateX(3px); }

/* wspólna skala pisma karty — te same stopnie co w content.css */
@media (max-width: 860px) {
  .ccard { --skala-grupa: 24px; --skala-tekst: 17px; }
}
@media (max-width: 480px) {
  .ccard { --skala-grupa: 22px; --skala-tekst: 16px; --skala-etykieta: 14px; }
}