/* =========================================================================
   STRONA GŁÓWNA — cienka warstwa ponad css/style.css
   =========================================================================
   Plik ładowany WYŁĄCZNIE na stronie z szablonem homepage.php
   (patrz homepage_is_active() + wpdocs_theme_name_scripts() w functions.php).

   ZASADA: to NIE jest nowy design system. Kolory, typografia, przyciski,
   nagłówki, kontener i komponenty (.kompleksowa_hero, .kompleksowa_benefits,
   .kompleksowa_panel, .kompleksowa_process, .kompleksowa_accordion,
   .kompleksowa_final_cta, .kompleksowa_sticky) pochodzą z css/style.css.
   Tutaj są wyłącznie układy, których w serwisie nie było:
     - dwukolumnowe hero strony głównej,
     - siatka trzech kart kategorii,
     - siatka pięciu powodów (3 + 2),
     - siatka sześciu realizacji,
     - czerwony blok telefoniczny po realizacjach,
     - dwa przyciski w pasku sticky.

   Tokeny (te same co w reszcie serwisu):
     czerwień #E30613, tekst #111111, tekst pomocniczy #5A5A5A,
     panel #F6F6F6, obramowanie #E4E4E4, ostre narożniki.
   Uwaga: dla tekstów pomocniczych #5A5A5A zamiast #7E7E7E — kontrast 4.5:1.

   Mobile-first. Breakpointy zgodne z resztą serwisu: 600px, 769px, 992px, 1024px.
   ========================================================================= */

.homepage {
    --hp-red: #E30613;
    --hp-ink: #111111;
    --hp-muted: #5A5A5A;
    --hp-panel: #F6F6F6;
    --hp-border: #E4E4E4;
}

/* -------------------------------------------------------------------------
   1. POWŁOKA STRONY
   GeneratePress ogranicza szerokość .grid-container i układa .site-content
   jako kolumnę z sidebarem. Strona główna ma być pełnoekranowa — sekcje same
   trzymają szerokość przez .landing_container. Landingi robią to regułami na
   page-id; tutaj używamy klasy body, żeby nie dopisywać ID po migracji.
   ------------------------------------------------------------------------- */

body.homepage-template .grid-container {
    max-width: 100%;
}

body.homepage-template .grid-container .site-content {
    display: block;
}

/* Sekcje pełnoekranowe: znosimy padding kontenera treści GeneratePress. */
body.homepage-template .site-content .content-area,
body.homepage-template .site-main {
    width: 100%;
    padding: 0;
    margin: 0;
}

/* Overflow leczymy u źródła (grid + min-width: 0), a nie overflow-x: hidden. */
.homepage,
.homepage * {
    min-width: 0;
}

.homepage img {
    max-width: 100%;
}

/* -------------------------------------------------------------------------
   2. HERO
   Dwie kolumny od 992px: treść + zdjęcie. Na telefonie jedna kolumna,
   zdjęcie pod treścią. Tekst nigdy nie leży na zdjęciu.
   ------------------------------------------------------------------------- */

.homepage_hero__inner {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 32px;
    padding: 40px 0 44px;
}

.homepage_hero__title {
    /* Mniejszy start niż na landingu: na stronie głównej nagłówek jest dłuższy. */
    font-size: clamp(30px, 6.4vw, 54px);
    line-height: 1.1;
    text-wrap: balance;
}

.homepage_hero__cta {
    margin-bottom: 0;
}

/* Trzecie CTA („Wybierz rozwiązanie”) jest linkiem tekstowym, nie trzecim
   przyciskiem — hierarchia działania zostaje czytelna. */
.homepage_hero__link {
    display: inline-flex;
    align-items: center;
    column-gap: 8px;
    padding: 12px 0;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 4px;
}

.homepage_hero__link:hover,
.homepage_hero__link:focus {
    color: #fff;
    text-decoration-color: var(--hp-red);
}

.homepage_hero__media img,
.homepage_hero__ph {
    display: block;
    width: 100%;
    height: 100%;
    /* Stała proporcja = zero CLS niezależnie od wgranego zdjęcia. */
    aspect-ratio: 4 / 3;
    object-fit: contain;
    min-height: 0;
}

/* -------------------------------------------------------------------------
   3. PASEK WARTOŚCI
   Komponent .kompleksowa_benefits ma już siatkę 4 -> 2 -> 1. Dokładamy
   wyłącznie oddzielenie od hero i tło.
   ------------------------------------------------------------------------- */

/* Dolną krawędź rysuje już .kompleksowa_benefits__inner — tu tylko tło,
   żeby pasek odciął się od ciemnego hero i od białej sekcji poniżej. */
.homepage_values {
    background-color: var(--hp-panel);
}

.homepage_values .kompleksowa_benefits__inner {
    padding: 36px 0;
}

/* -------------------------------------------------------------------------
   4. KARTY KATEGORII
   Jedna karta = jedna kategoria produktu. Jednakowa wysokość na desktopie
   (grid + flex w karcie), CTA zawsze przy dolnej krawędzi.
   ------------------------------------------------------------------------- */

.homepage_solutions__inner {
    padding: 56px 0;
}

.homepage_solutions__lead {
    max-width: 760px;
    margin: 6px 0 0;
    color: var(--hp-muted);
    font-size: 16px;
    line-height: 1.6;
}

.homepage_cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}

.homepage_card {
    position: relative;
    display: flex;
    flex-direction: column;
    background-color: #fff;
    border: 1px solid var(--hp-border);
    /* Bez zaokrągleń i bez mocnego cienia — zgodnie z kierunkiem wizualnym. */
}

.homepage_card:hover {
    border-color: #C9C9C9;
}

.homepage_card__media {
    /* Wszystkie kadry mają tę samą proporcję niezależnie od wgranego pliku. */
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background-color: var(--hp-panel);
}

.homepage_card__media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.homepage_card__ph {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 0;
    color: #B4B4B4;
    border: none;
}

.homepage_card__body {
    display: flex;
    flex-direction: column;
    row-gap: 12px;
    padding: 24px 22px 26px;
}

.homepage_card__title {
    margin: 0;
    font-size: 20px;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: .01em;
    color: var(--hp-ink);
}

.homepage_card__desc {
    margin: 0;
    font-size: 16px;
    line-height: 1.55;
    color: var(--hp-muted);
}

.homepage_card__list {
    row-gap: 10px;
}

.homepage_card__list .kompleksowa_check_list__item {
    font-size: 15px;
}

.homepage_card__note {
    margin: 0;
    padding-top: 12px;
    border-top: 1px solid var(--hp-border);
    font-size: 14px;
    line-height: 1.5;
    color: var(--hp-muted);
}

/* CTA: pełna szerokość dolnej części karty, dosunięte do dołu (margin-top:auto),
   więc przyciski wszystkich kart w wierszu kończą się na jednej linii. */
.homepage_card__cta {
    margin-top: auto;
    padding: 16px 20px;
    background-color: var(--hp-red);
    color: #fff;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.3;
    text-align: center;
    text-decoration: none;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color .2s ease;
}

.homepage_card__cta:hover,
.homepage_card__cta:focus {
    background-color: #B9050F;
    color: #fff;
}

/* Klikalna cała karta przy JEDNYM linku w drzewie dostępności: przezroczysta
   warstwa rozciąga obszar kliknięcia przycisku na całą kartę. Czytnik ekranu
   i klawiatura dostają jeden link z etykietą „Sprawdź szamba i ceny”, a nie
   trzy prowadzące w to samo miejsce. Kosztem jest brak zaznaczania tekstu
   w karcie — to standardowe zachowanie klikalnych kafli i świadomy wybór. */
.homepage_card__cta::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

/* -------------------------------------------------------------------------
   5. CZERWONY BLOK USŁUGI KOMPLEKSOWEJ
   Układ i tło pochodzą z .kompleksowa_panel. Tu tylko akapit i przycisk,
   których oryginalny panel nie miał.
   ------------------------------------------------------------------------- */

.homepage_panel__text {
    margin: -18px 0 32px;
    max-width: 640px;
    color: #FFE3E5;
    font-size: 17px;
    line-height: 1.6;
}

.homepage_panel__cta {
    display: inline-flex;
    align-items: center;
    column-gap: 10px;
    min-height: 48px;
    padding: 14px 26px;
    background-color: #fff;
    color: var(--hp-red);
    font-size: 15px;
    font-weight: 800;
    text-decoration: none;
    transition: background-color .2s ease, color .2s ease;
}

.homepage_panel__cta:hover,
.homepage_panel__cta:focus {
    background-color: var(--hp-ink);
    color: #fff;
}

/* -------------------------------------------------------------------------
   6. DLACZEGO SZAMBO RAMBO (5 powodów)
   Siatka 6-kolumnowa: pozycja zajmuje 2 kolumny, więc pierwszy wiersz ma trzy
   pozycje, a dwie ostatnie same wyśrodkowują się w drugim (układ 3 + 2 bez
   pustej, urwanej komórki i bez liczenia czegokolwiek w PHP).
   ------------------------------------------------------------------------- */

.homepage_why__inner {
    padding: 56px 0;
    background-color: transparent;
}

.homepage_why__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}

.homepage_why__item {
    padding: 24px 22px;
    background-color: #fff;
    border: 1px solid var(--hp-border);
}

.homepage_why__icon {
    color: var(--hp-red);
    margin-bottom: 14px;
}

.homepage_why__title {
    margin: 0 0 8px;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--hp-ink);
}

.homepage_why__desc {
    margin: 0;
    font-size: 15px;
    line-height: 1.55;
    color: var(--hp-muted);
}

/* -------------------------------------------------------------------------
   7. JAK WYGLĄDA REALIZACJA
   Kroki korzystają z .kompleksowa_process. Dokładamy stopkę sekcji
   (zdanie + CTA) i — od 992px — cienką linię łączącą kroki.
   ------------------------------------------------------------------------- */

.homepage_process {
    background-color: var(--hp-panel);
}

.homepage_process__foot {
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: 18px;
    margin-top: 36px;
    text-align: center;
}

.homepage_process__note {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--hp-ink);
}

/* -------------------------------------------------------------------------
   8. REALIZACJE
   Siatka 1 -> 2 -> 3 kolumny. Bez carouselu i bez miniaturek.
   ------------------------------------------------------------------------- */

.homepage_realizations__inner {
    padding: 56px 0;
}

.homepage_realizations__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.homepage_real {
    display: flex;
    flex-direction: column;
    background-color: #fff;
    border: 1px solid var(--hp-border);
}

.homepage_real__media {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background-color: var(--hp-panel);
}

.homepage_real__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.homepage_real__ph {
    height: 100%;
    min-height: 0;
    border: none;
}

.homepage_real__body {
    padding: 18px 20px 20px;
}

.homepage_real__name {
    margin: 0 0 6px;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--hp-ink);
}

.homepage_real__spec {
    margin: 0 0 8px;
    font-size: 15px;
    font-weight: 700;
    color: var(--hp-red);
    font-variant-numeric: tabular-nums;
}

.homepage_real__place {
    display: flex;
    align-items: center;
    column-gap: 6px;
    margin: 0;
    font-size: 14px;
    color: var(--hp-muted);
}

.homepage_real__place svg {
    flex: 0 0 auto;
    color: var(--hp-muted);
}

/* Zakres prac to informacja dodatkowa — kontrastowa etykieta, bez zaokrągleń. */
.homepage_real__scope {
    display: inline-block;
    margin: 12px 0 0;
    padding: 5px 10px;
    background-color: var(--hp-panel);
    border: 1px solid var(--hp-border);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--hp-ink);
}

/* -------------------------------------------------------------------------
   9. CZERWONY BLOK TELEFONICZNY PO REALIZACJACH
   Nawiązuje do .kompleksowa_final_cta, ale nie jest jego kopią: ma nagłówek
   i zdanie, a numer stoi obok przycisku.
   ------------------------------------------------------------------------- */

.homepage_cta {
    background-color: var(--hp-red);
}

.homepage_cta__inner {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 26px;
    align-items: center;
    padding: 44px 0;
}

.homepage_cta__title {
    margin: 0 0 10px;
    color: #fff;
    font-size: clamp(24px, 3vw, 36px);
    font-weight: 800;
    line-height: 1.15;
}

.homepage_cta__lead {
    margin: 0;
    color: #FFE3E5;
    font-size: 17px;
    line-height: 1.6;
}

.homepage_cta__action {
    display: flex;
    flex-direction: column;
    row-gap: 14px;
    align-items: flex-start;
}

.homepage_cta__phone {
    display: inline-flex;
    align-items: center;
    column-gap: 12px;
    color: #fff;
    text-decoration: none;
}

.homepage_cta__phone:hover,
.homepage_cta__phone:focus {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 4px;
}

.homepage_cta__number {
    font-size: clamp(28px, 4vw, 40px);
    font-weight: 800;
    letter-spacing: -1px;
    font-variant-numeric: tabular-nums;
}

.homepage_cta__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 15px 26px;
    background-color: #fff;
    color: var(--hp-red);
    font-size: 15px;
    font-weight: 800;
    text-align: center;
    text-decoration: none;
    transition: background-color .2s ease, color .2s ease;
}

.homepage_cta__btn:hover,
.homepage_cta__btn:focus {
    background-color: var(--hp-ink);
    color: #fff;
}

/* -------------------------------------------------------------------------
   10. FAQ
   Akordeon w całości z .kompleksowa_accordion. Tu tylko odstęp sekcji i link
   do obszaru realizacji w odpowiedzi.
   ------------------------------------------------------------------------- */

.homepage_faq .kompleksowa_faq__inner {
    padding: 56px 0;
}

.homepage_faq__link {
    color: var(--hp-red);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* -------------------------------------------------------------------------
   11. STICKY CTA (mobile)
   Widoczność steruje wspólna reguła .kompleksowa_sticky (display: grid do
   992px). Tutaj: dwie kolumny i bezpieczny obszar na iPhonie.
   ------------------------------------------------------------------------- */

.homepage_sticky {
    grid-template-columns: 1fr 1fr;
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

.homepage_sticky .kompleksowa_sticky__phone,
.homepage_sticky .kompleksowa_sticky__cta {
    min-height: 56px;
    text-decoration: none;
}

/* -------------------------------------------------------------------------
   12. DOSTĘPNOŚĆ
   Widoczny focus dla każdego elementu interaktywnego. Nie usuwamy outline'u —
   dokładamy własny, dobrze widoczny na jasnym i ciemnym tle.
   ------------------------------------------------------------------------- */

body.homepage-template a:focus-visible,
body.homepage-template button:focus-visible {
    outline: 3px solid var(--hp-red);
    outline-offset: 3px;
}

/* Na czerwonym i czarnym tle czerwony outline ginie — tam biały. */
.homepage_hero a:focus-visible,
.homepage_panel a:focus-visible,
.homepage_cta a:focus-visible,
.homepage_final a:focus-visible,
.homepage_sticky a:focus-visible {
    outline-color: #fff;
}

/* Minimalna powierzchnia dotyku na urządzeniach dotykowych. */
@media (pointer: coarse) {
    .homepage a,
    .homepage button {
        min-height: 44px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .homepage * {
        transition: none !important;
        scroll-behavior: auto !important;
    }
}

/* =========================================================================
   BREAKPOINTY
   ========================================================================= */

@media (min-width: 600px) {
    .homepage_realizations__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .homepage_why__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .homepage_cta__action {
        flex-direction: row;
        align-items: center;
        column-gap: 22px;
    }
}

@media (min-width: 769px) {
    .homepage_hero__inner {
        padding: 56px 0 60px;
    }

    .homepage_cards {
        grid-template-columns: repeat(3, 1fr);
        gap: 26px;
    }

    .homepage_solutions__inner,
    .homepage_why__inner,
    .homepage_realizations__inner {
        padding: 72px 0;
    }

    .homepage_values .kompleksowa_benefits__inner {
        padding: 44px 0;
    }
}

@media (min-width: 992px) {
    .homepage_hero__inner {
        grid-template-columns: 1.05fr .95fr;
        column-gap: 56px;
        align-items: center;
        padding: 76px 0 80px;
    }

    .homepage_hero__content {
        max-width: none;
    }

    .homepage_realizations__grid {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Układ 3 + 2: pozycja zajmuje 2 z 6 kolumn, dwie ostatnie startują od
       drugiej kolumny, więc drugi wiersz jest wyśrodkowany. */
    .homepage_why__grid {
        grid-template-columns: repeat(6, 1fr);
    }

    .homepage_why__item {
        grid-column: span 2;
    }

    .homepage_why__item:nth-child(4) {
        grid-column: 2 / span 2;
    }

    /* Subtelna linia łącząca kroki — wpięta w istniejącą górną krawędź
       .kompleksowa_process__step, więc nie dokłada nowego elementu. */
    .homepage_process__steps {
        position: relative;
    }

    .homepage_process__steps::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 2px;
        background-color: var(--hp-border);
    }

    .homepage_process__foot {
        flex-direction: row;
        justify-content: center;
        column-gap: 28px;
    }

    .homepage_cta__inner {
        grid-template-columns: 1.2fr auto;
        column-gap: 48px;
        padding: 56px 0;
    }

    .homepage_cta__action {
        align-items: flex-end;
        flex-direction: column;
        row-gap: 16px;
    }
}

@media (min-width: 1280px) {
    .homepage_solutions__inner,
    .homepage_why__inner,
    .homepage_realizations__inner {
        padding: 88px 0;
    }
}

/* Poniżej 992px sticky bar rezerwuje miejsce na dole strony — wspólna reguła
   .kompleksowa { padding-bottom: 64px } wystarcza dla jednego rzędu przycisków,
   a nasz pasek ma tę samą wysokość. Dokładamy tylko bezpieczny obszar. */
@media (max-width: 992px) {
    body.homepage-template {
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
}

@media (max-width: 600px) {
    /* Wytyczne: boczny padding sekcji ok. 16px na telefonie. */
    .homepage .landing_container {
        max-width: 100%;
        width: auto;
        padding-left: 16px;
        padding-right: 16px;
    }

    .homepage_card__body {
        padding: 20px 18px 22px;
    }

    /* Nagłówek karty i CTA nie mogą się zawijać w nieczytelny sposób. */
    .homepage_card__cta {
        font-size: 14px;
    }
}