/**
 * Szakember lista - szuro, kereso es racs.
 */

/* A HTML hidden attributum a bongeszo sajat display:none szabalyara epul,
   amit BARMELY sajat display ertek felulir (flex, block). Mivel a spinner,
   az X gomb es a ket gomb is flex/block, expliciten el kell rejteni oket. */
.csz-wrap [hidden] {
	display: none !important;
}

.csz-wrap {
	--csz-media: 200px;
	/* Csak a VIDEOKRA vonatkozik (a kepek 1:1-esek, azokat nem nagyitjuk).
	   A videok 720x576-osak, a tartalom 404 px magas, folotte-alatta 86-86 px
	   fekete sav. 576 / 404 = 1.426 az a minimum, aminel a sav kilog a korbol;
	   1.45 kis rahagyas. */
	--csz-video-zoom: 1.45;
	--csz-gomb: 30px;

	/* Tipografia: ket meret osszesen. A nev kisebb, a titulus es a
	   szakterulet azonos meretu - csak vastagsagban ternek el. */
	--csz-betu-nev: 20px;
	--csz-betu-szoveg: 0.85rem;
	/* A nev mindig ket sornyi helyet foglal, hogy a hosszabb nevek torese
	   ne csusztassa el a tobbi kartya szoveget. */
	--csz-nev-sorok: 2;

	/* Fuggoleges ritmus a kartyan belul */
	--csz-sorkoz: 9px;

	--csz-marka: #d3260e;
	--csz-szoveg: #1c1b24;
	--csz-halvany: #6b7280;
	--csz-keret: #e5e7eb;
	--csz-hatter: #fff;
}

/* ==========================================================================
   Szuropanel
   ========================================================================== */

.csz-panel {
	display: flex;
	align-items: stretch;
	gap: 0;
	margin-bottom: 26px;
	padding: 6px;
	background: var( --csz-hatter );
	border: 1px solid var( --csz-keret );
	border-radius: 16px;
	box-shadow: 0 1px 2px rgba( 28, 27, 36, 0.04 ), 0 8px 24px rgba( 28, 27, 36, 0.05 );
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.csz-panel:focus-within {
	border-color: rgba( 211, 38, 14, 0.4 );
	box-shadow: 0 1px 2px rgba( 28, 27, 36, 0.04 ), 0 8px 28px rgba( 211, 38, 14, 0.1 );
}

.csz-mezo {
	position: relative;
	display: flex;
	align-items: center;
	min-width: 0;
}

.csz-mezo-kereso {
	flex: 1 1 auto;
}

.csz-mezo-szakterulet {
	flex: 0 1 260px;
}

.csz-valaszto {
	flex: 0 0 1px;
	align-self: center;
	width: 1px;
	height: 26px;
	background: var( --csz-keret );
}

/* --- Ikonok --- */

.csz-ikon {
	position: absolute;
	width: 19px;
	height: 19px;
	pointer-events: none;
	stroke: var( --csz-halvany );
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	fill: none;
}

.csz-ikon-kereso {
	left: 16px;
}

.csz-ikon-nyil {
	right: 14px;
	width: 17px;
	height: 17px;
}

.csz-mezo-kereso:focus-within .csz-ikon-kereso {
	stroke: var( --csz-marka );
}

/* --- Beviteli mezok --- */

/* A .csz-wrap prefix mindenhol azert kell, mert a hello-elementor tema
   input[type=text]/select szabalya (0,1,1) es az Elementor kit button
   szabalya erosebb, mint egy sima osztaly (0,1,0). */
.csz-wrap .csz-input,
.csz-wrap .csz-select {
	width: 100%;
	padding: 13px 16px;
	font-family: inherit;
	font-size: 1rem;
	line-height: 1.4;
	color: var( --csz-szoveg );
	background: transparent;
	border: none;
	border-radius: 11px;
	box-shadow: none;
	appearance: none;
	-webkit-appearance: none;
	transition: none;
}

/* Hely a nagyito ikonnak balra es az X gombnak jobbra. */
.csz-wrap .csz-input {
	padding-left: 45px;
	padding-right: 40px;
}

.csz-wrap .csz-input::placeholder {
	color: var( --csz-halvany );
	opacity: 1;
}

.csz-wrap .csz-select {
	padding-right: 38px;
	color: var( --csz-halvany );
	cursor: pointer;
	text-overflow: ellipsis;
}

.csz-wrap .csz-select:not( [data-ures] ) {
	color: var( --csz-szoveg );
	font-weight: 500;
}

.csz-wrap .csz-input:focus,
.csz-wrap .csz-select:focus {
	outline: none;
	border: none;
	box-shadow: none;
	background: rgba( 211, 38, 14, 0.03 );
}

/* Bongeszo sajat kereso-X elrejtese, sajatot hasznalunk */
.csz-wrap .csz-input::-webkit-search-decoration,
.csz-wrap .csz-input::-webkit-search-cancel-button {
	-webkit-appearance: none;
}

/* --- Kereso urites (X a mezoben) --- */

.csz-wrap .csz-urit {
	position: absolute;
	right: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	padding: 0;
	color: inherit;
	background: #f3f4f6;
	border: none;
	border-radius: 50%;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.15s ease;
}

.csz-wrap .csz-urit:hover {
	background: #e5e7eb;
}

.csz-urit svg {
	width: 13px;
	height: 13px;
	stroke: var( --csz-halvany );
	stroke-width: 2.4;
	stroke-linecap: round;
	fill: none;
}

/* --- Szurok torlese --- */

.csz-wrap .csz-torles {
	display: flex;
	flex: 0 0 auto;
	gap: 7px;
	align-items: center;
	margin-left: 6px;
	padding: 0 18px;
	font-family: inherit;
	font-size: 0.9rem;
	font-weight: 500;
	color: var( --csz-marka );
	background: rgba( 211, 38, 14, 0.07 );
	border: none;
	border-radius: 11px;
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
	transition: background 0.15s ease;
}

.csz-wrap .csz-torles:hover {
	background: rgba( 211, 38, 14, 0.13 );
}

.csz-torles svg {
	width: 14px;
	height: 14px;
	stroke: currentColor;
	stroke-width: 2.4;
	stroke-linecap: round;
	fill: none;
}

.csz-szamlalo {
	margin: 0 0 20px;
	font-size: 0.92rem;
	color: var( --csz-halvany );
}

.csz-szamlalo strong {
	color: var( --csz-szoveg );
}

/* ==========================================================================
   Racs es kartya
   ========================================================================== */

.csz-racs {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 220px, 1fr ) );
	/* sorkoz oszlopkoz - a sorok kozott bovebb levego */
	gap: 54px 28px;
}

.csz-kartya {
	display: flex;
	flex-direction: column;
	align-items: center;
	/* A grid cella teljes magassaga - igy a gombok egy vonalban allnak,
	   akkor is, ha valamelyik nev ket sorba tort. */
	height: 100%;
	text-align: center;
}

/* --- Media --- */

.csz-media {
	position: relative;
	display: block;
	width: var( --csz-media );
	height: var( --csz-media );
	/* Kisebb, mint a nev alatti sorkoz: az egy soros neveknel a fenntartott
	   masodik sor ugyis ide, a kep ala kerul ures helykent. */
	margin-bottom: 12px;
	overflow: hidden;
	border-radius: 50%;
	background: #f2f4f6;
}

.csz-media img,
.csz-media video,
.csz-media-ures {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* A kiemelt kep 1:1, ezert NEM nagyitjuk - eredeti meretben jelenik meg. */

/* A video 720x576-os, a tartalom folott-alatt 86-86 px fekete sav van.
   576 / 404 = 1.426 az a zoom, aminel a sav pont kilog a keretbol. */
.csz-media video {
	position: absolute;
	inset: 0;
	opacity: 0;
	transform: scale( var( --csz-video-zoom ) );
	transform-origin: center;
	transition: opacity 0.25s ease;
}

/* Ramutataskor a video atusszik a kep fole. */
.csz-media:hover video,
.csz-media video.csz-jatszik {
	opacity: 1;
}

/* Ha nincs kiemelt kep, a video onmagaban all - mindig latszik. */
.csz-media-csak-video video {
	opacity: 1;
}

.csz-media-ures {
	background: #f2f4f6;
}

/* --- Szoveg --- */

/* A .csz-wrap prefix azert kell, mert az Elementor kit szabalya
   (.elementor-kit-22 h3) magasabb specificitasu, mint egy sima osztaly. */
.csz-wrap .csz-nev {
	/* Fenntartott hely ket sornak: a rovid es a hosszu nevu kartyak
	   szovegei igy egy vonalban maradnak. Az egy soros nevek ALULRA
	   igazodnak, hogy a nev es a titulus koze ne kerulejon ures sor -
	   a szabad hely a kep ala kerul. */
	display: flex;
	align-items: flex-end;
	justify-content: center;
	min-height: calc( var( --csz-nev-sorok ) * 1.4em );
	margin: 0 0 var( --csz-sorkoz );
	font-size: var( --csz-betu-nev );
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.02em;
	/* A tores ket kozel egyenlo sorra oszlik, nem "hosszu sor + egy szo"-ra. */
	text-wrap: balance;
}

.csz-wrap .csz-nev a {
	color: var( --csz-szoveg );
	text-decoration: none;
}

.csz-wrap .csz-nev a:hover {
	color: var( --csz-marka );
}

/* Titulus - azonos meret, normal vastagsag, halvanyabb. */
.csz-wrap .csz-titulus {
	margin: 0 0 var( --csz-sorkoz );
	font-size: var( --csz-betu-szoveg );
	font-weight: 400;
	line-height: 1.45;
	color: var( --csz-halvany );
	text-wrap: balance;
}

/* Szakterulet - azonos meret, de vastagabb es sotetebb, mint a titulus.
   Ez az utolso szoveg a gomb elott, ezert nagyobb ala a levego. */
.csz-wrap .csz-beosztas {
	margin: 0 0 calc( var( --csz-sorkoz ) + 6px );
	font-size: var( --csz-betu-szoveg );
	font-weight: 600;
	line-height: 1.45;
	color: var( --csz-szoveg );
	text-wrap: balance;
}

.csz-gomb {
	display: inline-block;
	margin-top: auto;
	line-height: 0;
	transition: transform 0.15s ease;
}

.csz-gomb:hover {
	transform: scale( 1.1 );
}

.csz-gomb img {
	width: var( --csz-gomb );
	height: var( --csz-gomb );
}

/* ==========================================================================
   Allapotok
   ========================================================================== */

.csz-nincs-talalat {
	padding: 48px 0;
	font-size: 1.05rem;
	color: var( --csz-halvany );
	text-align: center;
}

.csz-toltes {
	display: flex;
	gap: 10px;
	align-items: center;
	justify-content: center;
	padding: 28px 0;
	color: var( --csz-halvany );
}

.csz-portya {
	width: 20px;
	height: 20px;
	border: 2px solid var( --csz-keret );
	border-top-color: var( --csz-marka );
	border-radius: 50%;
	animation: csz-porog 0.7s linear infinite;
}

@keyframes csz-porog {
	to {
		transform: rotate( 360deg );
	}
}

.csz-orszem {
	width: 100%;
	height: 1px;
}

.csz-wrap .csz-tovabb {
	display: block;
	margin: 8px auto 0;
	padding: 12px 28px;
	font-family: inherit;
	font-size: 0.95rem;
	color: #fff;
	background: var( --csz-marka );
	border: none;
	border-radius: 11px;
	text-decoration: none;
	cursor: pointer;
}

/* Ha a gorgetesre toltes mukodik, a gomb csak tartalek: vizualisan rejtett,
   de billentyuzettel es felolvasoval elerheto marad. */
.csz-wrap .csz-tovabb-tartalek {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	overflow: hidden;
	clip: rect( 0, 0, 0, 0 );
	white-space: nowrap;
	border: 0;
}

.csz-wrap .csz-tovabb-tartalek:focus {
	position: static;
	width: auto;
	height: auto;
	padding: 12px 28px;
	overflow: visible;
	clip: auto;
	white-space: normal;
}

/* ==========================================================================
   Reszponziv
   ========================================================================== */

@media ( max-width: 860px ) {
	.csz-panel {
		flex-wrap: wrap;
		gap: 6px;
	}

	.csz-mezo-kereso,
	.csz-mezo-szakterulet {
		flex: 1 1 100%;
	}

	.csz-mezo-szakterulet {
		border-top: 1px solid var( --csz-keret );
	}

	.csz-valaszto {
		display: none;
	}

	.csz-wrap .csz-torles {
		flex: 1 1 100%;
		justify-content: center;
		margin-left: 0;
		padding: 12px 18px;
	}
}

@media ( max-width: 767px ) {
	.csz-wrap {
		--csz-media: 150px;
	}

	/* Mobilon egyetlen oszlop - egy kartya egy sorban. */
	.csz-racs {
		grid-template-columns: 1fr;
		gap: 38px 0;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.csz-portya {
		animation: none;
	}

	.csz-gomb,
	.csz-panel,
	.csz-urit,
	.csz-torles {
		transition: none;
	}
}