/* ==========================================================================
   Kierunek B: „Jasny i rzeczowy”, w barwach logo DataDrive.
   Wygląd komponentów DataDrive w plikach 20–24, wczytywanych po 02–19 i nadpisujących je. Tokeny są w 01-tokeny.css.
   Przeniesione z makiety projekty/kierunki/kierunek-b.css.
   --------------------------------------------------------------------------
   Strona jak porządny dokument techniczny: biel i chłodny jasny szary, prawie
   czarny tekst, rogi prawie ostre, ramki 1 px, bez cieni, tekst do lewej.
   Kolory pochodzą z logo: niebieski #0086D5 → morski #009E8E → zielony #01C41D.
   - barwy logo wprost: linia pod nagłówkiem strony, ikony, punkty list;
   - te same barwy przyciemnione (biały napis min. 4,5:1): przycisk główny,
     blok kontaktowy, linki;
   - granat z niebieskiego logo: pasek górny i stopka.

   Pliki wyglądu DataDrive (kolejność ma znaczenie, reguły w tej samej kolejności co w dawnym jednym pliku)
   20 baza, elementy, kafelki i fakty (ten plik)
   21 nagłówek i menu
   22 pierwszy ekran, karty, kroki, pytania, liczby i blok kontaktowy
   23 podstrony i stopka
   24 ruch, menu mobilne z prawej, tło pierwszego ekranu, długie H1 na telefonie
   ========================================================================== */

/* 2. Baza i układ */
body{line-height:1.6}
h1,h2,h3,h4{font-weight:700;line-height:1.14;letter-spacing:-.018em;text-wrap:balance}
h1{line-height:1.1;letter-spacing:-.024em}
h3{font-weight:600;line-height:1.3;letter-spacing:0}
strong,b{font-weight:600}
.site-footer :focus-visible{outline-color:var(--white)}
.skip-link{font-weight:600}
/* Wyróżnione słowa w nagłówku (.grad): przejście niebieski → zielony z tokenu --grad-text, reguła z bazy */
/* Nagłówki sekcji zawsze do lewej (także head--center) */
.head{max-width:760px}
.head--center{margin-inline:0;text-align:left}
.head p{margin-top:16px;font-size:1.0625rem}

/* 3. Elementy */
.btn{padding:14px 24px;border-radius:var(--r-sm);font-weight:600;font-size:1rem;transition:background-color .15s,border-color .15s,color .15s}
.btn svg{transition:none}
.btn:hover svg{transform:none}
.btn[href^="#"]:hover svg{transform:none}
/* Przycisk główny: przejście w barwach logo (ciemniejsza wersja), biały napis */
.btn--primary:hover{background:var(--grad-mocny-hover) border-box;transform:none}
.btn--ghost{background:var(--white);border-color:var(--blue);color:var(--blue)}
.btn--ghost:hover{background:var(--dd-blue-50);border-color:var(--blue-700);color:var(--blue-700);transform:none}
.btn--white{background:var(--white);color:var(--ink)}
.btn--white:hover{background:var(--dd-blue-50);transform:none}
.btn--szklo:hover{transform:none}
.btn--szklo:hover svg{transform:none}
@media (max-width:400px){.btn{padding-inline:16px}}
@media (max-width:340px){.btn{padding-inline:12px;font-size:.9rem}}

/* Ikona: sam obrys w niebieskim z logo, w kwadracie z cienką ramką */
.ico{width:44px;height:44px;border-radius:var(--r-sm);background:var(--white);border:1px solid var(--line-strong);color:var(--dd-blue)}
.ico svg{width:22px;height:22px}
.ico--sm{width:38px;height:38px}

/* Link „więcej”: po najechaniu podkreślenie, strzałka stoi */
.more{font-weight:600;text-underline-offset:4px;transition:color .15s}
.more svg{transition:none}
.more:hover{color:var(--blue-700);text-decoration:underline}
.more:hover svg{transform:none}

/* Lista: kwadratowe znaczniki w zielonym z logo */
.dots li{padding-left:20px}
.dots li::before{top:.62em;width:6px;height:6px;border-radius:0;background:var(--dd-green)}
.model{font-weight:700}

/* 4. Kafelki i fakty */
/* Pasek kafelków: jedna ramka podzielona liniami (kafelki zachodzą na siebie o 1 px, nadmiar ucina ramka paska) */
.strip{gap:0;border:1px solid var(--line-strong);border-radius:var(--r);background:var(--white);overflow:hidden}
.tile{margin:0 -1px -1px 0;padding:20px 22px;border:0;border-right:1px solid var(--line);border-bottom:1px solid var(--line);border-radius:0;background:none;transition:none}
.tile:hover{transform:none;border-color:var(--line)}
.tile p{font-size:.97rem;line-height:1.45}
.tile strong{color:var(--ink);font-weight:600}

/* Fakt: w liście obok obrazu (.fact-stack) bez ramki, z linią nad tekstem (jak punkt w dokumencie) */
.facts{gap:20px}
.fact{padding:20px 0 0;border:0;border-top:1px solid var(--line-strong);border-radius:0;background:none;transition:none}
.fact p{margin-top:16px;font-size:1rem;line-height:1.55}
.fact strong{color:var(--ink);font-weight:600}
/* Fakt z ikoną: ikona z lewej, tekst obok */
.fact:has(>.ico){display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:16px;align-items:start}
.fact:has(>.ico) p{margin-top:0}
.fact-stack{gap:0;border-bottom:1px solid var(--line-strong)}
.fact-stack .fact{padding-block:18px}
/* Fakty w kolumnach (.facts): białe karty z paskiem w barwach logo u góry, pogrubiony początek jako tytuł karty (właściciel 19.10.2026) */
.facts>.fact{position:relative;padding:24px 24px 22px;border:1px solid var(--line);border-radius:var(--r);background:var(--white);overflow:hidden}
.facts>.fact::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:var(--dd-ramp-1)}
.facts>.fact:nth-child(3n+2)::before{background:var(--dd-ramp-2)}
.facts>.fact:nth-child(3n+3)::before{background:var(--dd-ramp-4)}
.facts>.fact>p:first-child>strong:first-child{display:block;margin-bottom:6px;font-size:1.0625rem}
:where(.facts,.lists,.cards)+.btn-row{margin-top:clamp(28px,3.5vw,40px)}
/* Kolejne bloki tej samej sekcji: fakty pod tabelą list, liczby pod dwiema kolumnami */
:where(.lists,.cards,.steps)+.facts,:where(.split,.facts,.lists)+.numbers{margin-top:clamp(40px,5vw,64px)}
@media (max-width:900px){.facts--3{grid-auto-rows:auto}}
@media (max-width:600px){.facts{gap:24px}}

.mini li{border-radius:var(--r-sm)}
.mini strong,.badge b,.role strong{font-weight:600}
.badge{background:var(--pale)}
.login:hover{translate:none}
.login:hover .login__logo{transform:none}

/* Ramka „do dostarczenia” */
.placeholder{border:1px dashed var(--line-kontrast);background:var(--pale-2)}
.placeholder>svg{color:var(--dd-blue)}
.placeholder__h{font-weight:600}
.placeholder__size{color:var(--text);font-weight:500}
.zoom::after{border-radius:var(--r-sm);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23006fb3' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4-4M11 8v6M8 11h6'/%3E%3C/svg%3E")}
.zoom:hover::after{transform:none}
.lightbox__close{border-radius:var(--r-sm)}
.plansza--telefony{border-radius:var(--r-xl)}