/* ==========================================================================
   CHAPTER.CSS
   --------------------------------------------------------------------------
   Narracyjna nawigacja serwisu
   Pominkiewicz Fine Art Photography

   Zawartość:

   1. Górna nawigacja rozdziałów
   2. Dolna sekcja „Następny rozdział”
   3. Linia nawigacyjna
   4. Hover
   5. Responsive
========================================================================== */





/* ==========================================================================
   1. GÓRNA NAWIGACJA ROZDZIAŁÓW

   Funkcja:
   Pokazuje miejsce użytkownika w opowieści.
   Nie konkuruje z menu ani Hero.
========================================================================== */

.story-progress{

    width:100%;
    max-width:1180px;

    margin:18px auto 0;
    padding:12px 30px 0;

    display:flex;
    justify-content:space-between;
    align-items:center;

    border-top:1px solid rgba(255,255,255,.05);

    font-size:.62rem;
    letter-spacing:.34em;
    text-transform:uppercase;

    color:rgba(255,255,255,.28);

}




/* ==========================================================================
   2. DOLNA SEKCJA

   Funkcja:
   Kończy bieżący rozdział
   i zaprasza do kolejnego.
========================================================================== */

.story-next{

    max-width:760px;

    margin: 60px auto 10px;

    text-align:center;

    padding:0 24px;

}

.story-next-line{

    width:100%;
    height:1px;

    background:rgba(255,255,255,.05);

    margin-bottom:70px;

}

.story-next-overline{

    font-size:.70rem;

    letter-spacing:.35em;

    text-transform:uppercase;

    color:rgba(255,255,255,.28);

}

.story-next-title{

    display:inline-block;

    margin-top:22px;

    font-family:'Cormorant Garamond',serif;

    font-size:clamp(2rem,5vw,3.6rem);

    line-height:1.1;

    color:white;

    text-decoration:none;

}

.story-next-description{

    max-width:520px;

    margin:34px auto 0;

    line-height:2;

    color:rgba(255,255,255,.45);

}





/* ==========================================================================
   3. LINIA NAWIGACYJNA

   Funkcja:
   Powtarza orientację użytkownika.

   ← Poprzedni    II / VI    Następny →
========================================================================== */

.story-next-footer{

    width:100%;

    display:flex;

    justify-content:space-between;

    align-items:center;

    max-width:760px;

    margin:70px auto 0;

    padding-top:28px;

    border-top:1px solid rgba(255,255,255,.05);

    font-size:.62rem;

    letter-spacing:.34em;

    text-transform:uppercase;

    color:rgba(255,255,255,.28);

}

.story-progress-current{

    color:rgba(255,255,255,.20);

    letter-spacing:.45em;

    user-select:none;

    pointer-events:none;

}





/* ==========================================================================
   4. LINKI I HOVER

   Funkcja:
   Delikatne reakcje.
   Bez gwałtownych animacji.
========================================================================== */

.story-progress a,
.story-next-footer a,
.story-next-title{

    color:inherit;

    text-decoration:none;

    transition:
        color .35s ease,
        transform .35s ease,
        letter-spacing .35s ease;

}

.story-progress a:hover,
.story-next-footer a:hover{

    color:rgba(255,255,255,.75);

}

.story-next-title:hover{

    color:white;

    letter-spacing:.03em;

}

.story-progress-prev:hover{

    transform:translateX(-4px);

}

.story-progress-next:hover{

    transform:translateX(4px);

}





/* ==========================================================================
   5. RESPONSIVE

   Telefony
========================================================================== */

@media (max-width:768px){

    .story-progress{

        padding:10px 18px 0;

        font-size:.52rem;

        letter-spacing:.18em;

    }

    .story-progress-current{

        letter-spacing:.25em;

    }

    .story-next{

        margin:120px auto 90px;

        padding:0 20px;

    }

    .story-next-line{

        margin-bottom:50px;

    }

    .story-next-title{

        font-size:2.3rem;

    }

    .story-next-description{

        line-height:1.9;

        font-size:.95rem;

    }

    .story-next-footer{

        margin-top:55px;

        font-size:.52rem;

        letter-spacing:.18em;

    }

}

/* ==========================================================================
   6. DODATEK DLA GALERII I SUB-NAWIGACJI (ROZSZERZENIE)

   Funkcja:
   Obsługuje specyficzne elementy podstron artystycznych,
   zachowując 100% spójności z głównym nurtem.
========================================================================== */

/* Zapewnienie poprawnego koloru bazowego dla linków z footeru i progressu */
.story-progress a,
.story-next-footer a {
    color: rgba(255, 255, 255, .28); /* dopasowanie do koloru overline i progress */
}

/* Gdy tytuł jest divem (zakończenie pętli opowiadań) */
div.story-next-title {
    cursor: default;
    pointer-events: none;
    font-weight: 300;
    max-width: 600px;
    margin: 22px auto 0;
}

/* Korekta dla dłuższych liczników tekstowych w galeriach, np. "Księga II / Opowieść I" */
.story-progress-current {
    font-weight: 300;
    white-space: nowrap; /* zakaz łamania licznika na dwie linie */
}

/* Optymalizacja mobilna dla długich liczników */
@media (max-width: 768px) {
    
    .story-progress-current {
        letter-spacing: .12em; /* lekki upust dla ciasnych ekranów smartfonów */
    }
    
    /* Gwarancja czytelności dla dłuższego tekstu w stopce galerii */
    .story-next-footer {
        padding-top: 20px;
        margin-top: 50px;
    }
}