/******************************************************************
FMOE TudásPont – a megjelenés rétege

A tudaspont.css TETEJÉRE épül, nem helyette: az alap elrendezés, a szűrés és
az akadálymentesítési szabályok onnan jönnek, itt csak a megjelenés változik.
Ezért minden szabály a .tp-app--modern osztályra szűkít.

Formanyelv: lekerekített felületek, finom árnyékok, halk keretek, verzál
feliratok helyett normál szedés. A kategória színe itt már nem vastag keret,
hanem apró jelölés – a felület nyugodtabb, a tartalom viszi a hangsúlyt.
Kártyán nincs leírás, csak cím és a legszükségesebb adatok.
******************************************************************/

/* Az FMOE TudásPont arculati színei. A fájl csak a v2 sablonon töltődik be,
   ezért a :root itt nem szivárog át más oldalakra. */
:root {
	--tp-fmoe-kek: #17265b;
	--tp-fmoe-kek-vil: #2c3d78;
	--tp-fmoe-zold: #8cae2e;
	--tp-fmoe-krem: #edeae3;
}

.tp-app--modern {
	--tp-felulet: #ffffff;
	--tp-alap: #f7f8f5;
	--tp-vonal: #e6e8e1;
	--tp-szoveg: #22261f;
	--tp-halvany: #6d7268;
	--tp-ker: 14px;
	--tp-ker-kicsi: 10px;
	--tp-arnyek: 0 1px 2px rgba(24, 28, 20, 0.04), 0 1px 3px rgba(24, 28, 20, 0.07);
	--tp-arnyek-emelt: 0 10px 28px rgba(24, 28, 20, 0.10), 0 2px 6px rgba(24, 28, 20, 0.05);

	margin-top: 0;
}

/* ---------- Fejléc ----------

Az FMOE TudásPont arculatához igazítva: sötétkék kiemelés, olívazöld aláhúzás,
krém alap, szívmotívum. Szándékosan alacsony – ez egy aloldal fejléce, nem a
főoldal hero-ja. A .tp-hero az #tp-app elemen KÍVÜL van, ezért nem a
.tp-app--modern osztályra szűkítünk; a fájl amúgy is csak a v2 sablonon töltődik. */

.tp-hero {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 18px;
	margin: 0.25rem 0 1.75rem;
	padding: 30px 34px 28px;
	border-radius: 18px;
	background: var(--tp-fmoe-krem);
	overflow: hidden;
}

.tp-hero__body {
	position: relative;
	z-index: 1;
	min-width: 0;
	flex: 1 1 380px;
}

.tp-hero__badge {
	display: inline-block;
	padding: 8px 18px;
	border-radius: 10px;
	background: var(--tp-fmoe-kek);
	color: #fff;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.tp-hero__title {
	position: relative;
	margin: 16px 0 0;
	color: var(--tp-fmoe-kek);
	font-size: clamp(30px, 4.2vw, 46px);
	font-weight: 800;
	letter-spacing: -0.015em;
	line-height: 1.05;
	text-transform: uppercase;
}

.tp-hero__titletext {
	position: relative;
	display: inline-block;
	padding-bottom: 12px;
}

/* Az egyesület rövid neve a cím előtt. Szándékosan nem az arculati zöld
   (--tp-fmoe-zold): az aláhúzásként dekoráció, betűként viszont csak 2,1:1
   kontrasztot adna a krém alapon – kevés a WCAG 1.4.3 szerinti 3:1-hez is.
   Ez az árnyalat ugyanabból a zöld családból való, és 3,2:1-et ad. */
.tp-hero__brand {
	color: #6f8c24;
}

/* Kézzel húzott hatású aláhúzás a cím alatt, az arculat szerint. A
   szövegdobozhoz igazodik, ezért pontosan a cím szélességét veszi fel. */
.tp-hero__swoosh {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 11px;
	color: var(--tp-fmoe-zold);
	overflow: visible;
}

.tp-hero__lead {
	max-width: 46ch;
	margin: 14px 0 0;
	color: #4a4f55;
	font-size: 16px;
	line-height: 1.55;
}

/* A szívmotívum dekoratív, a sarokból néz be – tartalmi jelentése nincs. */
.tp-hero__heart {
	position: absolute;
	top: 22px;
	right: 34px;
	width: 104px;
	height: 94px;
	color: var(--tp-fmoe-zold);
	opacity: 0.3;
	pointer-events: none;
}

.tp-hero__heart svg {
	width: 100%;
	height: 100%;
}

/* A statisztika a fejléc jobb alsó sarkában ül, és egyben élő régió: szűréskor
   a találatszámot mondja be. */
.tp-hero .tp-live {
	position: relative;
	z-index: 1;
	flex: 0 1 auto;
	margin: 0;
	padding: 10px 18px;
	border-radius: 999px;
	background: #fff;
	color: #5b6068;
	font-size: 13.5px;
	white-space: nowrap;
}

.tp-hero .tp-live strong {
	color: var(--tp-fmoe-kek);
	font-size: 16px;
	font-weight: 700;
}

.tp-app--modern .tp-intro,
body .tp-hero + .tp-intro {
	margin-bottom: 1.25rem;
	color: #4d5248;
}

.tp-app--modern .tp-toolbar {
	padding: 0;
	background: none;
	border-left: 0;
	gap: 12px;
}

.tp-app--modern .tp-search input[type="search"] {
	height: 56px;
	padding-left: 48px;
	border: 1px solid var(--tp-vonal);
	border-radius: 999px;
	background: var(--tp-felulet);
	box-shadow: var(--tp-arnyek);
	font-size: 16px;
	transition: box-shadow 0.18s ease, border-color 0.18s ease;
}

.tp-app--modern .tp-search input[type="search"]:focus {
	border-color: #b7cc78;
	box-shadow: 0 0 0 4px rgba(140, 174, 46, 0.18);
}

.tp-app--modern .tp-search > i {
	left: 20px;
	font-size: 16px;
}

.tp-app--modern .tp-search__clear {
	right: 10px;
}

.tp-app--modern .tp-sort,
.tp-app--modern .tp-view {
	height: 56px;
	border: 1px solid var(--tp-vonal);
	background: var(--tp-felulet);
	box-shadow: var(--tp-arnyek);
}

.tp-app--modern .tp-sort {
	border-radius: 999px;
	padding-left: 18px;
	padding-right: 38px;
	font-size: 14px;
}

/* ---------- Saját legördülő ---------- */

.tp-app--modern .tp-select__btn {
	height: 56px;
	padding: 0 20px;
	border-radius: 999px;
	box-shadow: var(--tp-arnyek);
	font-weight: 500;
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

/* Nyitott állapotban a gomb kiemelt keretet kap: ez köti össze a lenyíló
   panellel, ami különben csak lebegne alatta. */
.tp-app--modern .tp-select.is-open .tp-select__btn {
	border-color: #b7cc78;
	box-shadow: 0 0 0 4px rgba(140, 174, 46, 0.18);
}

.tp-app--modern .tp-select__panel {
	top: calc(100% + 8px);
	padding: 8px;
	border-radius: var(--tp-ker);
	border-color: var(--tp-vonal);
	box-shadow: var(--tp-arnyek-emelt);
}

.tp-app--modern .tp-select__opt {
	padding: 10px 14px;
	border-radius: var(--tp-ker-kicsi);
}

.tp-app--modern .tp-select__opt:hover,
.tp-app--modern .tp-select__opt:focus {
	background: var(--tp-alap);
}

.tp-app--modern .tp-select__check {
	color: var(--tp-fmoe-kek);
}

.tp-app--modern .tp-views {
	gap: 0;
}

.tp-app--modern .tp-view {
	width: 56px;
}

.tp-app--modern .tp-view:first-child {
	border-radius: 999px 0 0 999px;
}

.tp-app--modern .tp-view:last-child {
	border-radius: 0 999px 999px 0;
	border-left: 0;
}

.tp-app--modern .tp-view[aria-pressed="true"] {
	background: var(--tp-fmoe-kek);
	border-color: var(--tp-fmoe-kek);
	color: #fff;
}

.tp-app--modern .tp-hint {
	margin: 10px 2px 1.5rem;
	font-size: 12.5px;
}

/* ---------- Témakör pasztillák (a szűrősáv mindkét állapota) ---------- */

.tp-rail,
.tp-app--modern .tp-chips__scroll {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.tp-app--modern .tp-chips {
	margin-bottom: 1.5rem;
}

.tp-app--modern .tp-shelf {
	margin-bottom: 1.5rem;
}

/* Érintéssel a 40 px kevés: a mag szabályát a modern réteg különben felülírja. */
@media (pointer: coarse) {
	.tp-pill,
	.tp-app--modern .tp-chip {
		min-height: 44px;
	}
}

.tp-pill,
.tp-app--modern .tp-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 40px;
	padding: 8px 16px;
	border: 1px solid var(--tp-vonal);
	border-radius: 999px;
	background: var(--tp-felulet);
	color: #3f443c;
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
	box-shadow: var(--tp-arnyek);
	transition: border-color 0.18s ease, background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.tp-pill i,
.tp-app--modern .tp-chip > i {
	color: var(--tp-ink);
	font-size: 14px;
}

.tp-pill:hover,
.tp-app--modern .tp-chip:hover {
	border-color: #cfd4c6;
	color: #22261f;
	box-shadow: var(--tp-arnyek-emelt);
}

.tp-app--modern .tp-chip[aria-pressed="true"] {
	background: var(--tp-ink);
	border-color: var(--tp-ink);
	color: #fff;
	box-shadow: none;
}

.tp-app--modern .tp-chip[aria-pressed="true"] > i {
	color: #fff;
}

.tp-pill__count,
.tp-app--modern .tp-chip__count {
	min-width: auto;
	padding: 0;
	background: none;
	color: var(--tp-halvany);
	font-size: 12.5px;
	font-weight: 600;
}

.tp-app--modern .tp-chip[aria-pressed="true"] .tp-chip__count {
	background: none;
	/* Az áttetsző fehér 3,4–4,1:1 volt a kategóriaszíneken – kevés a 12,5 px-es
	   szöveghez (WCAG 1.4.3). */
	color: #fff;
}

.tp-app--modern .tp-chip.is-zero {
	opacity: 0.4;
	box-shadow: none;
}

/* ---------- Aktív szűrők ---------- */

.tp-app--modern .tp-active {
	margin-bottom: 1.25rem;
}

.tp-app--modern .tp-tag {
	border-radius: 999px;
	border-color: var(--tp-cbd, var(--tp-vonal));
	padding: 6px 14px;
	font-weight: 500;
}

.tp-app--modern .tp-active__reset {
	color: var(--tp-halvany);
}

/* ---------- Kiemelt publikáció ---------- */

.tp-app--modern .tp-featured {
	margin-bottom: 2rem;
}

.tp-featured__head {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 12px 2px;
	color: var(--tp-halvany);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.tp-featured__head i {
	color: #f0a13a;
}

.tp-app--modern .tp-featured__card {
	border: 1px solid var(--tp-vonal);
	border-radius: var(--tp-ker);
	background: var(--tp-felulet);
	box-shadow: var(--tp-arnyek);
	overflow: hidden;
}

.tp-app--modern .tp-featured__media {
	background: var(--tp-cbg);
	min-height: 0;
}

.tp-app--modern .tp-featured__icon {
	font-size: 58px;
}

.tp-app--modern .tp-featured__title {
	font-size: 24px;
	font-weight: 700;
	letter-spacing: -0.01em;
}

.tp-app--modern .tp-featured__excerpt {
	color: #5a5f55;
}

/* ---------- Találati fejléc ---------- */

.tp-app--modern .tp-results__head {
	margin-bottom: 1.25rem;
	padding-bottom: 0;
	border-bottom: 0;
	color: var(--tp-halvany);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* ---------- Kártya ---------- */

.tp-app--modern .tp-item {
	contain-intrinsic-size: 210px;
	contain-intrinsic-size: auto 210px;
}

.tp-app--modern .tp-card {
	padding: 16px 18px 18px;
	border: 1px solid var(--tp-vonal);
	border-top: 1px solid var(--tp-vonal);
	border-radius: var(--tp-ker);
	background: var(--tp-felulet);
	box-shadow: var(--tp-arnyek);
	transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.tp-app--modern .tp-item:hover .tp-card,
.tp-app--modern .tp-results[data-view="list"] .tp-item:hover .tp-card {
	background: var(--tp-felulet);
	border-color: #d8dcd0;
	box-shadow: var(--tp-arnyek-emelt);
}

.tp-app--modern .tp-card__top {
	align-items: center;
	gap: 10px;
	margin-bottom: 12px;
}

/* A fájlikon lágy, színezett csempét kap – ez adja a kártya karakterét a
   vastag színes keret helyett. */
.tp-app--modern .tp-card__ficon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: var(--tp-ker-kicsi);
	background: var(--tp-cbg);
	color: var(--tp-ink);
	font-size: 17px;
}

.tp-app--modern .tp-badge {
	border: 0;
	border-radius: 999px;
	padding: 4px 10px;
	background: var(--tp-cbg);
	color: var(--tp-ink);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
}

.tp-app--modern a.tp-badge:hover {
	background: var(--tp-cbg);
	color: var(--tp-ink);
	text-decoration: underline;
	box-shadow: inset 0 0 0 1px var(--tp-ink);
}

.tp-app--modern .tp-badge--more {
	background: #eef0ea;
	color: #5b6055;
}

.tp-app--modern .tp-badge--new {
	background: #eef7d4;
	color: #4c5e02;
}

.tp-app--modern .tp-card__title {
	margin-bottom: 10px;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: -0.005em;
	-webkit-line-clamp: 3;
}

.tp-app--modern .tp-card__meta {
	margin-bottom: 14px;
	color: var(--tp-halvany);
	font-size: 12.5px;
}

.tp-app--modern .tp-card__dot {
	color: #cdd1c6;
}

/* ---------- Gombok ---------- */

.tp-app--modern .tp-btn {
	min-height: 38px;
	padding: 8px 16px;
	border-radius: 999px;
	border-color: var(--tp-vonal);
	font-size: 13px;
	font-weight: 600;
}

.tp-app--modern .tp-btn:hover {
	background: var(--tp-alap);
	border-color: #d2d7c8;
}

.tp-app--modern .tp-btn--primary {
	background: var(--tp-fmoe-kek);
	border-color: var(--tp-fmoe-kek);
}

.tp-app--modern .tp-btn--primary:hover {
	background: var(--tp-fmoe-kek-vil);
	border-color: var(--tp-fmoe-kek-vil);
}

.tp-app--modern .tp-btn--lg {
	min-height: 46px;
	padding: 11px 24px;
	font-size: 14.5px;
}

.tp-app--modern .tp-btn--icon {
	width: 38px;
	min-width: 38px;
	padding: 0;
}

.tp-app--modern .tp-btn--icon.tp-btn--lg {
	width: 46px;
	min-width: 46px;
}

/* ---------- Lista nézet ---------- */

.tp-app--modern .tp-results[data-view="list"] .tp-card {
	border-left: 1px solid var(--tp-vonal);
	border-radius: var(--tp-ker);
	column-gap: 16px;
}

.tp-app--modern .tp-results[data-view="list"] .tp-card__ficon {
	width: 44px;
	height: 44px;
	font-size: 19px;
}

/* ---------- Üres állapot, adagolás, záró sáv ---------- */

.tp-app--modern .tp-empty {
	border: 1px solid var(--tp-vonal);
	border-radius: var(--tp-ker);
	background: var(--tp-felulet);
}

.tp-app--modern .tp-more__bar {
	border-radius: 999px;
	overflow: hidden;
}

.tp-app--modern .tp-more__bar span {
	background: var(--tp-fmoe-zold);
}

/* ---------- Reszponzív ---------- */

@media (max-width: 991px) {
	.tp-hero {
		padding: 26px 24px 24px;
	}

	.tp-hero__heart {
		width: 92px;
		height: 84px;
		right: 16px;
		opacity: 0.22;
	}
}

@media (max-width: 767px) {
	.tp-hero {
		padding: 22px 20px 20px;
		border-radius: 14px;
		align-items: flex-start;
		gap: 14px;
	}

	.tp-hero__lead {
		font-size: 15px;
	}

	.tp-hero .tp-live {
		white-space: normal;
	}

	/* Mobilon a szív inkább zavarna a szöveg mögött. */
	.tp-hero__heart {
		display: none;
	}

	.tp-app--modern .tp-toolbar__right {
		gap: 8px;
	}

	.tp-app--modern .tp-select__btn,
	.tp-app--modern .tp-view,
	.tp-app--modern .tp-search input[type="search"] {
		height: 48px;
	}

	.tp-app--modern .tp-select {
		flex: 1 1 auto;
		min-width: 0;
	}

	.tp-app--modern .tp-select__btn {
		min-width: 0;
	}

	.tp-app--modern .tp-view {
		width: 48px;
	}

	/* Mobilon a szűrősáv vízszintesen görgethető, hogy ne törje szét az oldalt. */
	.tp-rail,
	.tp-app--modern .tp-chips__scroll {
		flex-wrap: nowrap;
		overflow-x: auto;
		scroll-snap-type: x proximity;
		padding-bottom: 8px;
		-webkit-overflow-scrolling: touch;
	}

	.tp-pill,
	.tp-app--modern .tp-chip {
		scroll-snap-align: center;
	}
}

/* ---------- Gyengénlátó mód ---------- */

/* A lágy felületek itt sem maradhatnak: a téma partialsight.css-e nem fedi az
   article/header/nav/button elemeket, az árnyék és a halvány háttér pedig
   nagy kontrasztú módban félrevezető. */
body.partialsight .tp-app--modern .tp-card,
body.partialsight .tp-app--modern .tp-pill,
body.partialsight .tp-app--modern .tp-chip,
body.partialsight .tp-app--modern .tp-card__ficon,
body.partialsight .tp-app--modern .tp-badge,
body.partialsight .tp-app--modern .tp-featured__card,
body.partialsight .tp-hero,
body.partialsight .tp-hero__title,
body.partialsight .tp-hero__badge,
body.partialsight .tp-hero__lead,
body.partialsight .tp-hero .tp-live,
body.partialsight .tp-featured__head {
	background: black !important;
	color: yellow !important;
	border-color: yellow !important;
	box-shadow: none !important;
}

/* A dekoratív rajzoknak nagy kontrasztú módban nincs szerepük. */
body.partialsight .tp-hero__heart,
body.partialsight .tp-hero__swoosh {
	display: none !important;
}