/* ============================================
   MIROBURN, sekcje strony głównej (30.10.2026)
   Karta marki: kość słoniowa, czerń, szampańskie złoto,
   Cormorant Garamond do nagłówków, Inter do tekstu.
   Ładowany wyłącznie przez index.html, po style-v2.css.
   ============================================ */

.home-page {
    --mb-papier: #F5F1E8;
    --mb-tusz: #1A1A1A;
    --mb-tusz-miekki: rgba(26, 26, 26, 0.78);
    --mb-zloto: #C9A96E;
    --mb-linia: rgba(26, 26, 26, 0.3);
    --mb-linia-mocna: rgba(26, 26, 26, 0.7);
    --mb-pole: #FBF9F4;
    --mb-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    --mb-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --mb-margines: clamp(24px, 4vw, 56px); /* WHY: ten sam margines co .container, pasek stoi w osi sekcji */
}

.home-page::before {
    content: none; /* WHY: ziarno ze style-v2.css przyciemnia tło strony poniżej #F5F1E8 z karty marki i odcina je od paska */
}

.mb-strona {
    background: var(--mb-papier);
    color: var(--mb-tusz);
    font-family: var(--mb-sans);
    font-variant-numeric: lining-nums; /* WHY: Cormorant domyślnie ma cyfry nautyczne, projekt pokazuje „100” i „18:00” cyframi tabelarycznymi */
    letter-spacing: 0;
}

/* -- Górny pasek ------------------------------------------- */
/* Ten arkusz ładuje tylko index.html: lista.html, pp.html i regulamin.html
   zostają przy pasku ze style-v2.css. */
.topnav {
    background: var(--mb-papier);
    backdrop-filter: none; /* WHY: pasek na pełnym tle papieru, jak w projekcie */
    -webkit-backdrop-filter: none;
    border-bottom: 0; /* WHY: linia na szerokości treści, nie całego okna (::after niżej) */
}

.topnav-inner {
    position: relative;
    height: 80px; /* WHY: wyższy niż 60 px ze style-v2.css, bo znak słowny ma w projekcie 40 px */
    padding: 0 var(--mb-margines);
}

.topnav-inner::after {
    content: "";
    position: absolute;
    left: var(--mb-margines);
    right: var(--mb-margines);
    bottom: 0;
    border-bottom: 1px solid var(--mb-linia-mocna);
}

.topnav-brand {
    font-family: var(--mb-serif);
    font-size: 40px; /* WHY: znak słowny z projektu, karta marki: Cormorant Garamond małymi literami */
    font-weight: 700;
    line-height: 1;
    color: var(--mb-tusz);
}

.topnav-status {
    gap: 6px;
    font-family: var(--mb-sans);
    font-size: 18px; /* WHY: licznik z projektu, Inter jak tekst sekcji */
    color: var(--mb-tusz);
    font-feature-settings: normal;
}

.topnav-count {
    font-variant-numeric: tabular-nums; /* WHY: cyfry licznika nie skaczą podczas animacji po załadowaniu */
}

.topnav-brand:focus-visible {
    outline: 2px solid var(--mb-tusz);
    outline-offset: 3px;
}

/* -- Rama sekcji ------------------------------------------- */
.mb-sekcja {
    scroll-margin-top: 84px; /* WHY: przyklejona nawigacja ma 80 px wysokości */
    padding-top: 56px;
    padding-bottom: 72px;
}

/* Linia nad sekcją przez całą ramę kontenera, szersza niż tekst, jak w projekcie */
.mb-sekcja::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    border-top: 1px solid var(--mb-linia-mocna);
}

.mb-lamanie {
    display: none;
}

.mb-tytul {
    font-family: var(--mb-serif);
    font-weight: 600; /* WHY: zaakceptowane projekty sekcji mają mocniejszy nagłówek niż waga 500 */
    font-size: clamp(44px, 5vw, 72px);
    line-height: 1.02;
    letter-spacing: -0.01em;
    color: var(--mb-tusz);
    text-wrap: balance;
}

.mb-lead {
    font-size: 19px;
    line-height: 1.5;
    color: var(--mb-tusz);
    text-wrap: pretty;
}

.mb-lead-maly {
    font-size: 17px;
    line-height: 1.5;
    color: var(--mb-tusz-miekki);
}

/* Przycisk obrysowany: „Najnowszy odcinek”, „Lista książek” */
.mb-przycisk {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 60px;
    padding: 0 40px;
    border: 1px solid var(--mb-tusz);
    font-family: var(--mb-sans);
    font-size: 18px;
    font-weight: 400;
    color: var(--mb-tusz);
    background: transparent;
    transition: background 0.2s ease, color 0.2s ease;
}

.mb-przycisk:hover {
    opacity: 1;
    background: var(--mb-tusz);
    color: var(--mb-papier);
}

.mb-link-zloty {
    font-family: var(--mb-sans);
    font-size: 19px;
    color: var(--mb-tusz); /* WHY: złoty tekst na papierze ma kontrast 1,99:1, złote zostaje podkreślenie */
    text-decoration: underline;
    text-decoration-color: var(--mb-zloto);
    text-decoration-thickness: 1px;
    text-underline-offset: 8px;
    white-space: nowrap;
}

.mb-strona a:focus-visible,
.mb-strona button:focus-visible,
.mb-strona input:focus-visible {
    outline: 2px solid var(--mb-tusz);
    outline-offset: 3px;
}

/* -- Teraz w grze ------------------------------------------ */
.mb-karty {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 40px;
    margin-top: 40px;
}

.mb-karta {
    display: flex;
    flex-direction: column;
}

.mb-karta-obraz {
    border: 1px solid var(--mb-linia-mocna);
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--mb-papier);
}

.mb-karta-obraz img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mb-karta-tekst {
    flex: 1;
    padding: 26px 0 28px;
    border-bottom: 1px solid var(--mb-linia-mocna);
}

.mb-karta-tytul {
    font-family: var(--mb-serif);
    font-weight: 500;
    font-size: 34px;
    line-height: 1.1;
    color: var(--mb-tusz);
    text-wrap: balance;
}

.mb-karta-opis {
    margin-top: 12px;
    font-size: 16.5px;
    line-height: 1.5;
    color: var(--mb-tusz-miekki);
    text-wrap: pretty;
}

/* -- Załatwione -------------------------------------------- */
.mb-lista {
    list-style: none;
    margin-top: 40px;
    border-top: 1px solid var(--mb-linia-mocna);
}

.mb-lista-wiersz {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 32px;
    padding: 28px 0 32px;
    border-bottom: 1px solid var(--mb-linia-mocna);
}

.mb-lista-tytul {
    font-family: var(--mb-serif);
    font-weight: 500;
    font-size: 34px;
    line-height: 1.1;
}

.mb-lista-opis {
    margin-top: 8px;
    font-size: 18px;
    line-height: 1.5;
    color: var(--mb-tusz-miekki);
}

/* -- Daj mi questa ----------------------------------------- */
.mb-pas {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 48px;
}

.mb-pas-tekst .mb-lead {
    margin-top: 18px;
}

.mb-pas-tekst .mb-lead + .mb-lead {
    margin-top: 6px;
}

.mb-pas .mb-przycisk {
    min-width: 330px;
}

/* -- Wtorek, 18:00 ----------------------------------------- */
.mb-newsletter {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 56px;
    align-items: center;
}

.mb-newsletter-tekst .mb-lead {
    margin-top: 22px;
}

.mb-newsletter-tekst .mb-lead-maly {
    margin-top: 18px;
}

.mb-formularz-pola {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

.mb-pole {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.mb-pole label {
    font-size: 17px;
    font-weight: 500;
    color: var(--mb-tusz);
}

.mb-pole input {
    font: inherit;
    font-size: 17px;
    height: 56px;
    padding: 0 18px;
    border: 1px solid var(--mb-linia-mocna);
    border-radius: 0;
    background: var(--mb-pole);
    color: var(--mb-tusz);
}

.mb-pole input::placeholder {
    color: rgba(26, 26, 26, 0.5);
}

.mb-pole input:focus {
    outline: none;
    border-color: var(--mb-tusz);
}

.mb-zgody {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 28px 0;
}

.mb-zgody label {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
    font-size: 16px;
    line-height: 1.5;
    color: var(--mb-tusz);
    cursor: pointer;
}

.mb-zgody input[type="checkbox"] {
    width: 24px;
    height: 24px;
    margin: 0;
    accent-color: var(--mb-tusz);
    cursor: pointer;
}

.mb-zgody a {
    color: var(--mb-tusz);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.mb-zapisz {
    width: 100%;
    min-height: 64px;
    background: var(--mb-zloto);
    color: var(--mb-tusz); /* WHY: jasny napis na złocie ma kontrast 1,99:1, czerń z karty marki daje 7,78:1 */
    font-family: var(--mb-serif);
    font-weight: 500;
    font-size: 28px;
    letter-spacing: 0;
    border: 0;
    border-radius: 0;
    cursor: pointer;
    transition: background 0.2s ease;
}

.mb-zapisz:hover {
    background: #B8975A; /* WHY: ciemniejszy odcień złota tylko jako stan najechania */
}

.mb-zapisz:disabled {
    opacity: 0.7;
    cursor: progress;
}

/* Komunikaty z script-v2.js w barwach karty marki */
.mb-newsletter .form-status {
    margin-top: 16px;
    border-radius: 0;
    font-family: var(--mb-sans);
    font-size: 15px;
    background: var(--mb-pole);
    color: var(--mb-tusz);
    border: 1px solid var(--mb-linia-mocna);
}

.mb-newsletter .success-message {
    background: var(--mb-pole);
    border: 1px solid var(--mb-linia-mocna);
    border-radius: 0;
    padding: 32px;
}

.mb-newsletter .success-message .success-icon {
    background: var(--mb-zloto);
    color: var(--mb-tusz); /* WHY: jasny znak na złocie miał kontrast 1,99:1, czerń daje 7,78:1 */
}

.mb-newsletter .success-message h2 {
    font-family: var(--mb-serif);
    font-weight: 500;
    font-size: 32px;
    margin-bottom: 8px; /* WHY: komunikat wstawiany przez skrypt, odstęp tytułu od opisu */
}

.mb-newsletter .success-message p {
    font-size: 16px;
    color: var(--mb-tusz-miekki);
}

/* -- Biblioteka -------------------------------------------- */
.mb-biblioteka {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    gap: 48px;
    align-items: center;
}

.mb-biblioteka-tekst .mb-lead {
    margin-top: 20px;
}

.mb-biblioteka-tekst .mb-przycisk {
    margin-top: 36px;
    min-width: 280px;
}

.mb-biblioteka-obraz img {
    width: 100%;
}

/* -- Droga w górę ------------------------------------------ */
.mb-droga .mb-lead {
    margin-top: 16px;
}

.mb-droga-scena {
    --mb-poziom-1: 16.5%;
    position: relative;
    margin-top: 24px;
}

.mb-droga-obraz {
    width: 70%;
}

.mb-droga-obraz img {
    width: 100%;
}

.mb-os {
    position: relative;
    height: 32px;
    margin-top: 4px;
}

.mb-os-linia {
    position: absolute;
    left: 0;
    right: 9%;
    top: 50%;
    border-top: 1px solid var(--mb-tusz);
}

.mb-os-dalej {
    position: absolute;
    left: 91%;
    right: 0;
    top: 50%;
    border-top: 2px dotted var(--mb-tusz);
}

.mb-os-punkt {
    position: absolute;
    top: 50%;
    width: 28px;
    height: 28px;
    margin: -14px 0 0 -14px;
    border: 1px solid var(--mb-tusz);
    border-radius: 50%;
    background: var(--mb-papier);
}

.mb-os-punkt.is-teraz {
    left: var(--mb-poziom-1);
    background: var(--mb-zloto);
    border-color: var(--mb-zloto);
}

.mb-os-punkt:nth-child(4) { left: 38%; }
.mb-os-punkt:nth-child(5) { left: 59.5%; }
.mb-os-punkt:nth-child(6) { left: 81%; }

.mb-poziom {
    width: 420px;
    margin-left: calc(var(--mb-poziom-1) - 210px); /* WHY: podpis wyśrodkowany pod pierwszym punktem osi */
    padding-top: 14px;
    text-align: center;
}

.mb-poziom-nr {
    font-size: 16px;
    color: rgba(26, 26, 26, 0.6);
}

.mb-poziom-nazwa {
    margin-top: 6px;
    font-family: var(--mb-serif);
    font-weight: 500;
    font-size: 26px;
    line-height: 1.15;
}

/* -- Górna sekcja ------------------------------------------ */
.mb-gora {
    --mb-portret: clamp(300px, 31vw, 372px);
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--mb-portret);
    align-items: center;
    padding-top: 48px; /* WHY: odstęp pod linią paska z projektu */
    padding-bottom: 68px; /* WHY: odstęp nad linią sekcji „Teraz w grze” z projektu */
}

.mb-gora::before {
    content: none; /* WHY: nad górną sekcją stoi linia paska, nie linia sekcji */
}

.mb-gora-tytul {
    font-family: var(--mb-serif);
    font-weight: 700; /* WHY: nagłówek górnej sekcji w projekcie jest mocniejszy niż nagłówki sekcji (600) */
    font-size: clamp(60px, 6.95vw, 100px);
    line-height: 1;
    letter-spacing: -0.02em; /* WHY: ciaśniejszy skład dużego nagłówka, jak w projekcie */
    color: var(--mb-tusz);
    text-wrap: balance;
}

.mb-gora-haslo {
    margin-top: 16px;
    font-family: var(--mb-serif);
    font-weight: 600; /* WHY: hasło w projekcie ma wyraźnie mocniejszą kreskę niż zwykły tekst szeryfowy */
    font-size: clamp(36px, 3.75vw, 54px);
    line-height: 1.1;
    color: var(--mb-tusz);
}

.mb-gora-przycisk {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 261px; /* WHY: szerokość przycisku z projektu, nie 100% jak w formularzu */
    min-height: 68px;
    margin-top: 40px;
    font-family: var(--mb-sans); /* WHY: karta marki: przyciski Inter, w formularzu zostaje serif z projektu tej sekcji */
    font-size: 20px;
    font-weight: 400;
}

.mb-gora-przycisk:hover {
    opacity: 1; /* WHY: globalne a:hover ze style-v2.css nie może przygasić przycisku */
}

.mb-gora-obrazy {
    position: relative;
}

.mb-gora-portret {
    aspect-ratio: 449 / 667; /* WHY: ramka z projektu; zdjęcie 2000x2001 pokazane w pełnej wysokości, głowa i dłonie w kadrze */
    border: 1px solid var(--mb-tusz);
    overflow: hidden;
    background: var(--mb-tusz);
}

.mb-gora-portret img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    filter: grayscale(1) contrast(1.05);
}

/* Ori stoi obok zdjęcia i schodzi lekko poniżej jego dolnej krawędzi, jak w projekcie */
.mb-gora-ori {
    position: absolute;
    right: calc(100% + 14px);
    bottom: -8px;
    width: calc(var(--mb-portret) * 0.3575);
}

.mb-gora-ori img {
    width: 100%;
    height: auto;
}

/* -- Tablet ------------------------------------------------ */
@media (max-width: 960px) {
    .mb-karty {
        gap: 24px;
    }

    .mb-karta-tytul,
    .mb-lista-tytul {
        font-size: 28px;
    }

    .mb-newsletter,
    .mb-biblioteka {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .mb-droga-obraz {
        width: 100%;
    }

    .mb-droga-scena {
        --mb-poziom-1: 23.5%;
    }
}

/* -- Górna sekcja w jednej kolumnie ------------------------ */
@media (max-width: 820px) {
    .mb-gora {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 28px;
        padding-top: 28px;
        padding-bottom: 40px;
    }

    .mb-gora-tytul {
        font-size: 11vw; /* WHY: bez kolumny zdjęcia nagłówek zajmuje większość szerokości, jak na telefonie */
    }

    .mb-gora-haslo {
        font-size: 5.6vw;
    }

    .mb-gora-obrazy {
        display: grid;
        grid-template-columns: 59% minmax(0, 1fr); /* WHY: zdjęcie po lewej, Ori na środku reszty, jak w projekcie na telefon */
        align-items: end;
        max-width: 560px; /* WHY: na tablecie zdjęcie nie rośnie ponad rozmiar z górnej sekcji na komputerze */
    }

    .mb-gora-portret {
        aspect-ratio: 467 / 596; /* WHY: ramka z projektu na telefon, szersza niż na komputerze; głowa i dłonie w kadrze */
    }

    .mb-gora-ori {
        position: static;
        justify-self: center;
        width: 63%;
    }
}

/* -- Telefon ----------------------------------------------- */
@media (max-width: 640px) {
    .topnav-inner {
        height: 60px; /* WHY: niższy pasek na telefonie, znak słowny 28 px */
    }

    .topnav-brand {
        font-size: 28px;
    }

    .topnav-status {
        font-size: 15px;
    }

    .mb-sekcja {
        scroll-margin-top: 64px; /* WHY: nawigacja na telefonie ma 60 px wysokości */
        padding-top: 44px;
        padding-bottom: 52px;
    }

    .mb-gora {
        padding-top: 28px;
        padding-bottom: 40px;
    }

    .mb-gora-tytul {
        font-size: 16vw; /* WHY: dwa wiersze „Side questy” i „z AI.”, jak w projekcie na telefon */
    }

    .mb-gora-haslo {
        margin-top: 10px;
        font-size: 7.6vw; /* WHY: hasło w jednym wierszu na każdej szerokości telefonu */
    }

    .mb-gora-przycisk {
        width: 100%;
        min-height: 60px;
        margin-top: 24px;
    }

    .mb-sekcja::before {
        left: 24px; /* WHY: na telefonie linia na szerokości tekstu, jak w projekcie */
        right: 24px;
    }

    .mb-tytul {
        font-size: clamp(44px, 13vw, 56px);
    }

    .mb-lead {
        font-size: 17px;
    }

    .mb-lamanie {
        display: inline; /* WHY: na telefonie zdania łamią się na granicy zdania, jak w projekcie */
    }

    .mb-karty {
        grid-template-columns: 1fr;
        gap: 0;
        margin-top: 28px;
    }

    .mb-karta {
        display: grid;
        grid-template-columns: minmax(0, 9fr) minmax(0, 11fr);
        gap: 16px;
        align-items: center;
        padding: 22px 0;
        border-bottom: 1px solid var(--mb-linia-mocna);
    }

    .mb-karta:first-child {
        border-top: 1px solid var(--mb-linia-mocna);
    }

    .mb-karta-tekst {
        padding: 0;
        border-bottom: 0;
    }

    .mb-karta-tytul {
        font-size: 25px;
    }

    .mb-karta-opis {
        margin-top: 8px; /* WHY: węższa kolumna tekstu obok ryciny na telefonie */
        font-size: 14px;
        text-wrap: balance; /* WHY: w wąskiej kolumnie wyrównane wiersze zamiast samotnego ogona */
    }

    .mb-lista-wiersz {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .mb-lista-tytul {
        font-size: 30px;
    }

    .mb-lista-opis {
        font-size: 17px;
    }

    .mb-pas {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .mb-pas .mb-przycisk,
    .mb-biblioteka-tekst .mb-przycisk {
        width: 100%;
        min-width: 0;
    }

    .mb-formularz-pola {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .mb-zgody label {
        font-size: 15px;
    }

    .mb-droga-obraz img {
        aspect-ratio: 1 / 1;
        object-fit: cover;
        object-position: 0 0;
    }

    .mb-droga-scena {
        --mb-poziom-1: 14px;
    }

    .mb-os-punkt.is-teraz {
        margin-left: -14px;
    }

    .mb-os-punkt:nth-child(4) { left: 31%; }
    .mb-os-punkt:nth-child(5) { left: 53%; }
    .mb-os-punkt:nth-child(6) { left: 75%; }

    .mb-os-linia {
        right: 14%;
    }

    .mb-os-dalej {
        left: 86%;
    }

    .mb-poziom {
        width: auto;
        margin-left: 0; /* WHY: na telefonie podpis od lewej, pod pierwszym punktem */
        text-align: left;
    }

    .mb-poziom-nazwa {
        font-size: 30px;
    }
}