/**
 * perf-lazy.css — content-visibility dla sekcji poniżej folda
 * =========================================================================
 * Cel: mobile LCP > 4 s / INP > 200 ms (Search Console 2026-07).
 *
 * content-visibility:auto każe przeglądarce POMINĄĆ layout+paint zawartości
 * sekcji, dopóki nie zbliży się do viewportu. Na stronie głównej HBT to
 * ~7 sekcji + stopka = mniej pracy głównego wątku przed LCP i mniej pracy
 * przy każdej interakcji (INP).
 *
 * -------------------------------------------------------------------------
 * DOBÓR SELEKTORÓW — kolejność renderowania z hbt_sc_home_layout()
 * (legacy/shortcodes.php):
 *     1. .home-layout  → .home-sidebar + .home-content
 *                        (hero, banery, bestsellery, nowości, info-bar,
 *                         kategorie)                      ← NAD FOLDEM, nie ruszamy
 *     2. .hbt-offer                                       ← od tąd poniżej folda
 *     3. .hbt-industries
 *     4. .hbt-about
 *     5. .hbt-testimonials
 *     6. .hbt-brands-section                              ← ŚWIADOMIE POMINIĘTE
 *     7. .hbt-blog
 *     8. .hbt-seo-expandable                              ← ŚWIADOMIE POMINIĘTE
 *     9. .hbt-newsletter
 *    10. footer.hbt-footer
 *
 * UWAGA: shop-fixes.php (hbt_v6640 repositionSections) przenosi na
 * DOMContentLoaded sekcje bestsellery/nowości/kategorie przed .hbt-offer.
 * Nie ma to znaczenia dla tego pliku — celujemy klasami, nie pozycją w DOM,
 * a przenoszone sekcje i tak nie są tu wymienione (są nad foldem).
 *
 * -------------------------------------------------------------------------
 * DWIE SEKCJE ŚWIADOMIE POMINIĘTE — content-visibility POMIJA layout
 * zawartości, więc JS mierzący szerokości odczytuje 0:
 *
 *   .hbt-brands-section — zawiera .brands-carousel (marquee na rAF,
 *       assets/js/hbt-frontend.js czyta track.scrollWidth w każdej klatce).
 *       Przy pominiętej zawartości scrollWidth = 0. Marquee sam by się
 *       naprawił po wejściu w viewport, ale zysk z jednej sekcji nie jest
 *       wart ryzyka subtelnie zepsutej karuzeli marek na stronie głównej.
 *
 *   .hbt-seo-expandable — akordeon SEO (max-height:0 + overflow:hidden,
 *       treść MUSI być widoczna dla Googlebota — patrz komentarz przy
 *       hbt_sc_seo_expandable()). Wysokość zmienia się po kliknięciu,
 *       więc contain-intrinsic-size i tak byłby zgadywanką.
 *
 * Ta sama zasada dotyczy sekcji .home-products* (.hbt-product-carousel →
 * hbt_v66_carousel_js czyta ul.scrollWidth w setTimeout 100/600 ms i przy
 * odczycie 0 na trwałe blokuje strzałki). Są nad foldem, więc i tak ich
 * tu nie ma — ale NIE DODAWAJ ich tutaj.
 *
 * -------------------------------------------------------------------------
 * BEZPIECZEŃSTWO
 *   • content-visibility:auto implikuje contain:layout style paint → element
 *     staje się blokiem zawierającym dla position:fixed potomków.
 *     SPRAWDZONE: .mobile-bottom-bar i .hbt-contact-fab są RODZEŃSTWEM
 *     </footer> (footer.php: footer zamyka się w L40, bary są w L62/L70),
 *     a nie potomkami — więc containment na .hbt-footer ich nie zepsuje.
 *   • contain-intrinsic-size z keywordem `auto` → przeglądarka zapamiętuje
 *     PRAWDZIWY rozmiar po pierwszym wyrenderowaniu i używa go później.
 *     Bez `auto` pasek przewijania skakałby przy każdym scrollu w górę.
 *     Wartości px to tylko pierwsze zgadnięcie (przed pierwszym renderem).
 *   • @supports — starsze przeglądarki dostają zwykły render, bez zmian.
 *   • Druk: content-visibility:auto potrafi uciąć sekcje z wydruku →
 *     jawnie przywracamy visible w @media print.
 *
 * NIE zawiera niczego związanego z <img loading> — tym zajmuje się
 * core/perf-lazyload.php + legacy/v7-shop-lcp.php.
 *
 * @since 8.3.0 (2026-07-17)
 */

@supports (content-visibility: auto) {

    /* ── Sekcje strony głównej poniżej folda ─────────────────────────
       (bez .hbt-brands-section i .hbt-seo-expandable — patrz nagłówek) */
    .hbt-offer,
    .hbt-industries,
    .hbt-about,
    .hbt-testimonials,
    .hbt-blog,
    .hbt-newsletter {
        content-visibility: auto;
        /* auto = zapamiętaj realną wysokość po pierwszym renderze;
           520px = zgadywanka na pierwszy render (typowa sekcja HBT). */
        contain-intrinsic-size: auto 520px;
    }

    /* Sekcje z siatką kafelków bywają wyższe — lepsze pierwsze zgadnięcie
       = mniejszy skok paska przewijania przed pierwszym renderem. */
    .hbt-industries,
    .hbt-blog {
        contain-intrinsic-size: auto 680px;
    }

    /* ── Stopka ────────────────────────────────────────────────────── */
    .hbt-footer {
        content-visibility: auto;
        contain-intrinsic-size: auto 900px;
    }

    @media (max-width: 767px) {
        /* Mobile: stopka to akordeon (.footer-section-toggle) — zwinięta
           jest znacznie niższa niż na desktopie. */
        .hbt-footer {
            contain-intrinsic-size: auto 620px;
        }
        .hbt-offer,
        .hbt-industries,
        .hbt-about,
        .hbt-testimonials,
        .hbt-blog,
        .hbt-newsletter {
            contain-intrinsic-size: auto 420px;
        }
    }

    /* ── Druk: nic nie może zostać pominięte ───────────────────────── */
    @media print {
        .hbt-offer,
        .hbt-industries,
        .hbt-about,
        .hbt-testimonials,
        .hbt-blog,
        .hbt-newsletter,
        .hbt-footer {
            content-visibility: visible;
            contain-intrinsic-size: none;
        }
    }
}