/* Basic Reset */
* { margin: 0; padding: 0; box-sizing: border-box;}
html {
    scroll-snap-type: y proximity; /* Magnes na całym oknie */
    scroll-behavior: smooth;
    scroll-padding-top: 5px;
    scrollbar-gutter: stable;
}
body {
font-family: 'Manrope', sans-serif; /* Use Manrope font */
line-height: 1.6;
color: #fff;
background-color: #000000;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
padding: 2px;

}

[hidden]{ display: none !important;}
.snap { scroll-snap-align: start; /* magnes */}

.container {
max-width: 950px;
width: 100%;
background-color: #000000;
box-shadow: none;
display: grid;
grid-template-columns: 1fr;
grid-template-areas:
"rights"
"logo"
"more"
"search"
"news"
"general"
"features"
"more2"
"details"
"contact"
"more3"
"team" 
"down";
}

h0 { font-size: 8.65rem;}
h1 { font-size: 3rem; font-weight: bold;}
h2 { font-size: 1.6rem; font-weight: bold;}
.news h2.short { font-size: 1.2rem; }
h3 { font-weight: bold; margin-top: 0.5rem; font-size: 1.3rem;}


sHeader { 
    display: block; 
    padding-bottom: 8rem; /* Domyślny odstęp pod nagłówkiem */
}

.rights-section {
grid-area: rights;
text-align: left;
font-size: 0.8rem;
text-transform: uppercase;
padding-top: 0.5rem;
margin-bottom: 3rem;
margin-right: 3px;
margin-left: 3px;
opacity: 0.5;
scroll-snap-align: start; /* magnes */
}

.logo-section {
grid-area: logo;
justify-content: center;
display: flex;
min-width: 190px;
max-width: 650px;
width: 100%;
height: 50vw;
max-height: 350px;       
position: relative;
margin: auto; /* Wycentrowanie */
}
.logo {
position: absolute;
top: 0;
left: 50%;
width: 100%; /* Obrazek nakładki jako procent szerokości */
height: auto;
transform: translateX(-50%);
}
.logo-section img {
    transition: opacity 5s ease-in-out;
    opacity: 0;
}
.logo-section img:hover {
opacity: 1;
}
.more-section {
grid-area: more;
color: #888;
cursor: pointer; /* Indicate it's clickable */
margin-top: 3rem;
text-align: right;
font-size: 0.8rem;
margin-right: 3px;
margin-left: 3px;
}

.nav {
will-change: transform;
color: white;
font-size: 1rem;
margin-left: 2rem;
float: left;
opacity: 0.7;
animation: bounce 2.5s infinite;
}
@keyframes bounce {
  0% { transform: scale(1);}
  60% { transform: scale(1);}
  85% { transform: scale(1.2);}
  90% { transform: scale(0.9);}
  95% { transform: scale(1.05);}
  100% { transform: scale(1);}
} 

.nav:hover { opacity: 1; }

#nav_bar {
background-color: transparent;
overflow: hidden;
max-height: 0;
transition: max-height 0.3s ease-out;
display: flex;
justify-content: space-around;
}

#nav_bar ul {
list-style-type: none;
margin: 0;
padding: 0;
margin-top: 0.5rem;
display: flex;
width: 100%;
}

#nav_bar li {
flex-grow: 1;
border: 1px solid white;
border-radius: 4px;
margin: 2px;
opacity: 0.7;
font-weight: normal;
}
#nav_bar li:hover { opacity: 1; font-weight: bold;}
#nav_bar li a {
display: flex;
justify-content: center;
align-items: center;
color: white;
text-decoration: none;
padding: 4px 4px 6px 4px;
width: 100%;
box-sizing: border-box;
opacity: 0.7;
}

select {
background-color: black; /* Przezroczyste tło (możesz zmienić 0.1 na inną wartość dla bardziej lub mniej przezroczystości) */
border: 2px solid #333333; /* Ciemno szara ramka */
color: white;
border-radius: 4px;
margin-right: 5rem;
outline: none;
text-transform: uppercase;
opacity: 0.6;
}
select:hover { opacity: 1;}

/* 1. GŁÓWNA SEKCJA (Desktop i Mobile) */
.search-section {
    grid-area: search;
    display: flex;
    flex-direction: row; /* Zawsze w rzędzie */
    flex-wrap: nowrap;   /* Blokujemy zawijanie, by utrzymać 3 kolumny */
    justify-content: space-between;
    align-items: center;
    padding-left: 20px;
    padding-right: 15px;
    margin-top: 0;
    margin-bottom: 0.5rem;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    gap: 15px; /* Odstęp między elementami */
}
#News {
    flex: 1;            /* Zajmuje dostępną przestrzeń */
    text-align: left;
    white-space: nowrap;
    padding: none;
    transform: translateY(0.3rem);
}
h1#News:hover { opacity: 0.8; cursor: pointer;}

.pagination-container {
    flex: 1;            /* Zajmuje dostępną przestrzeń */
    display: flex;
    justify-content: center; /* Centrowanie zawartości */
    align-items: center;
    white-space: nowrap;
    margin-right: 5px;
}
.nav-btn {
        background: #000; color: #fff; border: 1px solid #333;
        padding: 5px 12px; cursor: pointer; transition: 0.3s;
        font-size: 0.8rem;
        border-radius: 4px;
        opacity: 0.8;
    }
.nav-btn:hover { transform: scale(0.95); opacity: 1;}
.nav-btn:disabled { opacity: 0.25; cursor: not-allowed; }
#pageIndicator { font-weight: 600; min-width: 60px; text-align: center; font-size: 0.9rem; color: #ccc; }

.search-wrapper { flex: 1; display: flex; justify-content: flex-end; /* Wyrównanie do prawej */}
.search {
    font-size: 0.9rem; 
    padding: 3px 5px;
    border-radius: 3px; 
    border: 1px solid rgb(120, 120, 120);
    color: lightgray; 
    background-color: black;
    opacity: 0.7;
    outline: none; /* WAŻNE: Usuwa domyślne obramowanie przeglądarki przy focusie */
    transition: border-color 0.3s ease, box-shadow 0.3s ease; /* Płynna animacja */
    width: 60%;
    max-width: 400px;   /* Maksymalna szerokość na desktopie */
    min-width: 200px;
}
.search p { font-size: 1rem; opacity: 0.9;}
.search:focus { border-color: lightgray; box-shadow: none;}
.search::placeholder { color: gray;}

.news-section {
grid-area: news;
display: flex;
flex-direction: column;
padding-left: 20px;
margin-right: 10px;
max-height: 85vh; /* Ustaw preferowaną wysokość okna wiadomości */
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: #303030 transparent;
scroll-snap-type: y proximity;    /* 'mandatory' wymusi wskakiwanie każdego newsa */
scroll-behavior: smooth;
padding-bottom: calc(85vh - 10em); 
}

/* Punkt odniesienia dla pozycjonowania absolutnego obrazka */
.news {
    position: relative; 
    padding-top: 1rem;
    margin-bottom: 1rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid #474747;
    scroll-snap-align: start;
    font-size: 1rem; opacity: 1;
}
.news-pillars { padding-left: 1rem; border-left: 2px solid #cecccc; }
.news:last-of-type { border-bottom: none; /* Usuń linię po ostatniej wiadomości */}
.news h2 { transition: color 0.2s ease; /* Płynne przejście koloru */}
.news h2:hover { color: #cecccc; }
.news p { font-size: 1rem; opacity: 1;}
.news time { font-size: 0.8rem; opacity: 0.7; }
.news ul { margin: 10px 0; padding-left: 20px;}
.news li {
    margin-left: 20px;
    padding-left: 10px;
    margin-bottom: 6px;
    list-style-type: square; /* lub własna ikona */
}
.newslink { color: #6579fc; text-decoration: none; transition: opacity 0.3s ease;}
.newslink:hover { text-decoration: underline; opacity: 0.8;}

/* Główny wiersz newsa */
.news-head-row {
    display: flex;
    flex-wrap: wrap; /* Pozwala na przeskoczenie pod spód na mobile */
    justify-content: space-between;
    align-items: flex-start;
}
.news-head-text { flex: 1;}
.news-head-text h2 { margin-top: 5px; transition: color 0.3s ease;}

/* Kontener kolumny obrazka */
.news-thumb-aside {
    flex-basis: 30%;
    max-width: 30%;
    display: flex;
    justify-content: flex-end;
    position: relative;
    height: 6rem;
    margin-left: 1.6rem;
}
.news-mini-img {
    margin-right: 10px;
    max-height: 6rem;
    width: auto;
    max-width: 100%;
    filter: grayscale(60%);
    opacity: 0.88;
    border-radius: 4px;
    outline: none;   
    position: absolute;
    right: 0; top: 0;
    object-fit: cover;
    transition: all 0.8s linear 0.4s;
}

.news-mini-img:hover,
.news:has(.img-wrapper:hover) .news-mini-img{ opacity: 0; transition: all 0.4s linear 0s;}

/* Wyświetlanie po najechaniu na mini img */
.news-mini-img:hover + .img-wrapper,
.img-wrapper:hover { opacity: 1; visibility: visible; transform:  scale(3.3); pointer-events: auto;}

/* --- KONTENER PODGLĄDU (HOVER) --- */
.img-wrapper {
    display: flex; 
    flex-direction: column;
    opacity: 0;
    visibility: hidden;
    position: absolute;
    right: 0;
    top: 1.5rem;
    margin-right: 10px;
    z-index: 100;
    pointer-events: none;
    
    width: auto;
    max-width: 100%;          
    transform-origin: top right; 
    transform: translateY(-1.7rem) scale(1);
    transition: transform 1s ease-out, opacity 1s ease-out, visibility 1s;
}
.img-thumb {
    display: block;
    height: auto; 
    width: auto;
    max-width: 30vw;    
    max-height: 19vh; /* docelowo x3.3 */
    
    object-fit: contain; /* Kluczowe dla zachowania proporcji w kontenerach flex */
    border: 4px solid rgba(0, 0, 0, 0.8);
    border-radius: 3px;
    box-sizing: border-box;

    flex-shrink: 0; /* Dodatkowa stabilizacja dla Safari */
}
/* Napis ID na obrazku  */
.img-id {
    position: absolute;
    top: 4px; 
    right: 4px;       
    /* Zmiana: Ustawiamy realną wielkość, która po powiększeniu będzie wyglądać dobrze */
    font-size: 0.75rem !important; 
    line-height: 1;
    
    color: rgba(255, 255, 255, 0.6);
    background-color: rgba(0, 0, 0, 0.3); 
    padding: 2px 4px;
    z-index: 101;
    text-transform: none;
    border-radius: 2px;
    /* Element id: Zmniejszamy napis o tyle samo, o ile kontener się powiększy  !FireFox*/
    transform-origin: top right;
    transform: scale(0.304); 
}

.imgNews {
    display: block; 
    margin-top: 1rem; /* Odstęp od tekstu */
    margin-left: auto;
    margin-right: 10px;
    min-height: 80px;
    max-height: 55vh;
    max-width: 95%;
    height: auto; /* Zachowuje proporcje obrazu */
    border: 2px solid rgba(127, 127, 127, 0.5); /* Delikatny cień dla lepszego wyglądu */
    box-sizing: border-box; /* Ważne, aby padding i border były wliczane w szerokość */
    flex-shrink: 0; /* Zapobiega zmniejszaniu się obrazu poniżej jego min-width/height */
}
.imgNews[data-s="1"] { max-height: 40vh; max-width: 50%;}
.imgNews img {
    max-width: 100%; /* Upewnia się, że obraz nie wyjdzie poza swój kontener */
    height: auto; /* Zachowuje proporcje */
    display: block; /* Usuwa dodatkowy odstęp pod obrazem */
}
    
.general-section {
    grid-area: general;
    display: flex;
    flex-direction: column;
    padding-left: 20px;
    margin-right: 10px;
    margin-top: 6rem;
    padding-bottom: 1rem;
}
.general p { font-size: 1rem; opacity: 0.9;}

.list { opacity: 0.9; padding-left: 2rem; margin-right: 10px;}
.list li { font-size: 1rem;}

.features-section {
    grid-area: features;
    display: flex;
    flex-direction: column;
    padding-top: 1rem;
}
.features { padding-left: 20px; margin-right: 10px;}

.more-section2 {
grid-area: more2;
color: #888;
margin-top: 4rem;
margin-bottom: 2rem;
cursor: pointer; /* Indicate it's clickable */
text-align: right;
font-size: 0.8rem;
margin-right: 3px;
margin-left: 3px;
}

.details-section {
grid-area: details;
display: flex;
flex-direction: column;
padding-left: 20px;
margin-right: 10px;
}
.details p { font-size: 1rem; opacity: 0.9; }

.contact-section {
grid-area: contact;
text-align: left;
padding-top: 0.5rem;
margin-top: 6rem;
margin-bottom: 4rem;
}
.contact { font-weight: bold; text-transform: uppercase; /* UPPERCASE dla emaila */ margin-left: 3rem;}

.icon-group { display: inline-flex; vertical-align: bottom; white-space: nowrap;}
.contact p { padding-left: 3rem; margin-top: 1rem;}
.contact t { font-size: 1.4rem; margin-right: 6rem; white-space: nowrap;}
.contact a { text-decoration: none; color: white; opacity: 0.8;}
.contact a:hover { opacity: 1; }

.more-section3 {
grid-area: more3;
color: #888;
cursor: pointer; /* Indicate it's clickable */
margin-top: 6rem;
text-align: right;
font-size: 0.8rem;
margin-right: 3px;
margin-left: 3px;
}

.team-section {
grid-area: team;
text-align: left;
margin-left: 20px;
margin-top: 6rem;
padding-top: 0.5rem;
margin-right: 10px;
padding-bottom: 1rem;
font-size: 1rem;
}
.team { padding-top: 0.2rem; margin-top: 2rem;}
.team-section p { opacity: 0.9; }
.team-section img {
    max-width: 33%;
    height: auto;
    border-radius: 5px;
    border: 2px solid #141414;
    min-width: 190px;
    margin-top: 3rem;
    margin-bottom: 0.5rem;
    display: flex;
}
.teamR { margin-left: 67%; transform: translateX(-20px);}

.down-section {
grid-area: down;
text-align: left;
font-size: 0.8rem;
text-transform: uppercase;
margin-top: 3rem;
margin-bottom: 40px;
margin-left: 3px;
margin-right: 3px;
opacity: 0.5;
}

.arrow { color: white; opacity: 0.7; float: left;}
.arrow:hover { opacity: 1;}
.arrowR { color: white; opacity: 0.7; float: right;}
.arrowR:hover { opacity: 1;}


/* Responsive adjustments */
@media (max-width: 600px) {
h0 { font-size: 4.6rem;}
h1 { font-size: 2rem;}
h2 { font-size: 1.2rem;}
.news h2.short { font-size: 1rem; }
h3 { font-size: 1.1rem;}

sHeader { padding-bottom: 4rem; /* Domyślny odstęp pod nagłówkiem */}
.search-section {
        display: flex !important;
        flex-wrap: wrap; /* Pozwala na przejście paginacji do nowej linii */
        flex-direction: row !important; /* News i Search w jednej linii */
        justify-content: space-between;
        align-items: center;
        gap: 10px;
        padding-left: 20px;
        padding-right: 10px;
    }
    #News { flex: 1; order: 1; width: auto; transform: none;}
    .search-wrapper {
        flex: 1;
        order: 2;
        display: flex;
        justify-content: flex-end;
    }
    .search { min-width: 160px; font-size: 0.8rem;}
    .search p { font-size: 0.9rem;}
    .pagination-container {
        flex: 0 0 100%; /* Wymusza 100% szerokości, co spycha element do nowej linii */
        order: 3;
        justify-content: center;
        margin-top: 0;
        padding-top: 0;
        padding-bottom: 0.6rem;
    } 
    .nav-btn { padding: 6px 12px;}

    .general p { font-size: 0.9rem;}
    .features p { font-size: 0.9rem;}
    .features-list li { font-size: 0.9rem;}
    .details p { font-size: 0.9rem;}
    .contact { margin-left: 2rem;}
    .contact img { width: 1.9rem; height: 1.9rem;}
    .contact p { padding-left: 1rem;}
    .contact t { font-size: 1.1rem; margin-right: 6rem;}
    .team-section { font-size: 0.9rem;}
    .more-section { font-size: 0.7rem; }
    .more-section2 {  font-size: 0.7rem; }    
    .teamR { margin-left: 100%; transform: translateX(-218px);}
    .news-head-row { flex-direction: column; align-items: flex-start; /* Wyrównanie wiersza do lewej */}
    .news-thumb-aside {
        flex-basis: auto;
        max-width: 100%;
        width: 100%;
        display: flex;
        justify-content: flex-end; /* Ważne: kontener wyrównuje zawartość do lewej  flex-start*/
        margin-left: 0px;
    }
    .news-mini-img { left: auto; right: 0; max-width: 95%; margin-top: 0.8rem;} /*left 0; right: auto; */  
    .img-wrapper {
        left: auto;      /* Przyklejenie do lewej krawędzi kontenera aside - left: 0; */
        right: 0; margin-right: 10px; width: auto;      /* right: auto; margin-right: 0; */  
        transform-origin: top right;  /* top left; */
        transform: translateY(-1rem) scale(0.4); 
        transition: all 1s ease-out;
    }
    .img-thumb {
        display: block;
        margin-left: 0; 
        height: auto; width: auto;        
        max-width: 95vw; max-height: 65vh;     
        object-fit: contain;
        border: 3px solid rgba(0, 0, 0, 0.8); border-radius: 2px;
    }
    .img-id { top: 3px; right: 3px; font-size: 0.7rem !important; transform: scale(1);}
    /* Wyzwalacz Hover */
    .news-mini-img:hover + .img-wrapper,
    .img-wrapper:hover{
        opacity: 1; visibility: visible;
        right: 0; /* left: 0; */
        transform: translateY(-0.5rem) scale(1); 
        pointer-events: auto;
    }
    .news-section { padding-bottom: calc(85vh - 14em); }
    .imgNews[data-s="1"] { max-height: 40vh; width: 300px; max-width: 95%; object-fit: contain; }
}


@media (max-width: 500px) {
select { margin-right: 3rem;}
.nav { margin-left: 1rem;}
#nav_bar { display: flex; flex-direction: column;}
#nav_bar ul { margin-top: 0.1rem;}
#nav_bar ul:first-of-type { margin-top: 0.5rem;}
.contact { margin-left: 20px;}
.contact img { width: 1.7rem; height: 1.7rem;}
.contact t { font-size: 0.9rem; margin-right: 1rem;}
.news-section { padding-bottom: calc(85vh - 14em); }
}

@media (max-width: 320px) {
h0 { font-size: 3rem;}
h1 { font-size: 1.5rem;}
h2 { font-size: 1rem;}
h3 { font-size: 1rem;}
sHeader { padding-bottom: 2rem; /* Domyślny odstęp pod nagłówkiem */}
.search { font-size: 0.6rem; min-width: 120px;}
.news h2.short { font-size: 0.8rem; }
select { margin-right: 1rem;}
.nav { margin-left: 0.5rem; }
.features { padding-left: 12px; margin-right: 3px;}
.features-list { padding-left: 1rem; margin-right: 0;}
.contact { margin-left: 20px;}
.contact p { padding-left: 10px;}
.contact t { font-size: 0.8rem; margin-right: 3px;}
.teamR { margin-left: 100%; transform: translateX(-192px);}
.news-section { padding-bottom: calc(85vh - 14em); }
}


@page {
    /* Kolejność: Góra (1.5), Prawo (1.5), Dół (1.5), Lewo (2.5) */
    margin: 1.5cm 1.5cm 1.5cm 2.5cm;
}
@media print {
    /* 1. UKRYWANIE ELEMENTÓW (Zostawiłem Twoją listę) */
    header, footer, .search-section, .more-section, .more-section2, .more-section3,
    #nav_bar, select, .arrow, .arrowR, .rights-section, .down-section,
    .news-thumb-aside, .news:not(.printing-active) {
        display: none !important;
    }
    /* 2. RESET STRUKTURY (Klucz do braku pustych stron) */
    html, body, .container, main, .news-section {
        display: block !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        background: white !important;
        color: black !important;
        box-shadow: none !important;

    }
    /* Wyłączenie mobilnych transformacji, które psują układ na iOS/Android */
    * { transform: none !important; transition: none !important;}
    html, body {
        -webkit-print-color-adjust: exact; /* Dla Safari/iOS - kolory i tła */
        print-color-adjust: exact;
    }
    /* 3. NAPRAWA "OSTATNIEGO NEWSA" I AKTYWNEGO ARTYKUŁU */
    .news.printing-active {
        display: block !important;
        padding-bottom: 0 !important; /* wazne dla ostatniego artykułu */
        margin-bottom: 0 !important;
        border: none !important;
        page-break-inside: auto !important; /* Pozwól na podział długich tekstów */
    }
    /* 4. TYPOGRAFIA I TEKST */
    body { 
        font-size: 10pt; 
        text-align: justify;
        hyphens: auto;
    }
    h0, h1, h2, h3, .news h2, .news h2.short, .news-head-text h2, .contact a, .contact a span { 
        color: #000000 !important; 
        -webkit-print-color-adjust: exact; 
    }    
    h0 { font-size: 25pt; margin-top: 11pt; }
    h1 { font-size: 14pt; margin-top: 6pt; }
    h2 { font-size: 12pt; margin-top: 5pt; page-break-after: avoid; }
    h3 { font-size: 11pt; margin-top: 4pt; page-break-after: avoid; }
    .news p, .news { font-size: 9pt; line-height: 1.2; orphans: 2; widows: 2; }
    li { font-size: 9pt; line-height: 1.2; margin-bottom: 0;}
    /* 5. ELEMENTY SPECJALNE I OBRAZKI */
    .features div { break-inside: avoid; margin-bottom: 10pt;}
    .imgNews { 
        display: block !important; 
        max-width: 70% !important; 
        max-height: 220pt;
        height: auto !important;
        border: 0.5pt solid black; 
        margin: 25pt 2pt 0 auto !important; /* obrazek po prawej w druku */
        break-inside: avoid;
    }
    .imgNews[data-s="1"] { max-height: 110pt; max-width: 40% !important; margin: 35pt 20pt 0 auto !important;}
    .imgNews[data-s="2"] { max-height: 160pt; max-width: 45% !important; margin: 25pt 20pt 0 auto !important;}
    .news-content { display: block !important;}
}