/*
 * TGYK Hero Szlájder – a jelenlegi (Elementor) főoldali hero látványát
 * másolja: sárga (#FCDB01) előcím és gomb, fehér nagy cím "Reem Kufi"
 * betűtípussal, "Montserrat" gombfelirat.
 */

/*
 * A "position: relative" önmagában, z-index nélkül NEM hoz létre saját
 * "stacking contextet" – emiatt a belső elemek (dia, nyilak, pöttyök)
 * z-index:1-3 értékei nem maradnak a szlájderen belül, hanem az oldal
 * globális rétegződésébe "szivárognak ki", és akár a fejléc lenyíló
 * menüje FÖLÉ is kerülhetnek. A "z-index: 0" itt lezárja/elszigeteli a
 * szlájdert saját, önálló rétegként (a belső 1-3 értékek mostantól csak
 * EZEN BELÜL számítanak), és egyben nagyon alacsony helyre teszi a
 * szlájdert a lap rétegsorrendjében, hogy semmi (pl. fejléc, lenyíló
 * menü, cookie-sáv) ne kerülhessen alá.
 */
.tgyk-hero-slider {
	position: relative;
	z-index: 0;
	width: 100%;
	min-height: 600px;
	overflow: hidden;
	background-color: #101717;
}

.tgyk-hero-slider__track {
	position: relative;
	width: 100%;
	height: 100%;
	min-height: inherit;
}

.tgyk-hero-slide {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	text-align: center;
	opacity: 0;
	visibility: hidden;
	z-index: 1;
	transition: opacity ease-in-out;
	transition-duration: var(--tgyk-hero-transition, 500ms);
}

.tgyk-hero-slide.is-active {
	opacity: 1;
	visibility: visible;
	z-index: 2;
}

.tgyk-hero-slide__overlay {
	position: absolute;
	inset: 0;
	background: rgba( 0, 0, 0, var( --tgyk-hero-overlay-opacity, 0.35 ) );
	z-index: 1;
}

.tgyk-hero-slide__content {
	position: relative;
	z-index: 2;
	max-width: 720px;
	padding: 0 24px;
}

/*
 * Az Elementor globális Kit stílusa (pl. ".elementor-kit-8 h2") a sima
 * elem-szelektoroknál (h1-h6) nagyobb specificitású, ezért felülírná a
 * mi egy-osztályos szabályainkat. Ez ellen két védelem van itt:
 * 1) a szelektorokat a szülő ".tgyk-hero-slider"-rel egészítjük ki
 *    (két osztály = nagyobb specificitás, mint "osztály + elem"),
 * 2) a kulcsfontosságú tipográfiai tulajdonságokra (betűtípus, vastagság,
 *    nagybetűsítés) !important kerül, hogy bármilyen más globális
 *    stílustól is védve legyen.
 * FONTOS: a "color" tulajdonságon és a "font-size" ALAPÉRTÉKÉN
 * (--tgyk-eyebrow-size / --tgyk-title-size / --tgyk-subtitle-size CSS
 * változók) SZÁNDÉKOSAN nincs !important, mert ezeket diánként, admin
 * oldalról, inline style-lal felül lehet írni (lásd includes/render.php)
 * – az !important ezt megakadályozná. A betűméretet CSS változón
 * keresztül adjuk át (nem közvetlen "font-size"-ként), hogy a lenti
 * mobil nézetes @media szabály – ami egy konkrét px értéket ad – to-
 * vábbra is felül tudja írni a diánként beállított asztali méretet.
 */
.tgyk-hero-slider .tgyk-hero-slide__eyebrow {
	font-family: 'EB Garamond', serif !important;
	font-size: var( --tgyk-eyebrow-size, 27px );
	font-weight: 400;
	line-height: 1.5;
	color: #fcdb01;
	margin: 0 0 14px;
}

.tgyk-hero-slider .tgyk-hero-slide__title {
	font-family: 'Reem Kufi', sans-serif !important;
	font-size: var( --tgyk-title-size, 53px );
	font-weight: 500 !important;
	line-height: 1;
	text-transform: uppercase !important;
	letter-spacing: 1.5px;
	color: #ffffff;
	margin: 0 0 var( --tgyk-hero-title-gap, 16px );
}

.tgyk-hero-slider .tgyk-hero-slide__subtitle {
	font-family: 'Montserrat', sans-serif !important;
	font-size: var( --tgyk-subtitle-size, 18px );
	font-weight: 400 !important;
	text-transform: none !important;
	line-height: 1.5;
	letter-spacing: normal;
	color: #f5f5f5;
	margin: 0 0 24px;
}

.tgyk-hero-slider .tgyk-hero-slide__button {
	display: inline-block;
	font-family: 'Montserrat', sans-serif !important;
	font-size: 16px;
	font-weight: 500 !important;
	text-transform: uppercase !important;
	letter-spacing: 1.5px;
	color: #101717 !important;
	background-color: #fcdb01;
	padding: 15px 20px;
	border-radius: 2px;
	text-decoration: none;
	transition: transform 0.2s ease;
}

.tgyk-hero-slider .tgyk-hero-slide__button:hover,
.tgyk-hero-slider .tgyk-hero-slide__button:focus {
	transform: scale( 1.05 );
	color: #101717 !important;
}

.tgyk-hero-slider__dots {
	position: absolute;
	bottom: 24px;
	left: 50%;
	transform: translateX( -50% );
	z-index: 3;
	display: flex;
	gap: 10px;
}

/*
 * A pöttyök és a nyilak <button> elemek. A téma / Elementor globális
 * "button, input" jellegű reset stílusai (padding, border-radius, háttér,
 * méret) egy sima elem-szelektorral (pl. "button, select") vagy a globális
 * Kit szelektorral (pl. ".elementor-kit-8 button") felülírhatják a mi
 * osztályalapú szabályainkat, ezért itt is a szülővel bővített szelektor +
 * !important védelmet alkalmazzuk – enélkül a pöttyök kis kör helyett
 * sárga téglalapként jelentek meg.
 */
.tgyk-hero-slider .tgyk-hero-slider__dot {
	width: 10px !important;
	height: 10px !important;
	min-width: 10px !important;
	min-height: 10px !important;
	border-radius: 50% !important;
	background: rgba( 255, 255, 255, 0.5 ) !important;
	border: 0 !important;
	padding: 0 !important;
	margin: 0;
	line-height: 0 !important;
	font-size: 0 !important;
	box-shadow: none !important;
	cursor: pointer;
	flex: 0 0 auto;
}

.tgyk-hero-slider .tgyk-hero-slider__dot.is-active {
	background: #fcdb01 !important;
}

.tgyk-hero-slider__arrow {
	position: absolute;
	top: 50%;
	transform: translateY( -50% );
	z-index: 3;
	cursor: pointer;
}

.tgyk-hero-slider .tgyk-hero-slider__arrow {
	width: 44px !important;
	height: 44px !important;
	min-width: 44px !important;
	min-height: 44px !important;
	padding: 0 !important;
	margin: 0;
	border: 0 !important;
	border-radius: 50% !important;
	background: rgba( 16, 23, 23, 0.45 ) !important;
	color: #ffffff !important;
	font-size: 22px !important;
	line-height: 44px !important;
	text-align: center;
	box-shadow: none !important;
	transition: background-color 0.2s ease;
}

.tgyk-hero-slider .tgyk-hero-slider__arrow:hover,
.tgyk-hero-slider .tgyk-hero-slider__arrow:focus {
	background: rgba( 252, 219, 1, 0.9 ) !important;
	color: #101717 !important;
}

.tgyk-hero-slider__arrow--prev {
	left: 20px;
}

.tgyk-hero-slider__arrow--next {
	right: 20px;
}

@media ( max-width: 768px ) {
	.tgyk-hero-slider {
		min-height: 420px;
	}

	.tgyk-hero-slider .tgyk-hero-slide__eyebrow {
		font-size: 20px;
	}

	.tgyk-hero-slider .tgyk-hero-slide__title {
		font-size: 32px;
		margin-bottom: 20px;
	}

	.tgyk-hero-slider .tgyk-hero-slide__subtitle {
		font-size: 15px;
		margin-bottom: 16px;
	}

	.tgyk-hero-slider .tgyk-hero-slide__button {
		font-size: 14px;
		padding: 12px 16px;
	}

	.tgyk-hero-slider .tgyk-hero-slider__arrow {
		width: 36px !important;
		height: 36px !important;
		min-width: 36px !important;
		min-height: 36px !important;
		font-size: 18px !important;
		line-height: 36px !important;
	}

	.tgyk-hero-slider__arrow--prev {
		left: 8px;
	}

	.tgyk-hero-slider__arrow--next {
		right: 8px;
	}
}