/* Blog */
:root {
	/* Színek */
	--sotetkek: #00283a;
	--narancs: orange;
	--zold: #8CC63F;
	--sotetzold: #006838;

	/* Árnyék */
	--arnyek-kicsi: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}
.sotetkek {color: var(--sotetkek);}
.feher {color: white;}
.hatterkek {background-color: var(--sotetkek);}
.kiemel-kek {color: white; background: forestgreen;}
.kiemel-feher {color: var(--sotetkek); background: white;}

.kozepre {text-align: center;}
.rejtett {display: none;}

#blog {background: white; box-shadow: 0px -10px 9px -11px rgba(0, 0, 0, 0.5); padding: 1em 1em; position: relative; max-width: 100%;}

.blogcontainer {display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; 
	.blog-card {background-color: var(--color-white); padding: 1rem; border-radius: 0.5rem; box-shadow: var(--arnyek-kicsi);}
	.blog-card:hover {transform: translateY(-5px); box-shadow: var(--shadow-md); text-decoration: none; color: var(--sotetkek);}
}
@media screen and (max-width: 1024px) {.blogcontainer {grid-template-columns: repeat(2, 1fr);}}
@media screen and (max-width: 480px) {.blogcontainer {grid-template-columns: 1fr;}}

#blog h2 {font-size: 2rem; text-align: center; color: var(--sotetkek); margin-bottom: 0.1rem;}
#blog h3 {font-size: 1rem; padding: 4px; text-align: center; margin: 0; height: 50px; border-radius: 10px 10px 0 0;}

.blog-date {background: var(--color-secondary); display: block; font-size: 0.85rem; color: white; padding: 5px; text-align: center;}
.blog-kep {width: 100%; height: 360px; display: flex; justify-content: center;}
.blog-kep img {width: 100%; /* Teljes szélességben jelenjen meg */ height: auto; /* Arányos maradjon */ object-fit: cover; /* Ha vágni kell, akkor a közepét mutassa */}
.blog-szoveg {height: 190px; text-align: center; padding: 10px; font-size: medium; background: white; box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5); overflow: hidden;
	word-wrap: break-word; overflow-wrap: break-word; word-break: break-word}

.modal {display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.8); overflow-y: scroll;}
.modal-content {background-color: white; margin: 1% auto; padding: 20px; width: 80%; position: relative;}
.modal .blog-kep {height: 50vh; background-size: contain;}
.modal .blog-szoveg {height: auto;}
.close {position: fixed; top: 15px; right: 20px; font-size: 20px; cursor: pointer; z-index: 1001; background-color: var(--zold); color: white; border-radius: 50%; width: 35px; height: 35px; line-height: 35px; border: none;}
.close:hover {background-color: var(--sotetzold); transform: scale(1.1); /* Kicsit nagyobb lesz hover esetén */
	
}@media (max-width: 480px) {
	.blog-card {max-width: 100%;}
	.modal-content {padding: 2px; width: 100%;}
	.close {right: 10px; font-size: 36px;}
}

.day {font-size: 2.5em; font-weight: 700;}
.month, .year {font-size: 0.85em;}
.blog-text {background: #fff; border-bottom: 1px solid #e0e0e0; border-right: 1px solid #e0e0e0; border-top: 1px solid #e0e0e0; min-height: 150px; padding: 0.625em 1.25em;}
.blog-text p {color: #777; font-size: 0.85em;}
.read-more {height: 30px; font-size: medium; width: 100%; border-radius: 0 0 30px 30px;}
.read-more:hover {color: var(--narancs);}

/* Lapozó */
#pagination {text-align: center; margin-top: 20px;}
#pagination a, #pagination span {display: inline-block; padding: 8px 12px; margin: 0 4px; text-decoration: none; border-radius: 5px; background: var(--color-primary); color: white; transition: 0.3s;}
#pagination a:hover {background: var(--color-secondary);}
#pagination .disabled {background: #ccc; color: #666; cursor: not-allowed;}