/*
===============================================================
Plik: posty.css
===============================================================
*/
/*
Klasy w tym CSS są bezpośrednio zagnieżdżone w kontenerze: SubContainerMainContentMIDDLE, który jest na początku pliku: default.asp
*/
/*
================================================== KONTENER NADRZĘDNY POSTÓW I KOMENTARZY =========================================================
*/
/* PostyKontener jet podkontenerem: SubContainerMainContentMIDDLE
*/
.PostyKontener {
	padding-top: 40px;	 /* odsuwa kontener z postami od banera */
	padding-left: 10px;
	padding-right: 10px;
	width: 100%;
	height: auto;
	margin: 0px 0px;
	background-color: black;
	border-top: 0px solid #303030;
	border-right: 0px solid #303030;
	border-bottom: 0px solid #303030;
	border-left: 0px solid #303030;
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
	border-bottom-right-radius: 4px;
	border-bottom-left-radius: 4px;
}
/*
============================================= NADRZĘDNY KONTENER JEDNEGO POSTA BEZ KOMENTARZY ====================================================
============================================ UKŁAD: JEDNA KOLUMNA. PODKONTENERY SĄ W WIERSZACH ===================================================	
*/

.PostySubKontenerPost {
	width: 100%;
	display: flex; 
	flex-direction: column; /* kolumnowy układ */

}
/*
================== PIERWSZY PODKONTENER DLA NAGŁÓWKA POSTA. ZAWIERA PODKONTENERY: PostyPostNaglowekTytul oraz PostyPostNaglowekInformacje ========= 
============================================= UKŁAD: JEDEN WIERSZ. PODKONTENERY SĄ W KOLUMNACH ====================================================	
*/

/* --------------------------------------------- */
/* KONTEKST: PostySubSubKontenerPostNaglowek     */
/* --------------------------------------------- */
.PostySubSubKontenerPostNaglowek {
	display: flex;
	flex-direction: column;
	width: 100%;
	border: 0px solid pink;
	justify-content: space-between;
	align-items: stretch; 		/* rozciągamy elementy na szerokość */
	padding-top: 0;
	padding-bottom: 0;
}

/* --------------------------------------------------- */
/* GÓRNY WIERSZ: Podpdkontener z informacjami (do prawej, do góry) */
/* --------------------------------------------------- */
.PostyPostNaglowekInformacje {
	height: 30px;
	align-self: flex-end; 		/* przesunięcie do prawej strony */
	cursor: pointer;
	letter-spacing: 2px;
	margin-right: 40px;
	padding-left: 15px;
	padding-right: 25px;
	font-size: 12px;
	color: #b38b5c;
	border-left: 1px solid red;
	border-right: 1px solid red;
	border-top: 1px solid red;
	border-top-left-radius: 3px;
	border-top-right-radius: 3px;
	text-align: right;
	flex-shrink: 0;
	white-space: nowrap;
/* WYŚRODKOWANIE POZIOME I PIONOWE */
	display: flex;
	justify-content: center;   /* poziomo */
	align-items: center;       /* pionowo */
}

/* ---------------------------------------------- */
/* DOLNY WIERSZ: Podpdkontener z tytułem (pełna szerokość) */
/* ---------------------------------------------- */
.PostyPostNaglowekTytul {
	height: 80px;
	margin-top: 0px;
	margin-bottom: 0px;
	margin-left: 40px;
	margin-right: 40px;
	padding-top: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	padding-right: 0px;
	border: 0px solid blue;
	background-color: #101010;
	display: flex;
	align-items: center; 	/* WYRÓWNANIE PIONOWE */
	align-self: stretch; 	/* rozciąga na pełną szerokość */
}

/*
KONIEC: PostySubSubKontenerPostNaglowek	
*/
/*
================== DRUGI PODKONTENER DLA TREŚCI POSTA. ZAWIERA PODKONTENER: DivPostAkapitTresc - WYSTĘPUJĄCY WIELOKROTNIE  ========================= 
============================================= UKŁAD: JEDNA KOLUMNA. PODKONTENERY SĄ W WIERSZACH ====================================================	
*/

.PostySubSubKontenerPostTresc {
	width: 100%;
	margin-top: 0px;
	display: block;
	overflow: hidden;
	border: 0px solid red;
}

/*
PODPODKONTENER W: PostySubSubKontenerPostTresc. PostyPostTresc WYSTĘPUJE WIELOKROTNIE JEDEN POD DRUGIM.	
*/
.DivPostAkapitTresc,
.PostyPostTresc {
	width: 100%;
	height: auto; /* podformularze edycja i z cytatem będą mogły się rozpychać. */
	text-align: left;
	letter-spacing: 2px;
    padding-top: 0px;
    padding-bottom: 0px;
    padding-left: 40px;
    padding-right: 40px;
	font-size: 16px;
	line-height: 25px;
	color: #B10A23;
	border: 1px solid;
	border-color: black;
	overflow-wrap: break-word;
	word-break: break-word;
}
/* =================================================== NAGŁÓWKI AKAPITÓW W POSTACH ==============================================================
 */
/*
 DODAWANY DO TREŚCI POSTA PRZY WYŚWIETLANIU POSTA W : inc/common_functions/fejk_naglowek.asp
*/
.h6FejkoweDoPrzewijaniaPostAka {
	visibility: hidden;
	height: 1px;
	border : 0px solid red;
	margin-top: 0px;
}

/* NAGŁÓWEK posta - ikony: koperta, komentarze, data publikacji posta
*/
.imgPostTytulInformacjeIkona {
	height: 22px;  		/* - rzeczywista wysokość obrazka: 150px */
	margin-left: 12px;
	margin-right: 3px;
	border: 0px solid;
	border-color: blue;
}

/* PostySubKontenerPost -> PostySubSubKontenerPostNaglowek -> PostyPostNaglowekTytul -> :
*/
.h2PostTytulTytul {
	height: 100%;
	width: 100%;
	text-align: left;
	padding: 0;
	margin: 0;
	border: 2px solid red;
	border-radius: 3px;
	border-top-right-radius: 0px;
	color: red;
	display: flex;
	align-items: center;
}

/* Stylizacja całego klikalnego nagłówka */
.h2PostTytulTytul a {
	height: 100%;
	width: 100%;
	align-items: center;  /* wycentrowanie treści pionowo w <a> */
	display: flex; 
	padding: 0px 15px;
	font-family: "ITC Fenice Regular BOLD";
	letter-spacing: 2px;
	font-size: 32px;
	color: red;
}

.h2PostTytulTytul a:hover {
	font-size: 32px;
}

/*
Dodawany do treści postaw DB przez: inc/publikowanie_sprawdz.asp
*/

.h2postAkapitTytul {
	font-family: "ITC Fenice Regular BOLD";
	letter-spacing: 2px;
	text-align: left;
    padding-top: 0px;	/* tekst wewnatrz */
    padding-bottom: 0px;	/* tekst wewnatrz */
    padding-left: 30px;/* tekst wewnatrz */
    padding-right: 30px;/* tekst wewnatrz */
	font-size: 24px;
	line-height: 30px;
	color: #B10A23; /* ciemnoczerwony */
	border: 1px solid;
	border-color: black;
}

/*
Dodawany do treści postaw DB przez: inc/publikowanie_sprawdz.asp
*/

.h3postAkapitPodTytul {
	font-family: "ITC Fenice Regular BOLD";
	letter-spacing: 2px;
	text-align: left;
    padding-top: 5px;		/* tekst wewnatrz */
    padding-bottom: 0px;	/* tekst wewnatrz */
    padding-left: 40px;		/* tekst wewnatrz */
    padding-right: 40px;	/* tekst wewnatrz */
	font-size: 20px;
	line-height: 25px;
	color: #B10A23; 		/* ciemnoczerwony */
	border: 1px solid;
	border-color: black;
}

/* =============================================================== GŁÓWNY OBRAZEK  ==============================================
/*
PODPODKONTENER W: PostySubSubKontenerPostTresc. PostyPostObrazek WYSTĘPUJE JEDNORAZOWO, WYRÓWNIANIE DO PRAWEJ FLOAT.	
*/
.PostyPostObrazek {
	height: 240px;
	float: right;
	padding: 0px 0px;
	margin: 0px 0px;
	margin-left: 10px;
	margin-right: 20px;
	margin-top: 75px;
	margin-bottom: 0px;
	border: 0px solid blue;
}
/* Główny obrazek posta
*/
/* oryginalny rozmiar: szerokość: 292 px, wysookość: 400 px
	292 / 400 = 0.73 (czyli 73% szerokości względem wysokości)
*/
.imgPostZoom {
    cursor: pointer;
    transition: transform .3s;
	border: 1px solid red;
	float: right;
	height: 240px;
	max-width: 180px;
	aspect-ratio: 292 / 400;  /* zachowuje proporcje */
	object-fit: contain;       /* ważne: nie przytnie obrazka */
}
/* =======================================================  GALERIA W POPUPIE ================================================================

/* użyty w: inc/js/publikowanie_galeria_kreator.js
 do popupu GALERII dla akapitu posta
 NIE ZMIENIAĆ NAZWY KLASY!
*/
.imgPostGaleriaSkan {
    cursor: pointer;
    transition: transform .3s;
	border: 0px solid red;
	float: right;
	margin-left:10px;
	margin-right:30px;
	margin-top:0px;
	height: 240px;
	max-width: 180px;
	aspect-ratio: 292 / 400;  /* zachowuje proporcje */
	object-fit: contain;       /* ważne: nie przytnie obrazka */
}

.imgPostZoom:hover, .imgPostGaleriaSkan:hover {
	-ms-transform: scale(1.03); /* IE 9 */
	-webkit-transform: scale(1.03); /* Safari 3-8 */
	transform: scale(1.03); 
}

/*
KONIEC: PostySubSubKontenerPostTresc	
*/
/*
================== TRZECI PODKONTENER DLA: STOPKA POSTA. ZAWIERA PODKONTENER: PostySubSubKontenerPostStopka  ========================== 
============================================== UKŁAD: JEDEN WIERSZ. =======================================================	
*/

.PostySubSubKontenerPostStopka{
	clear: both;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 10px;
	margin-bottom: 30px;
	margin-left: 40px;
	margin-right: 40px;
	padding-top: 20px;
	border : 0px solid #202020;
}
.PostySubSubKontenerPostStopka-lewa,
.PostySubSubKontenerPostStopka-prawa {
	min-width: 50px;
	text-align: left;
}
.PostySubSubKontenerPostStopka-lewa	{
	text-align: left;
}

.PostySubSubKontenerPostStopka-prawa {
	text-align: right;
}
/*
============================================== KONIEC PostySubKontenerPost KONIEC ==========================================================
*/
/*
┌────────────────────────────────────────────────────────────────────┐
│ <div class="PostySubKontenerKomentarze" id="komentarzeXXX">        │
│  ┌──────────────────────────────────────────────────────────────┐  │
│  │ <div class="PostySubSubKontenerKomentarze">                  │  │
│  │  └─ <!-- #include file="inc/post_koment_widok.asp" -->       │  │
│  └──────────────────────────────────────────────────────────────┘  │
└────────────────────────────────────────────────────────────────────┘

[JEŚLI NIEZALOGOWANY:]
┌────────────────────────────────────────────────────────────────────┐
│ <div class="PostySubKontenerKomentarzeLoguj">                      │
│  └─ <a class="PostKomLinkZaloguj">Zaloguj się, aby...              │
└────────────────────────────────────────────────────────────────────┘

[JEŚLI ZALOGOWANY:]
┌────────────────────────────────────────────────────────────────────┐
│ <div class="PostySubKontenerKomentarzeForm" id="KomentarzFormX">   │
│  └─ <!-- #include file="inc/post_koment_form.asp" -->              │
└────────────────────────────────────────────────────────────────────┘

[W PRZYPADKU BRAKU POSTA:]
┌────────────────────────────────────────────────────────────────────┐
│ <div class="PostySubKontenerKomentarze" id="komentarzeXXX">        │
│   (pusty, tylko dla przewinięcia po hashu)                         │
└────────────────────────────────────────────────────────────────────┘
*/
/*
====================================== NADRZĘDNY KONTENER KOKMENTARZY KONKRETNEGO POSTA ====================================================
====================================== RÓWNORZĘDNY W HIERARCHII DO: PostySubKontenerPost ===================================================
================================ UKŁAD PODKONTENERÓW W PostySubKontenerPost: JEDEN POD DRUGIM ==============================================
*/

/* 
====================================== NADRZĘDNY KONTENER KOMENTARZY KONKRETNEGO POSTA =======================================
/* 
====================================== NADRZĘDNY KONTENER KOMENTARZY KONKRETNEGO POSTA =======================================
Zawiera albo tylko kotwicę (#id), albo strukturę z komentarzami, linkiem logowania, lub formularzem.
plik: post.asp
*/
.PostySubKontenerKomentarze {
	width: 100%;
	height: auto;                     /* umożliwia rozciąganie w pionie */
	display: flex;
	flex-direction: column;          /* dzieci w pionie */
	align-items: stretch;            /* dzieci zajmują pełną szerokość */
	margin: 0 auto;
	padding: 10px 0;
	border: 0px solid #888;         
	background-color: transparent;       
	gap: 16px;                        /* odstęp między wewnętrznymi kontenerami */
}

/* 
======================== PODKONTENER WYŚWIETLENIA KOMENTARZY  (czyli z pliku post_koment_widok.asp) ========================

Ten kontener MUSI też rozciągać się dynamicznie (formularze cytuj, edytuj itp).
*/
.PostySubSubKontenerKomentarze {
	width: 100%;
	height: auto;
	display: flex;
	flex-direction: column;
	align-items: center;  				/* wyśrodkuje dzieci w poziomie */
	padding: 0px 0px;
	margin: 0px 0px;
	border: 0px solid blue;         
	background-color: transparent;     
	gap: 12px;                         /* odstęp między poszczególnymi komentarzami */
	overflow-x: hidden;               /* 🔒 ŻADNE DZIECKO NIE WYJDZIE POZA W PRAWO */
	max-width: 100vw;                 /* 🔒 NIE PRZEKROCZY SZEROKOŚCI EKRANU */
}
/*
klasy z Kolaps mają formatowanie w common.css
Kolejne podkontenery w PostySubSubKontenerKomentarze to:
 ---> btnKolapsKomentarze ---> divKolapsKomentarze --> i zapętlony dla jednego kom: DivKomentarzWyswietl
*/

.DivKomentarzWyswietl {
	width: 80%;
	border-radius: 2px;
	margin-top: 0px;
	letter-spacing: 1px;
	line-height: 22px;
	color: grey;
	padding: 30px;
	border: 1px solid #202020;
	text-align: left;
	outline: none;
	font-size: 15px;
	margin-left: auto;
	margin-right: auto;
	display: flex;
	flex-direction: column;
	align-items: stretch;
}

/* HOVER bez zmian, bo to nie architektura */
.DivKomentarzWyswietl:hover {
	border-radius: 2px;
	border: 1px solid red;
	background-color: #101010;
}

.DivKomentarzWyswietlNaglowek {
	margin-top: 0px;
	padding: 6px;
	width: 100%;
	border: 0px solid #202020;
	border-bottom: 1px solid #202020;
	display: flex;						/* główny kontener jako poziomy flex */
	flex-direction: row;				/* elementy obok siebie: dane i przycisk */
	justify-content: space-between;		/* jeden do lewej, drugi do prawej */
	align-items: center;				/* pionowe wyśrodkowanie */
}

.DivKomentarzWyswietlNaglowekDane {
	letter-spacing: 1px;
	line-height: 22px;
	color: grey;
	text-align: left;
	outline: none;
	font-size: 15px;
	display: flex;						/* zawartość w poziomie: avatar + tekst */
	flex-direction: row;
	align-items: center;				/* wyśrodkowanie pionowe */
	gap: 10px;							/* odstęp między avatarkiem a tekstem */
	flex-wrap: wrap;					/* zawijaj w razie wąskiego kontenera */
}

.DivKomentarzWyswietlNaglowekButEdytuj {
	padding: 0px;
	border: 0px solid purple;
	margin: 0px 5px 0px 0px;
	display: flex;
	align-items: center;
	justify-content: flex-end;

}

.DivKomentarzWyswietlNaglowekButCytuj {
	padding: 0px 0px 0px 20px;
	margin: 0px 0px;
	border: 0px solid purple;

	/* [KOMENTARZ AI] Przycisk cytowania — pozostaje inline lub może być w kontenerze */
}

.DivKomentarzWyswietlTresc {
	margin-top: 0px;
	letter-spacing: 1px;
	line-height: 22px;
	color: grey;
	padding: 15px;
	width: 100%;
	border: 0px solid #202020;
	margin-bottom: 0px;
	text-align: left;
	outline: none;
	font-size: 14px;

	/* [KOMENTARZ AI] Treść komentarza jako osobny blok — nie trzeba flex */
}
/* czacha / kwiatek */
.ImgKomentarzBlokOdblok {
	float: right;
	margin-left: 10px;
	margin-top: 10px;
	width: 22px;
	height: 22px;

}

/*
======================== KONIEC WYŚWIETLENIA KOMENTARZY(czyli z pliku post_koment_widok.asp) ========================
Wyjście z includa post_koment_widok.asp do posty.asp
/* 
========================= LINK DO ZALOGOWANIA (dla niezalogowanych użytkowników) ========================================
Pojawia się poniżej komentarzy – jego miejsce też musi być odseparowane pionowo.
plik: post.asp / warstwa dla niezalogowanych
*/
.PostySubKontenerKomentarzeLoguj {
	width: 100%;
	text-align: left;
	padding: 0px 0px;
	margin-bottom: 30px;
	margin-top: 30px;
	font-size: 15px;
	border: 0px solid green;
}

/* 
=========================== FORMULARZ DODAWANIA KOMENTARZA (dla zalogowanych użytkowników) ===========================
Ten kontener też może się dynamicznie rozciągać (np. w razie rozwinięcia cytatu).
plik: post_koment_form.asp
*/
.PostySubKontenerKomentarzeForm {
	width: 100%;
	height: auto;
	display: flex;                 /* KONIECZNE do wyśrodkowania dzieci */
	justify-content: center;      /* wyśrodkuje dzieci w poziomie */
	align-items: center;  /* wyśrodkuje dzieci w poziomie */
	min-height: 200px;
	padding: 0px;
	margin-top: 10px;
	text-align: center;
	border: 0px solid green;          
	background-color: transparent;
	position: relative;
}

.FormDodajKomentarzDoPosta {
	width: 80%;
	background-color: transparent;
	border: 0px solid red;
}
.FormDodajKomentarzDoPostaTextArea {
	width: 100%;
	background-color: #202020;
	margin-bottom: 10px;
	padding: 20px;
	border : 1px solid red;
	border-radius: 2px;
	font-size: 14px;
	color: grey;
	text-align: left;
	resize: none;
}

/*
====================================================== KONIEC PostyKontener KONIEC ==============================================================
*/


/*
???????????????
*/

hr.redPostNaglowekTop {
	border: 1px solid red; 
	border-radius: 5px;
	margin-top: 10px;
	margin-bottom: -2px;
	margin-right: 100px;
	margin-left: 40px;
}
hr.redPostNaglowekBottom {
	border: 1px solid red; 
	border-radius: 5px;
	margin-top: 0px;
	margin-bottom: -10px;
	margin-right: 40px;
	margin-left: 40px;
}