/* Okienko Pobierz, jeden moduł dla całej strony (scripts/shared_chrome.py wstawia HTML okienka,
   ten arkusz i assets/js/pobierz-okienko.js na stronach, których przycisk nagłówka otwiera okienko).
   Projekt zaakceptowany przez Mirka 11.11.2026: DO_OCENY/AIBIZNESLAB/2026-11-11_pobierz-glowna
   (projekt-komputer-okienko.png, projekt-telefon.png). Styl FRAME: biała karta, cienka czarna
   rama, kwadratowe rogi, bez cienia, tło strony przyciemnione płaską warstwą, fiolet tylko na
   przyciskach. Pola formularza, zgoda, przycisk i pułapka na boty to klasy z frame.css, które
   ładuje każda strona z okienkiem. Mirek 11.11.2026 (decyzja 3): to samo okienko na stronie głównej,
   w artykułach, recenzjach i na stronach bez własnego wezwania. */

.pobierz-dialog {
    width: min(46rem, calc(100% - 2rem));
    max-width: none;
    max-height: calc(100dvh - 2rem);
    margin: auto;
    padding: 0;
    border: 1px solid var(--frame-ink);
    border-radius: 0;
    background: #fff;
    color: var(--frame-ink);
    box-shadow: none;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.pobierz-dialog::backdrop {
    background: oklch(14% 0.014 295 / 0.58);
}

.pobierz-dialog[open] {
    animation: pobierz-pojawienie 150ms var(--frame-ease);
}

@keyframes pobierz-pojawienie {
    from { opacity: 0; }
    to { opacity: 1; }
}

html.pobierz-open {
    overflow: hidden;
}

.pobierz-card {
    position: relative;
    padding: 2.5rem;
}

.pobierz-close {
    position: absolute;
    top: 0.75rem;
    right: 2.25rem; /* WHY: znak × kończy się równo z prawą krawędzią pola email, jak w projekcie */
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 2.75rem;
    padding: 0 0.25rem;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
}

.pobierz-close span {
    font-size: 1.35rem;
    line-height: 1;
}

.pobierz-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 10.5rem;
    align-items: center;
    gap: 1.5rem;
    margin-top: 0;
}

.pobierz-eyebrow {
    margin: 0 0 1.4rem;
    font-size: 1.25rem; /* WHY: linia nad nagłówkiem okienka w projekcie ma około 20 px */
    font-weight: 700;
}

.pobierz-copy h2 {
    margin: 0;
    font-size: clamp(1.75rem, 3vw, 2.4rem); /* WHY: nagłówek okienka, w projekcie dwa wiersze mniejsze od nagłówka strony */
    line-height: 1.15;
    letter-spacing: -0.03em;
}

.pobierz-copy h2:focus {
    outline: none;
}

.pobierz-lead {
    margin: 1.25rem 0 0;
    font-size: 1.1rem; /* WHY: linia pod nagłówkiem okienka w projekcie jest większa od tekstu formularza */
    line-height: 1.5;
}

.pobierz-break {
    display: none;
}

.pobierz-art {
    display: block;
    width: 100%;
    height: auto;
}

.pobierz-body {
    margin-top: 2.25rem; /* WHY: odstęp między ryciną Gami a polem email z projektu */
}

.pobierz-form {
    display: grid;
    gap: 1.25rem;
}

.pobierz-form .frame-field-group label {
    font-size: 1.15rem; /* WHY: etykieta pola w projekcie okienka jest większa od małej etykiety formularza FRAME */
    font-weight: 600;
}

.pobierz-form .frame-field-group input {
    background: #fff;
}

.pobierz-consent label {
    font-size: 1rem; /* WHY: zgoda w projekcie okienka ma wielkość tekstu, nie małego dopisku */
}

.pobierz-error {
    margin-top: -0.75rem;
}

.pobierz-error:not([hidden]) {
    display: block;
}

.pobierz-form .pobierz-submit {
    justify-content: center;
    min-height: 4.1rem;
    margin-top: 0.9rem; /* WHY: większy odstęp między zgodą a przyciskiem z projektu */
    font-size: 1.6rem; /* WHY: główny przycisk okienka w projekcie jest większy od zwykłego przycisku FRAME; dwie klasy, bo frame.css ustawia font: inherit na przyciskach strony */
    font-weight: 700;
}

.pobierz-success {
    margin-top: 2rem;
    padding: 1.5rem 0 0.5rem;
    border-top: 1px solid var(--frame-ink);
}

.pobierz-success[hidden] {
    display: none;
}

.pobierz-success-text {
    margin: 0 0 0.75rem;
    font-size: 1.25rem;
    font-weight: 700;
}

@media (max-width: 767px) {
    .pobierz-dialog {
        width: calc(100% - 2rem);
        max-height: calc(100dvh - 5.75rem);
        margin: 4.25rem 1rem auto; /* WHY: okienko zaczyna się tuż pod nagłówkiem strony, 16 px od krawędzi ekranu, jak w projekcie telefonu */
    }

    .pobierz-card {
        padding: 1.5rem 1.25rem 1.5rem;
    }

    .pobierz-close {
        top: 0.75rem;
        right: 1rem;
    }

    .pobierz-head {
        grid-template-columns: 1fr;
        gap: 1rem;
        margin-top: 0;
    }

    .pobierz-art {
        order: -1;
        width: 5.5rem; /* WHY: od 12.11.2026 okienko ma pole Imię; mniejszy Gami zostawia przycisk na pierwszym ekranie telefonu 390x844 (ocena recenzenta) */
    }

    .pobierz-eyebrow {
        margin-bottom: 0.9rem;
        font-size: 1rem;
    }

    .pobierz-copy h2 {
        font-size: 1.75rem;
    }

    .pobierz-lead {
        margin-top: 0.9rem;
    }

    .pobierz-break {
        display: inline;
    }

    .pobierz-body {
        margin-top: 1.5rem;
    }

    .pobierz-form .pobierz-submit {
        min-height: 3rem;
        margin-top: 0.25rem;
        padding-block: 0.6rem; /* WHY: przycisk okienka na telefonie w projekcie ma około 48 px wysokości */
        font-size: 1.2rem;
    }

    .pobierz-form {
        gap: 1rem;
    }

    .pobierz-form .frame-field-group label {
        font-size: 0.95rem;
        font-weight: 500;
    }

    .pobierz-consent label {
        font-size: 0.85rem;
    }

    .pobierz-error {
        margin-top: -0.5rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pobierz-dialog[open] {
        animation: none;
    }
}