/* FONT */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Lora:wght@400;500;600;700&family=Marck+Script&display=swap');
/*
font-family: "Inter", sans-serif;
font-family: "Lora", serif;
font-family: "Marck Script", cursive;
*/

/* KOLOR */
:root {
    --kolor-glowny: #202B68;
    --kolor-uzupelniajacy: #F7F3EA;
    --kolor-ciemny: #18245A;
    --kolor-sredni: #6E6E6E;
    --kolor-jasny: #fff;
    --kolor-linia: #DDD2C4;
    --kolor-akcent: #A44B48;
}

/* GLOBALNE */
*{
    box-sizing: border-box;
    transition: .6s;
}

html{
    scroll-behavior: smooth;
    font-family: "Inter", sans-serif;
    font-size: 10px;
    overflow-x: hidden;
}

body{
    font-size: 1.6rem;
    font-weight: 400;
    color: #111;
    background-color: var(--kolor-uzupelniajacy);
    overflow-x: hidden;
}

h1, h2, h3{
    font-family: "Lora", serif;
    color: var(--kolor-glowny);
    margin-bottom: 1rem;
}

h1{
    font-size: clamp(4.6rem, 4.2vw, 6.4rem);
    line-height: 112%;
    margin-bottom: 2.5rem;
}

h2{
    font-size: clamp(3.2rem, 3vw, 4.8rem);
    margin-bottom: 2rem;
}

h3{
    font-size: 2.2rem;
    font-weight: 700;
}

img{
    max-width: 100%;
}

p{
    line-height: 150%;
}

a{
    text-decoration: none;
}

/* KRESKI POD TYTUŁAMI */
h1,
h2{
    display: inline-block;
    width: fit-content;
}

h1::after,
h2::after{
    content: "";
    width: 100%;
    height: .2rem;
    background-color: var(--kolor-akcent);
    display: block;
    margin-top: 2rem;
}

#pierwsza h1::after{
    display: none;
}

.podkreslenie{
    display: inline-block;
}

.podkreslenie::after{
    content: "";
    width: 100%;
    height: .2rem;
    background-color: var(--kolor-akcent);
    display: block;
    margin-top: 2rem;
}

/* WYRÓŻNIENIE NAZWY FUNDACJI */
.nazwa-fundacji{
    color: var(--kolor-glowny);
    font-weight: 800;
}

/* NAV DESKTOP */
nav{
    background-color: rgba(247,243,234,.95);
    position: fixed;
    width: 100%;
    min-height: clamp(7.8rem, 5vw, 9rem);

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

    padding-top: 1rem;
    padding-bottom: 1rem;
    padding-left: max(6vw, calc((100vw - 1400px) / 2));
    padding-right: max(6vw, calc((100vw - 1400px) / 2));

    z-index: 8;
    border-bottom: 1px solid var(--kolor-linia);
}

.logo{
    position: static;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.logo img{
    width: clamp(14rem, 9vw, 18rem);
    height: auto;
    display: block;
}

nav ol{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: clamp(1.4rem, 2vw, 3rem);
}

nav a{
    padding: 1rem 0;
    display: block;
    color: var(--kolor-glowny);
    font-size: clamp(1.15rem, .85vw, 1.4rem);
    font-weight: 800;
    white-space: nowrap;
}

nav a:hover{
    color: var(--kolor-akcent);
}

/* NAV MOBILE */
.burger{
    position: fixed;
    top: 2rem;
    right: 2rem;

    background-color: var(--kolor-ciemny);
    color: var(--kolor-jasny);
    font-size: 3rem;
    padding: .5rem .65rem;

    z-index: 10;
    cursor: pointer;
    display: none;
}

.burger:hover{
    background-color: var(--kolor-glowny);
}

.nakladka{
    background-color: var(--kolor-ciemny);
    position: fixed;
    z-index: 10;

    width: 0;
    height: 100%;
    top: 0;
    right: 0;

    overflow: hidden;

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

    opacity: .95;
}

.zamknijX{
    position: absolute;
    top: 2rem;
    right: 2rem;

    font-size: 3.2rem;
    color: var(--kolor-jasny);
    background-color: rgba(255,255,255,.16);
    padding: .2rem 1rem .45rem;

    cursor: pointer;
}

.zamknijX:hover{
    background-color: rgba(255,255,255,.25);
    transform: scale(1.05);
}

.nakladka ol{
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 2vh;
}

.nakladka ol li a{
    display: block;
    text-align: center;
    padding: 1.2rem;
    color: var(--kolor-jasny);
    font-weight: 800;
}

.nakladka ol li a:hover{
    background-color: rgba(255,255,255,.12);
}

/* WSZYSTKIE SEKCJE */
section{
    scroll-margin-top: 8rem;
    padding: 9rem 6vw;

    display: flex;
    flex-direction: column;
    justify-content: center;

    gap: 4vh;
    overflow-x: hidden;

    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% 100%;
}

.zawartosc{
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;

    display: flex;
    gap: 4rem;
}

/* TŁA SEKCJI */
#pierwsza{
    background-image: url("../img/tlo-1.png");
}

#druga{
    background-image: url("../img/tlo-2.png");
}

#trzecia{
    background-image: url("../img/tlo-3.png");
}

#czwarta{
    background-image: url("../img/tlo-4.png");
}

#piata{
    background-image: url("../img/tlo-5.png");
}

footer{
    background-image: url("../img/tlo-6.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% 100%;
}

/* SEKCJA 1 — HERO */
#pierwsza{
    min-height: 72rem;
    padding-top: 12rem;
    padding-bottom: 8rem;
}

#pierwsza .zawartosc{
    align-items: center;
    justify-content: space-between;
    gap: 3rem;
}

#pierwsza article{
    flex: 1;
}

.hero-tekst{
    max-width: 48rem;
}

.hero-tekst p{
    font-size: 1.8rem;
    max-width: 42rem;
}

.hero-prawa{
    flex: 1.2;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.hero-zdjecie{
    width: 100%;
    max-width: 78rem;
    transform: translate(2.5rem, -1rem);
}

/* PRZYCISKI */
.przyciski{
    display: flex;
    gap: 2rem;
    margin-top: 3.5rem;
}

.przycisk{
    border: 1px solid var(--kolor-glowny);
    padding: 1.1rem 2.2rem;

    color: var(--kolor-glowny);
    font-size: 1.15rem;
    font-weight: 800;
    display: inline-block;
}

.przycisk:hover{
    background-color: var(--kolor-glowny);
    color: var(--kolor-jasny);
}

/* WSPÓLNY NAGŁÓWEK SEKCJI */
.naglowek-sekcji{
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;

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

.naglowek-sekcji a{
    color: var(--kolor-glowny);
    font-size: 1.2rem;
    font-weight: 800;
}

/* SEKCJA 2 — AKTUALNOŚCI */
#druga .zawartosc{
    justify-content: flex-start;
    overflow-x: scroll;
    overflow-y: hidden;
    gap: 3rem;
    padding-bottom: 2rem;

    scroll-snap-type: x mandatory;
}

.karta-aktualnosci{
    background-color: rgba(255,255,255,.94);
    border: 1px solid var(--kolor-linia);
    box-shadow: 0 1rem 3rem rgba(0,0,0,.08);

    flex: 0 0 38rem;
    scroll-snap-align: start;
}

.karta-aktualnosci:hover{
    transform: translateY(-1rem);
    box-shadow: 0 2rem 5rem rgba(0,0,0,.12);
}

.karta-aktualnosci img{
    width: 100%;
    height: 24rem;
    object-fit: cover;
}

.karta-aktualnosci p,
.karta-aktualnosci h3,
.karta-aktualnosci a{
    margin-left: 2.5rem;
    margin-right: 2.5rem;
}

.data{
    margin-top: 2.5rem;
    margin-bottom: 1.5rem;

    color: var(--kolor-akcent);
    font-size: 1.1rem;
    font-weight: 800;
    text-transform: uppercase;
}

.opis-karty{
    font-size: 1.3rem;
}

.link-karty{
    display: inline-block;
    margin-top: 2rem;
    margin-bottom: 2.5rem;

    color: var(--kolor-akcent);
    font-size: 1.2rem;
    font-weight: 800;
}

/* SEKCJA 3 — O FUNDACJI */
#trzecia .zawartosc{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3rem;
}

#trzecia article{
    background-color: rgba(255,255,255,.94);
    border: 1px solid var(--kolor-linia);
    padding: 3rem;
    text-align: center;
}

#trzecia .tekst-o-fundacji{
    flex: 0 1 28rem;
    background-color: transparent;
    border: none;
    text-align: left;
    padding-left: 0;
}

.statystyka{
    flex: 1;
    min-height: 32rem;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1.6rem;

    box-shadow: 0 1rem 2.5rem rgba(0,0,0,.04);
    cursor: default;
}

.statystyka:hover{
    transform: translateY(-1rem);
    box-shadow: 0 2rem 4rem rgba(32,43,104,.13);
    border-color: rgba(164,75,72,.45);
    background-color: rgba(255,255,255,.98);
}

.statystyka .ikona,
.statystyka h3,
.statystyka p,
.statystyka::after{
    transition: .45s ease;
}

.statystyka:hover .ikona{
    transform: translateY(-.5rem) scale(1.06);
}

.statystyka:hover h3{
    transform: translateY(-.3rem);
    color: var(--kolor-akcent);
}

.statystyka:hover::after{
    width: 5rem;
}

#trzecia article h3{
    font-size: 4.4rem;
}

#trzecia .tekst-o-fundacji h3{
    font-family: "Marck Script", cursive;
    font-size: 2.4rem;
    font-weight: 400;
    margin-top: 3rem;
}

.ikona{
    width: 6.5rem;
    height: 6.5rem;
    object-fit: contain;
}

.statystyka p{
    max-width: 18rem;
    margin: 0 auto;
}

.statystyka::after{
    content: "";
    width: 3.5rem;
    height: .2rem;
    background-color: var(--kolor-akcent);
    display: block;
}

/* SEKCJA 4 — OBSZARY DZIAŁALNOŚCI */
#czwarta .zawartosc{
    justify-content: flex-start;
    overflow-x: scroll;
    overflow-y: hidden;
    gap: 2rem;
    padding-bottom: 2rem;

    scroll-snap-type: x mandatory;
}

.karta-obszaru{
    background-color: rgba(255,255,255,.92);
    border: 1px solid var(--kolor-linia);

    flex: 0 0 32%;
    scroll-snap-align: start;
}

.karta-obszaru:hover{
    transform: translateY(-1rem);
    box-shadow: 0 2rem 5rem rgba(0,0,0,.1);
}

.karta-obszaru img{
    width: 100%;
    height: 26rem;
    object-fit: cover;
}

.karta-obszaru p,
.karta-obszaru h3{
    margin-left: 2rem;
    margin-right: 2rem;
}

.numer{
    margin-top: 2rem;
    color: var(--kolor-glowny);
    font-size: 2rem;
    font-family: "Lora", serif;
}

.numer::after{
    content: "";
    width: 3rem;
    height: .2rem;
    background-color: var(--kolor-akcent);
    display: block;
    margin-top: 1rem;
    margin-bottom: 2rem;
}

.karta-obszaru .opis-karty{
    margin-bottom: 3rem;
}

/* SEKCJA 5 — CODZIENNOŚĆ FUNDACJI */
#piata .zawartosc{
    align-items: center;
    gap: 5rem;
}

.codziennosc-tekst{
    flex: .6;
    max-width: 36rem;
}

.codziennosc-galeria{
    flex: 1.4;
    display: flex;
    gap: 1.6rem;
}

.codziennosc-galeria img{
    width: 33.33%;
    height: 28rem;
    object-fit: cover;
    display: block;
}

/* kreska tylko pod słowem Fundacji */
#piata h2::after{
    display: none;
}

#piata .linia-pod{
    display: inline-block;
}

#piata .linia-pod::after{
    content: "";
    width: 100%;
    height: .2rem;
    background-color: var(--kolor-akcent);
    display: block;
    margin-top: 2rem;
}

#piata h3{
    font-size: 3rem;
    font-style: italic;
    line-height: 115%;
    margin: 2rem 0 1rem;
}

.podpis{
    margin: 1.2rem 0 3rem 0;
    font-family: "Marck Script", cursive;
    font-size: 2.2rem;
    color: var(--kolor-glowny);
}

/* STOPKA */
.copyright{
    margin-top: 4rem;
    font-size: 1.2rem;
    opacity: .7;
    line-height: 140%;
}
footer{
    background-color: var(--kolor-ciemny);
    color: var(--kolor-jasny);

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

    padding: 8rem 6vw;
}

footer h2{
    color: var(--kolor-jasny);
}

footer .zawartosc{
    justify-content: space-between;
}

footer article{
    flex: 1;
}

footer p{
    margin-bottom: 1.5rem;
}

footer .przycisk{
    color: var(--kolor-jasny);
    border-color: rgba(255,255,255,.7);
}

footer .przycisk:hover{
    background-color: var(--kolor-jasny);
    color: var(--kolor-ciemny);
}

/***************************************************/
/****************** MEDIA QUERIES ******************/

@media (max-width:1050px){

    #piata .zawartosc{
        flex-direction: column;
        align-items: flex-start;
    }

    .codziennosc-tekst{
        max-width: 45rem;
    }

    .codziennosc-galeria{
        width: 100%;
        overflow-x: scroll;
        overflow-y: hidden;
        gap: 1.6rem;
        padding-bottom: 2rem;

        scroll-snap-type: x mandatory;
    }

    .codziennosc-galeria img{
        width: auto;
        flex: 0 0 42%;
        height: 26rem;
        scroll-snap-align: start;
    }
}

@media (max-width:899px){
    

    nav{
        display: none;
    }

    .burger{
        display: block;
    }

    section{
        scroll-margin-top: 0;
        padding: 7rem 2rem;

        background-repeat: no-repeat;
        background-position: center center;
        background-size: 100% 100%;
    }

    #pierwsza{
        background-image: url("../img/tlo-mobile-1.png");
    }

    #druga{
        background-image: url("../img/tlo-mobile-2.png");
    }

    #trzecia{
        background-image: url("../img/tlo-mobile-3.png");
    }

    #czwarta{
        background-image: url("../img/tlo-mobile-4.png");
    }

    #piata{
        background-image: url("../img/tlo-mobile-5.png");
    }

    footer{
        background-image: url("../img/tlo-mobile-6.png");
    }

    .zawartosc{
        flex-direction: column;
        gap: 3rem;
    }

    #pierwsza{
        padding-top: 8rem;
        min-height: auto;
    }

    #pierwsza .zawartosc{
        gap: 3rem;
    }

    .hero-tekst{
        max-width: 100%;
    }

    #pierwsza h1{
        font-size: clamp(3.6rem, 7vw, 5rem);
    }

    .hero-tekst p{
        font-size: 1.7rem;
        max-width: 100%;
    }

    .hero-prawa{
        width: 100%;
        justify-content: center;
    }

    .hero-zdjecie{
        max-width: 100%;
        transform: none;
    }

    .przyciski{
        flex-direction: column;
        gap: 1.5rem;
    }

    .naglowek-sekcji{
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    #trzecia .zawartosc{
        flex-direction: row;
        flex-wrap: wrap;
    }

    #trzecia .tekst-o-fundacji{
        flex: 1 0 100%;
    }

    .statystyka{
        flex: 1 0 30rem;
    }

#druga .zawartosc,
#czwarta .zawartosc{
    flex-direction: row;
    overflow-x: scroll;
    overflow-y: hidden;
    justify-content: flex-start;

    max-width: none;
    width: calc(100% + 4rem);
    margin-left: -2rem;
    margin-right: -2rem;

    gap: 2rem;
    padding-left: 2rem;
    padding-right: 2rem;
    padding-bottom: 2rem;

    scroll-snap-type: x mandatory;
}
    .karta-aktualnosci,
    .karta-obszaru{
        flex: 1 0 80%;
        scroll-snap-align: center;
    }

    .karta-aktualnosci img{
        height: 22rem;
    }

    .karta-obszaru img{
        height: 22rem;
    }

.codziennosc-galeria{
    width: calc(100% + 4rem);

    margin-left: -2rem;
    margin-right: -2rem;

    overflow-x: scroll;
    overflow-y: hidden;

    gap: 1.5rem;

    padding-left: 2rem;
    padding-right: 2rem;
    padding-bottom: 2rem;

    scroll-snap-type: x mandatory;
}

    .codziennosc-galeria img{
        width: auto;
        flex: 0 0 46%;
        height: 26rem;
        scroll-snap-align: start;
    }

    footer .zawartosc{
        gap: 4rem;
    }
}

@media (max-width:600px){

    section{
        padding: 6rem 2rem;
    }

    #trzecia .zawartosc{
        flex-direction: column;
    }

    .statystyka{
        flex: 1 0 100%;
        min-height: 30rem;
    }

    .karta-aktualnosci,
    .karta-obszaru{
        flex: 1 0 86%;
    }

    .karta-aktualnosci img,
    .karta-obszaru img{
        height: 20rem;
    }

    .codziennosc-galeria img{
        flex: 0 0 86%;
        height: 22rem;
    }

    footer .zawartosc{
        flex-direction: column;
    }
}/* KONIEC MOBILE */