/* QUIZ "NA JAKIM ETAPIE Z AI JESTEŚ" (kampania Master V), page-specific styles.
 * Reużywa design systemu v2: tokens.css, .container/.eyebrow/.serif-accent/.btn/
 * .btn-accent/.btn-block/.form-group/.form-error z core.css. Tu tylko klasy quizu,
 * których nie ma w design systemie (ekrany, hero z grafiką, pasek postępu, wynik,
 * sekcja share). Źródło treści i układu: zaakceptowana makieta
 * PROJEKTY/MASTER/MASTER-V/leadmagnet-quiz-makieta (flow mail first). */

.quiz-wrap {
    max-width: 720px; /* WHY: kontener v2 ma 1240px; quiz to jedna kolumna decyzji, przy pełnej szerokości odpowiedzi są nieczytelnie długie */
}

/* ===== Ekrany quizu ===== */
.quiz-screen { display: none; }
.quiz-screen.active { display: block; }

/* Start */
.quiz-hero { text-align: center; padding-top: 24px; }
.quiz-hero h1 {
    margin: 20px auto 16px;
    max-width: 700px; /* WHY: nagłówek ma się łamać na 2 linie, nie 3 (korekta właściciela 24.07) */
    font-size: clamp(1.8rem, 3.6vw, 2.2rem);
}
.quiz-hero p {
    max-width: 46ch;
    margin: 0 auto 28px; /* WHY: wyśrodkowany lead pod nagłówkiem hero; globalny <p> nie centruje się sam w wąskiej kolumnie */
}

/* Mikrokopia pod CTA. Selektor MUSI zostać dwuklasowy: samo .hero-micro (0,1,0)
 * przegrywa z .quiz-hero p (0,1,1) i margines był martwy, tekst kleił się do guzika
 * na zero pikseli (korekta właściciela 25.07). Font i kolor dziedziczy po <p>
 * z design systemu, zero monospace w tekście czytanym przez klienta. */
.quiz-hero .hero-micro {
    margin: 24px auto 0; /* WHY: rytm 8px strony (lead ma 28px pod sobą); 26px było wartością z palca i tak nie działało */
    font-size: 0.9rem;
}

/* Grafika hero: skala 10 poziomów, deterministyczny SVG (generator:
 * NARZEDZIA/OPENAI_IMAGE/master_v_quiz/gen_piramida.py, produkcja
 * assets/images/etap-ai-piramida.svg). Dziesięć warstw = dziesięć poziomów z copy. */
.quiz-hero-img {
    display: block;
    max-width: 520px;
    width: 100%;
    height: auto;
    margin: 36px auto 0;
    border: 1px solid var(--border);
    border-radius: var(--radius, 14px);
}

/* Pytania */
.quiz-progress {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-faint);
    margin-bottom: 8px;
    display: flex; justify-content: space-between; align-items: center;
}
.quiz-bar {
    height: 4px; border-radius: 999px;
    background: var(--bg-elev-2);
    margin-bottom: 36px;
    overflow: hidden;
}
.quiz-bar-fill {
    height: 100%; width: 100%;
    background: var(--accent);
    border-radius: 999px;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}
.quiz-question h2 {
    font-size: clamp(1.4rem, 3vw, 1.9rem); /* WHY: pytanie quizu jest krótsze niż h2 sekcji marketingowej; skala z makiety utrzymuje 1-2 linie */
    margin-bottom: 28px;
}

.quiz-answers { display: grid; gap: 12px; }
.quiz-answer-hint {
    margin-top: 14px;
    font-size: 0.86rem;
    color: var(--text-mute);
    text-align: center;
    text-wrap: balance;
}
.quiz-answer {
    text-align: left;
    padding: 16px 18px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    background: var(--bg-elev-1);
    font-family: var(--font-sans);
    font-size: 0.95rem;
    color: var(--text);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}
.quiz-answer:hover {
    border-color: var(--accent);
    background: var(--accent-soft);
    transform: translateY(-1px);
}
.quiz-answer:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Bramka mailowa (krok 1 z 2, przed pytaniami) */
.quiz-gate {
    text-align: center;
    max-width: 440px;
    margin: 16px auto 0; /* WHY: bramka to jedna decyzja (mail), węższa kolumna skraca linie i skupia wzrok na polu */
}
.quiz-gate h2 { margin-bottom: 12px; }
.quiz-gate p { margin: 0 auto 24px; }
.quiz-gate form { text-align: left; }
.quiz-consent {
    display: flex; gap: 10px; align-items: flex-start;
    font-size: 0.8rem; color: var(--text-faint);
    margin-bottom: 20px;
}
.quiz-consent input { margin-top: 3px; accent-color: var(--accent); }
.quiz-consent label { text-wrap: pretty; }

/* Wynik */
.quiz-result { text-align: center; }
.result-card {
    max-width: 480px;
    margin: 24px auto 32px;
    padding: 36px 32px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    background: var(--bg-elev-1);
}
/* Główna informacja karty: numer poziomu po ludzku, bez skrótu LVL
 * (decyzja językowa 25.07: „Poziom 5 z 10", zero żargonu do rozszyfrowania).
 * Serif akcentowy z v2, ten sam stopień co poprzednia nazwa poziomu. */
.result-level {
    font-family: var(--font-serif);
    font-size: clamp(2rem, 5vw, 2.8rem);
    line-height: 1.1;
    color: var(--accent);
    margin-bottom: 16px;
    text-wrap: balance;
}
.result-desc {
    margin: 0 auto;
    max-width: 40ch; /* WHY: opis poziomu wyśrodkowany w karcie; bez limitu linia sięga krawędzi karty i łamie się nierówno */
    text-wrap: pretty;
}
/* Autorska nazwa poziomu jako podpis, nigdy jako główna informacja.
 * Hierarchię robi stopień i pozycja, nie słabszy kontrast (czytelność małego tekstu). */
.result-codename {
    margin: 16px auto 0;
    max-width: 40ch;
    font-size: 0.85rem;
    text-wrap: pretty;
}
.result-calibration {
    margin: 20px auto 0;
    padding-top: 20px;
    max-width: 42ch;
    border-top: 1px solid var(--border);
    font-size: 0.82rem;
    color: var(--text-dim);
    text-wrap: pretty;
}
.result-next {
    max-width: 480px;
    margin: 0 auto;
    padding: 24px 28px;
    border: 1px solid var(--accent-line);
    border-radius: var(--radius);
    background: var(--accent-soft);
    text-align: left;
}
.result-next h3 { font-size: 1.05rem; margin-bottom: 8px; }
.result-next p { font-size: 0.92rem; text-wrap: pretty; }

/* Sekcja share, grywalizacja i viral */
.result-share {
    max-width: 480px;
    margin: 16px auto 0;
    padding: 24px 28px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    background: var(--bg-elev-1);
}
.result-share h3 { font-size: 1.05rem; margin-bottom: 16px; }
.result-share-intro {
    margin: 0 0 20px;
    font-size: 0.9rem;
    text-align: left;
    color: var(--text-dim);
    text-wrap: pretty;
}
.result-share-preview {
    margin: 0 auto 20px;
    max-width: 380px;
}
.result-share-preview img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--bg-elev-2);
    box-shadow: 0 12px 30px rgba(10, 10, 10, 0.10);
}
.result-share-preview figcaption {
    margin-top: 8px;
    font-size: 0.76rem;
    color: var(--text-dim);
    text-align: left;
}
.result-share-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.btn-share-native {
    width: 100%;
}
.btn-share {
    width: 100%;
    background: var(--bg-elev-1);
    color: var(--text);
    border-color: var(--border-strong);
    text-decoration: none;
}
.btn-share:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-soft);
    transform: translateY(-1px);
}
.btn-share.is-copied {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-soft);
}
.btn-share:disabled {
    cursor: wait;
    opacity: 0.58;
    transform: none;
}
.result-share-status {
    margin: 14px 0 0;
    font-size: 0.76rem;
    line-height: 1.5;
    color: var(--text-dim);
    text-align: left;
    text-wrap: pretty;
}

@media (max-width: 540px) {
    .quiz-hero-img { max-width: 100%; }
    .result-card,
    .result-next,
    .result-share {
        padding-left: 20px;
        padding-right: 20px;
    }
    .result-share-preview {
        max-width: 320px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .quiz-bar-fill,
    .quiz-answer,
    .btn-share {
        transition: none;
    }
}