/* Lista ofert (/offers) — płaska tabela bez ramek i zaokrągleń, która na wąskich
   ekranach przekształca się w karty. Kolory pochodzą z motywu (--theme-color). */

.offers-table-wrap {
    overflow-x: auto;
    /* Przy overflow-x innym niż visible przeglądarka wylicza overflow-y jako auto,
       więc ustawiamy ją jawnie, żeby nic nie dokładało pionowego paska. */
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

.offers-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
}

.offers-table thead th {
    padding: 0 16px 12px;
    border: 0;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--tw-muted, #5f6368);
    white-space: nowrap;
    background: transparent;
}

.offers-table thead th a {
    color: inherit;
    text-decoration: none;
}

.offers-table thead th a:hover {
    color: var(--theme-color, #ff4c3b);
}

/* Znacznik kierunku sortowania dokładany przez KnpPaginator (klasy asc/desc). */
.offers-table thead th a.asc::after {
    content: " \2191";
}

.offers-table thead th a.desc::after {
    content: " \2193";
}

.offers-table tbody tr {
    background: transparent;
    transition: background-color .15s ease;
}

.offers-table tbody tr:hover {
    background: #fafafa;
}

/* Wiersze rozdziela pojedyncza linia — bez obramowania dookoła pozycji. */
.offers-table tbody td {
    padding: 16px;
    border: 0;
    border-bottom: 1px solid #ececec;
    vertical-align: middle;
    background: transparent;
}

/* Ostatnia pozycja bez linii: lista nie domyka się kreską nad paginacją,
   a kontener nie ma przez nią jednopikselowego przepełnienia. */
.offers-table tbody tr:last-child td {
    border-bottom: 0;
}

/* Kolumna główna: miniatura + tytuł + podmiot */
.offer-main {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 260px;
}

.offer-thumb {
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    object-fit: cover;
    background: #f3f3f3;
}

.offer-thumb--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #c4c4c4;
    font-size: 18px;
}

.offer-title {
    display: block;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    color: #232323;
    text-decoration: none;
}

.offer-title:hover {
    color: var(--theme-color, #ff4c3b);
}

.offer-company {
    display: inline-block;
    margin-top: 2px;
    font-size: 13px;
    color: var(--tw-muted, #5f6368);
    text-decoration: none;
}

.offer-company:hover {
    color: var(--theme-color, #ff4c3b);
    text-decoration: underline;
}

.offers-table .offer-date {
    font-size: 13px;
    color: #6f6f6f;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.offers-empty {
    padding: 48px 16px;
    text-align: center;
    color: var(--tw-muted, #5f6368);
}

/* ── Paginacja ──────────────────────────────────────────────────────────── */

.offers-pagination {
    margin-top: 26px;
    padding-top: 22px;
    border-top: 1px solid #ececec;
}

.offers-pagination .pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin: 0;
    padding: 0;
}

/* Selektory z nazwą elementu, bo motyw celuje w „…page-item a” — bez tego
   jego padding i kolory wygrywałyby specyficznością. */
.offers-pagination .pagination .page-item a.page-link,
.offers-pagination .pagination .page-item span.page-link {
    display: block;
    min-width: 42px;
    margin: 0;
    padding: 10px 14px;
    /* Kontrast ramki min. 3:1 — te przyciski są elementami interaktywnymi (WCAG 1.4.11). */
    border: 1px solid #8f959b;
    border-radius: 0;
    background: #fff;
    color: #232323;
    font-size: 14px;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    box-shadow: none;
    transition: background-color .15s ease, border-color .15s ease;
}

.offers-pagination .pagination .page-item a.page-link:hover {
    background: #f2f4f7;
    border-color: #5f6368;
    color: #232323;
}

.offers-pagination .pagination .page-item.active span.page-link,
.offers-pagination .pagination .page-item.active a.page-link {
    background: var(--tw-brand);
    border-color: var(--tw-brand);
    color: #fff;
    font-weight: 700;
}

/* Nieczynny krok stronicowania. Kryterium 1.4.3 nie obejmuje wyłączonych
   elementów sterujących, ale 3,1:1 było na granicy czytelności także dla osób
   bez wady wzroku — #6b7075 daje 4,8:1 i nadal wygląda na nieaktywny. */
.offers-pagination .pagination .page-item.disabled span.page-link {
    background: #fafafa;
    border-color: #d5d8db;
    color: #6b7075;
}

.offers-pagination nav {
    border: 0;
}

.offers-pagination__summary {
    margin: 14px 0 0;
    font-size: 13px;
    text-align: center;
    color: #6f6f6f;
}

.offers-pagination__summary strong {
    color: #232323;
}

/* ── Panel filtrów ──────────────────────────────────────────────────────── */

.offers-filter {
    padding: 22px;
    background: #f7f8f9;
}

.offers-filter__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e4e6e8;
}

.offers-filter__title {
    margin: 0;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #6f6f6f;
}

.offers-filter__reset {
    font-size: 12px;
    color: #5f6368;
    text-decoration: none;
    white-space: nowrap;
}

.offers-filter__reset:hover {
    color: var(--tw-brand);
    text-decoration: underline;
}

.offers-filter .mb-3 {
    margin-bottom: 16px !important;
}

.offers-filter .form-label {
    display: block;
    margin-bottom: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #4a4a4a;
}

/* Pola dopasowane do płaskiego stylu listy — bez zaokrągleń i cieni. */
.offers-filter .form-control,
.offers-filter .form-select {
    width: 100%;
    height: auto;
    padding: 9px 12px;
    /* Kontrast ramki min. 3:1 względem tła — WCAG 1.4.11 (elementy interfejsu). */
    border: 1px solid #8f959b;
    border-radius: 0;
    box-shadow: none;
    background-color: #fff;
    font-size: 14px;
    color: #232323;
    transition: border-color .15s ease;
}

.offers-filter .form-control:focus,
.offers-filter .form-select:focus {
    border-color: var(--tw-brand);
    box-shadow: none;
    outline: 2px solid rgba(29, 78, 216, .18);
    outline-offset: 0;
}

.offers-filter__submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-top: 4px;
    padding: 11px 16px;
    border: 0;
    background: var(--tw-brand);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color .15s ease;
}

.offers-filter__submit:hover,
.offers-filter__submit:focus {
    background: var(--tw-brand-dark);
    color: #fff;
}

.offers-filter__count {
    margin: 14px 0 0;
    font-size: 13px;
    color: #6f6f6f;
}

.offers-filter__count strong {
    color: #232323;
}

/* Karty na wąskich ekranach — tabela z sześcioma kolumnami jest tam nieczytelna. */
@media (max-width: 991px) {
    /* Motyw chowa panel filtrów poza ekranem (position: fixed; left: -350px)
       i wysuwa go klasą .open, którą dodaje przycisk obecny w innych szablonach
       motywu — na tej stronie go nie ma, więc filtry byłyby nieosiągalne.
       Przywracamy panel do normalnego przepływu, nad listą ofert. */
    .collection-filter {
        position: static !important;
        /* Panel jest elementem flex (dzieckiem .row), a tam z-index działa mimo
           position: static — pozostawiony z motywu z-index: 99 wynosiłby filtry
           nad wysuwane menu mobilne (uwięzione w kontekście .main-menu, z-index 9). */
        z-index: auto;
        left: auto;
        /* Poniżej 576 px klasa .col-sm-3 nie działa, a element w .row (flex)
           zwęziłby się do szerokości zawartości — stąd jawne 100%. */
        width: 100%;
        flex: 0 0 100%;
        max-width: 100%;
        height: auto;
        overflow: visible;
        padding: 0;
        margin-bottom: 22px;
        box-shadow: none;
        background-color: transparent;
        transition: none;
    }

    .offers-table,
    .offers-table tbody,
    .offers-table tbody tr,
    .offers-table tbody td {
        display: block;
        width: 100%;
    }

    .offers-table thead {
        display: none;
    }

    .offers-table {
        border-spacing: 0;
    }

    .offers-table tbody tr {
        margin-bottom: 8px;
        border-bottom: 1px solid #d8d8d8;
    }

    .offers-table tbody td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        border: 0;
        border-top: 1px solid #f3f3f3;
        padding: 10px 16px;
    }

    .offers-table tbody td:first-child {
        border-top: 0;
        padding-top: 16px;
    }

    .offers-table tbody td:last-child {
        padding-bottom: 16px;
    }

    /* Etykieta kolumny przed wartością — nagłówek tabeli jest ukryty. */
    .offers-table tbody td[data-label]::before {
        content: attr(data-label);
        flex: 0 0 auto;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .06em;
        text-transform: uppercase;
        color: #5f6368; /* 6,3:1 na białym tle — wcześniej #a0a0a0, 2,6:1 */
    }

    .offers-table tbody td.offer-cell--main::before {
        display: none;
    }

    .offer-main {
        min-width: 0;
    }
}

/* Główny nagłówek listy ofert. Wcześniej był to h4 i przejęcie jego wyglądu
   sprawia, że poprawa struktury nagłówków nie zmienia wyglądu strony. */
.offers-page__title {
    font-size: 18px;
    font-weight: 400;
    letter-spacing: .03em;
    line-height: 1;
    color: var(--tw-ink);
}