/* Nasze style CSS */
/* FONT */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Google+Sans+Code:ital,wght,MONO@0,300..800,1;1,300..800,1&family=Khula:wght@300;400;600;700;800&family=Krona+One&family=Love+Ya+Like+A+Sister&family=Manufacturing+Consent&family=Pinyon+Script&family=Rubik+Bubbles&family=Rubik+Distressed&family=Tektur:wght@400..900&family=Tinos:ital,wght@0,400;0,700;1,400;1,700&family=UnifrakturMaguntia&display=swap');
@import url("https://use.typekit.net/csf8peu.css");

@font-face {
  font-family: 'Sloop Script Three';
  src: url('../fonts/Sloop-ScriptThree.ttf') format('truetype'); /* Zmiana formatu */
  font-weight: normal;
  font-style: normal;
}
@font-face {
    font-family: "Google Sans Code";
    src: url("./fonts/GoogleSansCode-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;}

@font-face {
  font-family: "DM Sans";
  src: url("./fonts/DM+Sans-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}

body {
    font-family: "Google Sans Code", monospace;
    font-family: "DM Sans", sans-serif;
}



/* KOLORY */
:root{
    --kolor-glowny: #DE7C6F;
    --kolor-uzupelniajacy: #DE7C6F;
    --kolor-jasny: #eee;
    --kolor-sredni: #999;
    --kolor-ciemny: #0A0608;
}

*{
    box-sizing: border-box;
    transition: 1s ease-out;
}
html{
    scroll-behavior: smooth;/*plynne przewijanie*/
    /* font-size: 16px; domyslny baz. rozm. fontu*/
    font-size: 10px;
   
}
h1 {
  font-family: 'Sloop Script Three', cursive;
  color:var(--kolor-uzupelniajacy)
}



body {
    font-family: "Google Sans Code", monospace;
    font-size: 1.8rem;
    font-family: "DM Sans", sans-serif;
}

h1{
    font-size: clamp(8rem, 12vw, 12rem);/* 3 parametry: min, preferowany, max - kontrola nad rozmiarem przy skrajnych wielkościach */
    position: relative;
    color: #DE7C6F;
}
h2{
    /* font-size: 6rem; */
    font-size: clamp(4rem, 6vw, 6rem);/*max h2 mniejszy od min h1*/
    margin-bottom: 2rem;
    text-align: center;
    font-family: "DMSans", sans-serif;
    color: var(--kolor-uzupelniajacy);
}
h3{
    /* font-size: 3rem; */
    font-size: clamp(3rem, 4vw, 4rem);
    margin-bottom: 1rem;
}
h4{
    color: #363434;
font-family: "Google Sans Code";
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: 31px; /* 193.75% */
}


p{
   color: #FFF;
font-family: "Google Sans Code";
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 31px; /* 193.75% */
}

img{
    max-width: 100%; /* responsywne obrazy, nie większe niż ich oryginalny rozmiar */
}

/* NAV DESKTOP */
nav{
    background-color: var(--kolor-ciemny);
    display: flex;
    justify-content: center;
    align-items: center;
    

    padding: 1rem;

    position: fixed;
    width: 100%;

    z-index: 0;/* domyślny indeks warstwy */
    z-index: 1;
    border: 1px solid #434343;

}
nav {
    background-color: var(--kolor-ciemny);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem;
    position: fixed;
    /* Zmiana z width: 100% na box-sizing, żeby obramowanie nie rozpychało ekranu */
    width: 100%;
    box-sizing: border-box; 
    
    /* Poprawne nakładanie warstw (zostawiamy tylko wyższą wartość) */
    z-index: 10; 
    border-bottom: 1px solid #434343; /* Zmieniono na border-bottom, żeby linia była tylko pod nav */
}

nav .zawartosc {
    display: flex;       /* Dodano Flexbox dla kontenera z linkami */
    flex-direction: row; /* Wymusza układ w jednym wierszu */
    flex-wrap: nowrap;   /* Blokuje zrzucanie przycisków do nowego wiersza */
    justify-content: center;
    align-items: center;
    gap: 15px;           /* Odstęp między przyciskami */
    width: 100%;
}

nav a {
    border-radius: 51px;
    border: 2px solid #DE7C6F;
    display: flex;
    min-width: 140px; 
    height: 50px; 
    padding: 0 20px; 
    justify-content: center;
    align-items: center;
    color: #FFF;
    text-align: center; 
    font-family: "Google Sans Code", monospace;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background-color 0.3s ease, color 0.3s ease; 
}

nav a:hover {
    background-color: #DE7C6F;
    color: var(--kolor-jasny);
}

.nakladka{
    background-color: var(--kolor-ciemny);
    opacity: .9;
    position: fixed;
    right: 0;
    z-index: 2;
    height: 100%;
    width: 0;/* domyślnie niewidoczna, szerokość 0 - ten parametr będzie dynamicznie zmieniamy skryptem */

    overflow: hidden;

    display: flex;
    justify-content: center;
    align-items: center;
}
.zamknijX{
    position: absolute;
    top: 2rem;
    right: 2rem;
    color: var(--kolor-jasny);
    background-color: var(--kolor-glowny);
    font-size: 3rem;
    padding: .5rem 1.1rem;
    border-radius: 50%;
    cursor: pointer;
}
.zamknijX:hover{
    background-color: var(--kolor-uzupelniajacy);
}
.nakladka ol{
    flex-direction: column;
    gap: 2vh;
}
.nakladka ol li{}
.nakladka ol li a{
    display: block;
    text-align: center;
    text-decoration: none;
    padding: 2vh 0;
    color: var(--kolor-jasny);
}
.nakladka ol li a:hover{
    background-color: var(--kolor-glowny);

}

/* WSZYSTKIE SEKCJE */
section{
    min-height: 80vh;
    padding: 2rem;

    /* środkowanie zawartości */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  color: var(--kolor-ciemny);

    scroll-margin-top: 5.8rem;/* odsunięcie od góry okna przeglądarki, żeby pasek nawigacyjny nie zakrywał treści */

    
    overflow: hidden;
}
.zawartosc{
    max-width: 1400px;
    width: 100%;
    display: flex;
    gap: 2rem;
}

/* POSZCZEGÓLNE SEKCJE */
#pierwsza{
    background-color: var(--kolor-ciemny);
    border-bottom: 1px solid #696C6F;
    padding-top: 90px;
}

/* Główny kontener siatki (Grid) */
.zawartosc {
    display: grid;
    /* Tworzy 3 kolumny: boki dopasowują się do nagród, środek do plakatu */
    grid-template-columns: auto auto auto;
    /* Tworzy 2 równe wiersze */
    grid-template-rows: 1fr 1fr;
    /* Odstęp między elementami (możesz zmienić lub usunąć) */
    gap: 20px; 
    align-items: center;
    justify-items: center;

}

/* Styl dla głównego plakatu */
.plakat {
   grid-column: 2;
    grid-row: 1 / 3;
    
    /* KLUCZ: Plakat przyjmuje dokładnie 100% wysokości kontenera (od menu do dołu ekranu) */
    height: 100%; 
    max-height: 100%;
    width: auto;
    object-fit: cover; 
    display: block;
   
}


.nagroda-lewa {
    grid-column: 1;
    grid-row: 1; /* Pierwszy wiersz */
    align-self: start; /* Wyrównanie do góry */
    max-width: 150px; /* Dopasuj szerokość nagrody do swoich potrzeb */
}

/* Prawa nagroda (Best Picture) */
.nagroda-prawa {
    grid-column: 3;
    grid-row: 2; /* Drugi wiersz */
    align-self: end; /* Wyrównanie do dołu */
    max-width: 150px; /* Dopasuj szerokość nagrody do swoich potrzeb */
}



#druga {
    background-color: var(--kolor-ciemny);
    color: #FFF;
    padding: 40px 40px;
    display: flex;
    flex-direction: column;
    align-items: center; /* Środkuje h1 oraz opis dolny w pionowej kolumnie */
    box-sizing: border-box;
}

/* Kontener dla układu: zdjęcia + tekst po prawej */
#druga .zawartosc {
    display: flex;
    align-items: stretch;
    position: relative;
    padding-bottom: 50px;
    flex-wrap: wrap;
}

/* Galeria trzymająca dwa zdjęcia obok siebie */
#druga .galeria {
    flex: 3 1 300px;
    /* padding: 2rem; */
    display: flex;
    gap: 0px;
}

#druga .galeria img {
    width: 50%;
    flex: 1 1 300px;
    object-fit: cover;
    display: block;
}
#druga .galeria img:nth-child(1) {
    /* width: 70%; */
    /* transform: translate(130px,0px); */
    z-index: 2;
}
#druga .galeria img:nth-child(2) {
    /* height: 70%; */
    /* aspect-ratio: 3/2; */
    /* transform: translate(-50%, 50px); */
    /* height: 400px; */
    z-index: 1;
}

/* Blok tekstu po prawej stronie */
#druga .tekst-boczny {
    flex: 1 1 300px;
    display: flex;
    flex-direction: column;
    gap: 25px; 
    
    font-family: "Google Sans Code", monospace; 
    font-size: 16px;
    line-height: 1.6;
    text-align: left;
}


#druga .czerwony-tekst {
    color: #DE7C6F;
    font-weight: bold;
    font-size: 20px;
}

#druga .napis-thriller {
    font-family: "Sloop Script Three", cursive; 
    font-size: 128px;
    color: #DE7C6F;
    margin-top: 50px;
    margin-bottom: 40px;
    text-align: center;
    width: 100%;
    max-width: 1200px;
    font-style: italic;
    font-weight: 300;
    position: absolute;
    bottom: -50px;
    right: -140px;
}

#druga .opis-dolny {
    margin-top: 70px;
    max-width: 60%;
    text-align: center;
    font-family: "Google Sans Code", monospace;
    font-size: 16px;
    line-height: 1.6;
    color: #E0E0E0;
    margin-top: 20px;
}




/* GŁÓWNY KONTENER SEKCJI RECENZJI */
#trzecia {
    border-top: 1px solid #696C6F;
    border-bottom: 1px solid #696C6F;
    background-color: #0A0608;
    margin: 0;
    
    box-sizing: border-box;
    width: 100%;
    
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Nagłówek "The Reviews" */
#trzecia .reviews-title {
    font-family: 'Sloop Script Three', Georgia, serif; 
    font-size: 130px; 
    color: #DE7C6F;
    margin: 0 0 60px 0; 
    text-align: center;
    font-weight: normal;
    line-height: 0.9;
}


.reviews {
    display: flex;
    justify-content: center;
    gap: 40px; 
    max-width: 1200px;
    width: 100%;
    padding: 0 40px;
    box-sizing: border-box;
    flex-wrap: wrap;
}


.review-box {
    flex: 0 1 300px;
    border: 1px solid #696C6F;
    padding: 40px 30px;
    background-color: transparent; 
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 320px; 
    box-sizing: border-box;
    
}



.review-box span {
    color: #DE7C6F;
    font-family: "Google Sans Code", monospace;
    font-size: 16px;
    font-weight: bold;
    display: block;
    text-align: left;
}



#czwarta {
    background-color: var(--kolor-ciemny);
    border-bottom: 1px solid #696C6F;
    width: 100%;
    box-sizing: border-box;
}

#czwarta .zawartosc {
    display: flex;
    align-items: center;
    justify-content: center; 
    background-color: var(--kolor-ciemny);
    width: 100%;
    max-width: 1300px; 
    margin: 0 auto;
    padding: 0 50px; 
    box-sizing: border-box;
    flex-wrap: wrap;
}


/* Obrazek teatru */
#czwarta .screening-img {
    width: 320px; 
    height: auto;
    object-fit: cover;
    display: block;
}

/* Blok z tekstami (środek) */
#czwarta .screening-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
    padding: 0 40px; 
    flex: 1; 
}

#czwarta .screening-info h2 {
    color: #FFFFFF;
    font-family: "Google Sans Code", monospace;
    font-size: 28px; /* Większy, wyraźny nagłówek */
    font-weight: bold;
    letter-spacing: 1px;
    margin: 0 0 10px 0;
}

#czwarta .screening-details {
    color: #DE7C6F; 
    font-family: "Google Sans Code", monospace;
    font-size: 18px;
    line-height: 1.6;
    margin: 0;
}

/* Kontener licznika i ceny (prawa strona) */
#czwarta .quantity-selector {
    display: flex;
    align-items: center;
    box-sizing: border-box;
}

/* Okrągłe przyciski - i + */
#czwarta .quantity-selector button {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    border: none;
    background-color: #DE7C6F;
    color: var(--kolor-ciemny); 
    font-size: 24px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s, transform 0.1s;
}

#czwarta .quantity-selector button:hover {
    background-color: #e58d81;
}

/* Czarne okienko z cyfrą */
#czwarta .quantity-value {
    width: 55px;
    height: 55px;
    background-color: #000000;
    border: 1px solid #1A1A1A;
    color: #FFFFFF;
    font-family: "Google Sans Code", monospace;
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 20px;
}

/* STOPKA */
#stopka{
    min-height: 10vh;
    background-color: var(--kolor-ciemny);
}
#stopka .zawartosc{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2vw;
}
#stopka img{
    width: 25%;
    /* background-color: red; */
}
a {
    color: var(--kolor-jasny);  
    text-align: left;       
    text-decoration: none; 
    font-size: 16px;     
    font-family: "DM Sans", sans-serif;  
}

a:hover {
    color: var(--kolor-uzupelniajacy)        
}

.scroll-top {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin-left: auto;

    width: 75px;
    height: 75px;

    border: 3px solid white;
    border-radius: 50%;

    color: white;
    text-decoration: none;
    font-size: 40px;

    transition: 0.3s;
}


.scroll-top:hover {
    background: white;
    color: black;
}


/* ************** RWD ************** */
/* stopniowo schodzimy z szerokością od największej do najmniejszej */
@media (max-width:1000px){}/*KONIEC 1000px*/

@media (max-width: 600px) {
    /* Ukrywamy nawigację z desktopu */
    nav {
        display: none !important;
    }

    /* Sekcja główna – musi mieć position: relative, 
       aby burger pozycjonował się względem niej, a nie całego okna */
    #pierwsza {
        position: relative;
        height: auto;
        min-height: auto;
    }

    /* Kontener mobilnego menu – całkowicie przezroczysty */
    .nav-mobile {
        display: block;
        background: transparent; /* Brak tła */
        border: none;
    }

    /* Ikona burgera – unosi się nad plakatem w prawym rogu */
    .burger {
        display: block;
        position: absolute; /* Wyjęcie z przepływu i nałożenie na plakat */
        top: 20px;         /* Odstęp od górnej krawędzi plakatu */
        right: 20px;        /* Odstęp od prawej krawędzi plakatu */
        color: var(--kolor-jasny);        /* Biały kolor kresek */
        font-size: 35px;    /* Rozmiar ikony */
        z-index: 999;       /* Wymuszenie, by burger był zawsze na wierzchu */
        cursor: pointer;
        background: none;   /* Brak tła */
        padding: 0;
    }

    /* Plakat i nagrody pod nim */
    .zawartosc {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 25px;
        width: 100%;
    }

    .plakat {
        width: 100%;
        grid-column: auto;
        grid-row: auto;
    }

    .plakat img {
        width: 100%;
        height: auto;
        display: block;
    }

.nagrody {
    display: flex;
    justify-content: center;
    gap: 20px;
}



   
    .nakladka {
        display: none; 
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background-color: var(--kolor-ciemny);
        z-index: 1000;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
}

@media (max-width: 600px) {
    
    #pierwsza {
        height: auto;
        min-height: auto;
        padding: 0 0 40px 0; /* Górny padding 0, dodajemy trochę odstępu na samym dole strony (40px) */
    }

    .zawartosc {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 30px; 
        width: 100%;
    }

    .plakat img {
        width: 100%;
        height: auto;
        display: block;
        margin-top: auto;
    }


    .nagroda-lewa, 
    .nagroda-prawa {
        display: flex; 
        max-width: 120px;     
        height: auto;
        
        grid-column: auto;
        grid-row: auto;
        align-self: auto;
        
        margin: 0 15px; 

    

    }
 
    #druga .grid-kontener {
        display: flex;
        flex-direction: column;
        padding: 20px;
    }

    
    #druga .galeria {
        position: relative;
        width: 100%;
        margin: 20px 0;
    }

    #druga .reviews-city {
        width: 100%;
        display: block;
    }


    #druga .woman {
        display: none;
    }

#druga .napis-thriller {
   display: none
}
#druga .opis-dolny {
display: none
}

#druga .zawartosc {
    display: flex;
    align-items: stretch;
    position: relative;
    padding-bottom: 0%;
    flex-wrap: wrap;
}

    #trzecia .reviews {
        flex-direction: column; 
        align-items: center;    
        gap: 20px;            
        padding: 0 20px;        
    }

    #trzecia .review-box {
        width: 100%;            
        min-height: auto;       
        max-width: 450px;    
    }
    
    #trzecia .reviews-title {
        font-size: 90px;       
    }

    #stopka{
    min-height: 10vh;
    background-color: var(--kolor-ciemny);
}
#stopka .zawartosc{
    display: flex;
    align-items: center;
    gap: 50px;
}
#stopka img{
    width: 70%;
}
}