/* =========================================================================
   i-SRC — wyszukiwarka sprzętu
   ========================================================================= */

.szukarka__naglowek { margin-bottom: var(--s-10); }
.szukarka__naglowek h2 { margin-bottom: var(--s-3); }
.szukarka__naglowek .opis { margin: 0; }

.szukarka code {
    font-family: var(--font-mono);
    font-size: 0.9em;
    padding: 2px 6px;
    border-radius: var(--r-s);
    background: rgba(255, 255, 255, 0.07);
    color: var(--tekst-jasny);
}

/* ------------------------------------------------------------- pole */
.szukarka__panel {
    padding: var(--s-6);
    border: 1px solid var(--linia-ciemna);
    border-radius: var(--r-l);
    background: var(--powierzchnia);
}
@media (min-width: 768px) { .szukarka__panel { padding: var(--s-8); } }

.szukarka__pole {
    position: relative;
    display: flex;
    align-items: center;
}

.szukarka__lupa {
    position: absolute;
    left: var(--s-4);
    color: var(--tekst-jasny-opis);
    pointer-events: none;
}

.szukarka__input {
    width: 100%;
    min-height: 60px;
    padding: var(--s-4) 56px var(--s-4) 54px;
    background: var(--grafit);
    border: 1px solid var(--linia-ciemna);
    border-radius: var(--r-m);
    color: var(--tekst-jasny);
    font-family: var(--font-mono);
    font-size: 1.0625rem;
    letter-spacing: -0.01em;
    transition: border-color var(--t-baza) var(--ease), box-shadow var(--t-baza) var(--ease);
    -webkit-appearance: none;
    appearance: none;
}
.szukarka__input::placeholder { color: #8A919C; }
.szukarka__input:focus {
    outline: none;
    border-color: var(--czerwien-jasna);
    box-shadow: 0 0 0 3px rgba(255, 90, 69, 0.22);
}
.szukarka__input::-webkit-search-cancel-button { display: none; }

.szukarka__czysc {
    position: absolute;
    right: var(--s-3);
    width: 44px; height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent;
    border: 1px solid var(--linia-ciemna);
    border-radius: var(--r-s);
    color: var(--tekst-jasny-opis);
    cursor: pointer;
    transition: color var(--t-szyb) var(--ease), border-color var(--t-szyb) var(--ease);
}
.szukarka__czysc:hover { color: var(--czerwien-jasna); border-color: var(--czerwien-jasna); }

/* ------------------------------------------------------- filtr linii */
.szukarka__linie {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
    margin-top: var(--s-5);
}

.szukarka__linia {
    min-height: 44px;
    padding: var(--s-2) var(--s-4);
    background: transparent;
    border: 1px solid var(--linia-ciemna);
    border-radius: 100px;
    color: var(--tekst-jasny-opis);
    font-family: var(--font-naglowek);
    font-size: var(--fs-maly);
    font-weight: 500;
    cursor: pointer;
    transition: color var(--t-szyb) var(--ease),
                border-color var(--t-szyb) var(--ease),
                background var(--t-szyb) var(--ease);
}
.szukarka__linia:hover { color: var(--tekst-jasny); border-color: rgba(245,245,245,0.35); }
.szukarka__linia.aktywna {
    /* Biel zamiast czerwieni: filtr ma pokazywać stan, a nie przyciągać wzrok
       mocniej niż treść, którą filtruje. */
    background: rgba(245, 245, 245, 0.94);
    border-color: rgba(245, 245, 245, 0.94);
    color: var(--grafit);
}

.szukarka__podpowiedz {
    margin: var(--s-5) 0 0;
    font-size: var(--fs-maly);
    color: var(--tekst-jasny-opis);
}
.szukarka__podpowiedz strong { color: var(--tekst-jasny); font-family: var(--font-mono); }

.szukarka__stan {
    margin-top: var(--s-6);
    font-family: var(--font-mono);
    font-size: var(--fs-mikro);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--tekst-jasny-opis);
}

/* ---------------------------------------------------------- wyniki */
.szukarka__siatka {
    display: grid;
    gap: var(--s-4);
    margin-top: var(--s-4);
    /* minmax(0, 1fr) — bez tego dłuższy numer katalogowy rozpycha kolumnę. */
    grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 640px)  { .szukarka__siatka { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .szukarka__siatka { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.karta-modelu {
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
    padding: var(--s-6);
    background: var(--powierzchnia);
    border: 1px solid var(--linia-ciemna);
    border-radius: var(--r-m);
    transition: border-color var(--t-baza) var(--ease),
                background var(--t-baza) var(--ease),
                transform var(--t-baza) var(--ease);
}
.karta-modelu:hover {
    border-color: rgba(255, 90, 69, 0.55);
    background: var(--powierzchnia-2);
    transform: translateY(-2px);
}

.karta-modelu__gora { display: grid; gap: var(--s-1); }

.karta-modelu__linia {
    font-family: var(--font-mono);
    font-size: var(--fs-mikro);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--czerwien-jasna);
}

.karta-modelu__nazwa {
    margin: 0;
    font-size: var(--fs-h3);
    color: var(--tekst-jasny);
    text-wrap: balance;
}

.karta-modelu__meta {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
    font-family: var(--font-mono);
    font-size: var(--fs-mikro);
    color: var(--tekst-jasny-opis);
}
.karta-modelu__meta span[aria-hidden] { opacity: 0.45; }
.karta-modelu__rok { color: var(--tekst-jasny); }

.karta-modelu__opis {
    margin: 0;
    font-size: var(--fs-maly);
    color: var(--tekst-jasny-opis);
}

.karta-modelu__naprawy {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: var(--s-1);
}
.karta-modelu__naprawy li {
    margin: 0;
    padding-left: 18px;
    position: relative;
    font-size: var(--fs-maly);
    color: var(--tekst-jasny-opis);
}
.karta-modelu__naprawy li::before {
    content: '';
    position: absolute;
    left: 0; top: 0.65em;
    width: 8px; height: 1px;
    background: var(--czerwien-jasna);
}

.karta-modelu__numery {
    margin: 0;
    font-family: var(--font-mono);
    font-size: var(--fs-mikro);
    /* 5,32:1 na tle karty i 4,78:1 po najechaniu — oba powyżej progu 4,50.
       Poprzedni odcień #7B828D dawał 4,36:1, czyli poniżej. */
    color: #8A919C;
    /* Numery katalogowe to nierozdzielny ciąg — bez tego rozpychają kartę. */
    overflow-wrap: anywhere;
}

.karta-modelu__link {
    margin-top: auto;
    /* Pole dotyku: bez tej wysokości link ma 41 px i wypada poniżej progu 44. */
    min-height: 44px;
    display: flex;
    align-items: center;
    padding-top: var(--s-4);
    font-family: var(--font-naglowek);
    font-size: var(--fs-maly);
    font-weight: 600;
    color: var(--czerwien-jasna);
    text-decoration: none;
    border-top: 1px solid var(--linia-ciemna);
}
.karta-modelu__link:hover { text-decoration: underline; text-underline-offset: 4px; }

.szukarka__wiecej {
    margin: var(--s-6) 0 0;
    font-size: var(--fs-maly);
    color: var(--tekst-jasny-opis);
    text-align: center;
}

.szukarka__pusto {
    margin-top: var(--s-4);
    padding: var(--s-8);
    border: 1px dashed var(--linia-ciemna);
    border-radius: var(--r-m);
    color: var(--tekst-jasny-opis);
}
.szukarka__pusto strong { color: var(--tekst-jasny); }
.szukarka__pusto a { color: var(--czerwien-jasna); }