/*
 * A főoldal szekciói. Csak a főoldalon töltődik be.
 */

.szekcio { padding-block: 88px; }
.szekcio--halvany { background: var(--surface); }
.szekcio--szuk { padding-block: 66px; }

/* ==========================================================================
   NYITÓKÉP
   ========================================================================== */
.hero {
	position: relative;
	overflow: hidden;
	background: var(--navy-800);
	color: #fff;
	isolation: isolate;
}

.hero__hatter {
	content: "";
	position: absolute;
	inset: -8%;
	z-index: -2;
	background-position: center 42%;
	background-size: cover;
	background-repeat: no-repeat;
	filter: blur(22px) saturate(.75);
	opacity: .34;
	transform: scale(1.12);
}

.hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		radial-gradient(90% 120% at 12% 0%, rgba(74, 99, 144, .34) 0%, transparent 62%),
		linear-gradient(180deg, rgba(26, 36, 56, .64) 0%, rgba(42, 62, 99, .9) 55%, rgba(26, 36, 56, .96) 100%);
}

.hero .container {
	display: grid;
	grid-template-columns: 1.06fr .94fr;
	gap: 64px;
	align-items: center;
	padding-block: 76px 84px;
}

.hero h1 {
	color: #fff;
	font-size: clamp(38px, 4.6vw, 60px);
	line-height: 1.08;
	margin: 16px 0 22px;
	letter-spacing: -.022em;
}
.hero h1 em { font-style: normal; color: var(--gold-500); display: block; }

.hero__bevezeto { font-size: 18.5px; color: var(--on-dark); max-width: 53ch; line-height: 1.66; }
.hero__gombok { display: flex; gap: 14px; margin-top: 34px; flex-wrap: wrap; }

.hero__jelvenyek {
	display: flex;
	align-items: center;
	gap: 18px;
	margin-top: 40px;
	padding-top: 26px;
	border-top: 1px solid rgba(255, 255, 255, .14);
	font-size: 14px;
	color: var(--on-dark-halvany);
	flex-wrap: wrap;
	list-style: none;
}
.hero__jelvenyek li { display: inline-flex; align-items: center; gap: 8px; }
.hero__jelvenyek .pseg-ikon { width: 16px; height: 16px; color: var(--gold-500); flex: none; }

.hero__vizual { position: relative; }
.hero__foto {
	border-radius: var(--r-lg);
	overflow: hidden;
	box-shadow: var(--shadow-lg);
	border: 1px solid rgba(255, 255, 255, .18);
}
.hero__foto img { width: 100%; height: auto; }

.hero__kepalairas {
	position: absolute;
	left: 22px;
	bottom: -30px;
	right: 22px;
	display: flex;
	align-items: center;
	gap: 16px;
	background: rgba(255, 255, 255, .97);
	backdrop-filter: blur(8px);
	border-radius: var(--r-md);
	padding: 16px 20px;
	box-shadow: var(--shadow-lg);
}
.hero__kepalairas img { width: 52px; height: 52px; border-radius: 50%; flex: none; box-shadow: 0 2px 8px rgba(0, 0, 0, .18); }
.hero__kepalairas-cim { font-family: var(--serif); font-size: 16px; font-weight: 600; color: var(--ink); }
.hero__kepalairas-alcim { font-size: 13px; color: var(--muted); }

/* ==========================================================================
   SZÁMADATOK
   ========================================================================== */
.statok { background: var(--navy-900); border-top: 1px solid rgba(255, 255, 255, .09); }
.statok .container { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; }
.stat { padding: 34px 26px; text-align: center; position: relative; }
.stat + .stat::before {
	content: "";
	position: absolute;
	left: 0;
	top: 26%;
	bottom: 26%;
	width: 1px;
	background: rgba(255, 255, 255, .14);
}
.stat__szam { font-family: var(--serif); font-size: 38px; font-weight: 600; color: var(--gold-500); line-height: 1; }
.stat__cimke { font-size: 13.5px; color: var(--on-dark-cimke); margin-top: 9px; letter-spacing: .03em; }

/* ==========================================================================
   INTÉZMÉNYEGYSÉGEK
   ========================================================================== */
.egysegek { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.egyseg {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	padding: 28px 26px 26px;
	display: flex;
	flex-direction: column;
	transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.egyseg:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: transparent; }

.egyseg__ikon {
	width: 50px;
	height: 50px;
	border-radius: 13px;
	display: grid;
	place-items: center;
	margin-bottom: 20px;
	background: var(--navy-100);
	color: var(--navy-700);
}
.egyseg:nth-child(2) .egyseg__ikon { background: #FBF3E4; color: var(--gold-700); }
.egyseg:nth-child(3) .egyseg__ikon { background: #EAF3EE; color: #2E6B4B; }
.egyseg:nth-child(4) .egyseg__ikon { background: #F8EDE9; color: var(--brick-600); }
.egyseg__ikon .pseg-ikon { width: 24px; height: 24px; }

.egyseg h3 { font-size: 20px; margin-bottom: 9px; }
.egyseg p { font-size: 14.8px; line-height: 1.62; flex: 1; }
.egyseg__cimkek { display: flex; gap: 8px; flex-wrap: wrap; margin: 16px 0 18px; list-style: none; }
.egyseg__cimkek li {
	font-size: 12px;
	font-weight: 650;
	padding: 4px 10px;
	border-radius: 999px;
	background: var(--surface-2);
	color: var(--body);
}

/* ==========================================================================
   GYORSELÉRÉS
   ========================================================================== */
.gyorseleres { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.gyorslink {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	padding: 22px 16px;
	text-align: center;
	transition: all .2s ease;
	display: block;
}
.gyorslink:hover { border-color: var(--navy-600); box-shadow: var(--shadow-md); transform: translateY(-3px); }
.gyorslink__ikon {
	width: 44px;
	height: 44px;
	margin: 0 auto 14px;
	border-radius: 12px;
	display: grid;
	place-items: center;
	background: var(--navy-800);
	color: var(--gold-500);
	transition: background .2s;
}
.gyorslink:hover .gyorslink__ikon { background: var(--navy-700); }
.gyorslink__ikon .pseg-ikon { width: 21px; height: 21px; }
.gyorslink__cim { display: block; font-size: 14.5px; font-weight: 650; color: var(--ink); line-height: 1.35; }
.gyorslink__alcim { display: block; font-size: 12.5px; color: var(--muted); margin-top: 4px; }

/* ==========================================================================
   HÍREK
   ========================================================================== */
.hirek-fej {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 38px;
}
.hirek-fej .szekcio-fej { margin-bottom: 0; }
.hirek-racs { display: grid; grid-template-columns: 1.35fr 1fr; gap: 26px; }
.hirek-oldalt { display: grid; gap: 22px; align-content: start; }

/* ==========================================================================
   BEISKOLÁZÁS
   ========================================================================== */
.beiskolazas {
	background: linear-gradient(135deg, var(--navy-800) 0%, var(--navy-700) 55%, var(--navy-700) 100%);
	color: #fff;
	position: relative;
	overflow: hidden;
}
.beiskolazas::before {
	content: "";
	position: absolute;
	right: -140px;
	top: -140px;
	width: 520px;
	height: 520px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(200, 175, 118, .26), transparent 66%);
}
.beiskolazas .container {
	position: relative;
	display: grid;
	grid-template-columns: .95fr 1.05fr;
	gap: 64px;
	align-items: center;
}
.beiskolazas h2 { color: #fff; font-size: clamp(28px, 3.1vw, 40px); margin: 12px 0 16px; }
.beiskolazas p { color: #C4D1E5; font-size: 17px; max-width: 46ch; }
.beiskolazas__gombok { display: flex; gap: 12px; margin-top: 30px; flex-wrap: wrap; }

.kepzesek { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.kepzes {
	background: rgba(255, 255, 255, .06);
	border: 1px solid rgba(255, 255, 255, .15);
	border-radius: var(--r-md);
	padding: 20px 22px;
	transition: all .2s ease;
	display: block;
}
.kepzes:hover {
	background: rgba(255, 255, 255, .09);
	border-color: rgba(200, 175, 118, .55);
	transform: translateY(-3px);
}
/*
 * A harom sor SPAN, tehat alapbol inline — es inline elemen a fuggoleges
 * margo hatastalan. Emiatt az evfolyamszam, a kepzes neve es a leirasa
 * egyetlen szovegfolyamba olvadt ossze ("8Nyolc evfolyamos gimnazium"),
 * minden kepernyoszelessegen. A `display: block` teszi ezt harom sorra.
 */
.kepzes__ev { display: block; font-family: var(--serif); font-size: 22px; color: var(--gold-300); font-weight: 600; line-height: 1; }
.kepzes__nev { display: block; font-size: 15px; font-weight: 650; color: #fff; margin-top: 9px; }
.kepzes__leiras { display: block; font-size: 13.2px; color: #D3DCEA; margin-top: 5px; line-height: 1.5; }

/* ==========================================================================
   VERSENYEK
   ========================================================================== */
.versenyek { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.verseny {
	display: flex;
	align-items: center;
	gap: 16px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	padding: 18px 20px;
	transition: all .2s ease;
}
.verseny:hover { border-color: var(--navy-600); box-shadow: var(--shadow-sm); transform: translateX(3px); }
.verseny__jel {
	flex: none;
	width: 42px;
	height: 42px;
	border-radius: 11px;
	display: grid;
	place-items: center;
	background: var(--surface-2);
	color: var(--navy-700);
	font-family: var(--serif);
	font-size: 17px;
	font-weight: 600;
}
.verseny__szoveg { min-width: 0; }
.verseny__nev { display: block; font-size: 15.4px; font-weight: 650; color: var(--ink); line-height: 1.32; }
.verseny__targy { display: block; font-size: 12.8px; color: var(--muted); margin-top: 2px; }

/* ==========================================================================
   NAPTÁR + TÁMOGATÁS
   ========================================================================== */
.osztott { display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: start; }

.tamogatas {
	background: var(--navy-800);
	color: #fff;
	border-radius: var(--r-lg);
	padding: 36px 34px;
	position: relative;
	overflow: hidden;
}
.tamogatas::after {
	content: "";
	position: absolute;
	right: -70px;
	bottom: -70px;
	width: 230px;
	height: 230px;
	background-image: var(--pecset);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	opacity: .09;
}
.tamogatas h2 { color: #fff; font-size: 23px; margin-bottom: 12px; position: relative; }
.tamogatas p { color: #B9C7DD; font-size: 15.2px; position: relative; }
.tamogatas ul { margin: 22px 0 26px; display: grid; gap: 12px; position: relative; list-style: none; }
.tamogatas li { display: flex; gap: 12px; align-items: flex-start; font-size: 14.8px; color: #D3DDEC; }
.tamogatas li .pseg-ikon { width: 18px; height: 18px; flex: none; margin-top: 3px; color: var(--gold-500); }
.tamogatas .gomb { position: relative; }

/* ==========================================================================
   PARTNEREK
   ========================================================================== */
.partnerek { border-top: 1px solid var(--line); padding-block: 56px; }
.partnerek__cim {
	text-align: center;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--muted);
	margin-bottom: 34px;
}
.partnerek__racs {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 26px 32px;
	align-items: center;
	justify-items: center;
}
.partnerek__racs img {
	max-height: 52px;
	width: auto;
	object-fit: contain;
	filter: grayscale(1) contrast(1.05);
	opacity: .68;
	transition: filter .25s, opacity .25s, transform .25s;
}
.partnerek__racs a:hover img { filter: grayscale(0); opacity: 1; transform: scale(1.05); }

/* ==========================================================================
   TÖRÉSPONTOK
   ========================================================================== */
@media (max-width: 1180px) {
	.gyorseleres { grid-template-columns: repeat(3, 1fr); }
	.partnerek__racs { grid-template-columns: repeat(4, 1fr); }
}

/*
 * A táblagép-rés (721–1199 px) külön figyelmet kap.
 *
 * A téma töréspontjai 1024 és 720 px-en vannak, ezért a leggyakoribb
 * táblagép-szélességek (iPad álló 768, iPad Air 820, Surface 912, és a
 * fekvő nézetek 1025–1199 között) egy olyan sávba esnek, amit eredetileg
 * senki nem hangolt: ott vagy az asztali, vagy a mobil szabály él, egyik
 * sem erre a méretre készült.
 */
@media (max-width: 1199px) {
	/*
	 * Négy kártya 1199 px-en 227–281 px-es hasábokba zsúfolódott — ikonnal,
	 * címmel, leírással, adatchipekkel és linkkel ez olvashatatlanul szűk.
	 * Kettő oszlop négy elemhez amúgy is kiegyensúlyozottabb.
	 */
	.egysegek { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1024px) {
	.hero .container { grid-template-columns: 1fr; gap: 56px; padding-block: 56px 96px; }
	/*
	 * Egyhasábos hősnél a kép KÖZÉPRE kerül. Korábban 620 px-en megállt és
	 * balra tapadt, így 1023 px-en 380 px üres sáv maradt mellette jobbra —
	 * a szekció szemmel láthatóan féloldalasnak tűnt.
	 */
	.hero__vizual { max-width: 720px; margin-inline: auto; }
	.hirek-racs { grid-template-columns: 1fr; }
	.beiskolazas .container { grid-template-columns: 1fr; gap: 44px; }
	.versenyek { grid-template-columns: repeat(2, 1fr); }
	.osztott { grid-template-columns: 1fr; gap: 44px; }
}

@media (max-width: 720px) {
	.szekcio { padding-block: 56px; }
	.szekcio--szuk { padding-block: 44px; }

	.hero .container { padding-block: 44px 92px; gap: 44px; }
	.hero h1 { font-size: 34px; margin: 12px 0 16px; }
	.hero__bevezeto { font-size: 16.4px; }
	.hero__gombok { margin-top: 26px; }
	.hero__gombok .gomb { flex: 1 1 100%; }
	.hero__jelvenyek { margin-top: 30px; padding-top: 20px; gap: 12px; font-size: 13px; }
	/*
	 * Telefonon a kártya a fotó ALÁ kerül, nem rá.
	 *
	 * Asztali nézetben a fotóra lógó kártya jó megoldás — ott a kép 528 px
	 * magas, a kártya 100 px-e nem zavar. Telefonon viszont a kép már csak
	 * 175 px magas, és a kártya ebből 65 px-t takart el: a fotó 37%-át.
	 * Az épületből lényegében csak a tetőgerinc maradt látható.
	 */
	.hero__kepalairas {
		position: static;
		margin-top: 14px;
		padding: 13px 16px;
		gap: 13px;
	}
	.hero__kepalairas img { width: 44px; height: 44px; }

	.statok .container { grid-template-columns: repeat(2, 1fr); padding-inline: 0; }
	.stat { padding: 24px 14px; }
	.stat + .stat::before { display: none; }
	.stat:nth-child(n+3) { border-top: 1px solid rgba(255, 255, 255, .13); }
	.stat:nth-child(even) { border-left: 1px solid rgba(255, 255, 255, .13); }
	.stat__szam { font-size: 31px; }
	.stat__cimke { font-size: 12.5px; }

	.szekcio-fej { margin-bottom: 28px; }
	.szekcio-fej h2 { font-size: 26px; }
	.szekcio-fej p { font-size: 15.6px; }
	.hirek-fej { flex-direction: column; align-items: flex-start; gap: 16px; margin-bottom: 26px; }

	.egysegek { grid-template-columns: 1fr; gap: 14px; }
	.egyseg { padding: 24px 22px; }
	.gyorseleres { grid-template-columns: repeat(2, 1fr); gap: 12px; }
	.gyorslink { padding: 18px 12px; }

	.kepzesek { grid-template-columns: 1fr; }
	.beiskolazas__gombok .gomb { flex: 1 1 100%; }
	.versenyek { grid-template-columns: 1fr; }
	.tamogatas { padding: 28px 24px; }

	.partnerek__racs { grid-template-columns: repeat(3, 1fr); gap: 22px; }
	.partnerek__racs img { max-height: 44px; }
}