/* Wygląd DataDrive (kierunek B), część 3 z 5: pierwszy ekran, karty, kroki, pytania, liczby i blok kontaktowy. Spis plików 20–24: 20-wyglad-baza-i-elementy.css */

/* 6. Pierwszy ekran strony głównej: tekst do lewej, białe tło.
   Szeroki ekran: tekst i obraz obok siebie, kafelki pod spodem na całą szerokość (jak na stronie modułu) */
.hero{padding-block:clamp(32px,5vw,72px) clamp(48px,6vw,80px);background:var(--white)}
.hero__text{max-width:none;margin-inline:0;text-align:left}
.hero h1 .grad{width:fit-content}
.hero__lead{max-width:62ch;margin:24px 0 0;font-size:clamp(1.0625rem,1.4vw,1.15rem)}
.hero__cta{justify-content:flex-start;margin-top:32px}
.hero__in>.hero__shot{max-width:none;margin-top:clamp(32px,5vw,48px)}
@media (min-width:1101px){
  .hero__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);column-gap:var(--gap-lg);align-items:center}
  .hero__in>.hero__text{grid-column:1;grid-row:1}
  .hero__in>.hero__shot{grid-column:2;grid-row:1;margin-top:0}
  .hero__in>.strip{grid-column:1/-1;grid-row:2}
}

/* 7. Karty, kroki, pytania */
/* Karty: jedna tabela z liniami zamiast osobnych pudełek; wszystkie komórki w rzędzie mają tę samą wysokość */
.cards{gap:0;border:1px solid var(--line-strong);border-radius:var(--r);background:var(--white);overflow:hidden}
.cards>li{margin:0 -1px -1px 0;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.card{gap:12px;padding:24px;border:0;border-radius:0;background:none;transition:background-color .15s}
.card:hover{transform:none;background:var(--dd-blue-50)}
.card:focus-visible{outline-offset:-3px}
.card h3{transition:color .15s}
.card:hover h3{color:var(--blue-700)}
.card p{font-size:.95rem;line-height:1.5}
.card .more{padding-block:8px 0}
.card:hover .more{color:var(--blue-700);text-decoration:underline}
.card:hover .more svg{transform:none}
/* Dwie kolumny: nieparzysta ostatnia karta na całą szerokość, bez pustej komórki */
@media (min-width:601px) and (max-width:1100px){.cards>li:last-child:nth-child(odd){grid-column:1/-1}}
/* Telefon: ikona z lewej, treść obok (krótsza lista przy 20 modułach) */
@media (max-width:600px){
  .card:has(>.ico){display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 16px;align-items:start;padding:20px}
  .card:has(>.ico)>.ico{grid-row:1/span 3}
  .card:has(>.ico)>:not(.ico){grid-column:2}
  .card:has(>.ico) h3{align-self:center;min-height:0}
  /* Długa lista modułów (7 kart i więcej): 2 kolumny, sama ikona i nazwa, bez opisu i „Szczegóły modułu”; klikalna cała karta (a.card) */
  .cards:has(>li:nth-child(7)){grid-template-columns:repeat(2,minmax(0,1fr))}
  .cards:has(>li:nth-child(7))>li:last-child:nth-child(odd){grid-column:1/-1}
  .cards:has(>li:nth-child(7)) .card:has(>.ico){display:flex;flex-direction:column;align-items:flex-start;gap:10px;min-height:44px;padding:16px}
  .cards:has(>li:nth-child(7)) .card:has(>.ico) h3{align-self:stretch;font-size:1rem;line-height:1.3;overflow-wrap:break-word;hyphens:auto}
  .cards:has(>li:nth-child(7)) .card:has(>.ico)>:is(p,.more){display:none}
}
.card--accent{background:var(--grad-mocny) border-box}
.card--accent:hover{background:var(--grad-mocny-hover) border-box}
.card--accent:hover :is(h3,.more){color:var(--white)}
.card--accent .ico{background:none;border-color:var(--glass-line-strong);color:var(--white)}

/* Kroki: oś z kółkami (właściciel 19.10.2026). Numer w kółku w barwach logo (ciemniejsze odcienie, biały numer min. 4,5:1),
   kółka połączone poziomą linią od 1101 px; na tablecie i telefonie same kółka */
.steps{gap:32px 24px}
.steps>li{padding:0;border:0;border-radius:0;background:none}
.steps>li::before{content:counter(krok);display:grid;place-items:center;width:44px;height:44px;margin-bottom:18px;border-radius:50%;background:var(--dd-blue-700);color:var(--white);font-weight:700;font-size:1.05rem;line-height:1;letter-spacing:0;font-variant-numeric:tabular-nums}
.steps>li:nth-child(4n+2)::before{background:color-mix(in srgb,var(--dd-blue-700),var(--dd-teal-700))}
.steps>li:nth-child(4n+3)::before{background:color-mix(in srgb,var(--dd-teal-700),var(--dd-green-700))}
.steps>li:nth-child(4n+4)::before{background:var(--dd-green-700)}
.steps--3>li:nth-child(3n+1)::before{background:var(--dd-blue-700)}
.steps--3>li:nth-child(3n+2)::before{background:var(--dd-teal-700)}
.steps--3>li:nth-child(3n+3)::before{background:var(--dd-green-700)}
.steps>li::after{display:none}
@media (min-width:1101px){
  .steps>li:not(:last-child)::after{content:"";display:block;position:absolute;top:21px;left:58px;right:-10px;width:auto;height:2px;border-radius:2px;background:var(--line-strong)}
  .steps:not(.steps--3)>li:nth-child(4n)::after,.steps--3>li:nth-child(3n)::after{display:none}
}
.steps h3{font-size:1.2rem}
.steps p{font-size:1rem;line-height:1.55}
.configs__nr{font-weight:600}

/* Pytania i odpowiedzi: wiersze rozdzielone liniami, do lewej */
.faq{gap:0;margin-inline:0;border-top:1px solid var(--line-strong)}
.faq details{border:0;border-bottom:1px solid var(--line-strong);border-radius:0;background:none;transition:none}
.faq summary{padding:20px 4px 20px 0;font-weight:600;font-size:1.0625rem;transition:color .15s}
/* Pytanie: ostatnie słowo nie zostaje samo w linii */
.faq summary{text-wrap:pretty}
.faq summary::after{margin-right:4px;transition:none}
.faq summary:hover{color:var(--blue)}
.faq details>div{padding:0 48px 24px 0}

/* 8. Liczby i blok kontaktowy */
/* Liczby: duże, spokojne, na tle sekcji, w barwach logo od niebieskiego do zielonego */
.numbers{gap:32px;border-radius:0;overflow:visible;background:none}
.numbers .number{padding:20px 0 0;border:0;border-top:1px solid var(--line-strong)}
/* Trzy liczby (strona główna bez „Setki”, właściciel 19.10.2026): trzy kolumny zamiast czterech z pustym miejscem */
@media (min-width:901px){.numbers:has(>.number:nth-of-type(3):last-of-type){grid-template-columns:repeat(3,minmax(0,1fr))}}
.number b{font-size:clamp(2.25rem,4vw,3.25rem);font-weight:600;letter-spacing:-.025em;background:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--dd-ramp-1)}
.number:nth-of-type(4n+2) b{color:var(--dd-ramp-2)}
.number:nth-of-type(4n+3) b{color:var(--dd-ramp-3)}
.number:nth-of-type(4n+4) b{color:var(--dd-ramp-4)}
.number span{margin-top:12px;max-width:26ch;font-size:.97rem;color:var(--muted)}

/* Blok kontaktowy: przejście w barwach logo (ciemniejsza wersja), biały tekst min. 4,9:1 */
.cta{padding:clamp(24px,5vw,64px);color:var(--white)}
.cta p{font-size:1.0625rem}
.cta__row{border-radius:var(--r-sm);background:none;border-color:var(--glass-line-strong)}
.cta__row small{font-weight:600}