/* ============================================================================
   klocki.css — układ wpisów blogowych (10.09.2026)

   POWÓD: siedemnaście wpisów było ścianą tekstu — po 4-5 tys. słów samych
   akapitów, bez zdjęcia i bez jednej karty. Podstrony usług mają już układ
   sekcyjny, tylko trzymają go w atrybutach style powielanych w każdym pliku
   (klasy procedure-card, info-grid, faq-item, data-table nie mają reguł w CSS).

   Dlatego własne nazwy z przedrostkiem at-: reguły są tutaj, a istniejące
   strony pozostają nietknięte. Wygląd odtworzony z podstron usług: te same
   promienie, cienie i kolory z variables.css.
   ============================================================================ */

.at-sekcja { padding: 70px 0; }
.at-sekcja--krem { background: var(--bg-light); }
.at-sekcja--granat { background: var(--navy-dark); color: #fff; }
.at-sekcja--granat h2,
.at-sekcja--granat h3 { color: #fff; }
.at-waska { max-width: 780px; margin: 0 auto; }

.at-etykieta {
    display: block; font-family: var(--font-heading); font-size: .8rem;
    letter-spacing: .14em; text-transform: uppercase; color: var(--blue-tech);
    margin-bottom: 10px; font-weight: 600;
}
.at-sekcja--granat .at-etykieta { color: var(--cyan-neon); }

/* ── skrót na górze: odpowiedź, zanim ktokolwiek zacznie scrollować ───────── */
.at-skrot { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.at-skrot li { display: flex; gap: 14px; align-items: flex-start; line-height: 1.6; }
.at-skrot b {
    font-family: var(--font-heading); color: var(--blue-tech);
    flex-shrink: 0; min-width: 26px;
}

/* ── karty ───────────────────────────────────────────────────────────────── */
.at-siatka { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 24px; }
.at-karta {
    background: #fff; padding: 28px; border-radius: 16px;
    border: 1px solid var(--gray-200); box-shadow: 0 1px 3px rgba(10, 25, 41, .06);
}
.at-karta h3 { font-size: 1.15rem; margin: 0 0 10px; line-height: 1.35; }
.at-karta p { margin: 0; font-size: .95rem; line-height: 1.65; color: var(--text-light); }
.at-sekcja--granat .at-karta { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .14); }
.at-sekcja--granat .at-karta p { color: rgba(255, 255, 255, .75); }

/* ── liczby z podaniem źródła ─────────────────────────────────────────────── */
.at-liczba {
    background: #fff; padding: 28px; border-radius: 16px;
    border: 1px solid var(--gray-200); box-shadow: 0 1px 3px rgba(10, 25, 41, .06);
}
.at-liczba__duza {
    font-family: var(--font-heading); font-size: 2.4rem; line-height: 1.05;
    color: var(--navy-dark); margin: 0 0 12px; font-weight: 700;
}
.at-liczba p { margin: 0 0 10px; font-size: .95rem; line-height: 1.5; }
.at-liczba small { color: var(--text-light); font-size: .8rem; line-height: 1.45; display: block; }

/* ── kroki procesu ───────────────────────────────────────────────────────── */
.at-kroki { display: grid; gap: 28px; margin: 0; padding: 0; list-style: none; counter-reset: at-krok; }
.at-kroki li { display: flex; gap: 22px; align-items: flex-start; }
.at-kroki li::before {
    counter-increment: at-krok; content: counter(at-krok, decimal-leading-zero);
    font-family: var(--font-heading); font-size: 1.6rem; font-weight: 700;
    color: var(--cyan-neon); flex-shrink: 0; min-width: 46px; line-height: 1.2;
}
.at-kroki h3 { font-size: 1.1rem; margin: 0 0 6px; }
.at-kroki p { margin: 0; line-height: 1.65; }

/* ── ostrzeżenie ─────────────────────────────────────────────────────────── */
.at-uwaga {
    background: #FEF2F2; border: 1px solid #FECACA; border-left: 5px solid var(--error);
    border-radius: 14px; padding: 30px;
}
.at-uwaga h3 { margin: 0 0 16px; font-size: 1.2rem; }
.at-uwaga ul { margin: 0; padding-left: 22px; display: grid; gap: 10px; }
.at-uwaga li { line-height: 1.6; }

/* ── tabela ──────────────────────────────────────────────────────────────── */
.at-tabela-oprawa { overflow-x: auto; }
.at-tabela { width: 100%; border-collapse: collapse; border-radius: 12px; overflow: hidden;
    border: 1px solid var(--gray-200); min-width: 560px; }
.at-tabela thead { background: var(--navy-dark); color: #fff; }
.at-tabela th { padding: 15px; text-align: left; font-size: .85rem;
    letter-spacing: .04em; text-transform: uppercase; }
.at-tabela td { padding: 14px 15px; border-top: 1px solid var(--gray-200);
    vertical-align: top; font-size: .95rem; }
.at-tabela tbody tr:nth-child(even) { background: var(--bg-light); }
.at-tabela-zrodlo { font-size: .8rem; color: var(--text-light); margin-top: 12px; }

/* ── zdjęcie z realizacji ────────────────────────────────────────────────── */
.at-foto { margin: 0; }
.at-foto img { width: 100%; height: auto; border-radius: 16px; display: block; }
.at-foto figcaption { font-size: .85rem; color: var(--text-light); margin-top: 12px; }
.at-galeria { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.at-galeria img { width: 100%; height: 220px; object-fit: cover; border-radius: 12px; display: block; }

/* ── cytat ───────────────────────────────────────────────────────────────── */
.at-cytat { margin: 0; border-left: 4px solid var(--cyan-neon); padding-left: 26px; }
.at-cytat p { font-family: var(--font-heading); font-size: 1.35rem; line-height: 1.45; margin: 0 0 14px; }
.at-cytat footer { font-size: .9rem; color: rgba(255, 255, 255, .6); }

/* ── pytania i odpowiedzi ────────────────────────────────────────────────── */
.at-faq details { border-bottom: 1px solid var(--gray-200); }
.at-faq summary { cursor: pointer; padding: 20px 0; display: flex;
    justify-content: space-between; gap: 20px; align-items: flex-start; list-style: none; }
.at-faq summary::-webkit-details-marker { display: none; }
.at-faq summary h3 { margin: 0; font-size: 1.08rem; line-height: 1.4; }
.at-faq summary::after { content: "+"; color: var(--blue-tech); font-size: 1.6rem;
    line-height: 1; flex-shrink: 0; transition: transform .2s; }
.at-faq details[open] summary::after { transform: rotate(45deg); }
.at-faq details > div { padding-bottom: 22px; line-height: 1.7; }

/* ── wezwanie do kontaktu ────────────────────────────────────────────────── */
.at-cta { background: var(--blue-tech); color: #fff; border-radius: 18px; padding: 38px;
    display: flex; flex-wrap: wrap; gap: 24px; align-items: center; justify-content: space-between; }
.at-cta h2 { color: #fff; margin: 0 0 8px; font-size: 1.6rem; }
.at-cta p { margin: 0; color: rgba(255, 255, 255, .85); max-width: 460px; }
.at-cta a { background: #fff; color: var(--navy-dark); padding: 16px 28px; border-radius: 10px;
    font-weight: 700; text-decoration: none; white-space: nowrap; }
.at-cta a:hover { background: var(--bg-light); }

/* ── źródła ──────────────────────────────────────────────────────────────── */
.at-zrodla { font-size: .9rem; color: var(--text-light); }
.at-zrodla summary { cursor: pointer; font-weight: 600; color: var(--text-dark); }
.at-zrodla ul { margin: 16px 0 0; padding-left: 20px; display: grid; gap: 8px; }

/* ── tekst na ciemnym tle (11.09.2026) ───────────────────────────────────────
   Wiki: „na ciemnym tle nie widać tych tekstów”. style.css ma ogólną regułę
   p { color: var(--text-light) } (#3E5060, kolor na jasne tło). Reguła wskazująca
   akapit wprost wygrywa z kolorem dziedziczonym po sekcji, więc w granatowych
   sekcjach, w cytacie i w nagłówku wpisu akapity były ciemnoszare na granacie.
   Do tego ogólne reguły footer { padding: 100px 0 40px; text-align: center } i
   nav { justify-content: space-between } rozsadzały podpis cytatu i okruszki. */
.at-sekcja--granat p,
.at-sekcja--granat li { color: rgba(255, 255, 255, .82); }
.at-sekcja--granat a { color: var(--cyan-neon); }
.at-sekcja--granat .at-cytat p { color: #fff; }
.at-cytat footer {
    padding: 0; margin: 0; background: none; border: 0; text-align: left;
    color: rgba(255, 255, 255, .72);
}
.at-hero p { color: #fff; }
.at-hero .lead { opacity: .92 !important; }
.at-hero .lead + p { opacity: .8 !important; }
.at-hero .breadcrumb { justify-content: flex-start; flex-wrap: wrap; gap: .45em; margin-left: 0; opacity: .85 !important; }

@media (max-width: 640px) {
    .at-sekcja { padding: 46px 0; }
    .at-karta, .at-liczba, .at-uwaga { padding: 22px; }
    .at-cta { padding: 26px; }
    .at-cta a { width: 100%; text-align: center; }
    .at-liczba__duza { font-size: 2rem; }
}

/* ── karuzela opinii w stopce strony ─────────────────────────────────────────
   Sekcja opinii rozpycha stronę w poziomie na telefonie: trzy karty po 300 px
   w kontenerze bez zawijania dają 964 px przy ekranie 390 px. Przyczyna jest
   w style.css, gdzie reguła z linii 8080 (display:flex, bez flex-wrap) nadpisuje
   wcześniejszą siatkę z linii 4085. Dotyczy WSZYSTKICH stron serwisu, także
   głównej i starych wpisów, więc właściwa naprawa jest w style.css i wymaga
   decyzji Wiki (ten plik ma dodatkowo 1976 bajtów NUL do wyczyszczenia).
   Tutaj tylko domknięcie dla nowych wpisów, żeby nie wnosiły wady dalej. */
.testimonial-slider { flex-wrap: wrap; }
.testimonial-slider > * { min-width: 0; flex: 1 1 280px; }