/* Tudástár — gyűjtőoldal (/tudastar), cikk-oldal (/cikk/{slug}) és a fő keresőoldal "Kapcsolódó cikkek" doboza */

/* --- Kapcsolódó cikkek a keresőoldalon (inc/content/kereses.php) --- */

.kereses-cikkek-box {
	clear: both;
	margin: 1.5rem 0;
}

.kereses-cikkek-cim {
	font-size: 1.15rem;
	margin: 0 0 1rem;
}

.tudastar-cikk-grid--kompakt {
	grid-template-columns: repeat(3, 1fr);
	margin-bottom: 0;
}

.tudastar-cikk-grid--kompakt .tudastar-cikk-kartya img {
	height: 140px;
}

@media (max-width: 767px) {
	.tudastar-cikk-grid--kompakt {
		grid-template-columns: 1fr;
	}
}

/* --- Gyűjtőoldal --- */

.tudastar-aktiv-szuro {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	flex-wrap: wrap;
	background: #eef6fd;
	border: 1px solid #cfe6f8;
	border-radius: 6px;
	padding: 0.6rem 0.9rem;
	margin: 0 0 1.25rem;
	font-size: 0.9rem;
}

.tudastar-aktiv-szuro-torles {
	color: #0787ea;
	text-decoration: none;
	font-weight: 600;
	font-size: 0.85rem;
}

.tudastar-aktiv-szuro-torles:hover {
	text-decoration: underline;
}

/* A kereses-facets.css sidebar-mintája (space-between, teljes szélesség) helyett
   pill-szerű, sortörős cimke-felhő, mert itt nincs szűk oldalsáv-oszlop. */
#tudastar-facets {
	margin-top: 2rem;
}

.tudastar-lapozo {
	text-align: center;
	margin: 1.5rem 0;
}

.tudastar-lapozo ul.page-numbers {
	display: inline-flex;
	flex-wrap: wrap;
	justify-content: center;
	list-style: none;
	margin: 0;
	padding: 0;
}

#tudastar-facets .kereses-facet-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

#tudastar-facets .kereses-facet-item {
	display: inline-flex;
	flex: 0 0 auto;
	margin: 0;
	background: #f5f5f5;
	border-radius: 999px;
	padding: 0.3rem 0.4rem 0.3rem 0.8rem;
}

#tudastar-facets .kereses-facet-item a {
	flex: none;
	color: #333;
}

#tudastar-facets .kereses-facet-item .count {
	flex: none;
	margin-left: 0.35rem;
	padding-right: 0.4rem;
}

#tudastar-facets .kereses-facet-item.is-active {
	background: #0787ea;
}

#tudastar-facets .kereses-facet-item.is-active a,
#tudastar-facets .kereses-facet-item.is-active .count {
	color: #fff;
}

.tudastar-kategoriak {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0 0 1.5rem;
}

.tudastar-kategoria-pill {
	display: inline-block;
	padding: 0.4rem 0.9rem;
	border-radius: 999px;
	border: 1px solid #ddd;
	color: #333;
	text-decoration: none;
	font-size: 0.9rem;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.tudastar-kategoria-pill:hover {
	background-color: #f5f5f5;
}

.tudastar-kategoria-pill.is-active {
	background-color: #1a1a1a;
	border-color: #1a1a1a;
	color: #fff;
}

.tudastar-cikk-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
	margin: 0 0 2rem;
}

@media (max-width: 991px) {
	.tudastar-cikk-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 575px) {
	.tudastar-cikk-grid {
		grid-template-columns: 1fr;
	}
}

.tudastar-cikk-kartya {
	display: flex;
	flex-direction: column;
	border: 1px solid #ebebeb;
	border-radius: 6px;
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	transition: box-shadow 0.15s ease;
}

.tudastar-cikk-kartya:hover {
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}

.tudastar-cikk-kartya img {
	width: 100%;
	height: 200px;
	object-fit: cover;
	display: block;
}

.tudastar-cikk-kartya-body {
	padding: 1rem 1.1rem 1.25rem;
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

.tudastar-cikk-kategoria {
	font-size: 0.78rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: #0787ea;
}

.tudastar-cikk-olvasasi-ido {
	font-size: 0.8rem;
	color: #888;
}

.tudastar-cikk-kartya h2 {
	font-size: 1.1rem;
	margin: 0.15rem 0 0.2rem;
	line-height: 1.35;
}

.tudastar-cikk-lead {
	font-size: 0.9rem;
	color: #555;
	margin: 0;
}

/* --- Cikk-oldal --- */

.cikk-piszkozat-banner {
	background-color: #fff3cd;
	border: 1px solid #ffe69c;
	color: #664d03;
	padding: 0.75rem 1rem;
	border-radius: 4px;
	margin-bottom: 1.25rem;
	font-weight: 600;
}

.cikk-fejlec {
	margin-bottom: 1.25rem;
}

/* Ugyanaz a cím-tipográfia, mint a termék-/kategóriaoldalakon
   (mobile-enhancements.css 19. szekció: h2.h1 / h1.page-title / .product_title
   — 700-as súly, #1a2530, -0.02em letter-spacing, fluid clamp() méret).
   Nem az ottani class-neveket (page-title stb.) használjuk, mert azok mérete
   a `.woocommerce-page` body-class-tól függ, ami a Tudástár oldalakon nincs
   jelen — helyette ugyanazokat a deklarációkat adjuk meg közvetlenül. */
.cikk-fejlec h1,
.tudastar-oldal > header h1 {
	font-weight: 700;
	color: #1a2530;
	letter-spacing: -0.02em;
	font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.786em);
	line-height: 1.3;
	margin: 0.35rem 0 0.5rem;
}

.cikk-kategoria-badge {
	display: inline-block;
	font-size: 0.78rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: #0787ea;
	text-decoration: none;
	margin-bottom: 0.5rem;
}

.cikk-olvasasi-ido {
	color: #888;
	font-size: 0.9rem;
	margin: 0.25rem 0 0;
}

.cikk-fokep {
	margin: 1.75rem 0 2rem;
}

.cikk-fokep img {
	width: 100%;
	max-height: 480px;
	object-fit: cover;
	border-radius: 6px;
}

.cikk-lead {
	font-size: 1.1rem;
	color: #444;
}

.cikk-toc {
	background: #f7f9fb;
	border: 1px solid #e5e9ee;
	border-radius: 6px;
	padding: 1.25rem 1.5rem;
	margin: 1.75rem 0 2rem;
}

.cikk-toc-cim {
	font-weight: 700;
	color: #1a2530;
	margin: 0 0 0.6rem;
	font-size: 1rem;
}

.cikk-toc-lista {
	margin: 0;
	padding-left: 1.25rem;
	font-size: 0.95rem;
	line-height: 1.6;
}

.cikk-toc-lista--sub {
	margin-top: 0.35rem;
	padding-left: 1.25rem;
	font-size: 0.9rem;
}

.cikk-toc-lista a {
	color: #0787ea;
	text-decoration: none;
}

.cikk-toc-lista a:hover {
	text-decoration: underline;
}

.cikk-tartalom {
	font-size: 1rem;
	line-height: 1.7;
}

.cikk-tartalom img {
	max-width: 100%;
	height: auto;
	border-radius: 4px;
}

/* CKEditor <figure class="image"> — ne örökölje a főoldali hero .image stílusát
   (style3.css: position:absolute; height:485px), ami kiveszi a képet a szövegfolyásból
   és későbbi bekezdéseket a kép alá tolja vizuálisan. */
.cikk-tartalom figure.image,
.cikk-tartalom figure.image_resized {
	position: static;
	right: auto;
	overflow: visible;
	height: auto;
	display: block;
	margin: 1.5rem 0;
}

.cikk-tartalom figure.image img,
.cikk-tartalom figure.image_resized img {
	display: block;
}

.cikk-tartalom h2 {
	margin-top: 2.25rem;
	margin-bottom: 1.1rem;
}

.cikk-tartalom h3 {
	margin-top: 2.75rem;
	margin-bottom: 1.35rem;
}

.cikk-tartalom h2:first-child,
.cikk-tartalom h3:first-child {
	margin-top: 0;
}

.cikk-gombok {
	display: flex;
	flex-wrap: wrap;
	gap: 0.9rem;
	margin-top: 2.5rem;
}

.cikk-cta {
	display: inline-block;
	padding: 0.85rem 1.75rem;
	color: #fff;
	font-weight: 600;
	font-size: 1.05rem;
	border-radius: 6px;
	text-decoration: none;
	transition: filter 0.15s ease, transform 0.1s ease;
}

.cikk-cta:hover {
	color: #fff;
	text-decoration: none;
	filter: brightness(1.06);
}

.cikk-cta:active {
	transform: translateY(1px);
}

/* Ugyanaz a 3 szín-koncepció, mint a főoldali hero slider háttér-módjainál
   (cms/slider.php hatter_mod: gradient-kek / gradient-meleg / gradient-sotet),
   csak telítettebb tónusban, hogy jó kontrasztú gombként is működjön. */
.cikk-cta--meleg {
	background-image: linear-gradient(135deg, #ff9a44 0%, #f97316 100%);
}

.cikk-cta--kek {
	background-image: linear-gradient(135deg, #3fa9f5 0%, #0b5a9e 100%);
}

.cikk-cta--sotet {
	background-image: linear-gradient(135deg, #16222e 0%, #1f3242 55%, #0b5a9e 100%);
}

.cikk-cimkek {
	margin-top: 2rem;
	padding-top: 1rem;
	border-top: 1px solid #ebebeb;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.cikk-cimke {
	display: inline-block;
	padding: 0.3rem 0.7rem;
	border-radius: 999px;
	background-color: #f5f5f5;
	color: #333;
	font-size: 0.85rem;
	text-decoration: none;
}

.cikk-cimke:hover {
	background-color: #ebebeb;
}