/* ==========================================================================
   CeDIZ - arkusz podstawowy
   Kolory przeniesione 1:1 z oryginalnej witryny; zmienil sie sposob ich
   uzycia, nie wartosci. Odcienie pochodne (hover, obramowania) wyliczone
   z barwy wiodacej i opisane w CHANGES.md.
   ========================================================================== */

:root {
    /* --- paleta oryginalna --- */
    --brand:            #c80000;   /* czerwien CeDIZ */
    --ink:              #333333;
    --ink-soft:         #666666;
    --ink-muted:        #999999;
    --line:             #cccccc;
    --surface:          #ffffff;
    --surface-alt:      #f9f9f9;
    --surface-sunk:     #e9e9e9;

    /* --- odcienie pochodne (ta sama barwa, inna jasnosc) --- */
    --brand-dark:       #9e0000;
    --brand-tint:       #fdf2f2;
    --line-soft:        #e4e4e4;

    /* --- typografia --- */
    --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
            Arial, "Noto Sans", sans-serif;
    --step--1: clamp(0.82rem, 0.79rem + 0.13vw, 0.89rem);
    --step-0:  clamp(1rem, 0.96rem + 0.19vw, 1.12rem);
    --step-1:  clamp(1.2rem, 1.12rem + 0.38vw, 1.45rem);
    --step-2:  clamp(1.45rem, 1.3rem + 0.72vw, 1.95rem);
    --step-3:  clamp(1.75rem, 1.5rem + 1.25vw, 2.6rem);

    /* --- rytm --- */
    --sp-1: 0.375rem;
    --sp-2: 0.75rem;
    --sp-3: 1.25rem;
    --sp-4: 2rem;
    --sp-5: 3rem;
    --sp-6: 4.5rem;

    --radius: 6px;
    --shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 6px 20px rgba(0, 0, 0, .06);
    --gutter: clamp(1rem, 4vw, 2.5rem);
    --measure: 68ch;
    --container: 1200px;
}

/* --------------------------------------------------------------- reset -- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

body {
    margin: 0;
    background: var(--surface);
    color: var(--ink);
    font-family: var(--font);
    font-size: var(--step-0);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;

    /* Dlugi adres w tresci nie moze rozepchnac strony. Silniki roznia sie tym,
       gdzie wolno im zlamac URL: Firefox lamie po ukosniku, Safari na iOS nie -
       i tam adres zostaje jednym nierozerwalnym slowem. Jeden taki adres w
       aktualnosciach (53 znaki, ok. 404 px przy kolumnie majacej na telefonie
       ok. 330 px) wypychal dokument poza ekran, a Safari zmniejszalo wtedy
       widok calego serwisu: tekst byl uciety, a naglowek przestawal siegac
       krawedzi ekranu. break-word lamie slowo dopiero wtedy, gdy inaczej by
       nie weszlo, wiec zwykly tekst wyglada tak samo jak wczesniej.
       UWAGA przy testach: w Firefoksie tego bledu NIE WIDAC. */
    overflow-wrap: break-word;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
/* iframe bez height: auto - wysokosc osadzen ustawia sie osobno,
   a auto zwineloby je do domyslnych 150 px. */
iframe { max-width: 100%; }

/* ---------------------------------------------------------- typografia -- */

h1, h2, h3, h4 {
    margin: 0 0 var(--sp-2);
    line-height: 1.2;
    font-weight: 650;
    letter-spacing: -0.015em;
    text-wrap: balance;
}

h1 { font-size: var(--step-3); }
h2 { font-size: var(--step-2); margin-top: var(--sp-5); }
h3 { font-size: var(--step-1); margin-top: var(--sp-4); }
h4 { font-size: var(--step-0); margin-top: var(--sp-3); }

h1:first-child, h2:first-child, h3:first-child { margin-top: 0; }

p, ul, ol, dl, table { margin: 0 0 var(--sp-3); }
p, li { max-width: var(--measure); }
li { margin-bottom: var(--sp-1); }

strong { font-weight: 650; }

/* "e" w nazwie CeDIZ jest czerwone od zawsze - zachowane */
.cediz, .red { color: var(--brand); }

a {
    color: var(--brand);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
}
a:hover { color: var(--brand-dark); }

:focus-visible {
    outline: 3px solid var(--brand);
    outline-offset: 2px;
    border-radius: 2px;
}

hr { border: 0; border-top: 1px solid var(--line-soft); margin: var(--sp-4) 0; }

/* ------------------------------------------------------------- uklad ---- */

.container {
    width: min(100% - var(--gutter) * 2, var(--container));
    margin-inline: auto;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    background: var(--brand);
    color: #fff;
    padding: var(--sp-2) var(--sp-3);
    border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; color: #fff; }

/* ------------------------------------------------------------ naglowek -- */

.site-header {
    background: var(--surface);
    border-bottom: 1px solid var(--line-soft);
    position: sticky;
    top: 0;
    z-index: 50;
}

.site-header__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--sp-2) var(--sp-3);
    padding-block: var(--sp-2);
}

.site-logo {
    /* Bez max-width: none akapit dziedziczylby globalne 68ch. UWAGA: nie da sie
       tu uzyc font-size: 0 na wyciszenie odstepow inline - jednostka ch liczy
       sie od rozmiaru czcionki, wiec 68ch zrobiloby sie 0px i logo znikaloby. */
    display: inline-flex;
    margin: 0;
    max-width: none;
    flex: 0 0 auto;
}
.site-logo { --logo-w: clamp(180px, 18vw, 240px); }
.site-logo img { height: auto; width: var(--logo-w); }

/* Animowane logo (strona glowna). GIF jest nakladka na ostrym cediz_logo.png:
   to PNG trzyma miejsce w ukladzie i zostaje po animacji, wiec nic nie skacze
   ani nie traci jakosci. Wspolczynniki wynikaja z pomiaru obu plikow - tusz
   logo w PNG to 298x92 przy +1+3 na plotnie 302x98, a w ostatniej klatce
   GIF-a 440x135 przy +0+30 na plotnie 440x172. Po przeskalowaniu GIF-a do
   0,9868 szerokosci PNG oba tusze maja ten sam rozmiar, a przesuniecie
   sciaga koncowa klatke dokladnie na logo pod spodem. GIF jest nieprzezroczysty
   i przykrywa PNG na czas animacji; wystajace po bokach paski to margines
   samego PNG, wiec nic nie przeswituje. */
.site-logo--anim a { position: relative; display: inline-block; }
/* UWAGA: selektor musi miec dwie klasy. Samo .site-logo__anim (0,1,0) przegrywa
   z .site-logo img (0,1,1) i nakladka dostaje wtedy pelna szerokosc logo,
   czyli o 1,3% za duzo - przy podmianie widac skok. */
.site-logo--anim .site-logo__anim {
    position: absolute;
    top: calc(var(--logo-w) * -0.0531);
    left: calc(var(--logo-w) * 0.0033);
    width: calc(var(--logo-w) * 0.9868);
    height: auto;
    pointer-events: none;
}
.utility {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-1) var(--sp-3);
    font-size: var(--step--1);
    color: var(--ink-soft);
}
/* numer telefonu nie moze sie lamac po cyfrze */
.utility > a { white-space: nowrap; }
.utility a { color: var(--ink-soft); text-decoration: none; }
.utility a:hover { color: var(--brand); text-decoration: underline; }

.lang { display: flex; gap: var(--sp-1); list-style: none; margin: 0; padding: 0; }
.lang li { margin: 0; }
.lang a {
    display: block;
    padding: 2px var(--sp-1);
    border-radius: 3px;
    font-variant: all-small-caps;
    letter-spacing: .06em;
}
.lang .active a { background: var(--brand); color: #fff; }

/* ---------------------------------------------------------- nawigacja --- */

.nav-toggle {
    display: none;
    align-items: center;
    gap: var(--sp-2);
    background: none;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: var(--sp-2) var(--sp-3);
    font: inherit;
    font-size: var(--step--1);
    color: var(--ink);
    cursor: pointer;
}

.mainnav { border-top: 1px solid var(--line-soft); }
.mainnav > ul {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
}
.mainnav li { margin: 0; max-width: none; }

.mainnav > ul > li > a {
    display: block;
    padding: var(--sp-2) var(--sp-3);
    color: var(--ink);
    text-decoration: none;
    font-weight: 600;
    border-bottom: 3px solid transparent;
}
.mainnav > ul > li > a:hover { color: var(--brand); background: var(--surface-alt); }
.mainnav > ul > li.active > a { color: var(--brand); border-bottom-color: var(--brand); }

/* podmenu: na duzym ekranie rozwijane, na malym zawsze widoczne */
.mainnav ul ul {
    list-style: none;
    margin: 0;
    padding: var(--sp-2) 0;
    background: var(--surface);
    border: 1px solid var(--line-soft);
    border-radius: 0 0 var(--radius) var(--radius);
    box-shadow: var(--shadow);
    min-width: 15rem;
}
.mainnav ul ul a {
    display: block;
    padding: var(--sp-1) var(--sp-3);
    color: var(--ink-soft);
    text-decoration: none;
}
.mainnav ul ul a:hover { color: var(--brand); background: var(--brand-tint); }

@media (min-width: 62rem) {
    .mainnav > ul > li { position: relative; }
    .mainnav ul ul {
        position: absolute;
        top: 100%;
        left: 0;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-4px);
        transition: opacity .15s, transform .15s, visibility .15s;
    }
    .mainnav > ul > li:hover ul,
    .mainnav > ul > li:focus-within ul {
        opacity: 1;
        visibility: visible;
        transform: none;
    }
}

/* Na waskich ekranach: logo i przycisk Menu w jednym rzedzie, kontakt i wybor
   jezyka schodza do drugiego rzedu na calej szerokosci. */
@media (max-width: 47.999rem) {
    .site-logo { --logo-w: clamp(150px, 42vw, 200px); }
    .site-header__bar { justify-content: space-between; }
    .utility {
        order: 3;
        width: 100%;
        justify-content: flex-start;
        border-top: 1px solid var(--line-soft);
        padding-top: var(--sp-2);
    }
    .nav-toggle { order: 2; }
}

@media (max-width: 61.999rem) {
    .nav-toggle { display: inline-flex; }
    .mainnav {
        display: none;
        padding-bottom: var(--sp-3);
        max-height: 70vh;
        overflow-y: auto;
    }
    .mainnav.is-open { display: block; }
    .mainnav > ul { display: block; }
    .mainnav > ul > li > a { border-bottom: 1px solid var(--line-soft); }
    .mainnav ul ul {
        box-shadow: none;
        border: 0;
        border-left: 3px solid var(--surface-sunk);
        border-radius: 0;
        margin-left: var(--sp-3);
        padding-block: var(--sp-1);
    }
}

/* ------------------------------------------------------------ okruszki -- */

.breadcrumb {
    padding-block: var(--sp-2);
    font-size: var(--step--1);
    color: var(--ink-muted);
    border-bottom: 1px solid var(--line-soft);
}
.breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-1) var(--sp-2);
    list-style: none;
    /* bez margin:0 - ten element nosi klase .container i musi zachowac
       wysrodkowanie, inaczej okruszki uciekaja do krawedzi okna */
    padding: 0;
}
.breadcrumb li { margin: 0; max-width: none; }
.breadcrumb li + li::before { content: "›"; margin-right: var(--sp-2); color: var(--line); }
.breadcrumb a { color: var(--ink-soft); text-decoration: none; }
.breadcrumb a:hover { color: var(--brand); text-decoration: underline; }
.breadcrumb [aria-current="page"] { color: var(--ink); }

/* ----------------------------------------------------------- zawartosc -- */

main { display: block; padding-block: var(--sp-5); }

.layout {
    display: grid;
    gap: var(--sp-5);
    grid-template-columns: 1fr;
}
@media (min-width: 62rem) {
    .layout { grid-template-columns: minmax(0, 1fr) 20rem; gap: var(--sp-6); }
}

.sidebar { font-size: var(--step--1); }
.sidebar h2, .sidebar h3 { font-size: var(--step-0); margin-top: var(--sp-4); }
.sidebar h2:first-child, .sidebar h3:first-child { margin-top: 0; }
.sidebar ul { list-style: none; padding: 0; margin-bottom: var(--sp-4); }
.sidebar li { margin: 0; }
.sidebar li a { display: block; padding: var(--sp-2) 0; text-decoration: none; color: var(--ink); }
.sidebar li a:hover { color: var(--brand); }

/* Linie oddzielaja WYLACZNIE podpozycje w obrebie jednej grupy uslug.
   Wczesniej kreska wisiala na kazdym elemencie listy, wiec pozycja nadrzedna
   dostawala ja pod swoimi dziecmi, a lista kontaktowa - pod numerem telefonu. */
.sidebar > div > ul > li > a {
    font-weight: 650;
    padding-bottom: var(--sp-1);
}
.sidebar ul ul { margin: 0 0 0 var(--sp-2); border-left: 2px solid var(--surface-sunk); }
.sidebar ul ul li { border-bottom: 1px solid var(--line-soft); }
.sidebar ul ul li:last-child { border-bottom: 0; }
.sidebar ul ul li a { padding-left: var(--sp-2); font-size: var(--step--1); color: var(--ink-soft); }
.sidebar ul ul li a:hover { color: var(--brand); }

/* sekcje opisowe (Referencje, Kontakt) to nie nawigacja */
.sidebar p { max-width: none; }
.sidebar .imgholder img { border-radius: var(--radius); }
.sidebar .readmore { font-weight: 600; margin-top: var(--sp-2); }
.sidebar .readmore a { display: inline; padding: 0; color: var(--brand); }

/* ---------------------------------------------------------------- hero -- */

.hero {
    background: var(--surface-alt);
    border-bottom: 1px solid var(--line-soft);
    padding-block: var(--sp-6);
}
.hero__inner { display: grid; gap: var(--sp-4); align-items: center; }
@media (min-width: 52rem) {
    .hero__inner { grid-template-columns: 1.1fr 1fr; }
}
.hero p { font-size: var(--step-1); color: var(--ink-soft); }
.hero .btn { margin-top: var(--sp-2); }

/* -------------------------------------------------------------- karty --- */

.cards {
    display: grid;
    gap: var(--sp-3);
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    align-items: start;   /* karta ma wysokosc swojej tresci, bez pustki pod spodem */
}

.card {
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius);
    padding: var(--sp-3);
    transition: border-color .15s, box-shadow .15s, transform .15s;
}
.card:hover { border-color: var(--line); box-shadow: var(--shadow); transform: translateY(-2px); }
.card h2, .card h3 { font-size: var(--step-1); margin: 0 0 var(--sp-2); }
.card p { color: var(--ink-soft); max-width: none; }
.card__more { margin: 0; font-weight: 600; }
.card__more a { text-decoration: none; }
.card__more a:hover { text-decoration: underline; }

/* Mapa strony: karty sa tu krotkie (sam tytul + lista), wiec mieszcza sie
   wezsze i caly dzial wchodzi w jeden rzad zamiast lamac sie na 3 + 1. */
.cards--mapa { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }

/* Lista odnosnikow w karcie - uzywa jej mapa strony. Bez kropek i bez
   globalnego max-width: 68ch, ktory w waskiej karcie i tak nic nie wnosi. */
.card__links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
}
.card__links li { margin: 0; max-width: none; }
.card__links a {
    display: block;
    padding: var(--sp-1) 0;
    border-top: 1px solid var(--line-soft);
    text-decoration: none;
    color: var(--ink);
}
.card__links a:hover,
.card__links a:focus-visible { color: var(--brand); text-decoration: underline; }

/* ------------------------------------------------------------- przycisk - */

.btn {
    display: inline-block;
    background: var(--brand);
    color: #fff;
    padding: var(--sp-2) var(--sp-4);
    border: 0;
    border-radius: var(--radius);
    font: inherit;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}
.btn:hover { background: var(--brand-dark); color: #fff; }
.btn--ghost {
    background: transparent;
    color: var(--brand);
    border: 1px solid var(--line);
}
.btn--ghost:hover { background: var(--brand-tint); color: var(--brand-dark); }

/* ---------------------------------------------------------- aktualnosci - */

.news { list-style: none; padding: 0; }
.news > li {
    padding-block: var(--sp-3);
    border-bottom: 1px solid var(--line-soft);
    max-width: none;
}
.news time, .aktd {
    display: block;
    font-size: var(--step--1);
    color: var(--ink-muted);
    font-variant-numeric: tabular-nums;
    margin-bottom: var(--sp-1);
}
.akt { margin-bottom: 0; }

/* ------------------------------------------------------------- klienci -- */

.logos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-3) var(--sp-4);
    list-style: none;
    margin: 0;
    padding: 0;
}
.logos li { margin: 0; max-width: none; }
.logos img {
    max-height: 44px;
    width: auto;
    filter: grayscale(1);
    opacity: .65;
    transition: filter .2s, opacity .2s;
}
.logos img:hover { filter: none; opacity: 1; }

/* -------------------------------------------------------------- tabele -- */

.table-wrap { overflow-x: auto; margin-bottom: var(--sp-3); }
table { border-collapse: collapse; width: 100%; font-size: var(--step--1); }
th, td { padding: var(--sp-2); border-bottom: 1px solid var(--line-soft); text-align: left; vertical-align: top; }
th { background: var(--surface-alt); font-weight: 650; }

/* ------------------------------------------------------------ formularze */

label { display: block; font-weight: 600; margin-bottom: var(--sp-1); }
input[type="text"], input[type="email"], input[type="search"], textarea, select {
    width: 100%;
    padding: var(--sp-2);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    font: inherit;
    background: var(--surface);
    color: var(--ink);
}
input:focus-visible, textarea:focus-visible, select:focus-visible { border-color: var(--brand); }

/* -------------------------------------------------------------- stopka -- */

.site-footer {
    margin-top: var(--sp-6);
    background: var(--surface-alt);
    border-top: 1px solid var(--line-soft);
    padding-block: var(--sp-5);
}
.site-footer h2 { font-size: var(--step-0); margin: 0 0 var(--sp-2); }
.site-footer p { color: var(--ink-soft); font-size: var(--step--1); }

.footer-grid {
    display: grid;
    gap: var(--sp-4);
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}

.site-footer__bottom {
    border-top: 1px solid var(--line-soft);
    margin-top: var(--sp-4);
    padding-top: var(--sp-3);
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2) var(--sp-3);
    justify-content: space-between;
    align-items: center;
    font-size: var(--step--1);
    color: var(--ink-muted);
}
.site-footer__bottom p { margin: 0; }
.site-footer__bottom a { color: var(--ink-soft); }

.footnav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-1) var(--sp-3);
    list-style: none;
    margin: 0;
    padding: 0;
}
.footnav li { margin: 0; max-width: none; }
.footnav a { color: var(--ink-soft); text-decoration: none; }
.footnav a:hover { color: var(--brand); text-decoration: underline; }

/* LinkedIn w dolnym pasku. Wczesniej wisial sam jako bitmapowa odznaka
   "Follow Us on LinkedIn" we wlasnej sekcji nad paskiem Klientow - jedna
   ikona na calej szerokosci strony wygladala jak sierota. Tu jest znakiem
   w tekscie: SVG bierze kolor z currentColor, wiec zachowuje sie jak
   pozostale odnosniki stopki i jest ostry w kazdej skali. */
.footnav__link-li {
    display: inline-flex;
    align-items: center;
    gap: .45em;
}
.ikona-li { flex: 0 0 auto; }

/* --------------------------------------------------------------- druk --- */

@media print {
    .site-header, .mainnav, .breadcrumb, .sidebar, .site-footer, .skip-link { display: none; }
    body { font-size: 11pt; color: #000; }
    a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}

/* ---------------------------------------------------------- pokaz slajdow */
/* Bez JS widac pierwszy slajd; skrypt tylko przelacza klase .is-active. */

.slideshow {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--surface-sunk);
}
.slideshow img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity .6s ease;
}
.slideshow img:first-child { opacity: 1; }
.slideshow img.is-active { opacity: 1; }
.slideshow:has(img.is-active) img:first-child:not(.is-active) { opacity: 0; }

/* ------------------------------------------------------- stronicowanie -- */

.stronicowanie { margin-top: var(--sp-5); border-top: 1px solid var(--line-soft); padding-top: var(--sp-3); }
.stronicowanie ol {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-1);
    list-style: none;
    margin: 0;
    padding: 0;
}
.stronicowanie li { margin: 0; max-width: none; }
.stronicowanie a,
.stronicowanie span {
    display: block;
    min-width: 2.25rem;
    padding: var(--sp-1) var(--sp-2);
    text-align: center;
    border: 1px solid var(--line-soft);
    border-radius: var(--radius);
    text-decoration: none;
    font-variant-numeric: tabular-nums;
}
.stronicowanie a { color: var(--ink); }
.stronicowanie a:hover { border-color: var(--brand); color: var(--brand); }
.stronicowanie span { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 600; }

/* --------------------------------------------------- wpisy aktualnosci -- */
/* Po usunieciu dat wpisy zlewaly sie w jeden blok tekstu - tytul nastepnego
   przyklejal sie do ostatniego zdania poprzedniego. Kazdy wpis dostaje wlasna
   ramke. */

.wpis {
    border: 1px solid var(--line-soft);
    border-radius: var(--radius);
    padding: var(--sp-3);
    margin-bottom: var(--sp-3);
    background: var(--surface);
}
.wpis > p:first-child { margin-top: 0; }
.wpis > p:first-child strong {
    display: block;
    font-size: var(--step-1);
    line-height: 1.3;
    color: var(--ink);
}
.wpis > p:last-child { margin-bottom: 0; }
.wpis .akt { color: var(--ink-soft); }
.wpis:hover { border-color: var(--line); }

/* ---------------------------------------------------- strony osobowe -- */
/* Stary layout.css nie jest juz ladowany, wiec zdjecia, kolumny i galerie
   certyfikatow trafialy do nowego arkusza jako goly, punktowany spis. */

.imgl, .imgr {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 4px;
    background: var(--surface);
    max-width: 38%;
    height: auto;
}
.imgr { float: right; margin: 0 0 var(--sp-3) var(--sp-3); clear: right; }
.imgl { float: left;  margin: 0 var(--sp-3) var(--sp-3) 0;  clear: left; }

/* dwie sylwetki obok siebie na stronie Partnerzy */
#lewy, #prawy {
    display: block;
    float: left;
    width: 50%;
    padding-right: var(--sp-4);
    box-sizing: border-box;
}
#prawy { padding: 0 0 0 var(--sp-4); }
#lewy::after, #prawy::after { content: ""; display: block; clear: both; }
#lewy h1, #prawy h1 { font-size: var(--step-1); }

/* --- certyfikaty jako odznaki zamiast wypunktowania --- */
ul.certyfikaty {
    list-style: none;
    margin: var(--sp-2) 0 var(--sp-4);
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    max-width: var(--measure);
}
ul.certyfikaty li {
    margin: 0;
    padding: 0.35rem 0.75rem;
    border: 1px solid var(--line-soft);
    border-left: 3px solid var(--brand);
    border-radius: var(--radius);
    background: var(--surface-alt);
    font-size: var(--step--1);
    line-height: 1.4;
    color: var(--ink);
}

/* --- galeria skanow certyfikatow / referencji --- */
.galeria-cert, [id^="refosob"] { clear: both; padding: 0; border: 0; }

/* Stala liczba kolumn, nie auto-fill: skany maja rozne proporcje (portretowe
   142x220 i poziome 220x142), wiec przy zawijaniu "na ile sie zmiesci" rzedy
   wychodzily nierowne. Osiem certyfikatow Mariusza Barana uklada sie w dwa
   rowne rzedy po cztery. */
.galeria-cert ul, [id^="refosob"] ul {
    list-style: none;
    margin: var(--sp-2) 0 var(--sp-4);
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--sp-3);
}
.galeria-cert li, [id^="refosob"] li {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-1);
    margin: 0;
    padding: var(--sp-2);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius);
    background: var(--surface);
    text-align: center;
}
.galeria-cert li:hover, [id^="refosob"] li:hover {
    border-color: var(--line);
    box-shadow: var(--shadow);
}
.galeria-cert img, [id^="refosob"] img {
    max-width: 100%;
    /* jednakowa wysokosc ramki dla skanow pionowych i poziomych, zeby podpisy
       staly w jednej linii; object-fit zachowuje proporcje obrazu */
    height: 200px;
    width: auto;
    object-fit: contain;
    border: 1px solid var(--line);
    border-radius: 3px;
}
/* podpis zawsze przy dolnej krawedzi kafelka */
.galeria-cert li span, [id^="refosob"] center { margin-top: auto; }
.galeria-cert span, [id^="refosob"] center {
    font-size: var(--step--1);
    line-height: 1.35;
    color: var(--ink-soft);
}

@media (max-width: 720px) {
    .imgl, .imgr {
        float: none;
        display: block;
        margin: 0 0 var(--sp-3);
        max-width: 60%;
    }
    #lewy, #prawy { float: none; width: 100%; padding: 0; }
    #prawy { padding: 0; }
}

@media (max-width: 900px) {
    .galeria-cert ul, [id^="refosob"] ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
    .galeria-cert ul, [id^="refosob"] ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .galeria-cert img, [id^="refosob"] img { height: 160px; }
}

/* ------------------------------------------- kafelki nawigacyjne w tresci -- */
/* Strony "Usługi" i "Klienci" byly slepymi zaulkami: podstrony dalo sie
   otworzyc tylko z rozwijanego menu. Kafelki powtarzaja te nawigacje w tresci. */

.sekcja-kafli {
    margin: var(--sp-5) 0 var(--sp-3);
    padding-top: var(--sp-3);
    border-top: 1px solid var(--line-soft);
    font-size: var(--step-1);
}
.cards .card h3 { margin: 0 0 var(--sp-2); font-size: var(--step-1); }
.cards .card h3 a { color: var(--ink); text-decoration: none; }
.cards .card h3 a:hover { color: var(--brand); }
.cards .card .card__more { margin-top: auto; padding-top: var(--sp-2); color: var(--brand); }