/* =========================================
   1. ZMIENNE I RESET (Twoje oryginalne)
   ========================================= */
:root {
    --bg-dark: #050505;
    --bg-soft: #121212;
    --accent-orange: #ff6b00;
    --accent-yellow: #ffd000;
    --text-white: #ffffff;
    --text-gray: #a0a0a0;
}

* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
    scroll-behavior: smooth; 
}

body { 
    font-family: 'Inter', sans-serif; 
    background-color: var(--bg-dark); 
    color: var(--text-white); 
    line-height: 1.6; 
    overflow-x: hidden; 
}

.container { 
    padding: 80px 5%; 
    max-width: 1400px; 
    margin: 0 auto; 
    position: relative; 
}

.highlight { color: var(--accent-yellow); }

/* =========================================
   2. NAWIGACJA (Poprawiona pod Responsywność)
   ========================================= */
nav {
    display: flex; 
    justify-content: space-between; 
    padding: 1rem 5%; 
    align-items: center;
    position: fixed; 
    width: 100%; 
    z-index: 1000; 
    background: rgba(5, 5, 5, 0.95); 
    backdrop-filter: blur(15px);
    border-bottom: 1px solid rgba(255, 107, 0, 0.15);
}

.logo { 
    font-weight: 900; 
    font-size: 1.4rem; 
    letter-spacing: -1px; 
    text-decoration: none; 
    color: white; 
    z-index: 1001;
}

.logo span { color: var(--accent-orange); }

.nav-links { 
    display: flex; 
    list-style: none; 
    align-items: center; 
}

.nav-links li { 
    margin-left: 2rem; 
}

.nav-links a { 
    text-decoration: none; 
    color: var(--text-white); 
    font-size: 0.85rem; 
    font-weight: 700; 
    text-transform: uppercase; 
    transition: 0.3s; 
    letter-spacing: 1px;
}

.nav-links a:hover { color: var(--accent-yellow); }

/* =========================================
   3. HERO SECTION
   ========================================= */
.hero {
    min-height: 100vh; 
    display: flex; 
    align-items: center; 
    padding: 100px 5% 50px 5%; 
    position: relative;
    background: linear-gradient(90deg, #050505 40%, transparent 100%), url('img/hero-nikodem.jpg') center/cover no-repeat;
}

.hero h1 { 
    font-size: clamp(2.5rem, 8vw, 6.5rem); 
    font-weight: 900; 
    text-transform: uppercase; 
    line-height: 0.95; 
    margin-bottom: 1.5rem; 
}

.name-highlight { 
    display: block; 
    background: linear-gradient(to right, var(--accent-orange), var(--accent-yellow)); 
    -webkit-background-clip: text; 
    -webkit-text-fill-color: transparent; 
}

.hero p { 
    font-size: 1.1rem; 
    max-width: 550px; 
    color: var(--text-gray); 
    margin-bottom: 2.5rem; 
    border-left: 4px solid var(--accent-orange); 
    padding-left: 20px; 
}

.btn-main {
    display: inline-block;
    padding: 15px 35px;
    background: var(--accent-orange);
    color: white;
    text-decoration: none;
    font-weight: 800;
    text-transform: uppercase;
    border-radius: 4px;
    transition: 0.3s;
}

/* =========================================
   4. SEKCJA O MNIE (Poprawione Grid)
   ========================================= */
.about-section { 
    background-color: #fcfcfc; 
    color: #1a1a1a; 
    padding: 100px 0;
}

.about-grid { 
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    gap: 60px; 
    align-items: center; 
}

.section-title {
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 900;
    text-transform: uppercase;
    margin-bottom: 30px;
}

.team-panel {
    background: #fff;
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    margin: 30px 0;
    border-left: 5px solid var(--accent-orange);
}

.team-display { display: flex; align-items: center; gap: 20px; }
.main-team-logo { height: 60px; width: auto; }

.spec-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}

.spec-item { background: #f0f0f0; padding: 15px; border-radius: 8px; text-align: center; }

.about-image {
    width: 100%;
    height: 600px;
    background-size: cover;
    background-position: center top;
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.15);
}

/* =========================================
   5. KALENDARZ I AKTUALNOŚCI
   ========================================= */
.calendar-table { width: 100%; background: var(--bg-soft); border-radius: 10px; overflow: hidden; }
.calendar-header { 
    display: grid; 
    grid-template-columns: 1fr 2fr 1.5fr 1.5fr; 
    padding: 20px; 
    background: #222; 
    font-weight: 800;
    text-transform: uppercase;
    font-size: 0.8rem;
}

.calendar-row .row-main-info { 
    display: grid; 
    grid-template-columns: 1fr 2fr 1.5fr 1.5fr; 
    padding: 20px; 
    border-bottom: 1px solid #222;
}

/* Styl dla formularza */
.contact-form .form-group { margin-bottom: 15px; }
.contact-form input, .contact-form textarea {
    width: 100%;
    padding: 15px;
    background: #151515;
    border: 1px solid #333;
    color: white;
    border-radius: 5px;
}

/* Toast i inne pierdoły */
.toast {
    position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
    background: var(--accent-orange); padding: 15px 30px; border-radius: 50px;
    display: none; z-index: 10000; font-weight: 700;
}
.toast.show { display: block; animation: fadeIn 0.5s; }

/* =========================================
   6. MEDIA QUERIES (MAGIA DLA TELEFONU)
   ========================================= */

@media (max-width: 992px) {
    .about-grid { grid-template-columns: 1fr; }
    .about-image { height: 400px; }
}

@media (max-width: 768px) {
    /* Nawigacja Mobilna - Uproszczenie */
    .nav-links {
        display: none; /* Ukrywamy standardowe linki dla prostoty lub robimy hamburgera */
    }
    
    /* Hero - Naprawa tekstów */
    .hero {
        background: linear-gradient(0deg, #050505 50%, transparent 100%), url('img/hero-nikodem.jpg') center/cover no-repeat;
        text-align: center;
        justify-content: center;
        padding-top: 120px;
    }
    
    .hero p { border-left: none; padding-left: 0; margin: 0 auto 2.5rem auto; }

    /* O mnie - sekcja */
    .about-section { padding: 60px 20px; }
    .spec-grid { grid-template-columns: 1fr; }
    
    /* Kalendarz - Zamiana tabeli w karty (Bardzo ważne!) */
    .calendar-header { display: none; }
    .calendar-row .row-main-info {
        display: flex;
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }
    .calendar-row .date { color: var(--accent-orange); font-size: 1.2rem; }

    /* Partnerzy */
    .partners-grid {
        display: grid;
        grid-template-columns: 1fr 1fr; /* Dwie kolumny logo obok siebie */
        gap: 20px;
    }

    /* Galeria */
    .gallery-grid {
        grid-template-columns: 1fr 1fr !important; /* Dwa zdjęcia w rzędzie */
    }

    /* Tytuły sekcji */
    h2 { font-size: 2rem !important; }
}

/* Animacje */
@keyframes fadeIn { from {opacity: 0;} to {opacity: 1;} }
/* Styl ogólny dla partnerów */
.partners-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 30px;
    align-items: center;
}

.partner-card {
    display: flex;
    justify-content: center;
    align-items: center;
    background: white; /* Białe tło pomaga wyeksponować logotypy */
    padding: 20px;
    border-radius: 10px;
    height: 120px; /* Stała wysokość dla wyrównania */
    transition: transform 0.3s ease;
}

.partner-card img {
    max-width: 100%;
    max-height: 80px; /* Ważne: logo nie wykroczy poza kartę */
    object-fit: contain; /* Zachowuje proporcje logo */
}

/* Poprawka na telefon */
@media (max-width: 768px) {
    .partners-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 loga obok siebie */
        gap: 15px;
    }
    .partner-card {
        height: 100px;
        padding: 10px;
    }
}
/* Styl dla kontenera z linkami po kliknięciu w rundę */
.results-dropdown {
    display: none; /* Ukryte domyślnie, JS to włącza */
    background: #1a1a1a;
    padding: 20px;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
    border-top: 1px solid #333;
}

/* Gdy runda jest aktywna (klasa .active dodawana przez Twój JS) */
.calendar-row.active .results-dropdown {
    display: grid; 
}

/* Stylizacja samych linków - teraz wyglądają jak przyciski */
.results-dropdown a {
    background: #333;
    color: var(--accent-yellow) !important;
    text-decoration: none;
    padding: 10px 15px;
    border-radius: 5px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
    transition: 0.3s;
    border: 1px solid transparent;
}

.results-dropdown a:hover {
    background: var(--accent-orange);
    color: white !important;
}

/* Poprawka na telefon dla kalendarza */
@media (max-width: 768px) {
    .results-dropdown {
        grid-template-columns: 1fr; /* Na telefonie linki jeden pod drugim */
        padding: 15px;
    }
    
    .results-dropdown a {
        display: block;
        width: 100%;
        padding: 12px; /* Większy margines dla palca */
    }
}/* Styl bazowy dla komputerów - przywracamy Twój układ */
.partners-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
}

.partner-card {
    flex: 0 1 250px; /* Szerokość loga na PC */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 15px;
}

.partner-card img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

/* TYLKO DLA TELEFONÓW */
@media (max-width: 768px) {
    .partners-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
    .partner-card {
        flex: none; /* Wyłączamy elastyczność z PC */
        width: 100%;
        background: white; /* Opcjonalnie, jeśli chcesz ramki na mobile */
        border-radius: 8px;
    }
}.results-dropdown {
    text-align: center; /* Centruje napisy wewnątrz */
}

.results-dropdown a {
    display: flex;
    justify-content: center; /* Środkuje tekst w poziomie */
    align-items: center;     /* Środkuje tekst w pionie */
    text-align: center;
    margin: 5px auto;        /* Margines dla lepszego odstępu */
}/* Domyślnie treść jest ukryta */
.news-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-out, padding 0.3s ease;
    padding: 0 20px;
    opacity: 0;
}

/* Po dodaniu klasy active (przez JS) treść się rozwija */
.news-item.active .news-content {
    max-height: 2000px; /* Duża wartość, by zmieścić tekst i foto */
    padding: 20px;
    opacity: 1;
}

.news-header {
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    background: #1a1a1a;
}

/* Naprawa gigantycznych zdjęć w aktualnościach */
.news-img {
    max-width: 100%;
    height: auto;
    max-height: 400px; /* Ograniczenie wysokości zdjęcia */
    object-fit: cover;
    margin-top: 15px;
    border-radius: 8px;
    display: block;
}

@media (max-width: 768px) {
    .news-img {
        max-height: 250px; /* Mniejsze fotki na telefonie */
    }
}/* Styl dla burgera - domyślnie ukryty (PC) */
.hamburger {
    display: none;
    cursor: pointer;
    flex-direction: column;
    gap: 5px;
    z-index: 1002;
}

.hamburger span {
    display: block;
    width: 25px;
    height: 3px;
    background-color: var(--accent-orange);
    transition: 0.3s;
}

/* RESPONSYWNOŚĆ MENU */
@media (max-width: 768px) {
    .hamburger {
        display: flex; /* Pokazuje burgera na mobile */
    }

    .nav-links {
        position: fixed;
        right: -100%; /* Menu schowane za ekranem */
        top: 0;
        width: 70%; /* Zajmuje 70% szerokości ekranu */
        height: 100vh;
        background: rgba(10, 10, 10, 0.98);
        flex-direction: column;
        justify-content: center;
        align-items: center;
        transition: 0.5s;
        gap: 30px;
        box-shadow: -10px 0 30px rgba(0,0,0,0.5);
    }

    .nav-links.active {
        right: 0; /* Menu wjeżdża na ekran */
    }

    .nav-links li {
        margin-left: 0; /* Reset marginesu z PC */
    }

    .nav-links a {
        font-size: 1.2rem;
    }

    /* Animacja burgera w "X" po otwarciu */
    .hamburger.active span:nth-child(1) {
        transform: rotate(45deg) translate(5px, 6px);
    }
    .hamburger.active span:nth-child(2) {
        opacity: 0;
    }
    .hamburger.active span:nth-child(3) {
        transform: rotate(-45deg) translate(5px, -6px);
    }
}
/* Dodaj to na samym początku CSS, żeby zablokować wychodzenie elementów poza ekran */
html, body {
    overflow-x: hidden;
    width: 100%;
    position: relative;
}

/* Poprawka dla menu mobilnego */
@media (max-width: 768px) {
    .nav-links {
        position: fixed;
        right: -100%; /* Upewnij się, że jest minus 100% */
        top: 0;
        width: 100%; /* Możesz zmienić na 100% żeby łatwiej było trafić w linki */
        height: 100vh;
        background: rgba(5, 5, 5, 0.98);
        z-index: 1000;
        /* Reszta Twoich styli... */
    }
    
    .nav-links.active {
        right: 0 !important; /* To wymusi pokazanie menu */
    }
}
/* Zapobieganie przesuwaniu strony na boki */
html, body {
    overflow-x: hidden;
    width: 100%;
    margin: 0;
    padding: 0;
}

@media (max-width: 768px) {
    /* Ustawienie nawigacji, żeby burger był wewnątrz ekranu */
    nav {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 20px;
        width: 100%;
        box-sizing: border-box;
    }

    .nav-links {
        position: fixed;
        right: -100%; /* Całkowicie poza ekranem */
        top: 0;
        width: 100%; /* Menu na cały ekran */
        height: 100vh;
        background: #0a0a0a;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        transition: 0.4s ease-in-out;
        z-index: 1001;
    }

    /* TO SPRAWIA ŻE MENU SIĘ POJAWIA */
    .nav-links.active {
        right: 0 !important;
    }

    .hamburger {
        display: flex;
        z-index: 1002; /* Burger musi być nad menu */
    }
}