/* =====================================================================
   SILVER IMAGE — BIBLIOTEKA KOMPONENTÓW STRON PRODUKTOWYCH
   Wydzielona z brochure-printing-london 31 lip 2026.

   JEDNO ŹRÓDŁO dla wszystkich stron produktowych. Wcześniej te style
   siedziały w bloku <style> wewnątrz szablonu broszury, więc żadna inna
   strona ich nie widziała — stąd „każda strona wygląda inaczej".

   ZASADA: nie tworzyć nowych komponentów per strona. Rozszerzać te.
   Prefiks .sil-bp zostaje z powodów historycznych (brochure page był
   pierwszy) — zmiana nazw zepsułaby dwie działające strony bez zysku.

   Wczytywany z header.tpl na każdej stronie.
   ===================================================================== */

/* ── page shell ───────────────────────────────────────── */
    .sil-bp{padding:54px 0 10px}
    .sil-bp__wrap{max-width:820px}
    .sil-bp h1,.sil-bp h2{font-size:clamp(26px,2.8vw,34px);font-weight:600;letter-spacing:-.022em;
               line-height:1.16;color:#1d1d1f;margin:0 0 16px}
    .sil-bp h3{font-size:clamp(20px,1.9vw,23px);font-weight:600;letter-spacing:-.015em;
               line-height:1.25;color:#1d1d1f;margin:42px 0 12px;scroll-margin-top:90px}
    .sil-bp h4{font-size:17.5px;font-weight:600;color:#1d1d1f;margin:26px 0 8px}
    .sil-bp p{font-size:17px;line-height:1.62;color:#424245;margin:0 0 16px}
    .sil-bp ul{margin:0 0 18px;padding-left:22px}
    .sil-bp li{font-size:17px;line-height:1.6;color:#424245;margin-bottom:9px}
    .sil-bp a{color:#1d1d1f;text-decoration:underline;text-underline-offset:2px;
              text-decoration-color:rgba(0,0,0,.3)}
    .sil-bp a:hover{color:#00b4d8;text-decoration-color:#00b4d8}
    .sil-bp__eyebrow{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
                     color:#6e6e73;margin:0 0 12px}
    /* BLUF — standard v1.0 §7 */
    .sil-bp__bluf{font-size:19px;line-height:1.55;color:#1d1d1f;margin:0 0 24px}

    /* ── quick answer — standard v1.0 §2 ─────────────────── */
    .sil-bp__qa{background:#f5f5f7;border-radius:18px;padding:26px 28px;margin:0 0 30px}
    .sil-bp__qa-h{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
                  color:#6e6e73;margin:0 0 18px}
    .sil-bp__qa-item+.sil-bp__qa-item{margin-top:20px;padding-top:20px;
                                      border-top:1px solid rgba(0,0,0,.09)}
    .sil-bp__qa-q{font-size:17px;font-weight:600;color:#1d1d1f;margin:0 0 7px}
    .sil-bp__qa-a{font-size:16.5px;line-height:1.58;color:#424245;margin:0}

    /* ── call to action ───────────────────────────────────── */
    .sil-bp__cta{display:flex;flex-wrap:wrap;gap:10px;margin:28px 0 6px}
    .sil-bp__btn{display:inline-flex;align-items:center;padding:14px 24px;font-size:15px;
                 font-weight:600;border-radius:999px;text-decoration:none!important;line-height:1;
                 transition:opacity .2s,background .2s,border-color .2s}
    .sil-bp__btn--dark{background:#1d1d1f;color:#fff!important}
    .sil-bp__btn--dark:hover{background:#000;color:#fff!important}
    .sil-bp__btn--ghost{background:transparent;color:#1d1d1f!important;
                        border:1px solid rgba(0,0,0,.28)}
    .sil-bp__btn--ghost:hover{border-color:#1d1d1f;color:#1d1d1f!important}

    /* ── figure ───────────────────────────────────────────── */
    .sil-bp__fig{margin:6px 0 26px;border-radius:18px;overflow:hidden;background:#f5f5f7}
    .sil-bp__fig img{display:block;width:100%;height:auto}
    .sil-bp__fig figcaption{font-size:14px;color:#6e6e73;line-height:1.5;padding:12px 16px 14px}

    /* ── tables — standard v1.0 §6 ───────────────────────── */
    .sil-bp__tw{overflow-x:auto;margin:10px 0 14px;border-radius:18px;border:1px solid rgba(0,0,0,.09)}
    .sil-bp__t{width:100%;border-collapse:collapse;font-size:15.5px;min-width:620px;background:#fff}
    .sil-bp__t caption{caption-side:top;text-align:left;font-size:14px;color:#6e6e73;
                       padding:14px 16px 0;line-height:1.5}
    .sil-bp__t th,.sil-bp__t td{padding:13px 16px;text-align:left;vertical-align:top;
                                border-bottom:1px solid rgba(0,0,0,.07)}
    .sil-bp__t thead th{background:#f5f5f7;font-weight:600;color:#1d1d1f;font-size:14px}
    .sil-bp__t tbody tr:last-child td{border-bottom:0}
    .sil-bp__t td{color:#424245;line-height:1.55}
    .sil-bp__t td strong,.sil-bp__t th[scope="row"]{color:#1d1d1f;font-weight:600}
    .sil-bp__t em{font-style:normal;color:#6e6e73;font-size:14px;display:block;margin-top:3px}
    .sil-bp__tnote{font-size:14px;color:#6e6e73;margin:0 0 26px;line-height:1.5}

    /* ── tiles ────────────────────────────────────────────── */
    .sil-bp__note{background:#f5f5f7;border-radius:18px;padding:22px 26px;margin:22px 0 26px}
    .sil-bp__note p{margin:0;font-size:16.5px}
    .sil-bp__note p+p{margin-top:12px}
    .sil-bp__dark{background:#1d1d1f;border-radius:18px;padding:26px 28px;margin:22px 0 28px}
    .sil-bp__dark h4{color:#fff;margin:0 0 12px}
    .sil-bp__dark p{color:#c7c7cc;font-size:16.5px;margin:0 0 12px}
    .sil-bp__dark p:last-child{margin-bottom:0}
    .sil-bp__dark strong{color:#00b4d8;font-weight:600}
    .sil-bp__dark code{background:rgba(255,255,255,.12);color:#fff;padding:3px 9px;
                       border-radius:6px;font-size:15px}

    /* ── faq ──────────────────────────────────────────────── */
    .sil-bp__faq{border-top:1px solid rgba(0,0,0,.09);padding:20px 0 6px}
    .sil-bp__faq h4{margin:0 0 8px;font-size:17.5px}
    .sil-bp__faq p{margin:0;font-size:16.5px}

    /* ── related, grouped by intent ───────────────────────── */
    .sil-bp__rel h4{font-size:15px;margin:22px 0 8px;color:#6e6e73;font-weight:600;
                    letter-spacing:.02em}
    .sil-bp__parent{border-top:1px solid rgba(0,0,0,.09);margin-top:34px;padding:26px 0 30px}
    .sil-bp__parent p{margin:0;font-size:16.5px}

    @media (max-width:600px){
        .sil-bp{padding:32px 0 8px}
        .sil-bp p,.sil-bp li{font-size:16px}
        .sil-bp__bluf{font-size:17.5px}
        .sil-bp__btn{padding:13px 18px;font-size:14px}
        .sil-bp__note,.sil-bp__dark,.sil-bp__qa{padding:20px}
    }

/* =====================================================================
   KOMPONENTY DODANE 31 lip 2026 przy migracji strony Poster
   ===================================================================== */

/* ── PASEK SPECYFIKACJI ─────────────────────────────────────────────
   Ikony liniowe, jedna waga, zero emoji. Wartości tylko zweryfikowane. */
.sil-bp__spec{display:grid;grid-template-columns:repeat(3,1fr);
    gap:1px;background:rgba(0,0,0,.09);border:1px solid rgba(0,0,0,.09);
    border-radius:18px;overflow:hidden;margin:26px 0 30px}
/* Stala liczba kolumn, NIE auto-fit: przy 6 pozycjach auto-fit uklada 5+1
   i pusta reszta drugiego rzedu swieci szarym tlem siatki. 3 kolumny dziela
   6 pozycji rowno na dwa rzedy; przy 4 pozycjach wychodzi 3+1, wiec projektujac
   pasek trzymac sie wielokrotnosci trzech albo szesciu. */
@media (max-width:820px){ .sil-bp__spec{grid-template-columns:repeat(2,1fr)} }
@media (max-width:520px){ .sil-bp__spec{grid-template-columns:1fr} }
.sil-bp__spec-item{background:#fff;padding:18px 18px 16px;display:flex;
    flex-direction:column;gap:7px}
.sil-bp__spec-item svg{width:20px;height:20px;stroke:#1d1d1f;stroke-width:1.5;
    fill:none;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.sil-bp__spec-k{font-size:11px;font-weight:600;letter-spacing:.12em;
    text-transform:uppercase;color:#6e6e73}
.sil-bp__spec-v{font-size:16px;font-weight:600;color:#1d1d1f;line-height:1.35}
.sil-bp__spec-v small{display:block;font-size:13.5px;font-weight:400;
    color:#6e6e73;margin-top:3px}

/* ── GALERIA ────────────────────────────────────────────────────────
   CSS Grid, równe kafle, jeden format. Bez masonry, bez losowych
   wysokości. object-fit:contain, bo drukowany produkt ma być widoczny
   w całości — kadrowanie ucięłoby krawędź arkusza. */
.sil-bp__gal{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;
    margin:8px 0 30px}
.sil-bp__gal figure{margin:0}
.sil-bp__gal img{display:block;width:100%;aspect-ratio:4/3;object-fit:contain;
    background:#f5f5f7;border-radius:14px}
.sil-bp__gal figcaption{font-size:13px;line-height:1.5;color:#6e6e73;padding-top:8px}
@media (max-width:900px){ .sil-bp__gal{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .sil-bp__gal{grid-template-columns:1fr;gap:16px} }

/* ── KARTY ZASTOSOWAŃ ───────────────────────────────────────────────*/
.sil-bp__uses{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:14px;margin:14px 0 28px}
.sil-bp__use{border:1px solid rgba(0,0,0,.09);border-radius:14px;padding:18px 20px}
.sil-bp__use h4{margin:0 0 6px!important;font-size:16px!important}
.sil-bp__use p{margin:0;font-size:15px;line-height:1.55;color:#424245}

/* ── PASEK WIODĄCY (--lead) ────────────────────────────────────────────
   Wariant 4–5 pozycji, budowany z atrybutów o najwyższym wolumenie
   wyszukiwań, nie z danych technicznych. Zadanie: kliknięcie i lead.
   Flex zamiast grid, bo przy 4 i 5 pozycjach siatka trzykolumnowa
   zostawia szarą pustą komórkę w drugim rzędzie. Flex rozciąga pozycje
   na całą szerokość, więc rząd domyka się przy każdej liczbie pozycji. */
.sil-bp__spec--lead{display:flex;flex-wrap:wrap}
.sil-bp__spec--lead .sil-bp__spec-item{flex:1 1 190px;min-width:0}
.sil-bp__spec--lead .sil-bp__spec-v{font-size:16.5px}
@media (max-width:820px){
    .sil-bp__spec--lead .sil-bp__spec-item{flex:1 1 45%}
}
@media (max-width:520px){
    .sil-bp__spec--lead{display:block}
    .sil-bp__spec--lead .sil-bp__spec-item{border-bottom:1px solid rgba(0,0,0,.09)}
    .sil-bp__spec--lead .sil-bp__spec-item:last-child{border-bottom:0}
}
.sil-bp__quote{font-size:15px;line-height:1.7;color:#41474d;margin:-16px 0 30px}
.sil-bp__quote a{font-weight:600}

/* .sil-bp niesie padding 32px, bo powstało jako wrapper całej strony
   brochure. Użyte inline wewnątrz .service-detail ten padding tylko
   odsuwa pasek od BLUF-a — na mobile o ~58px pustki nad najważniejszym
   elementem strony. Wariant --inline go zeruje. */
.sil-bp--inline{padding:0}
.sil-bp--inline .sil-bp__spec--lead{margin-top:14px}

/* ── BLUF na stronie usługowej ─────────────────────────────────────────
   Był <div style="…max-width:900px"> WYSTAWIONY PRZED .container, więc
   zaczynał się przy lewej krawędzi okna, a H1, pasek i galeria stały
   na 150px. Element czytany jako pierwszy nie trzymał linii z resztą
   strony. Teraz siedzi w kontenerze i ma klasę komponentu. */
.sil-svc__bluf{background:#f5f5f7;border-radius:18px;padding:24px 28px;
    margin:0 0 4px;font-size:17px;line-height:1.65;color:#1d1d1f;
    /* motyw justuje akapity w .service-detail — na krotkim bloku daje
       rzeki bialych dziur miedzy slowami. Do lewej. */
    text-align:left}
.sil-svc__bluf p{margin:0;font-size:inherit;line-height:inherit;color:inherit}
@media (max-width:600px){
    .sil-svc__bluf{padding:18px 20px;font-size:16px;border-radius:14px}
}