/* =========================================================================
   PK Catalog — Responsive (mobile) overrides.

   Centralny plik ze wszystkimi regulami mobile dla calej wtyczki. Reguly
   uzywaja !important poniewaz musza pokonac inline style="..." rozsiane
   po PHP rendererach (te byly trudne do zsynchronizowania z inline <style>
   media queries, ktore nie zawsze docieraly do koncowego HTML, np. po
   przetwarzaniu przez Autoptimize / cache).

   Wczytany na kazdej podstronie katalogu (pk_is_catalog_context() w
   pk-catalog.php).
   ========================================================================= */

/* ============================================================ MAIN GRID
   Wszystkie placeholder-wrap (region, powiat, miasto, miasto+kat, branza,
   hub /firmy/, pow grodzki+kat) maja inline grid-template-columns:
   "minmax(0,1fr) 300px". Sidebar 300px stacka pod glowna trescia ponizej
   900px viewport. */
@media (max-width: 900px) {
    .pk-placeholder-wrap {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }
    .pk-placeholder-sidebar {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* ============================================================ HUB GRIDS
   /firmy/ hub uzywa staloliczbowych grid-template-columns: repeat(5,...)
   dla miast i repeat(4,...) dla wsi (pk-catalog.php $grid5_style /
   $grid4_style). Na mobile redukujemy do 2 kolumn. */
@media (max-width: 700px) {
    .pk-hub-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 6px !important;
    }
}
@media (max-width: 420px) {
    .pk-hub-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ============================================================ POWIAT GRIDS
   Wsie/miasta w archiwum powiatu (class-url-router.php linie 1112, 1142).
   Inline grid 5 kolumn — redukcja do 2-3 na mobile.
   PK_Url_Router juz emituje wlasne media queries dla pk-pow-wsie-grid
   i pk-pow-search-results .pk-pow-grid, ale powtarzamy tutaj dla pewnosci
   (gdyby inline <style> nie dotarl do HTML). */
@media (max-width: 700px) {
    .pk-pow-wsie-grid,
    .pk-pow-search-results .pk-pow-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    .pk-pow-section-grid {
        /* auto-fill minmax(180,1fr) — na 385px daje 2 kolumny. Wymuszamy
           wprost na wypadek gdy $min byloby wieksze. */
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* ============================================================ POWIAT SEARCH
   Wyszukiwarka w archiwum powiatu — input flex:1 + button "Szukaj" z
   padding 0 28px font-size 16px. Razem 328px w kontenerze 299px =
   overflow 29px. Naprawa: zmniejszamy button na mobile. */
@media (max-width: 480px) {
    .pk-pow-search-wrap form {
        gap: 6px !important;
    }
    .pk-pow-search-btn {
        padding: 0 14px !important;
        font-size: 14px !important;
        flex-shrink: 0;
    }
    .pk-pow-search {
        font-size: 14px !important;
        padding: 12px 14px !important;
    }
}

/* ============================================================ STATS TABLES
   class-stats-renderer.php kv_table() i list_table() (linie 307, 320)
   nie maja wrappera overflow-x:auto. Tabele z dluga 1. kolumna (np.
   "Najpopularniejsze branze w Polsce") wystaja poza 299px wrapper.

   PHP osobno opakuje je w pk-stats-table-wrap, ale dodatkowo wymuszamy
   tu na samej tabeli mozliwosc scroll-x na wypadek braku wrappera. */
.pk-stats-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 0 22px;
}
.pk-stats-table-wrap .pk-stats-table {
    margin: 0 !important;
}
@media (max-width: 600px) {
    .pk-stats-table {
        font-size: 13px !important;
    }
    .pk-stats-table th,
    .pk-stats-table td {
        padding: 8px 10px !important;
    }
}

/* ============================================================ STATS TILES
   pk-stats-tiles uzywa auto-fit minmax(170,1fr) — na mobile dziala OK
   (1 kolumna), ale dodajemy padding/font tweaks dla czytelnosci. */
@media (max-width: 600px) {
    .pk-stats-tiles {
        gap: 8px !important;
    }
}

/* ============================================================ CARDS (wizytowki)
   class-cards-renderer.php linia 167: .pk-card-info-grid ma inline
   grid-template-columns:minmax(0,1fr) minmax(0,1fr). Na ekranach <380px
   adres + kontakt obok siebie sie sciska — przelaczamy na 1 kolumne. */
@media (max-width: 400px) {
    .pk-card-info-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
}

/* Card head: 56px logo + 1fr nazwa + auto button. Na bardzo waskich
   ekranach button "Rozwin" lamie sie pod nazwe (lepsze niz overflow). */
@media (max-width: 360px) {
    .pk-card-head {
        grid-template-columns: 56px 1fr !important;
        gap: 10px !important;
    }
    .pk-card-toggle {
        grid-column: 1 / -1;
        justify-self: end;
    }
}

/* ============================================================ AUTO TEMPLATE
   (polisy24-style) — uzupelnienia ponad to co jest w auto-template.css.
   Tabela comparison-table nie ma overflow-x na wrapperze. */
@media (max-width: 600px) {
    .pk-auto .comparison-table {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }
    .pk-auto .comparison-table table {
        min-width: 480px;
    }
    .pk-auto .pk-top-branches .top-branches-table {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }
    .pk-auto .pk-top-branches table {
        min-width: 380px;
    }
    /* Section title z controls (segmented) — gdy nie miesci sie w jednym
       rzedzie, lamie segmented pod h2. */
    .pk-auto .section-title.with-controls {
        flex-direction: column !important;
        align-items: flex-start !important;
    }
    .pk-auto .segmented {
        flex-wrap: wrap;
    }
    .pk-auto .segmented button {
        padding: 6px 10px !important;
        font-size: 12px !important;
    }
}

/* Metric tiles — auto-fit minmax(190,1fr) dziala, ale zmniejszamy font */
@media (max-width: 480px) {
    .pk-auto .metric-grid strong {
        font-size: 22px !important;
    }
    .pk-auto .metric-grid article {
        padding: 14px !important;
    }
    .pk-auto .catalog-hero h1 {
        font-size: 22px !important;
    }
    .pk-auto .hero-rank strong {
        font-size: 42px !important;
    }
    .pk-auto .score-card strong {
        font-size: 34px !important;
    }
}

/* ============================================================ TRANSTAT
   class-transtat-renderer.php juz uzywa overflow-x:auto na wrapperze,
   ale dla bardzo malych ekranow zmniejszamy font. */
@media (max-width: 480px) {
    .pk-transtat-table table {
        font-size: 12px !important;
    }
    .pk-transtat-table th,
    .pk-transtat-table td {
        padding: 6px 8px !important;
    }
}

/* ============================================================ FAQ
   class-category-faq.php linia 318+. Summary z dlugim pytaniem moze
   przekraczac wrapper na mobile — wymuszamy word-wrap. */
@media (max-width: 600px) {
    .pk-faq summary {
        font-size: 15px !important;
        word-break: break-word;
    }
    .pk-faq-item {
        padding: 12px !important;
    }
}

/* ============================================================ HEATMAP
   class-heatmap.php linia 429 wrapper figure padding:16px height:420px.
   Na mobile zmniejszamy padding zeby mapa byla wieksza. */
@media (max-width: 600px) {
    .pk-heatmap {
        padding: 10px !important;
    }
    .pk-heatmap-map {
        height: 320px !important;
    }
}

/* ============================================================ BANNER CTA
   class-banner-cta.php — flex z gap 24px. Na bardzo waskich ekranach
   reduce padding/font. */
@media (max-width: 480px) {
    .pk-banner-cta {
        padding: 16px !important;
        gap: 12px !important;
    }
    .pk-banner-cta-copy strong {
        font-size: 16px !important;
    }
    .pk-banner-cta-button {
        padding: 10px 16px !important;
        font-size: 13px !important;
        width: 100%;
        text-align: center;
    }
}

/* ============================================================ FIRMY LIST
   Strony archive z lista firm (city, city+cat) — kazda .pk-firm to
   accordion. Inline styles w PK_Firms_Renderer maja juz word-break. */
@media (max-width: 480px) {
    .pk-firm {
        font-size: 14px;
    }
}

/* ============================================================ GLOBAL safety
   Zapobiega horizontal scroll calej strony katalogu — gdyby cokolwiek
   wystawalo (np. dluga nazwa firmy bez break). */
.pk-catalog-context main,
.pk-catalog-context .pk-archive,
.pk-catalog-context .pk-firmy-hub,
.pk-catalog-context .pk-placeholder-page {
    max-width: 100%;
    overflow-wrap: break-word;
    word-wrap: break-word;
}