/*****************************************
******************************************
	
	pdoia.min.CSS korygujący style.min.css
			
******************************************
******************************************/


	/*****************************************
				Pasek przewijania
	******************************************/
	html {
		/*pdoia*/
		scrollbar-width:auto !important;
		 /*buttony i pasek - żeby przy okazji 
		 był widoczny również w Chrome*/
		scrollbar-color:#f00 #f1f1f2 !important;
	}

	/*****************************************
		Lepsze wpasowanie 'body' artykułu
		żeby nie wychodziło poza prawą
		krawędź 'kontenera'
	******************************************/
	.row > * {
		flex-shrink: 1;
	}

	/*****************************************
		Mniejszy margines pod linią
	******************************************/
	hr {
		margin: 25px 0;
	}

	/*****************************************
		Mniejsze przerwy nad/pod <p>...</> artykułów
	******************************************/
	.article p, .article-wrapper p {
		/*pdoia*/
		margin:10px 10px;
	}
	
	/*****************************************	
	Domyślnie <p> niech mają: justify 
	ale pod warunkiem że w edytorze autor artykułu 
	nie nadał im ręcznie (ikonkami toolbar)
	konkretnego justowania: left/center/right
	wtedy zachowają style narzucone przez autora
	******************************************/	
	.article p:not(.text-start):not(.text-center):not(.text-end),
	.article-wrapper p:not(.text-start):not(.text-center):not(.text-end)
	{
		text-align: justify !important;
	}  


	/*****************************************	
	Do tekstów nagłówkowych h1234 też czasami
	warto zmienić justowanie (podobnie jak <p>)
	I wtedy np. można h4 wykorzystywać jako tekst
	mniejszy niż Normalny i dodatkowo sterować text-start/center/end
	******************************************/	
	.article			h1:not(.text-start):not(.text-center):not(.text-end),
	.article-wrapper	h1:not(.text-start):not(.text-center):not(.text-end),
	
	.article 			h2:not(.text-start):not(.text-center):not(.text-end),
	.article-wrapper	h2:not(.text-start):not(.text-center):not(.text-end),

	.article 			h3:not(.text-start):not(.text-center):not(.text-end),
	.article-wrapper	h3:not(.text-start):not(.text-center):not(.text-end),
	
	.article			h4:not(.text-start):not(.text-center):not(.text-end),
	.article-wrapper	h4:not(.text-start):not(.text-center):not(.text-end)
	{
		/* text-align: left !important; */
		text-align: var(--bs-body-text-align);	/*default wg bootstrap.min.css*/
	}  


	
	/*****************************************
		Mniejsze przerwy nad/pod <img>
	******************************************/
	.article img {
		/*pdoia*/
		/* display: flex; */
		margin:5px 0 5px !important;
		height: auto !important;	/* proporcjonalnie dopasuj H */
		object-fit: contain !important; /* Zachowanie proporcji */		
	}
	
	/* .article img:first-of-type { */
		/*pdoia*/
		/* display: flex; */
		/* max-width: 50%;		 */
		/* margin:5px 0px 5px !important;		 */
	/* } */
	/* .article img:last-of-type { */
		/*pdoia*/
		/* display: flex; */
		/* max-width: 50%; */
		/* margin:5px 0px 5px !important; */
	/* } */
	


	/*****************************************
		CENTROWANIE <img> w <p>
		(tych <img> węższych aniżeli szer. <p>)
	******************************************/
	p:has(> img) { 
	  /* display: flex; */
	  
	  /* na małych ekranach rozdziel wiele obrazów 
	  umieszczonych w <p>...</p> na osobne linie */
	  display: grid !important;
	  
	  justify-content: center;
	  align-items: center;
	}
	

/*- - - - - - - - - - - - - - - - - - - -
	MEDIA QUERIES
	- - - - - - - - - - - - - - - - - - - - */
	/*===================================
	320
	*===================================*/
	@media (min-width:320px) {

		/*****************************************
			Mniejsze przerwy nad/pod <h1>...</h1> artykułów
		******************************************/
		.article h1 {
			/*pdoia*/
			margin:30px 0 30px;
		}
	}
	/*===================================
	375
	*===================================*/
	@media (min-width:375px) {

	}
	/*===================================
	414
	*===================================*/
	@media (min-width:414px) {

	}
	
	/*===================================
	768 i większe ekrany
	*===================================*/
	@media (min-width:768px) {

		/*****************************************
			Mniejsze przerwy między liniami treści
		******************************************/
		.article {
			/*pdoia*/
			line-height:3.2rem;
		}
		/*****************************************
			Mniejsze przerwy nad/pod <h1>...</h1> artykułów
		******************************************/
		.article h1 {
			/*pdoia*/
			margin:39px 0 37px;

		}

		/*****************************************
			paragraf z co najmniej 2 obrazami
		*****************************************/
		p:has(> img):has(:nth-of-type(n+2)) { /* paragraf z co najmniej 2 obrazami */
		  display: flex !important;
		  /* border: solid 3px red; */
		  gap: 10px;
		}

		/*****************************************
			obrazy w paragrafie z co najmniej 2 obrazami
		*****************************************/
		p:has(> img):has(:nth-of-type(n+2)) img {
			max-width: 100% !important; /* obrazy responsywne */
			/* border: solid 3px blue; */
		}		

	}

	/*===================================
	1368
	surface
	mac air - 1400
	*===================================*/
	@media (min-width:1368px) {


	}