@CHARSET "UTF-8";
/*GŁÓWNE*/

html {
	background: #F2F2F2; /*url('https://nukostudio.pl/logo/ep_naturalwhite.webp'); /* żeby nie błyskało na początku */
    scrollbar-gutter: stable; /* Rezerwuje ona miejsce na pasek przewijania, nawet jeśli go jeszcze nie ma. Dzięki temu, gdy galeria się rozwinie, nic nie drgnie.*/
}
 
body {
    /* 1. Definiujemy oba "obrazy" (gradient na górze, logo pod spodem) 
    background-image: 
        linear-gradient(rgba(242, 242, 242, 0.9), rgba(242, 242, 242, 0.4)), 
        url('');
		background-size: 100% 100%; */
		
padding:0px;
margin:0px;
border:0px;
background-size: 100%;
color:dark gray;
font-family:calibri,arial;
text-align:center;		
}	

header {
	padding-left:40px;
	padding-right:40px;
	padding-top:10px;
	padding-bottom:5px;
	line-height:200%;
}


 

img{border:0; margin:0; padding:0;padding-top:0px;}
/* div.realizacje img{max-height:85vh;margin-left:60px;margin-right:60px;} */ 
a {
    white-space: nowrap;  /* żeby linki nie dzieliły sie na linie */
}
div.opis{
font-family: 'Raleway', sans-serif;
font-style:normal;
line-height:27px;
font-size:14px;
text-align:justify;	
padding:70px;
padding-left:0;
padding-right:0;
/*color:rgb(34, 34, 34);*/
width:80%;
margin:auto;
font-weight:100;
max-width:800px;
}

div.opis-waski{
font-family: 'Raleway', sans-serif;
font-style:normal;
line-height:27px;
font-size:14px;
text-align:justify;	
padding:70px;
padding-left:0;
padding-right:0;
/*color:rgb(34, 34, 34);*/
width:80%;
margin:auto;	
font-weight:100;
max-width:800px;
}

div.opis h1{
font-family: 'Merriweather';
/*letter-spacing:-1px;*/
text-align:left;
font-size:23px;
font-weight:300;
font-style:normal;	
line-height: 130%;
color:#3d3d3d;
}
div.opis h2{
font-family: 'Raleway', sans-serif;
font-size:13px;
line-height:22px;
font-weight:300;
/*letter-spacing:0.8px;*/
padding-bottom:15px;
color:#3d3d3d;
}
.obrazw {max-width:130vw;}
.obraz3 {margin:auto;padding:0;border:0;display:block;}
img.obraz,img.obraz2{border:0px; max-width:130vw;/* żeby przy ładowaniu na telefonie nie wyskakiwał wiellki - slick go zmniejsza dopiero po chwili*/}
div.realizacja-opis {margin-left:10px;max-height:90vh;width:250px;height:1500px;padding:50px;text-align:left;font-size:13px;font-family:arial,helveltica,sans; line-height:140%;display:inline-block;vertical-align:top;}
div.realizacja-opis h2{font-size:25px;line-height:140%;}
div.opis_projektu{max-width:1200px; padding:5%; padding-top:70px; padding-bottom:70px; margin:auto; text-align:justify; vertical-align:top;}
div.tytul_projektu{max-width:260px; vertical-align:top; text-align:left; padding-right:100px; display:inline-block;}
div.tytul_projektu iframe{display:none;}
div.wnetrze_opisu{max-width: 800px; vertical-align: top; font-size:17px; line-height:150%; display: inline; padding-left:0px; padding-top:0px; display:inline-block;font-family:Roboto,Arial,Sans;}
div.tytul_projektu h1{margin-bottom:20px}
div.realizacje, div.wizualizacje {max-height:80vh;width:100vw;}  
div.realizacje img, div.wizualizacje  img{ max-height:80vh;  margin-right:0px;padding:0px;max-width:150vw;} 
div.realizacja {text-align:center}
div.plik a{font-family:arial,helveltica,sans;text-decoration:none;color:black;vertical-align:top;float:top;}
div.plik{padding-bottom:20px;}
div.realizacja-opis-w-zdjeciu:hover{top:20px;left:20px;background:white;padding:50px;padding-bottom:100px;max-width:350px;color:black;}
div.realizacja-opis-w-zdjeciu{z-index:100;position:absolute;top:20px;left:20px;background:none;padding:30px;width:auto;color:#ffa100;transition: 2s;opacity:0.9;}
div.realizacja-opis-w-zdjeciu-text {display:none;text-align:left;font-family:arial,helveltica,sans;font-size:13px;}
div.realizacja-opis-w-zdjeciu:hover div.realizacja-opis-w-zdjeciu-text {display:block;}
img.ikona-text{display:block;width:35px;transition: 1s;}
div.plik {font-size:13px;}
div.plik a:hover{color:#ffa100;}
div.slajd-z-opisem{padding-right:150px;}
.tags {
	width:80%;
	max-width: 800px;
	margin: auto;
	padding-bottom: 50px;
	text-align: left;
}
.tag-btn {
	/* Wyświetlanie jako elastyczny blok */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* Wymiary i kształt */
	padding: 5px 10px;
	border: 1px dashed #757575; /* Cienka, ale nie czysta czarna linia */
	border-radius: 20px;    /* Połowa wysokości = idealny półokrąg */
	margin: 3px 3px 3px 0px; 
	/* Tekst - klucz do czytelności */
	text-decoration: none;
	color: #222;
	cursor: pointer;
	
	font-family: 'Raleway', sans-serif;
	font-style: normal;
	font-weight: 100;
	font-size: 14px;
	/*
	font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.5px;
	*/
	/*text-transform: uppercase;  */
	/* Wygładzanie krawędzi */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	transition: background-color 0.2s, color 0.2s; 
}
.tag-btn:hover {
	background-color: #222;
	color: #fff;
}
/* 1. Stan startowy - CAŁA galeria jest niewidoczna i ma 0px */
.realizacje:not(.slick-initialized) {
    height: 0;
    opacity: 0;
    overflow: hidden;
}
/* Ukrywamy guziki i kropki, zanim Slick się ustabilizuje */
.realizacje:not(.slick-initialized) .slick-arrow,
.realizacje:not(.slick-initialized) .slick-dots {
    display: none !important;
    height: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
}
/* 2. Stabilizacja kontenera, który będzie się rozszerzał */
.slick-list.draggable {
    transition: height 2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    min-height: 0 !important;
	will-change: height; /*podpowie przeglądarce, żeby przygotowała kartę graficzną do płynnej zmiany*/
}
/* 3. Magia: Animujemy CAŁĄ galerię, gdy tylko Slick doda klasę .slick-initialized */
.realizacje.slick-initialized {
    opacity: 1 !important;
    transition: opacity 1s ease-in !important; /* Tutaj kontrolujesz fade-in obrazków */
}
/* 4. Usunięcie blokady ze slajdów (Slick sam nimi zarządza) */
.slick-slide {
    opacity: 1 !important; /* Musi być 1, żeby Slick mógł je wyświetlić */
	box-sizing: border-box !important;
	outline: none !important;
    margin: 0 !important;
    padding: 0 !important;
    -webkit-backface-visibility: hidden; /* Dodatkowa stabilizacja */
}
.realizacje { /*przeglądarka może „haczyć”, bo próbuje jednocześnie dekodować ciężkie pliki JPG i animować wysokość kontenera. Poprawka: Wymuś sprzętową akcelerację na kontenerze, żeby odciążyć procesor*/
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000px;
}
.opis-waski, .opis, #columns11 {
    /* To "odkleja" element od reszty strony i oddaje go karcie graficznej */
    /*will-change: opacity, transform;
    transform: translateZ(0);
    backface-visibility: hidden;*/
    animation: plynnePojawienie 1.2s cubic-bezier(0.4, 0, 0.2, 1) forwards; 
}
@keyframes plynnePojawienie {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
/*STRONA WYBORU PROJEKTÓW*/
div.wybor_projektu_wrapper{background:none; position:relative;  text-align:left;
		background:#4e5556;
		overflow:hidden;
		padding:16%;
		display:inline-block;
		margin:0px;
		border:none;
		margin:4px;
		float:left; 
		border-radius: 5px;
}
div.wybor_projektu_wrapper:hover   div.wybor_projektu_opis{top:25%;opacity:1;}
div.wybor_projektu_wrapper:active   div.wybor_projektu_opis{padding-top:4px;}
div.wybor_projektu_wrapper:hover  img.wybor_projektu_obraz{opacity:0.6;filter: blur(0px);}
div.wybor_projektu_wrapper p, h5 {display:none;}
div.wybor_projektu_opis{width:50%;height:50%; ;position:absolute;; left:25%; text-align:center;vertical-align:middle; ;pointer-events: none;font-size:12px;opacity:1;
;overflow:hidden;  top:25%; transition: top 0.3s 0.3s, padding 0.2s, opacity 0.9s ease; color:white;font-size:14px; opacity:0;
}
div.wybor_projektu_opis:hover{top:25%;}
div.wybor_projektu_opis:active{padding-top:15px;}
div.wybor_projektu_opis h2 {font-size:19px;color:white;font-family: 'Merriweather';line-height: 128%;opacity:0.9;}
div.wybor_projektu_opis h3 {font-size:16px;color:white;}
img.wybor_projektu_obraz{height:106%; 
transition: opacity 1s, blur 1s; 
-webkit-filter: blur(0px); 
filter: blur(0px);
position:absolute;
top:-3%;left:-3%;
margin:0;
margin-left:-41%; 
padding:0;
border:none;
}
@media screen and (max-width:1000px) {
div.wybor_projektu_wrapper{
		padding:48%;	

}
div.wybor_projektu_opis{
		opacity:1;;height:50%;font-weight:300;top:50%;transform: translateY(-50%); 
}
div.wybor_projektu_opis:hover{top:50%;}
div.wybor_projektu_wrapper:hover   div.wybor_projektu_opis{top:50%;opacity:1;}
img.wybor_projektu_obraz{
		opacity:0.6;
}
div.menu{padding-bottom:15px;}
}
@media screen and (orientation: portrait) {
div.realizacje img, div.wizualizacje  img{ max-height:100vw;} 
div h1{
font-size:21px;
}
div h2{
font-size:12px;
}



}




/* 1. Ustawiamy płynne przejście dla wszystkich linków */
nav a {
  will-change: opacity;
  transition: opacity 0.3s ease; /* Kluczowe dla płynności */
}

/* 2. Gdy najeżdżasz na całą nawigację, wszystkie linki lekko przygasają... */
nav:hover a {
  opacity: 0.4; 
}

/* 3. ...ale ten jeden, na którym konkretnie trzymasz kursor, pozostaje wyraźny */
nav a:hover {
  opacity: 1 !important;
}