/**************************************/
/*              DOKUMENTY             */
/**************************************/

.dokumenty{
		width:90%;
		background:#fff;
		border-radius:1vw;
		margin: 2vw auto;
		padding: 2vw;
		font-size:1.1vw;
		color:#000;
		
		font-family: "Merriweather Sans", sans-serif;
	    font-optical-sizing: auto;
	    font-weight: <weight>;
	    font-style: normal;
	}
	
.dokumenty a:link {color:blue;}
.dokumenty a:visited {color:blue;}
.dokumenty a:hover {color:green;}
.dokumenty a:active {color:red;}
	
	.dokumenty h1{
		font-weight: bold; 
		color: #000000; 
		font-size: 2vw;
		text-align:center;
		padding:2vw 0;
	}
	
	.dokumenty h2{
		font-weight: bold; 
		color: #000000; 
		font-size: 1.7vw;
		text-align:center;
		padding:2vw 0;
	}
	
	.dokumenty .niebieski {
		color:#00f;
	}
	
	.dokumenty .zielony {
		color:green;
	}
	
	.dokumenty h3 {
		color:#000;
		font-size:1.5vw;
		text-align:center;
	}
	
	.dokumenty h4 {
		color:#000;
		font-size:1.2vw;
		text-align:center;
	}
	
	.dokumenty p{
		color: #000000; 
		font-size: 1.2vw;
	}	
		
	.celldyr h1{
		font-weight: bold; 
		color: #000000; 
		font-size: 2vw;
		text-align:center;
		padding:2vw 0;
	}
	
	.celldyr h2{
		font-weight: bold; 
		color: #000000; 
		font-size: 1.5vw;
		text-align:center;
		padding:2vw 0;
	}

	.image-blurred-edge {
		background-image: url('podstrony/unia_matematyk.jpg');
		width: 34.375vw;
		height: 28.1771vw;
		box-shadow: 0 0 0.1042vw 0.1042vw white inset;
	}
	
	.grid-table{
		display: grid;
		grid-template-columns: repeat(3,2vw) 1fr;
		gap:1vw;
		/*grid-templete-rows: repeat(3,3vw) 1fr;*/
	}
	
	.cell{
		height:1.5vw;
		margin-top:1vw;
		display:flex;
		/*background-color:lightgreen;*/
		/*padding:1.0417vw;*/
		border: 0.0521vw solid #ccc
		text-align:center;
		place-items:center;
		/*justify-content: center;*/
	}
	

	
	.cell-5{
		grid-column: span 2;
	}
	
	
	
/**************************************/
/*              DYREKCJA              */
/**************************************/	
	
/* Główny kontener – podział na dwie równe kolumny */
.dyrekcja {
	display: grid;
	grid-template-columns: 66.4% 32.3%;
	gap: 1vw;
   
  	width:90%;
	background:#fff;
	border-radius:1vw;
	margin: 2vw auto;
	padding: 2vw;
	font-size:1.1vw;
		
	font-family: "Merriweather Sans", sans-serif;
	font-optical-sizing: auto;
	font-weight: <weight>;
	font-style: normal;
}

/* Styl dla obu kolumn – układa elementy pionowo w kolejności z HTML */
.column {
  display: flex;
  flex-direction: column;
  gap: 1vw;
}

/* Responsywność obrazków */
img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 0.2083vw;
}	

.dyrN {
	position:absolute;
	font-family: "Merriweather Sans", sans-serif;
	font-optical-sizing: auto;
	font-weight: <weight>;
	font-style: normal;
		
	font-weight: bold; 
	color: #000000; 
	font-size: 1.5vw;
	text-align:center;
	padding:0 0 2vw 0;
	line-height:0;
	bottom:10vw;
}

.dyrekcja h1{
	font-family: "Merriweather Sans", sans-serif;
	font-optical-sizing: auto;
	font-weight: <weight>;
	font-style: normal;
		
	font-weight: bold; 
	color: #000000; 
	font-size: 2vw;
	text-align:center;
	padding:2vw 0 0 0;
	line-height:0.6;
}
	
.dyrekcja h2{
	font-family: "Merriweather Sans", sans-serif;
	font-optical-sizing: auto;
	font-weight: <weight>;
	font-style: normal;
		
	font-weight: bold; 
	color: #000000; 
	font-size: 1.5vw;
	text-align:center;
	padding:0 0 2vw 0;
	line-height:0;
}

.img-wrapper {
  position: relative; /* Punkt odniesienia dla pozycjonowania tekstu */
  display: inline-block;
  width: 100%;
}

.dyr-text {
	font-family: "Merriweather Sans", sans-serif;
	font-optical-sizing: auto;
	font-weight: <weight>;
	font-style: normal;	
	
	font-weight: bold; 
	/*color: #000000; */
	font-size: 2vw;
	text-align:center;
	/*padding:0 0 2vw 0;*/
	letter-spacing:0.2vw;

  position: absolute;
  bottom: 2vw;       /* Dokładnie 1.0417vw od dolnej krawędzi zdjęcia */
  left: 13vw;         /* Odstęp od lewej krawędzi */
  right: 13vw;        /* Rozciągnięcie tekstu z zachowaniem marginesu */
  
  /* Stylizacja tła w stylu semi-transparent / glassmorphism */
  background: rgba(0, 0, 0, 0.5); 
  backdrop-filter: blur(0.4167vw); /* Rozmycie tła pod napisem */
  -webkit-backdrop-filter: blur(0.4167vw);
  
  /* Stylistyka tekstu i ramki */
  color: #ffffff;
  padding: 1.2vw 0;
  border-radius: 1vw;
  border: 0.1042vw solid rgba(255, 255, 255, 0.2);
  font-family: sans-serif;
  /*font-size: 0.7292vw;*/
  /*font-weight: 500;*/
  box-shadow: 0 1vw 3vw rgba(0, 0, 0, 0.15);
  box-sizing: border-box;
}

.vdyr-text {
	font-family: "Merriweather Sans", sans-serif;
	font-optical-sizing: auto;
	font-weight: <weight>;
	font-style: normal;	
	
	font-weight: bold; 
	/*color: #000000; */
	font-size: 1.5vw;
	text-align:center;
	/*padding:0 0 2vw 0;*/
	letter-spacing:0.2vw;

  position: absolute;
  bottom: 1vw;       /* Dokładnie 1.0417vw od dolnej krawędzi zdjęcia */
  left: 1vw;         /* Odstęp od lewej krawędzi */
  right: 1vw;        /* Rozciągnięcie tekstu z zachowaniem marginesu */
  
  /* Stylizacja tła w stylu semi-transparent / glassmorphism */
  background: rgba(0, 0, 0, 0.5); 
  backdrop-filter: blur(0.4167vw); /* Rozmycie tła pod napisem */
  -webkit-backdrop-filter: blur(0.4167vw);
  
  /* Stylistyka tekstu i ramki */
  color: #ffffff;
  padding: 0.6vw 0;
  border-radius: 1vw;
  border: 0.1042vw solid rgba(255, 255, 255, 0.2);
  font-family: sans-serif;
  /*font-size: 0.7292vw;*/
  /*font-weight: 500;*/
  box-shadow: 0 1vw 3vw rgba(0, 0, 0, 0.15);
  box-sizing: border-box;
}







/**************************************/
/*              HISTORIA              */
/**************************************/	


.historia{
		width:90%;
		background:#fff;
		border-radius:1vw;
		margin: 2vw auto;
		padding: 2vw;
		font-size:1.1vw;
		
		font-family: "Merriweather Sans", sans-serif;
	    font-optical-sizing: auto;
	    font-weight: <weight>;
	    font-style: normal;
	}
	
	.historia h1{
		font-family: "Merriweather Sans", sans-serif;
	    font-optical-sizing: auto;
	    font-weight: <weight>;
	    font-style: normal;
		
		font-weight: bold; 
		color: #000000; 
		font-size: 2vw;
		text-align:center;
		padding:2vw 0;
	}
	
	.historia h2{
		font-family: "Merriweather Sans", sans-serif;
	    font-optical-sizing: auto;
	    font-weight: <weight>;
	    font-style: normal;
		
		font-weight: bold; 
		color: #000000; 
		font-size: 1.5vw;
		text-align:center;
		padding:2vw 0;
	}
	
	.historia img{
		text-align: justify;

		width: 19.0vw;           /* Przykładowa szerokość zdjęcia */
	}
	
	.lewa{
		float: left;            /* Przesuwa zdjęcie do prawej, tekst opływa z prawej */
		margin-right: 2vw;     /* Odstęp tekstu od prawej krawędzi zdjęcia */
		margin-bottom: 1vw;    /* Odstęp tekstu od dołu zdjęcia */
		margin-top: 1vw;
	}
	
	.prawa{
		float: right;            /* Przesuwa zdjęcie do prawej, tekst opływa z prawej */
		margin-left: 2vw;     /* Odstęp tekstu od prawej krawędzi zdjęcia */
		margin-bottom: 1vw;    /* Odstęp tekstu od dołu zdjęcia */
		margin-top: 1vw;
	}
	
	.historia p{
		font-family: "Merriweather Sans", sans-serif;
	    font-optical-sizing: auto;
	    font-weight: <weight>;
	    font-style: normal;
		
		color: #000000; 
		font-size: 1.3vw;
		text-align:center;
		padding:1vw 0;
		text-align:justify;
	}	
	
	
/**************************************/
/*              ZEBRANIA              */
/**************************************/
	
.zebrania{
	width:90%;
	background:#fff;
	border-radius:1vw;
	margin: 2vw auto;
	padding: 2vw;
	font-size:1.1vw;
	
	font-family: "Merriweather Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: <weight>;
    font-style: normal;
}

.zebrania h1{
	font-weight: bold; 
	color: #000000; 
	font-size: 2vw;
	text-align:center;
	padding:2vw 0;
}

.zebrania h2{
	font-weight: bold; 
	color: #000000; 
	font-size: 1.5vw;
	text-align:center;
	padding:2vw 0;
}	
	
.zebranie_data{
	font-weight: bold; 
	color: #000000; 
	font-size: 2vw;
	text-align:center;
	padding:2vw 0 0 0;
	line-height:1;
}

.zebranie_nazwa{ 
	color: #000000; 
	font-size: 1.5vw;
	padding:0;
	line-height:1;
}

.zebranie_opis{
	color: #000000; 
	font-size: 1.2vw;
	padding:0 0 2vw 0;
	line-height:1;
}
	
.zebrania hr{
	 height: 0.2vw;
	 background-color: red;
	 width:60%;
	 margin: auto;
}


/***********************************/
/*              KONTA              */
/***********************************/	
	
/* Główny kontener – podział na dwie równe kolumny */
.konta {
	width:90%;
	
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 1vw;
   
  	width:90%;
	background:#fff;
	border-radius:1vw;
	margin: 2vw auto;
	padding: 2vw;
	font-size:1.1vw;
		
	font-family: "Merriweather Sans", sans-serif;
	font-optical-sizing: auto;
	font-weight: <weight>;
	font-style: normal;
}

.konta h1 {
	color:#000;
	font-size:2vw;
	grid-column: 1 / -1;  /* Rozciąga nagłówek od pierwszej do ostatniej kolumny */
	text-align: center;   /* Środkuje tekst w poziomie */
	margin: 2vw;
}

.karta h2 {
	color:#000;
	font-size:1.5vw;
	text-align:center;
	padding: 1vw 0 2vw 0;
}

.karta h3 {
	color:blue;
	font-size:1.0vw;
	text-align:center;
	padding: 0.5vw 0 0.5vw 0;
}

.karta h4 {
	color:#000;
	font-size:1.2vw;
	text-align:center;
	padding: 2vw 0 0.5vw 0;
}

.karta p {
	color:#000;
	font-size:1.0vw;
}

.karta{
	border:0.1vw solid gray;
	border-radius:1vw;
	padding:1vw;
	box-shadow: 0 0.1042vw 0.4167vw rgba(0,0,0,0.15);
}

.karta1{
	background-color: #fff2f2;
}

.karta2{
	background-color: #efffef;
}

.karta3{
	background-color: #f0f0ff;
}

.konto{
	font-size:1.3em;
}

.karta a:link {color:blue;}
.karta a:visited {color:blue;}
.karta a:hover {color:green;}
.karta a:active {color:red;}


.obiady{
		all: initial;
		width:90%;
		background:#fff;
		border-radius:1vw;
		margin: 2vw auto;
		padding: 2vw;
		font-size:1.1vw;
		color:#000;
		
		font-family: "Merriweather Sans", sans-serif;
	    font-optical-sizing: auto;
	    font-weight: <weight>;
	    font-style: normal;
	}
	
	
	
/* ==========================================================
   STARE PODSTRONY – OBIADY
   Izolacja starego kodu od nowego layoutu
   ========================================================== */

.legacy-obiady {

    display: block !important;

    width: 100% !important;

    /*max-width: 62.5vw !important;*/

    margin: 0 auto !important;

    padding: 2.6042vw 2.0833vw 4.1667vw !important;

    box-sizing: border-box !important;

    float: none !important;

    columns: auto !important;

    column-count: 1 !important;

    column-width: auto !important;

    column-gap: normal !important;

}


/* wszystkie bezpośrednie elementy starej strony */

.legacy-obiady > * {

    display: block;

    width: auto;

    max-width: 100%;

    box-sizing: border-box;

}


/* STARE CENTER NIE MOŻE STAĆ SIĘ FLEX */

.legacy-obiady center {

    display: block !important;

    width: auto !important;

    max-width: 100% !important;

}


/* Tabele jadłospisu */

.legacy-obiady table {

    display: table !important;

    width: 35.9375vw !important;

    max-width: 100% !important;

    margin-left: auto !important;

    margin-right: auto !important;

    border-collapse: collapse !important;

    border-spacing: 0 !important;

}


/* Wiersze */

.legacy-obiady tr {

    display: table-row !important;

}


/* Komórki */

.legacy-obiady td {

    display: table-cell !important;

}


/* Nagłówki */

.legacy-obiady h1,
.legacy-obiady h2,
.legacy-obiady h3 {

    display: block !important;

    width: 100% !important;

    float: none !important;

    clear: both !important;

}


/* Akapity */

.legacy-obiady p {

    display: block;

    width: auto;

    float: none;

    clear: both;

}


/* Linie poziome */

.legacy-obiady hr {

    display: block;

    clear: both;

    width: 100%;

}


/* Dodatkowe zabezpieczenie przed układem kolumnowym */

.legacy-obiady,
.legacy-obiady * {

    column-count: auto !important;

    column-width: auto !important;

}


/* Wyjątek dla tabel – mają być tabelami, nie flex/grid */

.legacy-obiady table,
.legacy-obiady tbody {

    display: table !important;

}

.legacy-obiady tbody {

    width: 100%;

}

.legacy-obiady tr {

    display: table-row !important;

}

.legacy-obiady td {

    display: table-cell !important;

}




/******************************************/
/*                KONTAKT                 */
/******************************************/


.kontakt{
	width:90%;
	background:#fff;
	border-radius:1vw;
	margin: 2vw auto;
	padding: 2vw;
	font-size:1.1vw;
	color:#000;
		
	font-family: "Merriweather Sans", sans-serif;
	font-optical-sizing: auto;
	font-weight: <weight>;
	font-style: normal;
}
	
.kontakt a:link {color:blue;}
.kontakt a:visited {color:blue;}
.kontakt a:hover {color:green;}
.kontakt a:active {color:red;}
	
.kontakt h1{
	font-weight: bold; 
	color: #000000; 
	font-size: 2vw;
	text-align:center;
	padding:2vw 0;
}

.kontakt h2{
	font-weight: bold; 
	color: #000000; 
	font-size: 1.7vw;
	text-align:center;
	padding:2vw 0;
}
	
.kontakt h3{
	font-weight: bold; 
	color: #000000; 
	font-size: 1.3vw;
	text-align:center;
	padding:2vw 0;
}

.kontakt p{
	color: #000000; 
	font-size: 1.0vw;
	text-align:center;\
}

.kontakt img{
	width:25vw;
	margin:auto;
}
	
/*
.dyrekcja {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.0417vw;
}

	.dyrekcja h1{
		font-family: "Merriweather Sans", sans-serif;
	    font-optical-sizing: auto;
	    font-weight: <weight>;
	    font-style: normal;
		
		font-weight: bold; 
		color: #000000; 
		font-size: 2vw;
		text-align:center;
		padding:2vw 0;
	}
	
	.dyrekcja h2{
		font-family: "Merriweather Sans", sans-serif;
	    font-optical-sizing: auto;
	    font-weight: <weight>;
	    font-style: normal;
		
		font-weight: bold; 
		color: #000000; 
		font-size: 1.5vw;
		text-align:center;
		padding:2vw 0;
	}


.left-col {
  display: flex;
  flex-direction: column;
  gap: 0.5208vw;
}


.right-col {
  display: flex;
  flex-direction: column;
  gap: 0.7812vw;
}


.photos-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5208vw;
}


.photo-item {
  display: flex;
  flex-direction: column;
  text-align: center;
}


img {
  width: 100%;
  height: auto;
  display: block;
}
*/

	
	
/*	
.dyr{
	float:left;
	width:50%;
}	
.vdyr{
	float:left;
	width:40%;
}
	
	
.grid-dyrekcja {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 2vw;
    margin-top: 1.5vw;
}	

.celldyr {
    min-height: 32vw; 
    padding: 1.5vw;
    background: #ffffff;
    border: 0.0521vw solid #cccccc; 
    border-radius: 0.5208vw;
    box-shadow: 0 0.3125vw 1.1979vw rgba(6, 38, 90, 0.08);
    
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
}

.celldyr h2 {
    margin: 0 0 1.5vw 0;
    font-size: 1.3vw;
    color: #08295e;
}

.celldyr a {
    display: inline-block;
    margin: 0.5vw 0;
    max-width: 100%;
}

.celldyr img {
    display: block;
    max-width: 100%;
    height: auto;
    max-height: 18vw; 
    object-fit: cover;
    border-radius: 0.2604vw;
    box-shadow: 0 0.1042vw 0.4167vw rgba(0,0,0,0.15);
    transition: transform 0.2s ease;
}

.celldyr img:hover {
    transform: scale(1.02); 
}

.celldyr-text {
    font-weight: bold;
    color: #374561;
    font-size: 0.95vw;
    margin-bottom: 1.5vw;
}

.DyrIMG{
	width: 100vw;
	height: 75vw;
}

.celldyr--scalona {
    grid-row: span 2;
    height: 100% !important; 
}



.img-duze {
    width: 80% !important;   
    max-height: none !important; 
}

.img-male {
    width: 20% !important;  
}

.celldyr .wrap-duze {
    width: 100%;
    display: flex;
    justify-content: center;
}

.celldyr .wrap-male {
    width: 100%;
    display: flex;
    justify-content: center;
}
*/