/* ----- Sekcja Treści ----- */
.sekcja-tresci {
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
    margin: 50px auto;
    padding: 45px 55px;
    max-width: 1000px;
}
.sekcja-tresci h2 {
    font-size: 2.6rem;
    color: #004a99;
    margin-bottom: 35px;
    border-bottom: 4px solid #e8e8e8;
    padding-bottom: 18px;
    font-weight: 600;
}
.sekcja-tresci h3 {
    font-size: 1.9rem;
    color: #d9480f;
    margin-top: 35px;
    margin-bottom: 22px;
    font-weight: 600;
    padding-bottom: 8px;    
}
.sekcja-tresci h4 {
    font-size: 1.5rem;
    color: #212529;
    margin-top: 28px;
    margin-bottom: 16px;
    font-weight: 600;
}
.sekcja-tresci p, .sekcja-tresci li {
    font-size: 1.2rem;
    line-height: 1.9;
    color: #343a40;
    margin-bottom: 20px;
}
.sekcja-tresci ul {
    list-style: none;
    margin-left: 35px;
    margin-bottom: 28px;
}
.sekcja-tresci ul ul {
    list-style: none;
    margin-top: 12px;
    margin-bottom: 12px;
}
.sekcja-tresci strong {
    font-weight: 700;
    color: #003f83;
}
.sekcja-tresci img {
    max-width: 60%;
    max-height: 750px;
    border-radius: 10px;
    margin: 30px auto;
    display: block;
    box-shadow: 0 10px 10px rgba(0,0,0,0.1);
}
.sekcja-tresci .podpis-obrazka {
    text-align: center;
    font-size: 0.9rem;
    color: #6c757d;
    margin-top: 10px;
    margin-bottom: 30px;
    font-style: italic;
}


/* ----- Sekcja Umiejętności ----- */
.blok-umiejetnosci {
    margin-bottom: 50px;
    padding-bottom: 40px;
    border-bottom: 1px solid #dee2e6;
}
.blok-umiejetnosci:last-of-type { 
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
}
.blok-umiejetnosci h3 {
    border-left: 6px solid #d9480f;
    padding-left: 18px;
    margin-left: -24px;
    margin-bottom: 25px;
}
.jak-cwiczyc {
    background-color: #f1f2f3;
    padding: 25px 30px;
    border-radius: 10px;
    margin-top: 25px;
    border: 3px solid #e3e6e9;
}
.jak-cwiczyc h4 {
    margin-top: 0;
    color: #004a99;
    font-size: 1.5rem;
    margin-bottom: 20px;
    font-weight: 600;
}
.jak-cwiczyc ul {
    list-style-type: none;
    padding-left: 10px;
    margin-bottom: 10px;
}
.jak-cwiczyc li {
    padding-left: 28px;
    margin-bottom: 12px;
}


/* ----- Sekcja CTA ----- */
.sekcja-cta {
    background-color: #d7eefd;
    padding: 60px 40px;
    text-align: center;
    border-radius: 12px;
    margin: 50px auto;
    max-width: 1000px;
    border: 3px solid #a0d4ff;
}
.sekcja-cta h2 {
    font-size: 2.4rem;
    color: #004a99;
    margin-bottom: 28px;
}
.sekcja-cta p {
    font-size: 1.2rem;
    color: #262a2e;
    line-height: 1.8;
    margin-bottom: 30px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}
.sekcja-cta .przycisk { 
    padding: 20px 40px;
    margin: 12px 18px;
    font-size: 1.3rem;
    text-decoration: none;
    color: #004a99;
}


/* ----- Dodatkowe style dla sekcji list ----- */
.lista-bledow li {
    padding-left: 30px;
    position: relative;
}
.lista-bledow li::before {
    content: '❌';
    position: absolute;
    left: 0;
    top: 2px;
    font-size: 1rem;
}
.lista-rozwoju li {
    padding-left: 30px;
    position: relative;
}
.lista-rozwoju li::before {
    content: '🏆';
    position: absolute;
    left: 0;
    top: 2px;
    font-size: 1em;
}

@media (max-width: 900px){

    .sekcja-tresci {
        padding: 30px 20px;
        margin: 30px 15px;
    }

    .sekcja-tresci h2 {
        font-size: 2rem;
        margin-bottom: 25px;
        padding-bottom: 10px;
    }
    .sekcja-tresci h3, .blok-umiejetnosci h3 {
        font-size: 1.6rem;
        margin-top: 25px;
        margin-bottom: 18px;
    }
    .blok-umiejetnosci h3 {
        padding-left: 12px;
        margin-left: -15px;
    }
    .sekcja-tresci h4, .jak-cwiczyc h4 {
        font-size: 1.3rem;
        margin-top: 20px;
        margin-bottom: 12px;
    }

    .sekcja-tresci p,
    .sekcja-tresci li,
    .jak-cwiczyc li,
    .lista-bledow li,
    .lista-rozwoju li {
        font-size: 1.05rem;
        line-height: 1.7;
        margin-bottom: 15px;
    }

    .sekcja-tresci ul {
        margin-left: 20px;
        padding-left: 0;
    }
    .sekcja-tresci ul ul {
        margin-left: 15px;
    }

    .jak-cwiczyc {
        padding: 20px;
    }
    .jak-cwiczyc li {
        padding-left: 20px;
    }

    .sekcja-tresci img {
        max-width: 100%;
        height: auto;
        margin: 20px auto;
    }
    .sekcja-tresci .podpis-obrazka {
        font-size: 0.85rem;
        margin-top: -10px;
        margin-bottom: 20px;
    }

    /* --- Sekcja CTA --- */
    .sekcja-cta {
        padding: 40px 20px;
        margin: 30px 15px;
    }
    .sekcja-cta h2 {
        font-size: 2rem;
        margin-bottom: 20px;
    }
    .sekcja-cta p {
        font-size: 1.1rem;
        margin-bottom: 25px;
    }
    .sekcja-cta .przycisk {
        padding: 12px 25px;
        font-size: 1rem;
        margin: 10px 5px;
    }

    /* Listy z emoji */
    .lista-bledow li, .lista-rozwoju li {
        padding-left: 25px;
    }
    .lista-bledow li::before, .lista-rozwoju li::before {
        font-size: 0.9em;
        top: 1px;
    }

    header[class*="naglowek-"] {
        padding: 80px 20px;
    }
    header[class*="naglowek-"] h1 {
        font-size: 2.5rem;
        margin-bottom: 15px;
    }
    header[class*="naglowek-"] p {
        font-size: 1.2rem;
    }
}

@media (max-width: 600px) {

    .sekcja-tresci {
        padding: 20px 10px;
        margin: 20px 5px;
    }
    .sekcja-tresci h2 {
        font-size: 1.6rem;
    }
    .sekcja-tresci h3, .blok-umiejetnosci h3 {
        font-size: 1.3rem;
    }
    .blok-umiejetnosci h3 {
        padding-left: 8px;
        margin-left: -8px;
    }
    .sekcja-tresci h4, .jak-cwiczyc h4 {
        font-size: 1.1rem;
    }
    .sekcja-tresci p,
    .sekcja-tresci li,
    .jak-cwiczyc li,
    .lista-bledow li,
    .lista-rozwoju li {
        font-size: 0.9rem; 
        line-height: 1.6;
    }
    .sekcja-tresci ul {
        margin-left: 15px;
    }

    header[class*="naglowek-"] {
        padding: 60px 15px;
    }
    header[class*="naglowek-"] h1 {
        font-size: 2rem;
    }
    header[class*="naglowek-"] p {
        font-size: 1rem;
    }

    .sekcja-cta {
        padding: 30px 15px;
    }
    .sekcja-cta h2 {
        font-size: 1.6rem;
    }
    .sekcja-cta p {
        font-size: 0.95rem;
    }
    .sekcja-cta .przycisk {
        width: 100%;
        padding: 10px;
        margin: 8px 0;
    }
}