/* ─── Pattern: page-header (globalny header podstrony) ─────────
   Reużywalny header u góry każdej podstrony — eyebrow + H1 + lede +
   opcjonalny wizual (truck/image) po prawej. Tło sekcji ustawiane
   przez block attributes (style.background), zwykle bg-process.jpg.

   STRUKTURA:
     .kordit-page-header        section (alignfull, has-background)
       .kordit-page-header__top    grid 2-col (1fr 1fr)
         .kordit-page-header__head    lewa: eyebrow + h1 + lede
         .kordit-page-header__visual  prawa: opcjonalna grafika

   Reuse: .kordit-proces, .kordit-co-ogarniamy dziedziczą te same
   __top/__head/__visual. Pattern-specific style (steps, trust row, grid)
   zostają w swoich plikach. */

.kordit-page-header,
.kordit-proces,
.kordit-co-ogarniamy,
.kordit-faq-section {

    &__top {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--page-header-top-gap);
        align-items: center;

        @media (max-width: 900px) {
            grid-template-columns: 1fr;
        }
    }

    &__visual {
        align-self: center;

        img {
            width: 100%;
            height: auto;
            max-height: var(--page-header-visual-max-h);
            object-fit: contain;
        }
    }
}

.kordit-page-header {
    /* !important — bije globalny cap XL z base/section-rhythm. Hero MUSI
       trzymać górny offset na absolutny header (inaczej tytuł chowa się
       pod nawigacją). */
    padding-top: calc(var(--header-height) + var(--space-md)) !important;
    padding-bottom: var(--space-xl) !important;
}

/* Mobile — hero MUSI zachować górny offset na absolutny header
   (.kordit-header position:absolute top:0), inaczej tytuł chowa się pod
   nawigacją. Globalny rytm (base/section-rhythm) ustawia top=XL — tu
   przywracamy header-height. !important bije i global, i inline attr. */
@media (max-width: 900px) {
    .kordit-page-header {
        padding-top: calc(var(--header-height) + var(--space-md)) !important;
        padding-bottom: var(--wp--preset--spacing--xl) !important;
    }
}

/* Białe rozjaśnienie tła (bg-image z block attrs leży na sekcji) —
   TYLKO NA MOBILE. Na telefonie tekst nachodzi na grafikę i bez tego
   jest nieczytelny. Na desktopie overlay NIE istnieje (brak ::before).
   Pseudo-element pod treścią (.container ma z-index:1 z section-basic).
   Dotyczy obu sekcji z bg-process: page-header (hero) i proces. */
@media (max-width: 900px) {

    .kordit-page-header::before,
    .kordit-proces::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 0;
        background: rgba(255, 255, 255, 0.88);
        pointer-events: none;
        opacity: .85;
    }
}

@media (max-width: 640px) {

    .kordit-page-header::before,
    .kordit-proces::before {
        background: rgb(244 241 236);
    }
}