/* ═══════════════════════════════════════════════════════════════════
   public/assets/css/perfopol-cms.css
   ─────────────────────────────────────────────────────────────────
   MOSTEK między stylami CMS-a a plikiem od grafika.

   Zasada: perfopol.css NIGDY nie edytujemy (grafik może go
   wyeksportować ponownie) — wszystkie nasze poprawki tutaj.
   Ładowany PO perfopol.css.

   Wersja uporządkowana — złożona od nowa z wszystkich paczek.
   Usunięte: trzy nakładające się kopie reguł filtra tabeli,
   błąd składni w komentarzu przy .pf-chip (brak znaku otwierającego,
   przez co reguła nie działała) oraz reguły, które nadpisywały
   .pf-ptable z pliku grafika.

   SPIS SEKCJI
     1.  Układ globalny
     2.  Przełącznik języka
     3.  Treść z edytora — typografia
     4.  Widgety globalne (chatbot, dostępność)
     5.  Wyszukiwarka serwisu
     6.  Drobiazgi nawigacji i paginacji
     7.  Blog
     8.  Oferta, menu boczne, kontener podstron
     9.  Realizacje
     10. Do pobrania
     11. FAQ
     12. Kariera, formularz aplikacyjny, modal
     13. Kontakt
     14. Tabela perforacji + pasek filtrów
     15. Do usunięcia po weryfikacji
═══════════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════════
   1. UKŁAD GLOBALNY
════════════════════════════════════════════════════════════════ */

/* Sticky footer — przeniesione z frontend.css, żeby nie nadpisywać
   font-family i color z perfopol.css */
body { display: flex; flex-direction: column; min-height: 100vh; }
main { flex: 1 0 auto; }

/* Offcanvas musi być nad sticky headerem */
.pf-offcanvas { z-index: 1090; }

/* Telefon w topbarze jest linkiem — dziedziczy kolor */
.pf-tel a { color: inherit; }

/* Przycisk w banerze: szerokość do treści.
   .pf-hero__box to kolumnowy flex bez align-items, więc dzieci
   rozciągają się na całą szerokość kolumny. Dla nagłówka i leada
   to pożądane, dla przycisku nie. */
.pf-hero__box > a.btn-pf,
.pf-hero__box > .btn-pf {
    align-self: flex-start;
    width: fit-content;
    max-width: 100%;
}

/* Kontener o zmiennej szerokości (szablon full_width) */
.pf-fullwidth .pf-container { max-width: var(--pf-container); }


/* ══════════════════════════════════════════════════════════════
   2. PRZEŁĄCZNIK JĘZYKA
   Makieta miała statyczne „PL ▾"; CMS potrzebuje listy języków.
════════════════════════════════════════════════════════════════ */

.pf-lang { position: relative; display: inline-flex; }

.pf-lang__btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    font-weight: 600;
    color: inherit;
    cursor: pointer;
    line-height: 1;
}
.pf-lang__btn svg { transition: transform .18s ease; }
.pf-lang.is-open .pf-lang__btn svg { transform: rotate(180deg); }

.pf-lang__menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    min-width: 92px;
    background: var(--pf-white);
    border: 1px solid var(--pf-line);
    border-radius: var(--pf-radius);
    box-shadow: 0 10px 28px rgba(0, 0, 0, .12);
    padding: 4px;
    display: none;
    z-index: 1080;
}
.pf-lang.is-open .pf-lang__menu { display: block; }

.pf-lang__menu a {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 7px 10px;
    border-radius: 3px;
    font-size: 13px;
    font-weight: 600;
    color: var(--pf-body);
    white-space: nowrap;
}
.pf-lang__menu a:hover     { background: var(--pf-soft); color: var(--pf-ink); }
.pf-lang__menu a.is-active { background: var(--pf-blue); color: var(--pf-white); }
.pf-lang__menu a .flag     { font-size: 14px; line-height: 1; }


/* ══════════════════════════════════════════════════════════════
   3. TREŚĆ Z EDYTORA — TYPOGRAFIA

   Redaktor pisze zwykłe nagłówki i akapity, a markdown()
   / BlockRenderer wypluwa gołe <h2>/<h3> bez klas pf-*.
   Tu odtwarzamy wygląd z projektu, łącznie z czerwoną kreską
   przy H2.
════════════════════════════════════════════════════════════════ */

/* Starsze widoki (blog, sidebar w wersji sprzed ujednolicenia) */
.page-content,
.post-body {
    font-family: var(--pf-font);
    font-size: 16px;
    line-height: 1.75;
    color: var(--pf-body);
}
.page-content h1, .page-content h2, .page-content h3,
.post-body    h1, .post-body    h2, .post-body    h3 {
    color: var(--pf-ink);
    font-weight: 700;
    letter-spacing: -.01em;
}
.page-content a, .post-body a { color: var(--pf-blue); text-decoration: underline; }
.page-content a:hover, .post-body a:hover { color: var(--pf-blue-dark); }
.page-content img, .post-body img { border-radius: var(--pf-radius); }
.page-content blockquote, .post-body blockquote {
    border-left: 3px solid var(--pf-red);
    padding-left: 18px;
    margin-left: 0;
    color: var(--pf-ink);
}
.pf-cms-page { padding-block: clamp(28px, 5vw, 56px); }

/* Treść w kolumnie produktu — bez podwójnego marginesu u góry */
.pf-product__main > .page-content > :first-child { margin-top: 0; }

/* ── Główny kontener treści z edytora ───────────────────────── */
.pf-cms-content > * + * { margin-top: clamp(18px, 2vw, 26px); }

.pf-cms-content h2 {
    display: flex;
    align-items: flex-end;
    gap: 16px;
    font-size: clamp(1.35rem, 2.2vw, 1.7rem);
    color: var(--pf-ink);
    margin: clamp(30px, 4vw, 46px) 0 18px;
}
.pf-cms-content h2::after {
    content: "";
    width: 34px;
    height: 4px;
    background: var(--pf-red);
    display: inline-block;
    flex: 0 0 auto;
    margin-bottom: .22em;
}
.pf-cms-content > h2:first-child { margin-top: 0; }

.pf-cms-content h3 {
    font-size: 1.25rem;
    color: var(--pf-ink);
    margin: clamp(24px, 3vw, 34px) 0 14px;
}
.pf-cms-content h4 {
    font-size: 1.05rem;
    color: var(--pf-ink);
    margin: 22px 0 10px;
}

.pf-cms-content p { margin: 0 0 14px; color: var(--pf-body); }
.pf-cms-content b,
.pf-cms-content strong { color: var(--pf-ink); }
.pf-cms-content a { color: var(--pf-blue); text-decoration: underline; }
.pf-cms-content ul,
.pf-cms-content ol { margin: 0 0 14px; padding-left: 20px; color: var(--pf-body); }
.pf-cms-content li { margin-bottom: 6px; }
.pf-cms-content img { border-radius: var(--pf-radius); }

.pf-cms-content blockquote {
    border-left: 3px solid var(--pf-red);
    padding-left: 18px;
    margin-left: 0;
    color: var(--pf-ink);
}

/* ⚠ WYŁĄCZNIE zwykłe tabele w treści.
   Selektor MUSI zawierać :not(.pf-ptable) — bez tego reguły mają
   tę samą wagę co .pf-ptable th z perfopol.css, a że ten plik
   ładuje się później, wygrywają i psują tabelę perforacji
   (szare nagłówki zamiast czerwonych, brak odstępów). */
.pf-cms-content table:not(.pf-ptable) {
    width: 100%;
    border-collapse: collapse;
    font-size: .95rem;
}
.pf-cms-content table:not(.pf-ptable) th,
.pf-cms-content table:not(.pf-ptable) td {
    border: 1px solid var(--pf-line);
    padding: 10px 14px;
    text-align: left;
}
.pf-cms-content table:not(.pf-ptable) th {
    background: var(--pf-soft);
    color: var(--pf-ink);
    font-weight: 700;
}

/* Breadcrumb — separatory nie mogą się rozjeżdżać od tekstu */
.pf-breadcrumb { white-space: normal; }
.pf-breadcrumb a,
.pf-breadcrumb .sep,
.pf-breadcrumb .current { display: inline; }

/* Nagłówek strony ze zdjęciem wyróżniającym w tle */
.pf-pagehead__box[style*="background-image"] {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 260px;
}


/* ══════════════════════════════════════════════════════════════
   4. WIDGETY GLOBALNE — kolory marki
════════════════════════════════════════════════════════════════ */

/* Chatbot używa własnych zmiennych — wystarczy je nadpisać */
:root {
    --cb-color:   var(--pf-blue);
    --cb-color-d: var(--pf-blue-dark);
}

/* Pasek dostępności — accessibility.css ma kolory na sztywno */
#a11y-fab       { background: var(--pf-blue); box-shadow: 0 4px 20px rgba(0, 80, 152, .45); }
#a11y-fab:hover { box-shadow: 0 6px 24px rgba(0, 80, 152, .55); }
.a11y-skip-link { background: var(--pf-blue); }
.ap-btn.active,
.ap-btn[aria-pressed="true"] { background: var(--pf-blue); border-color: var(--pf-blue); }


/* ══════════════════════════════════════════════════════════════
   5. WYSZUKIWARKA SERWISU (search.css)
════════════════════════════════════════════════════════════════ */

/* Podpowiedzi z /szukaj/live mają type = "page" | "post" */
.pf-suggest__type { text-transform: capitalize; }

.search-page-form { max-width: 720px; }
.search-page-btn,
.search-filter-btn.active,
.search-page-link.active { background: var(--pf-blue); border-color: var(--pf-blue); }
.search-page-input:focus { border-color: var(--pf-blue); }
.search-highlight,
mark.search-highlight { background: #ffe9b0; color: var(--pf-ink); }


/* ══════════════════════════════════════════════════════════════
   6. NAWIGACJA I PAGINACJA
════════════════════════════════════════════════════════════════ */

.page-item.active .page-link { background: var(--pf-blue); border-color: var(--pf-blue); }
.page-link { color: var(--pf-blue); }

.pf-pager__gap {
    padding: 0 6px;
    color: var(--pf-muted);
    user-select: none;
}

/* Chipsy filtrów są linkami, nie <button> — wyrównanie wyglądu */
a.pf-chip {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    cursor: pointer;
}
.pf-galchips .pf-chip { cursor: pointer; }

.pf-chip__count {
    display: inline-block;
    margin-left: 6px;
    font-size: .78em;
    opacity: .65;
}

/* Pusty wynik filtrowania */
.pf-empty {
    padding: 48px 20px;
    text-align: center;
    color: var(--pf-muted);
    border: 1px dashed var(--pf-line);
    border-radius: var(--pf-radius);
}
.pf-empty p { margin: 0 0 10px; }


/* ══════════════════════════════════════════════════════════════
   7. BLOG
════════════════════════════════════════════════════════════════ */

.pf-post__title a,
.pf-featured__title a { color: inherit; text-decoration: none; }
.pf-post__title a:hover,
.pf-featured__title a:hover { color: var(--pf-blue); }
a.pf-pill { text-decoration: none; }

/* Pojedynczy artykuł */
.pf-article { max-width: 82ch; }
.pf-article__hero {
    width: 100%;
    border-radius: var(--pf-radius);
    margin-bottom: clamp(20px, 3vw, 32px);
    display: block;
}
.pf-article__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid var(--pf-line);
}
.pf-article__back { margin-top: 24px; }

/* Newsletter — komunikat po zapisie */
.pf-newsletter .newsletter-msg {
    font-size: 13px;
    padding: 8px 12px;
    border-radius: var(--pf-radius);
    margin-top: 8px;
}
.newsletter-msg.success { background: #d1fae5; color: #065f46; }
.newsletter-msg.error   { background: #fee2e2; color: #991b1b; }


/* ══════════════════════════════════════════════════════════════
   8. OFERTA, MENU BOCZNE, KONTENER PODSTRON
════════════════════════════════════════════════════════════════ */

/* Sidebar po prawej ($sidebarPosition = 'right') */
@media (min-width: 900px) {
    .pf-product--aside-right { grid-template-columns: 1fr 300px; }
    .pf-product--aside-right .pf-product__aside { order: 2; }
    .pf-product--aside-right .pf-product__main  { order: 1; }
}

/* Pozycja menu bocznego bez podgałęzi — <a> zamiast <button> */
a.pf-prodnav__cat { display: flex; text-decoration: none; }
a.pf-prodnav__cat[aria-current="page"] { color: var(--pf-red); }
.pf-prodnav__cat.is-current { color: var(--pf-red); }

/* Kafelki oferty — ikona zamiast numeru porządkowego */
.pf-card__media img {
    width: 56px;
    height: 56px;
    object-fit: contain;
}
.pf-card h3 a { color: inherit; text-decoration: none; }
.pf-card h3 a:hover { color: var(--pf-blue); }

/* Kafelki kontenera ze zdjęciem wyróżniającym */
.pf-card__media--img {
    background-color: var(--pf-placeholder);
    min-height: 160px;
}
.pf-card__media--img::after { content: none; }

/* Siatka „Rodzaje perforacji" — mniej kolumn na węższych ekranach */
@media (max-width: 1200px) { .pf-perf-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 760px)  { .pf-perf-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 480px)  { .pf-perf-grid { grid-template-columns: repeat(2, 1fr); } }


/* ══════════════════════════════════════════════════════════════
   9. REALIZACJE
════════════════════════════════════════════════════════════════ */

/* Kafelki są klikalne — makieta miała je statyczne */
.pf-work a { display: block; color: inherit; text-decoration: none; }
.pf-work a:hover .pf-work__cap b { color: var(--pf-blue); }
.pf-work__media {
    border-radius: var(--pf-radius);
    transition: opacity .18s ease;
}
.pf-work a:hover .pf-work__media { opacity: .88; }
.pf-work-more { margin-top: clamp(18px, 2vw, 26px); }

@media (max-width: 575.98px) {
    .pf-work-grid { grid-template-columns: 1fr; }
}


/* ══════════════════════════════════════════════════════════════
   10. DO POBRANIA
════════════════════════════════════════════════════════════════ */

.pf-dlsec[hidden] { display: none; }
.pf-doc__body .pf-doc__chapter { scroll-margin-top: 120px; }
.pf-lang-badge { cursor: pointer; text-transform: uppercase; }
#pfDlEmpty[hidden] { display: none; }


/* ══════════════════════════════════════════════════════════════
   11. FAQ
════════════════════════════════════════════════════════════════ */

.pf-faqsearch {
    position: relative;
    display: flex;
    align-items: center;
    max-width: 620px;
    margin-bottom: clamp(18px, 2.5vw, 28px);
}
.pf-faqsearch__ico {
    position: absolute;
    left: 16px;
    display: flex;
    align-items: center;
    color: var(--pf-muted);
    pointer-events: none;
}
.pf-faqsearch input {
    width: 100%;
    padding: 14px 46px 14px 48px;
    border: 1px solid var(--pf-line);
    border-radius: var(--pf-radius);
    background: var(--pf-white);
    font: inherit;
    font-size: 1rem;
    color: var(--pf-ink);
    outline: none;
    transition: border-color .18s;
}
.pf-faqsearch input:focus { border-color: var(--pf-blue); }
.pf-faqsearch input::-webkit-search-cancel-button { display: none; }

.pf-faqsearch__clear {
    position: absolute;
    right: 12px;
    display: flex;
    padding: 6px;
    border: none;
    background: none;
    color: var(--pf-muted);
    cursor: pointer;
    border-radius: 50%;
}
.pf-faqsearch__clear:hover { color: var(--pf-ink); background: var(--pf-soft); }

/* ── Akordeon ── */
.pf-faq { border-top: 1px solid var(--pf-line); }

.pf-faq__item {
    border-bottom: 1px solid var(--pf-line);
    scroll-margin-top: 140px;   /* kotwica #faq-12 pod sticky headerem */
}
.pf-faq__item[hidden] { display: none; }

/* Strzałka domyślnego <details> — mamy własną */
.pf-faq__q::-webkit-details-marker { display: none; }
.pf-faq__q::marker { content: ""; }

.pf-faq__q {
    list-style: none;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding: 20px 4px;
    cursor: pointer;
    font-size: clamp(1rem, 1.3vw, 1.1rem);
    font-weight: 600;
    color: var(--pf-ink);
    transition: color .16s;
}
.pf-faq__q:hover { color: var(--pf-blue); }
.pf-faq__q:focus-visible {
    outline: 2px solid var(--pf-blue);
    outline-offset: 2px;
    border-radius: 2px;
}

.pf-faq__chev {
    flex: 0 0 auto;
    display: flex;
    margin-top: 2px;
    color: var(--pf-red);
    transition: transform .2s ease;
}
.pf-faq__item[open] .pf-faq__chev { transform: rotate(180deg); }

.pf-faq__a {
    padding: 0 4px 24px;
    max-width: 82ch;
}
.pf-faq__a > :first-child { margin-top: 0; }

.pf-faq__permalink { margin: 16px 0 0; font-size: .82rem; }
.pf-faq__permalink a { color: var(--pf-muted); text-decoration: none; }
.pf-faq__permalink a:hover { color: var(--pf-blue); text-decoration: underline; }

.pf-faq__mark {
    background: #ffe9b0;
    color: inherit;
    padding: 0 2px;
    border-radius: 2px;
}

/* Bez JS filtr i „załaduj więcej" są zbędne — widać komplet */
.no-js .pf-faqsearch,
.no-js .pf-galfilter,
.no-js .pf-gallery__more { display: none; }


/* ══════════════════════════════════════════════════════════════
   12. KARIERA, FORMULARZ APLIKACYJNY, MODAL
════════════════════════════════════════════════════════════════ */

/* Treść oferty pracy: markdown → checklista z makiety */
.pf-jobcontent h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--pf-ink);
    margin: clamp(22px, 3vw, 32px) 0 12px;
}
.pf-jobcontent h3:first-child { margin-top: clamp(16px, 2vw, 22px); }

.pf-jobcontent ul { list-style: none; margin: 0; padding: 0; }
.pf-jobcontent ul li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 7px 0;
    color: var(--pf-body);
}
.pf-jobcontent ul li::before {
    content: "";
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin-top: 3px;
    background: var(--pf-red);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4'%3E%3Cpath d='m5 12 5 5L20 6'/%3E%3C/svg%3E") no-repeat center/contain;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4'%3E%3Cpath d='m5 12 5 5L20 6'/%3E%3C/svg%3E") no-repeat center/contain;
}

.pf-joblist .pf-prodnav__cat { text-decoration: none; }

/* Dropzone na CV — stany po wybraniu pliku */
.pf-dropzone { cursor: pointer; transition: border-color .18s, background .18s; }
.pf-dropzone.is-over   { border-color: var(--pf-blue);  background: var(--pf-soft); }
.pf-dropzone.is-filled { border-color: var(--pf-green); }
.pf-dropzone.is-error  { border-color: var(--pf-red); }
.pf-dropzone.is-error .pf-dropzone__txt { color: var(--pf-red); }

/* Ekrany po wysłaniu */
.pf-applybox--done { border-color: var(--pf-green); }
.pf-applybox--warn { border-color: #e0a800; }
.pf-applybox__submit[disabled] { opacity: .6; cursor: progress; }

.pf-applybox__privacy {
    font-size: .82rem;
    color: var(--pf-muted);
    margin: 8px 0 0;
    line-height: 1.5;
}

/* Komunikaty formularzy */
.pf-alert {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px 20px;
    border-radius: var(--pf-radius);
    margin-bottom: 28px;
    font-size: 15px;
}
.pf-alert strong { font-weight: 700; }
.pf-alert--ok  { background: #eaf6e6; border: 1px solid var(--pf-green); color: #2f5210; }
.pf-alert--err { background: #fbeaea; border: 1px solid var(--pf-red);   color: var(--pf-red-dark); }
.pf-alert__list { margin: 0; padding-left: 18px; }
.pf-alert__list li { margin-bottom: 4px; }

.pf-field__count {
    text-align: right;
    font-size: 12px;
    color: var(--pf-muted);
    margin-top: 4px;
}
.pf-form__submit[disabled] { opacity: .6; cursor: progress; }

/* ── Modal (Bootstrap sprowadzony do języka wizualnego strony) ── */
.pf-modal .modal-content {
    border: 0;
    border-radius: var(--pf-radius-lg);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .22);
    font-family: var(--pf-font);
}
.pf-modal .modal-dialog { max-width: 560px; }

.pf-modal .modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 26px 16px;
    border-bottom: 1px solid var(--pf-line);
}
.pf-modal .modal-body { padding: 22px 26px 26px; }

.pf-modal__title {
    margin: 0;
    font-size: clamp(1.1rem, 1.6vw, 1.3rem);
    font-weight: 700;
    color: var(--pf-ink);
}

.pf-modal__close {
    flex: 0 0 auto;
    display: flex;
    padding: 8px;
    border: 0;
    border-radius: 50%;
    background: var(--pf-soft);
    color: var(--pf-ink);
    cursor: pointer;
    transition: background .16s, color .16s;
}
.pf-modal__close:hover { background: var(--pf-red); color: #fff; }
.pf-modal__close:focus-visible { outline: 2px solid var(--pf-blue); outline-offset: 2px; }

/* Formularz w modalu ma już nagłówek okna — zdejmujemy obudowę */
.pf-modal .pf-applybox {
    border: 0;
    padding: 0;
    background: none;
}
.pf-modal .pf-applybox__title,
.pf-modal .pf-applybox__rule { display: none; }

/* Potwierdzenie i ostrzeżenie — ramka wraca, bo bez niej
   komunikat ginie na białym tle */
.pf-modal .pf-applybox--done,
.pf-modal .pf-applybox--warn {
    border: 1px solid var(--pf-green);
    border-radius: var(--pf-radius);
    padding: 22px;
    text-align: center;
}
.pf-modal .pf-applybox--warn { border-color: #e0a800; }
.pf-modal .pf-applybox--done .pf-applybox__title,
.pf-modal .pf-applybox--warn .pf-applybox__title { display: block; }

@media (max-width: 575.98px) {
    .pf-modal .modal-header { padding: 18px 18px 14px; }
    .pf-modal .modal-body   { padding: 18px; }
}


/* ══════════════════════════════════════════════════════════════
   13. KONTAKT
════════════════════════════════════════════════════════════════ */

/* Mapa: osadzony iframe zamiast szarego placeholdera */
.pf-map--embed { padding: 0; overflow: hidden; }
.pf-map--embed iframe {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 260px;
    border: 0;
}

/* Mapa i bordowy boks jako jeden blok — perfopol.css daje
   .pf-locbox margin-top: 16px. Zawężone do prawej kolumny
   kontaktu, bo .pf-locbox występuje też na stronie Kariera,
   gdzie odstęp jest potrzebny. */
.pf-contact__right .pf-map {
    margin-bottom: 0;
    border-radius: var(--pf-radius-lg) var(--pf-radius-lg) 0 0;
}
.pf-contact__right .pf-locbox {
    margin-top: 0;
    border-radius: 0 0 var(--pf-radius-lg) var(--pf-radius-lg);
}

/* Ikona-znak wodny wstawiona jako <img> zamiast inline SVG */
.pf-locbox__icon img { opacity: .16; }


/* ══════════════════════════════════════════════════════════════
   14. TABELA PERFORACJI + PASEK FILTRÓW

   Markup generuje skrypt w sidebar.php, a stylowanie pochodzi
   z perfopol.css (.pf-filter, .pf-select, .pf-addown, .pf-custom,
   .pf-ptable, .pf-table-more, .pf-btn-ghost).

   Poniżej WYŁĄCZNIE to, czego tam nie ma, plus wymuszenie
   stylu tabeli — bo reguły z sekcji 3 mają tę samą wagę
   co .pf-ptable th i wygrywałyby przez kolejność ładowania.
════════════════════════════════════════════════════════════════ */

/* ── Tabela ── */
.pf-cms-content table.pf-ptable {
    width: 100%;
    border-collapse: separate;   /* NIE collapse — inaczej znika border-spacing */
    border-spacing: 6px;
    font-size: .95rem;
}

.pf-cms-content table.pf-ptable th {
    background: var(--pf-red);
    color: #fff;
    text-align: left;
    font-weight: 600;
    font-size: .95rem;
    padding: 13px 16px;
    border: 0;
    border-radius: var(--pf-radius);
    white-space: nowrap;
}

.pf-cms-content table.pf-ptable td {
    padding: 12px 16px;
    border: 0;
    border-radius: var(--pf-radius);
    color: var(--pf-body);
    background: transparent;
}

/* Kolumna z numerem porządkowym — wąska, jak w projekcie */
.pf-cms-content table.pf-ptable th:first-child,
.pf-cms-content table.pf-ptable td:first-child { width: 64px; }

/* Pogrubienia w komórkach nie powinny krzyczeć */
.pf-cms-content table.pf-ptable td strong { font-weight: 600; color: inherit; }

/* Paskowanie klasą, nie :nth-child — :nth-child liczy również
   wiersze ukryte filtrem, więc tło układałoby się losowo.
   Skrypt nadaje .is-odd tylko wierszom faktycznie widocznym. */
.pf-cms-content table.pf-ptable tbody tr:nth-child(even) td { background: transparent; }
.pf-cms-content table.pf-ptable tbody tr.is-odd td          { background: #ececec; }

/* Perforacje standardowe ze starej strony (klasa tr-1) —
   akapit nad tabelą mówi „zaznaczone kolorem czerwonym" */
.pf-cms-content table.pf-ptable tr.tr-1 td,
.pf-cms-content table.pf-ptable tr.tr-1 td strong {
    color: var(--pf-red);
    font-weight: 700;
}

/* Wiersze ukryte filtrem lub limitem 10 */
.pf-cms-content table.pf-ptable tbody tr[hidden] { display: none; }

@media (max-width: 640px) {
    .pf-cms-content table.pf-ptable { display: block; overflow-x: auto; }
}

/* ── Pasek filtrów ────────────────────────────────────────────
   perfopol.css ma .pf-filter__search jako flex z gap: 12px, więc
   lupka wyrównuje się sama — o ile nic jej nie wyrywa z układu.
   Wcześniejsza wersja tego pliku ustawiała jej position: absolute;
   poniższe deklaracje to znoszą. position i transform MUSZĄ tu
   być jawnie — bez nich stara reguła nadal by działała, bo
   dotyczy innych właściwości niż display.                        */
.pf-filter__search {
    position: static;
}

.pf-filter__ico {
    position: static;
    transform: none;
    left: auto;
    top: auto;
    display: flex;
    align-items: center;
    line-height: 0;
    flex: 0 0 auto;
    color: var(--pf-muted);
}

/* Pole wyszukiwania bez obramowania — tak ma makieta */
.pf-filter__search input,
.pf-filter__search input:focus {
    border: 0;
    box-shadow: none;
    background: transparent;
    outline: none;
    padding: 4px 0;
}
.pf-filter__search input::-webkit-search-cancel-button { display: none; }

/* Pierwsza lista („Rodzaj otworu") jest tylko informacyjna —
   przeglądarki wyszarzają disabled, a w projekcie tekst jest pełny */
.pf-filter .pf-select select[disabled] {
    color: var(--pf-ink);
    opacity: 1;
    cursor: default;
}

/* Komunikat pustego wyniku pod tabelą */
.pf-table-empty {
    padding: 28px 16px;
    text-align: center;
    color: var(--pf-muted);
    border: 1px dashed var(--pf-line);
    border-radius: var(--pf-radius);
}


/* ══════════════════════════════════════════════════════════════
   15. DO USUNIĘCIA PO WERYFIKACJI

   Reguły dla .pf-contact-cms obsługiwały POPRZEDNIĄ wersję
   strony kontaktu, w której karty budowano ze zwykłych <ul>/<li>
   stylowanych tutaj. Obecna wersja contact.php przerabia treść
   z edytora na markup makiety (.pf-dept, .pf-person) i korzysta
   ze stylów grafika — więc te reguły są martwe.

   Zostawione na wypadek, gdyby na serwerze była jeszcze starsza
   wersja widoku. Po potwierdzeniu, że kontakt wygląda jak makieta,
   skasuj całą sekcję 15.
════════════════════════════════════════════════════════════════ */

.pf-contact-cms { color: var(--pf-body); }

.pf-contact-cms h2 {
    display: flex;
    align-items: flex-end;
    gap: 16px;
    font-size: clamp(1.35rem, 2.2vw, 1.7rem);
    font-weight: 700;
    color: var(--pf-ink);
    margin: clamp(34px, 4vw, 52px) 0 20px;
}
.pf-contact-cms h2::after {
    content: "";
    width: 34px;
    height: 4px;
    flex: 0 0 auto;
    background: var(--pf-red);
    margin-bottom: .28em;
}
.pf-contact-cms > h2:first-child { margin-top: 0; }

.pf-contact-cms h3 {
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--pf-ink);
    margin: clamp(24px, 3vw, 32px) 0 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--pf-line);
}

.pf-contact-cms ul {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: clamp(14px, 1.8vw, 22px);
    list-style: none;
    margin: 0 0 8px;
    padding: 0;
}

.pf-contact-cms ul li {
    position: relative;
    background: var(--pf-white);
    border: 1px solid var(--pf-line);
    border-radius: var(--pf-radius);
    padding: 20px 20px 18px;
    font-size: .95rem;
    line-height: 1.75;
    transition: border-color .18s, box-shadow .18s;
}
.pf-contact-cms ul li:hover {
    border-color: var(--pf-blue);
    box-shadow: 0 6px 20px rgba(0, 0, 0, .06);
}
.pf-contact-cms ul li::before {
    content: "";
    position: absolute;
    top: -1px;
    left: -1px;
    width: 44px;
    height: 3px;
    background: var(--pf-red);
    border-radius: var(--pf-radius) 0 0 0;
}

.pf-contact-cms ul li strong {
    display: block;
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--pf-ink);
    margin-bottom: 2px;
}
.pf-contact-cms ul li em {
    display: block;
    font-style: normal;
    font-size: .86rem;
    color: var(--pf-muted);
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--pf-line);
}

.pf-contact-cms ul li a {
    color: var(--pf-blue);
    text-decoration: none;
    word-break: break-word;
}
.pf-contact-cms ul li a:hover { text-decoration: underline; }
.pf-contact-cms ul li a[href^="tel:"] { color: var(--pf-ink); font-weight: 600; }

.pf-contact-cms > p { margin: 0 0 14px; max-width: 78ch; }

@media (max-width: 480px) {
    .pf-contact-cms ul { grid-template-columns: 1fr; }
}