/*
 * Sekcje wlasne: "Nasze realizacje" oraz uklad kart oferty.
 * Kolory zgodne z paleta strony: granat naglowkow i firmowy blekit.
 */

/* ---------- uklad kart oferty ----------
 * Piec kart po jednej trzeciej szerokosci zawija sie jako trzy plus dwie.
 * Drugi rzad domyslnie przywiera do lewej, przez co siatka wyglada na niedokonczona.
 * Celujemy w wiersz majacy piata kolumne, zeby nie zalezec od identyfikatorow
 * generowanych przez edytor przy kazdej zmianie.
 */
.sppb-row:has(> .sppb-row-column:nth-child(5)) {
    justify-content: center;
}

/* Tytuly kart oferty dziedzicza globalny kolor odsylaczy #00a3db, ktory na bialym
   tle daje kontrast 2,9:1, czyli ponizej wymaganych 4,5:1. Ciemniejszy odcien
   tego samego blekitu daje 6,2:1 i nie zmienia charakteru sekcji.
   Poprawka jest lokalna: globalny kolor odsylaczy zostaje nietkniety. */
.sppb-feature-box-title a:link,
.sppb-feature-box-title a:visited {
    color: #00688f;
}

.sppb-feature-box-title a:hover,
.sppb-feature-box-title a:focus-visible {
    color: #29407a;
}

/* Odsylacz autora szablonu w stopce mial kolor #777, ktory na jasnym tle
   nie osiaga wymaganego kontrastu. Ciemniejszy odcien to naprawia. */
.stopka a:link,
.stopka a:visited {
    color: #5c5c5c;
}

.cdx-realizacje {
    --cdx-granat: #29407a;
    --cdx-blekit: #00a2dc;
    --cdx-tekst: #4a5568;
    --cdx-linia: #e2e8f0;
    --cdx-tlo: #f7f9fb;

    padding: 3.5rem 1rem;
    background: var(--cdx-tlo);
}

.cdx-realizacje__naglowek {
    max-width: 1140px;
    margin: 0 auto 2rem;
    text-align: center;
}

.cdx-realizacje__naglowek h2 {
    margin: 0 0 0.6rem;
    color: var(--cdx-granat);
    font-size: clamp(1.6rem, 3.4vw, 2.2rem);
    font-weight: 700;
    line-height: 1.2;
}

.cdx-realizacje__naglowek p {
    margin: 0 auto;
    max-width: 60ch;
    color: var(--cdx-tekst);
    font-size: 1.02rem;
    line-height: 1.6;
}

.cdx-realizacje__lista {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    max-width: 1140px;
    display: grid;
    /* jednostki bezwzgledne: szablon ma root font-size 18px, wiec 17rem = 306px
       i trzeciej karcie brakowalo kilku pikseli do zmieszczenia sie w rzedzie */
    grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
    gap: 24px;
}

.cdx-realizacja {
    margin: 0;
    background: #fff;
    border: 1px solid var(--cdx-linia);
    border-radius: 6px;
    overflow: hidden;
    display: flex;
    transition: transform .18s ease, box-shadow .18s ease;
}

@media (prefers-reduced-motion: reduce) {
    .cdx-realizacja { transition: none; }
}

.cdx-realizacja:hover,
.cdx-realizacja:focus-within {
    transform: translateY(-3px);
    box-shadow: 0 8px 22px rgba(41, 64, 122, .13);
}

.cdx-realizacja figure {
    margin: 0;
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* template.css ustawia globalnie img { height: auto !important } -
   tu potrzebujemy stalej wysokosci kadru, wiec nadpisujemy lokalnie */
.cdx-realizacje .cdx-realizacja figure img {
    width: 100%;
    height: 210px !important;
    object-fit: cover;
    display: block;
    background: #eef2f6;
}

.cdx-realizacja figcaption {
    padding: 1rem 1.1rem 1.2rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    flex: 1;
}

.cdx-realizacja__miejsce {
    color: #00688f;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.cdx-realizacja__tytul {
    color: var(--cdx-granat);
    font-size: 1.02rem;
    font-weight: 600;
    line-height: 1.35;
}

.cdx-realizacja__opis {
    color: var(--cdx-tekst);
    font-size: 0.9rem;
    line-height: 1.55;
}

.cdx-realizacja__data {
    margin-top: auto;
    padding-top: 0.6rem;
    color: #5a6875;
    font-size: 0.8rem;
}

@media (max-width: 480px) {
    .cdx-realizacje { padding: 2.5rem 0.9rem; }
    .cdx-realizacje .cdx-realizacja figure img { height: 190px !important; }
}

/* Aktywna i najechana pozycja menu gornego dziedziczyla firmowy blekit #00a3db,
   ktory na bialym tle menu daje kontrast 2,89:1 zamiast wymaganych 4,5:1.
   Ciemniejszy odcien tej samej barwy daje 6,22:1. Zmienne nadpisujemy tutaj,
   a nie w template.css, zeby poprawka przetrwala aktualizacje szablonu.
   Ta sama zmienna steruje najechaniem odsylaczy w stopce, wiec i one zyskuja. */
:root {
    --menu-top1-hov-color: #00688f;
    --menu-top1-zaznacz-color: #00688f;
}

/* ---------- stopka karty realizacji ----------
 * Data i odsylacz do uslugi stoja w jednym rzedzie na dole karty. Wczesniej
 * "margin-top: auto" mial sam znacznik czasu; teraz przejmuje to opakowanie,
 * inaczej odsylacz odkleilby sie od dolu karty. */
.cdx-realizacja__stopka {
    margin-top: auto;
    padding-top: 0.6rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.3rem;
}

.cdx-realizacja .cdx-realizacja__data {
    margin-top: 0;
    padding-top: 0;
}

/* Selektor z nazwa znacznika i pseudoklasami stanu, bo szablon ustawia kolor
   odsylaczy regula "html, body a:link" o wyzszej specyficznosci niz sama klasa. */
a.cdx-realizacja__usluga:link,
a.cdx-realizacja__usluga:visited {
    color: #00688f;                 /* 6,22:1 na bialym tle karty */
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

a.cdx-realizacja__usluga:hover,
a.cdx-realizacja__usluga:focus-visible {
    color: #29407a;
    text-decoration: underline;
}

/* ---------- sekcja "Pozostale uslugi" ----------
 * Wyglada jak lzejsza wersja sekcji realizacji: ten sam granat naglowkow
 * i ta sama siatka, ale bez zdjec, zeby nie konkurowac z trescia podstrony. */
.cdx-powiazane {
    padding: 3rem 1rem;
    background: #fff;
    border-top: 1px solid #e2e8f0;
}

.cdx-powiazane__naglowek {
    max-width: 1140px;
    margin: 0 auto 1.8rem;
    text-align: center;
}

.cdx-powiazane__naglowek h2 {
    margin: 0 0 0.6rem;
    color: #29407a;
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 700;
    line-height: 1.2;
}

.cdx-powiazane__naglowek p {
    margin: 0 auto;
    max-width: 62ch;
    color: #4a5568;
    font-size: 1rem;
    line-height: 1.6;
}

.cdx-powiazane__lista {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    max-width: 1140px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
    gap: 20px;
}

.cdx-powiazana {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 1.1rem 1.2rem;
    background: #f7f9fb;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    transition: border-color .18s ease, box-shadow .18s ease;
}

.cdx-powiazana:hover,
.cdx-powiazana:focus-within {
    border-color: #c7d4e2;
    box-shadow: 0 6px 16px rgba(41, 64, 122, .10);
}

a.cdx-powiazana__tytul:link,
a.cdx-powiazana__tytul:visited {
    color: #29407a;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.3;
    text-decoration: none;
}

a.cdx-powiazana__tytul:hover,
a.cdx-powiazana__tytul:focus-visible {
    color: #00688f;
    text-decoration: underline;
}

.cdx-powiazana__opis {
    color: #4a5568;
    font-size: 0.9rem;
    line-height: 1.55;
}

@media (prefers-reduced-motion: reduce) {
    .cdx-powiazana { transition: none; }
}

@media (max-width: 480px) {
    .cdx-powiazane { padding: 2.2rem 0.9rem; }
}