/* ==========================================================================
   Ekokontenery — arkusz główny
   Tłumaczenie prototypu React (Tailwind 3.4.17 + shadcn) na vanilla CSS
   wg tajne-tlumaczenie.md. Wariant „zero inline CSS": wartości trafiają
   do klas semantycznych, nie do atrybutu style.
   Mobile-first — szerokości dokładane WYŁĄCZNIE przez min-width.
   ========================================================================== */

/* ==========================================================================
   1. TOKENY
   Paleta przesunięta z szmaragdu prototypu (160°) na zieleń z logo klienta
   (89–102°). --primary przyciemniony do 32% jasności, żeby biały tekst
   na przyciskach dawał 4.84:1 — logo w oryginale ma 2.4:1 i nie przeszłoby.
   ========================================================================== */
:root {
    /* Tła i tekst */
    --background: 0 0% 99%;
    --foreground: 103 30% 9%;
    --card: 0 0% 100%;
    --card-foreground: 103 30% 9%;

    /* Zieleń marki. Zgodna z logo „Ekokontenery": napis w logo to
       HSL(103, 72%, 28%), symbol recyklingu HSL(91, 72%, 52%) — te same
       odcienie co --stopka i --primary-bright, tylko mocniej nasycone.
       #86bc50 = hsl(90 45% 53%)  jasna    → 2.25:1 na białym, więc NIE nadaje się
                                             na tekst i przyciski; świeci na ciemnym
       #274b1b = hsl(105 47% 20%) ciemna   → 9.96:1 z białym tekstem
       --primary to jasna zieleń przyciemniona do 35%: 4.56:1 z białym,
       czyli przyciski są czytelne, a odcień zostaje ten sam co w logo. */
    --primary: 90 45% 35%;
    --primary-foreground: 0 0% 100%;
    --primary-light: 90 45% 95%;
    --primary-dark: 105 47% 26%;
    --primary-bright: 90 45% 53%;   /* #86bc50 — tylko na ciemnym tle (4.42:1) */

    --secondary: 105 47% 20%;       /* #274b1b — stopka i ciemne sekcje */
    --secondary-foreground: 90 25% 96%;
    /* Stopka schodzi o stopień głębiej niż sekcja CTA. Obie są w ciemnej
       zieleni marki, ale bez tej różnicy zlewały się w jedną plamę — a to
       właśnie ten ciemny odcień ma nieść markę, nie rozjaśniona wersja. */
    --stopka: 103 74% 11%;

    /* Bursztyn dogaduje się z pomarańczowymi kontenerami na zdjęciach.
       Biały tekst na nim ma 2.13:1, więc foreground jest ciemny. */
    --accent: 38 92% 50%;
    --accent-foreground: 30 45% 12%;

    /* Neutralne */
    --muted: 94 16% 96%;
    --muted-foreground: 100 8% 38%;   /* 5.55:1 na --background         */
    --border: 94 16% 89%;
    --input: 94 16% 89%;
    --ring: 94 50% 34%;

    /* Stany */
    --success: 120 50% 28%;
    --success-foreground: 0 0% 100%;
    --warning: 38 92% 50%;
    --warning-foreground: 30 45% 12%;
    --destructive: 0 72% 44%;
    --destructive-foreground: 0 0% 100%;

    /* Promienie — z prototypu (--radius: 1rem to CUSTOM, nie domyślny Tailwind) */
    --radius: 1rem;
    --radius-sm: calc(var(--radius) - 4px);   /* 12px */
    --radius-md: calc(var(--radius) - 2px);   /* 14px */
    --radius-lg: var(--radius);               /* 16px */
    --radius-xl: 0.75rem;                     /* rounded-xl NIE jest nadpisany */
    --radius-2xl: 1.25rem;
    --radius-3xl: 1.5rem;
    --radius-full: 9999px;

    /* Cienie — 1:1 z prototypu, z podmienionym odcieniem na zielony */
    --shadow-sm: 0 1px 2px 0 hsl(103 30% 9% / 0.05);
    --shadow-md: 0 4px 6px -1px hsl(103 30% 9% / 0.1), 0 2px 4px -2px hsl(103 30% 9% / 0.1);
    --shadow-lg: 0 10px 15px -3px hsl(103 30% 9% / 0.1), 0 4px 6px -4px hsl(103 30% 9% / 0.1);
    --shadow-xl: 0 20px 25px -5px hsl(103 30% 9% / 0.1), 0 8px 10px -6px hsl(103 30% 9% / 0.1);
    --shadow-2xl: 0 25px 50px -12px hsl(103 30% 9% / 0.25);

    /* Gradienty */
    --gradient-hero: linear-gradient(180deg, hsl(94 50% 96%) 0%, hsl(0 0% 100%) 100%);
    --gradient-primary: linear-gradient(135deg, hsl(94 50% 34%) 0%, hsl(103 74% 17%) 100%);

    /* Typografia — jedno miejsce na podmianę kroju w całej stronie */
    --font-naglowki: 'Figtree', system-ui, sans-serif;
    --font-tekst: 'Inter', system-ui, -apple-system, sans-serif;
    --waga-naglowka: 600;   /* nagłówki sekcji i kart — czyściej niż 700 */
    --waga-h1: 700;         /* tylko hero niesie pełną wagę            */
    --tracking-naglowka: -0.02em;

    /* Rytm pionowy i szerokości */
    --naglowek-h: 4rem;
    --pasek-h: 4.5rem;      /* przyklejony pasek telefonu (mobile) */

    /* Warstwy — jedno miejsce, żeby nie zgadywać liczb przy każdym elemencie.
       Kolejność od dołu: pasek telefonu → menu mobilne → nagłówek → cookies.
       Pasek MUSI być pod menu, inaczej przebija je od dołu i zasłania CTA. */
    --z-pasek: 40;
    --z-menu: 45;
    --z-naglowek: 50;
    --z-cookies: 60;
    --z-skip: 100;
    --kontener-max: 80rem;
    --tekst-max: 65ch;
}

/* ==========================================================================
   2. RESET — Tailwind Preflight
   Bez tego akapity mają line-height ~1.2 zamiast 1.5, a nagłówki są
   podwójnie pogrubione. To NIE jest opcjonalne przy tłumaczeniu z Tailwinda.
   ========================================================================== */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0 solid;
}

/* Kolor ramek PO resecie — skrót `border` zeruje border-color */
* {
    border-color: hsl(var(--border));
}

html {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

/* Nagłówki: przeglądarka daje bold + duży rozmiar, Tailwind to zeruje */
h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
}

ul, ol, menu {
    list-style: none;
}

a {
    color: inherit;
    text-decoration: inherit;
}

/* height:auto JEST KONIECZNE — bez niego atrybuty width/height wymuszają
   sztywną wysokość i przeglądarka ignoruje aspect-ratio, rozciągając obraz */
img, svg, video, canvas {
    display: block;
    vertical-align: middle;
}

img, video {
    max-width: 100%;
    height: auto;
}

button,
input,
select,
textarea {
    font: inherit;
    letter-spacing: inherit;
    color: inherit;
    background-color: transparent;
    border-radius: 0;
}

button {
    background: none;
}

textarea {
    resize: vertical;
}

::placeholder {
    opacity: 1;
    color: hsl(var(--muted-foreground));
}

[hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
}

/* ==========================================================================
   3. TYPOGRAFIA BAZOWA
   ========================================================================== */
body {
    font-family: var(--font-tekst);
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
    font-feature-settings: "rlig" 1, "calt" 1;
    /* Bez -webkit-font-smoothing: Preflight tego nie ustawia, a na macOS
       antialiased renderuje tekst cieńszy niż oryginał w React */
}

h1, h2, h3, h4 {
    font-family: var(--font-naglowki);
    font-weight: var(--waga-naglowka);
    letter-spacing: var(--tracking-naglowka);
    line-height: 1.15;
    text-wrap: balance;
}

p {
    text-wrap: pretty;
}

strong {
    font-weight: 600;
}

:focus-visible {
    outline: 3px solid hsl(var(--ring));
    outline-offset: 2px;
    border-radius: 4px;
}

.pomin-do-tresci {
    position: absolute;
    left: 0;
    top: 0;
    transform: translateY(-200%);
    z-index: var(--z-skip);
    padding: 0.75rem 1.25rem;
    background: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
    border-radius: 0 0 var(--radius-sm) 0;
    font-weight: 600;
}

.pomin-do-tresci:focus {
    transform: translateY(0);
}

/* ==========================================================================
   4. UKŁAD
   ========================================================================== */
.kontener {
    display: block;
    width: 100%;
    max-width: var(--kontener-max);
    margin-inline: auto;
    padding-inline: 1rem;
}

@media (min-width: 640px) { .kontener { padding-inline: 1.5rem; } }
@media (min-width: 1024px) { .kontener { padding-inline: 2rem; } }

.sekcja {
    padding-block: 3rem;
}

@media (min-width: 1024px) {
    .sekcja { padding-block: 5rem; }
}

.sekcja--muted { background-color: hsl(var(--muted) / 0.6); }
.sekcja--ciemna {
    background-color: hsl(var(--secondary));
    color: hsl(var(--secondary-foreground));
}

.sekcja__naglowek {
    text-align: center;
    max-width: 42rem;
    margin-inline: auto;
    margin-bottom: 2.5rem;
}

.sekcja__naglowek h2 {
    font-size: clamp(1.625rem, 1.2rem + 2vw, 2.25rem);
    margin-bottom: 0.75rem;
}

.sekcja__naglowek p {
    color: hsl(var(--muted-foreground));
    font-size: 1.0625rem;
}

.sekcja--ciemna .sekcja__naglowek p {
    color: hsl(var(--secondary-foreground) / 0.75);
}

.akcent { color: hsl(var(--primary)); }
.sekcja--ciemna .akcent { color: hsl(var(--primary-bright)); }

/* ==========================================================================
   5. PRZYCISKI
   Przepisane z cva w src/components/ui/button.tsx — projekt NADPISUJE
   domyślne rozmiary shadcn: size="default" to h-12 px-6 (nie h-10 px-4),
   a baza ma rounded-xl (0.75rem) i font-semibold.
   ========================================================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    white-space: nowrap;
    height: 3rem;
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius-xl);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.25;
    cursor: pointer;
    transition: background-color 0.2s, box-shadow 0.2s, transform 0.2s, border-color 0.2s;
}

.btn:active { transform: scale(0.98); }

.btn svg {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
}

/* Warianty */
.btn--primary {
    background-color: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
    box-shadow: var(--shadow-md);
}
.btn--primary:hover {
    background-color: hsl(var(--primary-dark));
    box-shadow: var(--shadow-lg);
}

.btn--outline {
    border: 2px solid hsl(var(--input));
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
}
.btn--outline:hover {
    background-color: hsl(var(--muted));
    border-color: hsl(var(--primary) / 0.5);
}

.btn--soft {
    background-color: hsl(var(--primary) / 0.1);
    color: hsl(var(--primary));
}
.btn--soft:hover { background-color: hsl(var(--primary) / 0.18); }

.btn--jasny {
    background-color: hsl(var(--card));
    color: hsl(var(--foreground));
    box-shadow: var(--shadow-lg);
}
.btn--jasny:hover { background-color: hsl(var(--card) / 0.9); }

/* Rozmiary */
.btn--sm {
    height: 2.5rem;
    padding-inline: 1rem;
    font-size: 0.875rem;
    border-radius: var(--radius-sm);
}
.btn--sm svg { width: 1rem; height: 1rem; }

.btn--lg {
    height: 3.5rem;
    padding: 1rem 2rem;
    font-size: 1.125rem;
    font-weight: 700;
}

/* Na telefonie przyciski hero idą na pełną szerokość — cel dotykowy 56 px */
.btn--mobile {
    width: 100%;
    height: 3.5rem;
    font-size: 1.0625rem;
    font-weight: 700;
}

@media (min-width: 640px) {
    .btn--mobile { width: auto; }
}

/* ==========================================================================
   6. DROBNE KOMPONENTY
   ========================================================================== */
.plakietka {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-full);
    background-color: hsl(var(--primary) / 0.1);
    color: hsl(var(--primary));
    font-size: 0.875rem;
    font-weight: 500;
}

.plakietka svg { width: 1rem; height: 1rem; }

.eko-plakietka {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-full);
    background-color: hsl(var(--primary) / 0.1);
    color: hsl(var(--primary));
    font-size: 0.75rem;
    font-weight: 600;
}

.ikona { width: 1.5rem; height: 1.5rem; }
.ikona--sm { width: 1rem; height: 1rem; }
.ikona--md { width: 1.25rem; height: 1.25rem; }
.ikona--lg { width: 2rem; height: 2rem; }

/* ==========================================================================
   7. NAGŁÓWEK
   ========================================================================== */
.naglowek {
    position: sticky;
    top: 0;
    z-index: var(--z-naglowek);
    background-color: hsl(var(--card) / 0.95);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid hsl(var(--border));
}

.naglowek__pasek {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    height: var(--naglowek-h);
}

@media (min-width: 1180px) {
    :root { --naglowek-h: 5rem; }
}

/* Logo — prawdziwy plik klienta (ekoluk materialy/img/).
   Proporcje 422:153, więc wysokość steruje wszystkim. */
.logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
}

.logo img {
    /* Wysokość, nie szerokość — logo skaluje się proporcjonalnie.
       ⚠️ Logo „Ekokontenery" ma proporcję 5,16:1 (poprzednie „Eko-Luk" miało
       2,76:1), więc przy tej samej wysokości jest prawie dwa razy szersze.
       Dlatego jest niższe niż poprzednie — inaczej nagłówek nie mieści się
       na desktopie. Patrz komentarz przy progu nawigacji niżej. */
    height: 2.1rem;
    width: auto;
}

@media (min-width: 1180px) {
    .logo img { height: 2.35rem; }
}

.logo--stopka img { height: 3rem; }

/* Nawigacja desktop */
.nawigacja { display: none; }

/* Pełna nawigacja dopiero od 1180 px (wcześniej 1120).
   Zmierzone przy logo „Ekokontenery" (2,35rem = 194 px szerokości):
   logo 194 + nawigacja 516 + telefon i przycisk 365 = 1075 px,
   a przy 1180 px dostępne jest 1116 px — zostaje 41 px luzu.
   Przy progu 1120 px dostępne było 1056 px i nagłówek NIE MIEŚCIŁ SIĘ
   (brakowało 62 px), więc nawigacja łamała się na dwie linie.
   Poniżej tego progu działa hamburger, a numer telefonu stoi
   w przyklejonym pasku na dole.

   ⚠️ Wszystkie progi 1180 px w tym pliku należą do JEDNEGO systemu nagłówka
   (wysokość paska, logo, nawigacja, akcje, hamburger, menu mobilne, pasek
   telefonu, .tylko-desktop). Zmieniaj je RAZEM — rozjazd pokaże hamburger
   i pełne menu jednocześnie. Ten sam próg jest w js/main.js. */
@media (min-width: 1180px) {
    .nawigacja {
        display: flex;
        align-items: center;
        gap: 0.125rem;
    }
}

.nawigacja__link {
    padding: 0.5rem 0.875rem;
    white-space: nowrap;   /* pozycja menu to etykieta, nie zdanie */
    border-radius: var(--radius-sm);
    font-size: 0.9375rem;
    font-weight: 500;
    color: hsl(var(--muted-foreground));
    transition: color 0.15s, background-color 0.15s;
}

.nawigacja__link:hover {
    color: hsl(var(--foreground));
    background-color: hsl(var(--muted));
}

.nawigacja__link.jest-aktywny {
    color: hsl(var(--primary));
    background-color: hsl(var(--primary) / 0.1);
}

/* Prawa strona nagłówka */
.naglowek__akcje {
    display: none;
    align-items: center;
    /* 0.75rem sklejało numer z przyciskiem w jedną plamę — przy 1.5rem
       wewnętrznego paddingu przycisku 12 px z zewnątrz było za mało. */
    gap: 1.25rem;
}

@media (min-width: 1180px) {
    .naglowek__akcje { display: flex; }
}

/* Od 1280 px jest 119 px luzu między nawigacją a tym blokiem, więc można
   oddychać szerzej. Poniżej nagłówek jest na styk i szerszy odstęp
   ścisnąłby nawigację. */
@media (min-width: 1280px) {
    .naglowek__akcje { gap: 1.75rem; }
}

/* Pionowa kreska rozdziela numer od przycisku niezależnie od szerokości —
   przy 1024 px, gdzie na odstęp nie ma miejsca, to ona robi robotę. */
.naglowek__akcje::before {
    content: "";
    align-self: stretch;
    width: 1px;
    margin-block: 1.125rem;
    background-color: hsl(var(--border));
    order: 1;
}

.naglowek__telefon { order: 0; }
.naglowek__akcje .btn { order: 2; }

.naglowek__telefon {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    /* Numer telefonu nigdy nie może się łamać na dwie linie — to jedna
       liczba, a nie zdanie. */
    white-space: nowrap;
    font-size: 0.9375rem;
    font-weight: 600;
    color: hsl(var(--foreground));
    transition: color 0.15s;
}

.naglowek__telefon:hover { color: hsl(var(--primary)); }
.naglowek__telefon svg { width: 1rem; height: 1rem; color: hsl(var(--primary)); }

/* Hamburger */
.hamburger {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    margin-right: -0.5rem;
    border-radius: var(--radius-xl);
    color: hsl(var(--foreground));
    cursor: pointer;
    transition: background-color 0.15s;
}

.hamburger:hover { background-color: hsl(var(--muted)); }
.hamburger svg { width: 1.5rem; height: 1.5rem; }

/* Ikony leżą jedna na drugiej i przenikają się z obrotem — zamiast
   skakać przez display:none. */
.hamburger__otworz,
.hamburger__zamknij {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s ease, transform 0.25s ease;
}

.hamburger__zamknij {
    position: absolute;
    inset: 0;
    opacity: 0;
    transform: rotate(-90deg) scale(0.7);
}

.hamburger[aria-expanded="true"] .hamburger__otworz {
    opacity: 0;
    transform: rotate(90deg) scale(0.7);
}

.hamburger[aria-expanded="true"] .hamburger__zamknij {
    opacity: 1;
    transform: none;
}

@media (min-width: 1180px) {
    .hamburger { display: none; }
}

/* Menu mobilne */
.menu-mobilne {
    position: fixed;
    inset: var(--naglowek-h) 0 0 0;
    z-index: var(--z-menu);
    background-color: hsl(var(--background));
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-bottom: max(1.5rem, env(safe-area-inset-bottom));

    /* Stan zamknięty. visibility (a nie display:none) pozwala animować,
       a jednocześnie wyjmuje menu z nawigacji klawiaturą i z drzewa
       dostępności — czyli robi to, co robił atrybut hidden. */
    visibility: hidden;
    opacity: 0;
    transform: translateY(-0.75rem);
    transition: opacity 0.24s ease, transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
                visibility 0s linear 0.28s;
}

.menu-mobilne.jest-otwarte {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition: opacity 0.2s ease, transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
                visibility 0s;
}

@media (min-width: 1180px) {
    .menu-mobilne { display: none !important; }
}

.menu-mobilne__lista {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    padding-block: 1.25rem;
}

.menu-mobilne__link {
    display: flex;
    align-items: center;
    height: 3.5rem;
    padding-inline: 1rem;
    border-radius: var(--radius-xl);
    font-size: 1.0625rem;
    font-weight: 500;
    color: hsl(var(--foreground));
    transition: background-color 0.15s;
}

.menu-mobilne__link:hover { background-color: hsl(var(--muted)); }

/* Kaskada — każda pozycja wchodzi odrobinę później. Indeks --i ustawia PHP,
   żeby nie trzeba było wypisywać reguły na każdą pozycję z osobna. */
.menu-mobilne__link,
.menu-mobilne__stopka > * {
    opacity: 0;
    transform: translateY(0.5rem);
    transition: opacity 0.26s ease, transform 0.26s ease;
}

.jest-otwarte .menu-mobilne__link,
.jest-otwarte .menu-mobilne__stopka > * {
    opacity: 1;
    transform: none;
    transition-delay: calc(0.05s + var(--i, 0) * 0.035s);
}

.menu-mobilne__link.jest-aktywny {
    color: hsl(var(--primary));
    background-color: hsl(var(--primary) / 0.1);
    font-weight: 600;
}

.menu-mobilne__stopka {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding-top: 1rem;
    border-top: 1px solid hsl(var(--border));
}

.menu-mobilne__telefon {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    height: 3.5rem;
    border-radius: var(--radius-xl);
    background-color: hsl(var(--muted));
    font-weight: 600;
}

.menu-mobilne__telefon svg { width: 1.25rem; height: 1.25rem; color: hsl(var(--primary)); }

/* Blokada przewijania tła przy otwartym menu */
body.menu-otwarte { overflow: hidden; }

/* ==========================================================================
   8. HERO
   ========================================================================== */
.hero {
    position: relative;
    overflow: hidden;
    background: var(--gradient-hero);
}

.hero__tlo {
    position: absolute;
    inset: 0;
    background-image: var(--hero-tlo);
    background-size: cover;
    background-position: center;
    /* Ledwie muśnięcie tła. Przy 0.1 napis „Wynajem kontenerów" ze zdjęcia
       prześwitywał pod nagłówkiem i robił szum akurat tam, gdzie ma być
       najczyściej. */
    opacity: 0.055;
    pointer-events: none;
}

.hero__inner {
    position: relative;
    display: grid;
    gap: 2rem;
    align-items: center;
    padding-block: 3.5rem 3rem;
}

@media (min-width: 1024px) {
    .hero__inner {
        grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
        gap: 4rem;
        padding-block: 5rem 5.5rem;
    }
}

.hero__tekst { text-align: center; }

@media (min-width: 1024px) {
    .hero__tekst { text-align: left; }
}

.hero__plakietka { margin-bottom: 1.75rem; }

.hero h1 {
    /* Górna granica zbita z 3.75rem: przy najdłuższym rotowanym słowie
       („gabaryty") nagłówek musi zostać w DWÓCH wierszach. */
    font-size: clamp(1.875rem, 1.2rem + 2.6vw, 3rem);
    font-weight: var(--waga-h1);
    line-height: 1.12;
    margin-bottom: 1rem;
}

/* Rotator słowa w nagłówku.
   Szerokość jest USTALANA RAZ w JS na najszerszym wyrazie i już się nie zmienia
   — inaczej każda podmiana przesuwałaby wiersz i psuła CLS (Core Web Vitals).
   Wyraz jest wyrównany do lewej, więc nadmiar szerokości ląduje na końcu
   wiersza, gdzie i tak go nie widać. */
.rotator {
    display: inline-block;
    text-align: left;
    vertical-align: baseline;
    /* Jedyny zielony element nagłówka — akcent siedzi dokładnie tam,
       gdzie coś się zmienia, zamiast rozlewać się na całą drugą linię. */
    color: hsl(var(--primary));
    transition: opacity 0.28s ease, transform 0.28s ease;
    will-change: opacity;
}

.rotator.zmienia {
    opacity: 0;
    transform: translateY(-0.18em);
}

@media (prefers-reduced-motion: reduce) {
    .rotator { transition: none; }
    .rotator.zmienia { opacity: 1; transform: none; }
}

.hero__lead {
    font-size: 1rem;
    line-height: 1.65;          /* luźniej — to głównie stąd brało się wrażenie ściany */
    color: hsl(var(--muted-foreground));
    margin-bottom: 2.25rem;
    max-width: 34rem;
    margin-inline: auto;
}

@media (min-width: 1024px) {
    .hero__lead { font-size: 1.125rem; margin-inline: 0; }
}

.hero__cta {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 2rem;
}

@media (min-width: 640px) {
    .hero__cta {
        flex-direction: row;
        justify-content: center;
    }
}

@media (min-width: 1024px) {
    .hero__cta { justify-content: flex-start; }
}

/* Trzy liczby pod CTA — wzorzec ze „skupu złomu" */
.hero__liczby {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
    padding-top: 2rem;
    border-top: 1px solid hsl(var(--border));
}

.hero__liczba-wartosc {
    font-family: var(--font-naglowki);
    font-size: clamp(1.25rem, 1rem + 1.2vw, 1.75rem);
    font-weight: var(--waga-h1);
    color: hsl(var(--primary));
    line-height: 1.1;
}

.hero__liczba-opis {
    font-size: 0.8125rem;
    color: hsl(var(--muted-foreground));
    margin-top: 0.25rem;
}

.hero__zdjecie {
    position: relative;
    border-radius: var(--radius-3xl);
    overflow: hidden;
    box-shadow: var(--shadow-2xl);
    aspect-ratio: 16 / 11;
}

.hero__zdjecie img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Podpis na zdjęciu — telefon namalowany na kontenerze to dowód, nie ozdoba */
.hero__zdjecie-podpis {
    position: absolute;
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    padding: 0.625rem 1rem;
    border-radius: var(--radius-xl);
    background-color: hsl(var(--card) / 0.92);
    backdrop-filter: blur(8px);
    font-size: 0.8125rem;
    font-weight: 500;
    color: hsl(var(--foreground));
    box-shadow: var(--shadow-md);
}

/* Na telefonie zdjęcie jest pod tekstem, na desktopie w drugiej kolumnie.
   Podpis chowamy poniżej 1024 px — przy węższym kadrze zasłaniał numer
   telefonu namalowany na burcie, czyli najlepszą część zdjęcia. */
@media (max-width: 1119px) {
    .hero__zdjecie { aspect-ratio: 3 / 2; }
    .hero__zdjecie-podpis { display: none; }
}

/* ==========================================================================
   9. PRZYKLEJONY PASEK TELEFONU (mobile)
   Numer zawsze pod kciukiem — ruch na stronach usług lokalnych jest
   w większości mobilny, a konwersją jest telefon, nie formularz.
   ========================================================================== */
.pasek-telefon {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--z-pasek);
    display: block;
    background-color: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
    box-shadow: 0 -4px 20px hsl(103 30% 9% / 0.22);
    padding-bottom: env(safe-area-inset-bottom);
    transition: transform 0.25s ease;
}

/* Wyściółka, żeby pasek nie zasłaniał końca stopki */
@media (max-width: 1119px) {
    body { padding-bottom: calc(var(--pasek-h) + env(safe-area-inset-bottom)); }
}

@media (min-width: 1180px) {
    .pasek-telefon { display: none; }
}

/* Pasek zjeżdża, gdy coś ma pierwszeństwo: baner cookies albo otwarte menu.
   Warstwy same by wystarczyły, ale przy zjeżdżaniu nie ma szans, żeby
   cokolwiek przebiło od dołu na starszych przeglądarkach. */
body.cookies-widoczne .pasek-telefon,
body.menu-otwarte .pasek-telefon {
    transform: translateY(100%);
}

.pasek-telefon__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: var(--pasek-h);
    padding-block: 0.625rem;
}

.pasek-telefon__lewa {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.pasek-telefon__lewa > svg {
    width: 1.375rem;
    height: 1.375rem;
    flex-shrink: 0;
}

.pasek-telefon__tekst {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
    min-width: 0;
}

.pasek-telefon__numer {
    font-family: var(--font-naglowki);
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: 0;
}

.pasek-telefon__godziny {
    font-size: 0.6875rem;
    font-weight: 400;
    opacity: 0.8;
    margin-top: 0.15rem;
}

.pasek-telefon__akcja {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--radius-full);
    background-color: hsl(var(--primary-foreground) / 0.15);
}

.pasek-telefon__akcja svg {
    width: 1rem;
    height: 1rem;
}

.pasek-telefon:active { filter: brightness(0.94); }

@media (prefers-reduced-motion: reduce) {
    .pasek-telefon { transition: none; }

    /* Przy ograniczonych animacjach menu po prostu jest albo go nie ma */
    .menu-mobilne,
    .menu-mobilne.jest-otwarte { transition: opacity 0s, visibility 0s; transform: none; }
    .menu-mobilne__link,
    .menu-mobilne__stopka > *,
    .jest-otwarte .menu-mobilne__link,
    .jest-otwarte .menu-mobilne__stopka > * {
        opacity: 1; transform: none; transition: none; transition-delay: 0s;
    }
    .hamburger__otworz,
    .hamburger__zamknij { transition: none; }
}

/* ==========================================================================
   9a. NAGŁÓWEK PODSTRONY
   ========================================================================== */
.naglowek-strony {
    background: var(--gradient-hero);
    border-bottom: 1px solid hsl(var(--border));
    padding-block: 1.5rem 2.5rem;
}

@media (min-width: 1024px) {
    .naglowek-strony { padding-block: 2rem 3.5rem; }
}

.naglowek-strony h1 {
    font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.75rem);
    font-weight: var(--waga-h1);
    line-height: 1.15;
    max-width: 22ch;
}

.naglowek-strony__nad {
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: hsl(var(--primary));
    margin-bottom: 0.625rem;
}

.naglowek-strony__lead {
    margin-top: 1rem;
    font-size: 1.0625rem;
    line-height: 1.65;
    color: hsl(var(--muted-foreground));
    max-width: var(--tekst-max);
}

/* Okruchy — dla użytkownika i dla Google (ścieżka w wynikach wyszukiwania) */
.okruchy { margin-bottom: 1.25rem; }

.okruchy ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
    color: hsl(var(--muted-foreground));
}

.okruchy li { display: flex; align-items: center; gap: 0.375rem; }

.okruchy li + li::before {
    content: "›";
    color: hsl(var(--muted-foreground) / 0.6);
}

.okruchy a { transition: color 0.15s; }
.okruchy a:hover { color: hsl(var(--primary)); text-decoration: underline; }
.okruchy [aria-current] { color: hsl(var(--foreground)); font-weight: 500; }

/* ==========================================================================
   10. KARTY USŁUG
   ========================================================================== */
.uslugi {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
    gap: 1rem;
}

@media (min-width: 768px) {
    .uslugi { gap: 1.5rem; }
}

.usluga {
    display: flex;
    flex-direction: column;
    padding: 1.5rem;
    border-radius: var(--radius-2xl);
    background-color: hsl(var(--card));
    border: 1px solid hsl(var(--border));
    transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
}

.usluga:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
    border-color: hsl(var(--primary) / 0.35);
}

/* Zdjęcie na górze kafelka. Ujemne marginesy wyprowadzają je poza padding
   karty, żeby sięgało krawędzi — inaczej wyglądałoby jak naklejka w ramce.
   Zaokrąglone tylko u góry, bo dół styka się z treścią. */
.usluga__zdjecie {
    display: block;
    margin: -1.5rem -1.5rem 0;
    overflow: hidden;
    border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
    background-color: hsl(var(--muted));
}

.usluga__zdjecie img {
    display: block;
    width: 100%;
    height: auto;
    /* 3:2, nie 16:9 — zdjęcia klienta są w 4:3 i 3:2, więc szerszy kadr
       ścinał im pół kontenera. */
    aspect-ratio: 3 / 2;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.usluga:hover .usluga__zdjecie img { transform: scale(1.05); }

@media (prefers-reduced-motion: reduce) {
    .usluga__zdjecie img,
    .usluga:hover .usluga__zdjecie img { transition: none; transform: none; }
}

.usluga__ikona {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: var(--radius-xl);
    background-color: hsl(var(--primary) / 0.1);
    color: hsl(var(--primary));
    margin-bottom: 1rem;
}

.usluga__ikona svg { width: 1.5rem; height: 1.5rem; }

/* Plakietka wchodząca na dolną krawędź zdjęcia. Tło kryjące (--card),
   bo bazowe hsl(var(--primary) / 0.1) przepuściłoby zdjęcie. */
.usluga__zdjecie + .usluga__ikona {
    position: relative;
    margin-top: -1.5rem;
    background-color: hsl(var(--card));
    box-shadow: 0 2px 10px hsl(var(--secondary) / 0.18);
}

.usluga h3 {
    font-size: 1.0625rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.usluga__opis {
    font-size: 0.875rem;
    color: hsl(var(--muted-foreground));
    margin-bottom: 1rem;
}

.usluga__punkty {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid hsl(var(--border));
}

.usluga__punkt {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.8125rem;
    color: hsl(var(--foreground));
}

.usluga__punkt svg {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    margin-top: 0.15rem;
    color: hsl(var(--primary));
}

.usluga__wiecej {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-top: 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: hsl(var(--primary));
}

.usluga__wiecej svg {
    width: 1rem;
    height: 1rem;
    transition: transform 0.15s;
}

.usluga:hover .usluga__wiecej svg { transform: translateX(0.25rem); }

/* ==========================================================================
   10a. TREŚĆ PODSTRONY USŁUGI
   ========================================================================== */
.usluga-tresc {
    display: grid;
    gap: 2.5rem;
    align-items: start;
}

@media (min-width: 900px) {
    .usluga-tresc {
        grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
        gap: 3rem;
    }
    /* Karta z telefonem jedzie za użytkownikiem — decyzja zapada przez telefon */
    .usluga-tresc__bok { position: sticky; top: calc(var(--naglowek-h) + 1.5rem); }
}

.tekst-wiodacy {
    font-size: 1.0625rem;
    line-height: 1.7;
    color: hsl(var(--muted-foreground));
    max-width: var(--tekst-max);
}

.usluga-tresc h2 {
    font-size: 1.25rem;
    margin: 2rem 0 1rem;
}

.lista-zaznaczen {
    display: grid;
    gap: 0.625rem;
}

@media (min-width: 560px) {
    .lista-zaznaczen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.lista-zaznaczen li {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.9375rem;
}

.lista-zaznaczen svg {
    width: 1.125rem;
    height: 1.125rem;
    flex-shrink: 0;
    margin-top: 0.15rem;
    color: hsl(var(--primary));
}

.usluga-tresc__zdjecie {
    border-radius: var(--radius-2xl);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    aspect-ratio: 16 / 10;
}

.usluga-tresc__zdjecie img { width: 100%; height: 100%; object-fit: cover; }

/* Karta z telefonem — powtarza się na podstronach usług i miejscowości */
.karta-kontakt {
    margin-top: 1.5rem;
    padding: 1.5rem;
    border-radius: var(--radius-2xl);
    background-color: hsl(var(--muted));
    border: 1px solid hsl(var(--border));
    text-align: center;
}

.karta-kontakt__nad {
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: hsl(var(--muted-foreground));
    margin-bottom: 0.75rem;
}

.karta-kontakt__numer {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-naglowki);
    font-size: 1.375rem;
    font-weight: 700;
    color: hsl(var(--primary));
}

.karta-kontakt__numer svg { width: 1.25rem; height: 1.25rem; }

.karta-kontakt__godziny {
    font-size: 0.8125rem;
    color: hsl(var(--muted-foreground));
    margin: 0.375rem 0 1.25rem;
}

/* ==========================================================================
   11. KROKI „JAK TO DZIAŁA"
   ========================================================================== */
.kroki {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem 1rem;
    max-width: 64rem;
    margin-inline: auto;
}

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

@media (min-width: 1100px) {
    .kroki { grid-template-columns: repeat(4, 1fr); }
}

.krok {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 1rem;
}

.krok__kolo {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: var(--radius-2xl);
    background-color: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
    margin-bottom: 1rem;
}

.krok__kolo svg { width: 1.5rem; height: 1.5rem; }

.krok__numer {
    position: absolute;
    top: -0.375rem;
    right: -0.375rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: var(--radius-full);
    background-color: hsl(var(--accent));
    color: hsl(var(--accent-foreground));
    font-size: 0.75rem;
    font-weight: 700;
}

.krok h3 {
    font-size: 1.0625rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.krok p {
    font-size: 0.875rem;
    color: hsl(var(--muted-foreground));
}

/* Linia łącząca kroki — tylko na szerokich ekranach */
.krok__linia { display: none; }

@media (min-width: 1100px) {
    .krok__linia {
        display: block;
        position: absolute;
        top: 1.75rem;
        left: calc(50% + 2.25rem);
        right: calc(-50% + 2.25rem);
        height: 2px;
        background-color: hsl(var(--border));
    }
}

/* ==========================================================================
   11a. KOMPONENTY PODSTRON
   ========================================================================== */

/* Duże kroki (podstrona „jak to działa") — pionowa lista z linią spinającą */
.kroki-duze {
    display: grid;
    gap: 2rem;
    max-width: 46rem;
    margin-inline: auto;
}

.krok-duzy {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 1.25rem;
    align-items: start;
}

.krok-duzy__kolo {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: var(--radius-2xl);
    background-color: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
    flex-shrink: 0;
}

.krok-duzy__kolo svg { width: 1.375rem; height: 1.375rem; }

/* Linia spinająca kroki — rysowana z kółka w dół, ostatni jej nie ma */
.krok-duzy:not(:last-child) .krok-duzy__kolo::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    width: 2px;
    height: 2rem;
    transform: translateX(-50%);
    background-color: hsl(var(--border));
}

.krok-duzy h2 { font-size: 1.1875rem; margin-bottom: 0.375rem; }
.krok-duzy p { color: hsl(var(--muted-foreground)); font-size: 0.9375rem; line-height: 1.65; }

/* Pytania i odpowiedzi — natywny <details>, działa bez JS */
.pytania {
    display: grid;
    gap: 0.75rem;
    max-width: 46rem;
    margin-inline: auto;
}

.pytanie {
    background-color: hsl(var(--card));
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius-2xl);
    overflow: hidden;
}

.pytanie summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.125rem 1.25rem;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}

.pytanie summary::-webkit-details-marker { display: none; }
.pytanie summary:hover { color: hsl(var(--primary)); }

.pytanie__strzalka {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
    color: hsl(var(--muted-foreground));
    transition: transform 0.2s ease;
}

.pytanie[open] .pytanie__strzalka { transform: rotate(180deg); }

.pytanie > p {
    padding: 0 1.25rem 1.25rem;
    color: hsl(var(--muted-foreground));
    font-size: 0.9375rem;
    line-height: 1.7;
}

@media (prefers-reduced-motion: reduce) {
    .pytanie__strzalka { transition: none; }
}

/* Układ dwukolumnowy: treść + karta kontaktu */
.dwie-kolumny {
    display: grid;
    gap: 2.5rem;
    align-items: start;
}

@media (min-width: 900px) {
    .dwie-kolumny { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 3rem; }
}

.dwie-kolumny h2 { font-size: 1.375rem; margin-bottom: 0.875rem; }

.karta-kontakt--samodzielna { margin-top: 0; background-color: hsl(var(--card)); }

.karta-kontakt__opis {
    font-size: 0.875rem;
    line-height: 1.6;
    color: hsl(var(--muted-foreground));
    margin-bottom: 1.25rem;
}

/* Siatka miejscowości */
.miasta {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr));
    gap: 0.875rem;
}

.miasto-karta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    padding: 1rem 1.125rem;
    border-radius: var(--radius-xl);
    background-color: hsl(var(--card));
    border: 1px solid hsl(var(--border));
    transition: border-color 0.15s, transform 0.2s, box-shadow 0.2s;
}

.miasto-karta:hover {
    border-color: hsl(var(--primary) / 0.4);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.miasto-karta__ikona { color: hsl(var(--primary)); }
.miasto-karta__ikona svg { width: 1.125rem; height: 1.125rem; }
.miasto-karta__nazwa { font-weight: 600; font-size: 0.9375rem; }
.miasto-karta__km { font-size: 0.8125rem; color: hsl(var(--muted-foreground)); }

.miasto-karta--baza {
    background-color: hsl(var(--primary));
    border-color: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
}
.miasto-karta--baza .miasto-karta__ikona { color: currentColor; }
.miasto-karta--baza .miasto-karta__km { color: hsl(var(--primary-foreground) / 0.8); }
.miasto-karta--baza:hover { border-color: hsl(var(--primary-dark)); }

/* Kompaktowa lista usług na podstronie miejscowości */
.uslugi-lista { display: grid; gap: 0.625rem; }

.usluga-mini {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.875rem;
    padding: 0.875rem 1rem;
    border-radius: var(--radius-xl);
    background-color: hsl(var(--card));
    border: 1px solid hsl(var(--border));
    transition: border-color 0.15s, background-color 0.15s;
}

.usluga-mini:hover {
    border-color: hsl(var(--primary) / 0.4);
    background-color: hsl(var(--primary) / 0.04);
}

.usluga-mini__ikona {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--radius-sm);
    background-color: hsl(var(--primary) / 0.1);
    color: hsl(var(--primary));
    flex-shrink: 0;
}

.usluga-mini__ikona svg { width: 1.125rem; height: 1.125rem; }
.usluga-mini strong { display: block; font-size: 0.9375rem; font-weight: 600; }

.usluga-mini__opis {
    display: block;
    font-size: 0.8125rem;
    color: hsl(var(--muted-foreground));
    margin-top: 0.125rem;
}

.usluga-mini__strzalka {
    width: 1.125rem;
    height: 1.125rem;
    flex-shrink: 0;
    color: hsl(var(--muted-foreground));
}

/* ==========================================================================
   12. ATUTY
   ========================================================================== */
.atuty {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
    gap: 1rem;
}

@media (min-width: 768px) {
    .atuty { gap: 1.5rem; }
}

.atut {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1.5rem;
    border-radius: var(--radius-2xl);
    background-color: hsl(var(--card));
    border: 1px solid hsl(var(--border));
}

.atut__ikona {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: var(--radius-xl);
    background-color: hsl(var(--primary) / 0.1);
    color: hsl(var(--primary));
    margin-bottom: 1rem;
}

.atut__ikona svg { width: 1.5rem; height: 1.5rem; }

.atut h3 {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.atut p {
    font-size: 0.875rem;
    color: hsl(var(--muted-foreground));
}

/* ==========================================================================
   12a. FORMULARZE I KONTAKT
   ========================================================================== */
.dwie-kolumny--odwrocone { grid-template-columns: minmax(0, 1fr); }

@media (min-width: 900px) {
    .dwie-kolumny--odwrocone { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }
}

/* Dane kontaktowe */
.kontakt-dane { display: grid; gap: 0.75rem; align-content: start; }

.kontakt-poz {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.875rem;
    align-items: center;
    padding: 1rem 1.125rem;
    border-radius: var(--radius-xl);
    background-color: hsl(var(--card));
    border: 1px solid hsl(var(--border));
    transition: border-color 0.15s;
}

a.kontakt-poz:hover { border-color: hsl(var(--primary) / 0.4); }

.kontakt-poz__ikona {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-sm);
    background-color: hsl(var(--primary) / 0.1);
    color: hsl(var(--primary));
    flex-shrink: 0;
}

.kontakt-poz__ikona svg { width: 1.25rem; height: 1.25rem; }
.kontakt-poz strong { display: block; font-weight: 600; overflow-wrap: anywhere; }

.kontakt-poz__opis {
    display: block;
    font-size: 0.8125rem;
    color: hsl(var(--muted-foreground));
    margin-top: 0.125rem;
}

.kontakt-poz--glowna strong {
    font-family: var(--font-naglowki);
    font-size: 1.375rem;
    color: hsl(var(--primary));
}

.kontakt-godziny {
    margin-top: 0.75rem;
    padding: 1.25rem;
    border-radius: var(--radius-xl);
    background-color: hsl(var(--muted));
}

.kontakt-godziny h2 { font-size: 1rem; margin-bottom: 0.875rem; }

.kontakt-godziny dl {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.375rem 1rem;
    font-size: 0.875rem;
}

.kontakt-godziny dd { font-variant-numeric: tabular-nums; text-align: right; }
.kontakt-godziny .nieczynne { color: hsl(var(--muted-foreground)); }

/* Karta z formularzem */
.formularz-karta {
    padding: 1.5rem;
    border-radius: var(--radius-2xl);
    background-color: hsl(var(--card));
    border: 1px solid hsl(var(--border));
    box-shadow: var(--shadow-sm);
}

@media (min-width: 640px) { .formularz-karta { padding: 2rem; } }

.formularz-karta h2 { font-size: 1.25rem; margin-bottom: 0.5rem; }

.formularz-karta__opis {
    font-size: 0.9375rem;
    color: hsl(var(--muted-foreground));
    margin-bottom: 1.5rem;
}

/* Pola */
.formularz { display: grid; gap: 1rem; }
.pole { display: flex; flex-direction: column; gap: 0.375rem; min-width: 0; }

.pole label { font-size: 0.8125rem; font-weight: 500; }
.wymagane { color: hsl(var(--destructive)); }

.pole input,
.pole textarea,
.pole__select {
    width: 100%;
    min-width: 0;
    padding: 0.75rem 0.875rem;
    font-size: 1rem;
    color: hsl(var(--foreground));
    background-color: hsl(var(--background));
    border: 2px solid hsl(var(--input));
    border-radius: var(--radius-xl);
    transition: border-color 0.15s, box-shadow 0.15s;
}

.pole input, .pole__select { height: 3.25rem; }
.pole textarea { line-height: 1.6; resize: vertical; }

.pole input:focus,
.pole textarea:focus,
.pole__select:focus {
    outline: none;
    border-color: hsl(var(--primary));
    box-shadow: 0 0 0 4px hsl(var(--primary) / 0.14);
}

.pole input.jest-blad,
.pole textarea.jest-blad { border-color: hsl(var(--destructive)); }

/* Natywna strzałka <select> klei się do krawędzi i różni między
   przeglądarkami — chowamy ją i wstawiamy własną, odsuniętą. */
.pole__select {
    appearance: none;
    padding-right: 2.75rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1.1rem center;
}

.pola-para { display: grid; gap: 1rem; }

@media (min-width: 520px) {
    .pola-para { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.pole__wskazowka {
    font-size: 0.8125rem;
    color: hsl(var(--muted-foreground));
    margin-top: -0.5rem;
}

.pole-zgoda {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.625rem;
    align-items: start;
    font-size: 0.8125rem;
    line-height: 1.55;
    color: hsl(var(--muted-foreground));
}

.pole-zgoda input {
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0.1rem;
    accent-color: hsl(var(--primary));
    flex-shrink: 0;
}

.pole-zgoda a { color: hsl(var(--primary)); text-decoration: underline; text-underline-offset: 2px; }
.pole-zgoda.jest-blad { color: hsl(var(--destructive)); }

/* Formularz dzielony na kroki. Domyślnie oba zestawy pól są WIDOCZNE —
   dzielenie włącza dopiero JS, więc bez skryptu formularz nadal ma sens. */
.kroki-formularza { display: none; }

.formularz--kroki.ma-kroki .kroki-formularza {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.kroki-formularza li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    padding: 0.625rem 0.75rem;
    border-radius: var(--radius-xl);
    background-color: hsl(var(--muted));
    font-size: 0.8125rem;
    font-weight: 500;
    color: hsl(var(--muted-foreground));
    transition: background-color 0.2s, color 0.2s;
}

.kroki-formularza li span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: var(--radius-full);
    background-color: hsl(var(--border));
    color: hsl(var(--foreground));
    font-size: 0.75rem;
    font-weight: 700;
    flex-shrink: 0;
}

.kroki-formularza li.jest-aktywny {
    background-color: hsl(var(--primary) / 0.12);
    color: hsl(var(--primary-dark));
}

.kroki-formularza li.jest-aktywny span {
    background-color: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
}

.kroki-formularza li.jest-zrobiony span::after { content: "✓"; }
.kroki-formularza li.jest-zrobiony span { font-size: 0.875rem; }
.kroki-formularza li.jest-zrobiony span:first-line { font-size: 0 }

.krok-formularza {
    display: grid;
    gap: 1rem;
    border: 0;
    padding: 0;
    min-width: 0;
}

.formularz--kroki.ma-kroki .krok-formularza[hidden] { display: none; }

.formularz__nawigacja {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.75rem;
}

.formularz__nawigacja .btn { width: 100%; }

@media (prefers-reduced-motion: reduce) {
    .kroki-formularza li { transition: none; }
}

/* Honeypot — musi być niewidoczny dla człowieka, ale nie przez display:none,
   bo część botów pomija ukryte w ten sposób pola. */
.pulapka {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.formularz__wynik {
    padding: 0.875rem 1rem;
    border-radius: var(--radius-xl);
    font-size: 0.9375rem;
    border: 1px solid transparent;
}

.formularz__wynik.jest-ok {
    background-color: hsl(var(--primary) / 0.1);
    border-color: hsl(var(--primary) / 0.3);
    color: hsl(var(--primary-dark));
}

.formularz__wynik.jest-blad {
    background-color: hsl(var(--destructive) / 0.08);
    border-color: hsl(var(--destructive) / 0.3);
    color: hsl(var(--destructive));
}

/* Blok informacyjny */
.info-blok {
    margin-top: 1.5rem;
    padding: 1.5rem;
    border-radius: var(--radius-2xl);
    border: 1px solid hsl(var(--border));
}

.info-blok h2 { font-size: 1.0625rem; margin-bottom: 0.875rem; }

.lista-numerowana { display: grid; gap: 0.625rem; counter-reset: krok; }

.lista-numerowana li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.75rem;
    align-items: start;
    font-size: 0.9375rem;
    color: hsl(var(--muted-foreground));
}

.lista-numerowana li::before {
    counter-increment: krok;
    content: counter(krok);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: var(--radius-full);
    background-color: hsl(var(--primary) / 0.12);
    color: hsl(var(--primary));
    font-size: 0.75rem;
    font-weight: 700;
    flex-shrink: 0;
}

.info-blok__uwaga {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid hsl(var(--border));
    font-size: 0.8125rem;
    color: hsl(var(--muted-foreground));
}

/* Treść prawna */
.tresc-prawna { max-width: 48rem; }
.tresc-prawna h2 { font-size: 1.25rem; margin: 2rem 0 0.75rem; }
.tresc-prawna h2:first-child { margin-top: 0; }
.tresc-prawna h3 { font-size: 1rem; margin: 1.25rem 0 0.5rem; }

.tresc-prawna p {
    color: hsl(var(--muted-foreground));
    line-height: 1.75;
    margin-bottom: 0.875rem;
}

.tresc-prawna a { color: hsl(var(--primary)); text-decoration: underline; text-underline-offset: 2px; }

.lista-kropki { display: grid; gap: 0.5rem; margin-bottom: 0.875rem; }

.lista-kropki li {
    position: relative;
    padding-left: 1.25rem;
    color: hsl(var(--muted-foreground));
    line-height: 1.7;
}

.lista-kropki li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.7em;
    width: 0.375rem;
    height: 0.375rem;
    border-radius: var(--radius-full);
    background-color: hsl(var(--primary));
}

.tresc-prawna__data {
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid hsl(var(--border));
    font-size: 0.875rem;
}

/* ==========================================================================
   13. ZASIĘG — pigułki miejscowości
   ========================================================================== */
.zasieg {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.625rem;
    max-width: 56rem;
    margin-inline: auto;
}

.pigulka {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.625rem 1rem;
    border-radius: var(--radius-full);
    background-color: hsl(var(--card));
    border: 1px solid hsl(var(--border));
    font-size: 0.875rem;
    font-weight: 500;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.pigulka svg {
    width: 0.875rem;
    height: 0.875rem;
    color: hsl(var(--primary));
}

.pigulka:hover {
    background-color: hsl(var(--primary) / 0.08);
    border-color: hsl(var(--primary) / 0.4);
    color: hsl(var(--primary));
}

.pigulka--baza {
    background-color: hsl(var(--primary));
    border-color: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
    font-weight: 600;
}

.pigulka--baza svg { color: currentColor; }
.pigulka--baza:hover {
    background-color: hsl(var(--primary-dark));
    border-color: hsl(var(--primary-dark));
    color: hsl(var(--primary-foreground));
}

.zasieg__nota {
    text-align: center;
    font-size: 0.875rem;
    color: hsl(var(--muted-foreground));
    margin-top: 1.5rem;
}

/* ── Sprawdzarka zasięgu ──────────────────────────────────────────────────── */

/* Bez JS formularz nie ma jak zadziałać (odpowiedź to JSON), więc go nie
   pokazujemy — zamiast tego zostaje sam telefon w sekcji i w pasku. */
html:not(.ma-js) .sprawdzarka { display: none; }

.sprawdzarka {
    max-width: 38rem;
    margin: 2.5rem auto 0;
    padding: 1.5rem;
    border-radius: var(--radius-2xl);
    background-color: hsl(var(--card));
    border: 1px solid hsl(var(--border));
    box-shadow: var(--shadow-sm);
}

.sprawdzarka__wstep {
    font-size: 0.9375rem;
    color: hsl(var(--muted-foreground));
    margin-bottom: 1.25rem;
    text-align: center;
}

/* Kod pocztowy jest krótki, miejscowość długa — stąd stała kolumna na kod.
   Ulica zajmuje pełną szerokość, bo bywa najdłuższa. */
.sprawdzarka__pola {
    display: grid;
    grid-template-columns: 7.5rem 1fr;
    gap: 0.875rem;
}

.sprawdzarka__pole--ulica { grid-column: 1 / -1; }

@media (min-width: 640px) {
    .sprawdzarka__pola { grid-template-columns: 1fr 7.5rem 1fr; }
    .sprawdzarka__pole--ulica { grid-column: auto; }
}

.sprawdzarka__pole {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    min-width: 0;
}

.sprawdzarka__pole label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: hsl(var(--foreground));
}

.sprawdzarka__pole label span {
    font-weight: 400;
    color: hsl(var(--muted-foreground));
}

.sprawdzarka__pole input {
    width: 100%;
    min-width: 0;
    height: 3.25rem;            /* wygodny cel dotykowy, nie tylko minimum 44 px */
    padding-inline: 0.875rem;
    font-size: 1rem;
    color: hsl(var(--foreground));
    background-color: hsl(var(--background));
    border: 2px solid hsl(var(--input));
    border-radius: var(--radius-xl);
    transition: border-color 0.15s, box-shadow 0.15s;
}

.sprawdzarka__pole input:focus {
    outline: none;
    border-color: hsl(var(--primary));
    box-shadow: 0 0 0 4px hsl(var(--primary) / 0.14);
}

.sprawdzarka__pole input.jest-blad {
    border-color: hsl(var(--destructive));
}

.sprawdzarka__wyslij {
    width: 100%;
    height: 3.25rem;
    margin-top: 1.25rem;
}

@media (min-width: 640px) {
    .sprawdzarka__wyslij { width: auto; min-width: 16rem; display: flex; margin-inline: auto; }
}

.sprawdzarka__wynik {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    margin-top: 1.25rem;
    padding: 0.875rem 1rem;
    border-radius: var(--radius-xl);
    font-size: 0.9375rem;
    border: 1px solid transparent;
}

.sprawdzarka__wynik::before {
    font-weight: 700;
    flex-shrink: 0;
}

.sprawdzarka__wynik.jest-tak {
    background-color: hsl(var(--primary) / 0.1);
    border-color: hsl(var(--primary) / 0.3);
    color: hsl(var(--primary-dark));
}
.sprawdzarka__wynik.jest-tak::before { content: "✓"; }

.sprawdzarka__wynik.jest-moze {
    background-color: hsl(var(--accent) / 0.14);
    border-color: hsl(var(--accent) / 0.4);
    color: hsl(var(--accent-foreground));
}
.sprawdzarka__wynik.jest-moze::before { content: "~"; }

.sprawdzarka__wynik.jest-nie {
    background-color: hsl(var(--muted));
    border-color: hsl(var(--border));
    color: hsl(var(--foreground));
}
.sprawdzarka__wynik.jest-nie::before { content: "!"; }

.sprawdzarka__wynik a {
    font-weight: 600;
    color: hsl(var(--primary));
    text-decoration: underline;
    text-underline-offset: 2px;
    white-space: nowrap;
}

/* ==========================================================================
   14. SEKCJA CTA
   ========================================================================== */
.cta {
    /* Ciemna zieleń z logo (#274b1b) — ten odcień niesie markę.
       Rozjaśniona wersja wychodziła blada, więc jasna zieleń wróciła
       do roli akcentu, a nie tła całej sekcji. */
    background-color: hsl(var(--secondary));
    color: hsl(var(--secondary-foreground));
    text-align: center;
}

.cta__ikona {
    display: block;
    width: 3.5rem;
    height: 3.5rem;
    margin-inline: auto;
    margin-bottom: 1.5rem;
    color: hsl(var(--primary-bright));   /* jasna zieleń jako akcent — tu działa */
}

.cta__ikona svg { width: 100%; height: 100%; }

.cta h2 {
    font-size: clamp(1.625rem, 1.2rem + 2vw, 2.25rem);
    margin-bottom: 1rem;
}

.cta p {
    max-width: 36rem;
    margin-inline: auto;
    margin-bottom: 2rem;
    color: hsl(var(--secondary-foreground) / 0.82);
}

.cta__przyciski {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    align-items: stretch;
}

@media (min-width: 640px) {
    .cta__przyciski {
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }
}

.cta .btn--jasny {
    background-color: hsl(var(--card));
    color: hsl(var(--secondary));
}

.cta .btn--jasny:hover { background-color: hsl(94 20% 96%); }

.cta .btn--outline {
    background-color: transparent;
    border-color: hsl(var(--secondary-foreground) / 0.4);
    color: hsl(var(--secondary-foreground));
}

.cta .btn--outline:hover {
    background-color: hsl(var(--secondary-foreground) / 0.12);
    border-color: hsl(var(--secondary-foreground));
}

/* ==========================================================================
   15. STOPKA
   ========================================================================== */
.stopka {
    background-color: hsl(var(--stopka));
    color: hsl(var(--secondary-foreground));
}

.stopka__gora {
    display: grid;
    gap: 2.5rem;
    padding-block: 3rem;
}

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

@media (min-width: 1024px) {
    .stopka__gora {
        grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
        gap: 3rem;
        padding-block: 4rem;
    }
}



.stopka__opis {
    font-size: 0.875rem;
    color: hsl(var(--secondary-foreground) / 0.75);
    margin-top: 1rem;
    max-width: 22rem;
}

.stopka h3 {
    font-family: var(--font-tekst);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: hsl(var(--secondary-foreground) / 0.55);
    margin-bottom: 1rem;
}

.stopka__lista {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.stopka__lista a {
    font-size: 0.875rem;
    color: hsl(var(--secondary-foreground) / 0.8);
    transition: color 0.15s;
}

.stopka__lista a:hover { color: hsl(var(--primary-bright)); }

.stopka__kontakt {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

.stopka__kontakt-poz {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    font-size: 0.875rem;
    color: hsl(var(--secondary-foreground) / 0.85);
}

.stopka__kontakt-poz svg {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    margin-top: 0.2rem;
    color: hsl(var(--primary-bright));
}

a.stopka__kontakt-poz:hover { color: hsl(var(--primary-bright)); }

.stopka__telefon {
    font-family: var(--font-naglowki);
    font-size: 1.25rem;
    font-weight: 700;
    color: hsl(var(--secondary-foreground));
}

.stopka__godziny {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.375rem 1rem;
    font-size: 0.8125rem;
    color: hsl(var(--secondary-foreground) / 0.8);
}

.stopka__godziny dt { font-weight: 500; }
.stopka__godziny dd { font-variant-numeric: tabular-nums; }
.stopka__godziny .nieczynne { color: hsl(var(--secondary-foreground) / 0.5); }

.stopka__dol {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding-block: 1.5rem;
    border-top: 1px solid hsl(var(--secondary-foreground) / 0.12);
    font-size: 0.8125rem;
    color: hsl(var(--secondary-foreground) / 0.6);
    text-align: center;
}

@media (min-width: 768px) {
    .stopka__dol {
        flex-direction: row;
        justify-content: space-between;
        text-align: left;
    }
}

.stopka__prawne {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.25rem;
}

.stopka__prawne a:hover { color: hsl(var(--primary-bright)); }

/* ==========================================================================
   16. ANIMACJE
   Odpowiednik @keyframes fadeUp + .stagger-children z prototypu.
   Klasa .widoczny dokładana przez IntersectionObserver w js/main.js.
   ========================================================================== */
/* Stan ukryty NAKŁADAMY dopiero, gdy JS działa (klasa .ma-js na <html>).
   Odwrotna kolejność — „ukryj, a JS pokaże" — sprawia, że przy błędzie
   skryptu albo w narzędziu, które nie odpala IntersectionObservera,
   pół strony jest niewidoczne. */
.ma-js .pojaw {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.ma-js .pojaw.widoczny {
    opacity: 1;
    transform: translateY(0);
}

.opoznienie-1 { transition-delay: 0.05s; }
.opoznienie-2 { transition-delay: 0.1s; }
.opoznienie-3 { transition-delay: 0.15s; }
.opoznienie-4 { transition-delay: 0.2s; }
.opoznienie-5 { transition-delay: 0.25s; }
.opoznienie-6 { transition-delay: 0.3s; }

@media (prefers-reduced-motion: reduce) {
    .ma-js .pojaw {
        opacity: 1;
        transform: none;
        transition: none;
    }
    .btn:active { transform: none; }
    .usluga:hover { transform: none; }
}

/* ==========================================================================
   17. BANER COOKIES
   Skrypty analityczne ładowane DOPIERO po zgodzie — sam komunikat
   „informujemy, że używamy" nie ma wartości prawnej.
   ========================================================================== */
.cookies {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--z-cookies);
    padding: 1rem;
    padding-bottom: max(1rem, env(safe-area-inset-bottom));
    background-color: hsl(var(--card));
    border-top: 1px solid hsl(var(--border));
    box-shadow: var(--shadow-2xl);
}

.cookies__inner {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: var(--kontener-max);
    margin-inline: auto;
}

@media (min-width: 900px) {
    .cookies__inner {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 2rem;
    }
}

.cookies__tekst {
    font-size: 0.875rem;
    color: hsl(var(--muted-foreground));
}

.cookies__tekst a {
    color: hsl(var(--primary));
    text-decoration: underline;
    text-underline-offset: 2px;
}

.cookies__przyciski {
    display: flex;
    gap: 0.75rem;
    flex-shrink: 0;
}

.cookies__przyciski .btn { flex: 1; }

@media (min-width: 900px) {
    .cookies__przyciski .btn { flex: none; min-width: 9rem; }
}

/* ==========================================================================
   18. DROBIAZGI
   ========================================================================== */
.tylko-dla-czytnikow {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

.tekst-waski { max-width: var(--tekst-max); }

/* Przełączanie treści między telefonem a desktopem — używane tam, gdzie
   numer telefonu ma sens tylko na dużym ekranie (na telefonie stoi
   w przyklejonym pasku, a przycisk i tak otwiera dzwonienie). */
.tylko-desktop { display: none; }

@media (min-width: 1180px) {
    .tylko-desktop { display: inline; }
    .bez-desktopu { display: none; }
}