/* --- Vezető blokk (Hero), a HomeScreen2026 szerint. Bal oldalt a vezércikk
       kártyája RÁLÓG a képre, jobb oldalt két lista. --- */

.ag-hero {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-8);
	padding-block: var(--space-5) var(--space-8);
	align-items: start;
}

.ag-hero__media img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: var(--radius-image);
}

.ag-hero__card {
	display: grid;
	gap: 14px;
	justify-items: start;
	padding-top: var(--space-5);
}

.ag-hero__eyebrows {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin: 0;
}

.ag-hero__kicker {
	font: var(--type-label);
	letter-spacing: var(--tracking-eyebrow);
	text-transform: uppercase;
	color: var(--text-secondary);
}

.ag-hero__title {
	margin: 0;
	font: var(--type-display);
	font-size: var(--text-2xl);
	max-width: 20ch;
}

.ag-hero__title a { color: var(--text-body); text-decoration: none; }
.ag-hero__title a:hover { color: var(--link); }

.ag-hero__lede {
	margin: 0;
	font: var(--type-lede);
	font-size: 17px;
	color: var(--text-secondary);
	max-width: 58ch;
}

.ag-hero__foot {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	width: 100%;
	margin: 0;
	padding-top: 14px;
	border-top: 1px solid var(--border-subtle);
	font-family: var(--font-sans-ui);
	font-size: var(--text-xs);
	color: var(--text-secondary);
}

.ag-hero__byline { display: inline-flex; align-items: center; gap: var(--space-2); }
.ag-hero__avatar { border-radius: 50%; }

.ag-hero__cta {
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	font-size: var(--text-sm);
	font-weight: var(--weight-medium);
	color: var(--link);
}

.ag-hero__cta svg { width: 17px; height: 17px; }

/* --- A jobb oldali sáv --- */

.ag-hero__side { display: grid; align-content: start; }

.ag-hero__sidetitle {
	margin: 0;
	padding-bottom: 12px;
	font: var(--type-label);
	letter-spacing: var(--tracking-eyebrow);
	text-transform: uppercase;
	color: var(--text-accent);
	border-bottom: 2px solid var(--ink-900);
}

.ag-hero__sidetitle--gap { margin-top: var(--space-6); }

.ag-mini {
	display: grid;
	grid-template-columns: 92px minmax(0, 1fr);
	gap: 14px;
	padding: var(--space-4) 0;
	border-bottom: 1px solid var(--border-subtle);
}

.ag-mini__media img {
	width: 92px;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: var(--radius-image);
}

.ag-mini__body { display: grid; gap: 6px; align-content: start; min-width: 0; }

.ag-mini__cat {
	font: var(--type-label);
	font-size: 11px;
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	color: var(--text-secondary);
}

.ag-mini__title {
	margin: 0;
	font: var(--type-h4);
	font-size: 19px;
	overflow-wrap: anywhere;
}

.ag-mini__title a { color: var(--text-body); text-decoration: none; }
.ag-mini__title a:hover { color: var(--link); }

.ag-mini__meta {
	margin: 0;
	font-family: var(--font-sans-ui);
	font-size: 13px;
	color: var(--text-secondary);
}

.ag-latest { margin: 0; padding: 0; list-style: none; }

.ag-latest__link {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 12px;
	align-items: baseline;
	padding: 12px 0;
	border-bottom: 1px solid var(--border-subtle);
	text-decoration: none;
}

.ag-latest__num {
	font: var(--type-h4);
	font-size: var(--text-sm);
	/* ELTÉRÉS A TERVTŐL, mérésre: a terv --ink-300-at ír, az a lap hátterén
	   1,58:1 kontrasztot ad -- a sorszám gyakorlatilag olvashatatlan, pedig a
	   lista SORRENDJÉT hordozza. Az --ink-500 a legvilágosabb token, ami
	   átmegy a küszöbön. Az --ink-500-at MÉRTEM elsőre: 4,44:1, tehát épp
	   BUKIK -- a becslésem 4,6 volt. Az --ink-600 adja a 7,2:1-et.
	   Ára: a sorszám így ugyanolyan sötét, mint mellette a rovat neve, tehát
	   a hierarchia laposabb. Az olvasható sorszám ezt megéri. Ha a halvány
	   szándékos volt, visszaállítható, de akkor dísz, nem információ. */
	color: var(--ink-600);
}

.ag-latest__body { display: grid; gap: 2px; }

.ag-latest__title {
	font-family: var(--font-sans-ui);
	font-size: var(--text-sm);
	line-height: 1.4;
	color: var(--text-body);
}

.ag-latest__cat {
	font-family: var(--font-sans-ui);
	font-size: 13px;
	color: var(--text-secondary);
}

@media (min-width: 900px) {
	.ag-hero {
		grid-template-columns: 1.7fr 1fr;
		gap: var(--space-10);
		/* A tervben 56 px, erre nincs token a skálán (48 és 64 van). */
		padding-block: var(--space-8) 56px;
	}

	.ag-hero__lead {
		padding-right: var(--space-10);
		border-right: 1px solid var(--border-subtle);
	}

	/* A kártya RÁLÓG a képre: ez adja a mélységet, és ez a terv egyik
	   legjellemzőbb mozdulata a főoldalon. */
	.ag-hero__card {
		position: relative;
		margin-top: -72px;
		margin-right: var(--space-12);
		padding: 28px;
		background: var(--surface-card);
		border: 1px solid var(--border-subtle);
		border-radius: var(--radius-card);
		box-shadow: var(--shadow-md);
	}

	.ag-hero__title { font-size: 44px; }
	.ag-hero__lede { font-size: 19px; }
}

/*
 * Főoldal.
 *
 * Minden rács `auto-fit`-tel és `minmax`-szal dolgozik, nem médialekérdezésbe
 * égetett oszlopszámmal: így nincs olyan szélesség, ahol a kártyák se nem
 * férnek el, se nem törnek sorba.
 */

/* A meta sor Roboto marad: ezen a méreten a Playfair elvékonyodna. */

/* A kategória-fülecske az EGYETLEN hely, ahol csupa nagybetű állhat -- és ott
   is Roboto, nem a címsor-betű. */

/* --- Sávok --- */

/* A terv CategoryRow-ja FELÜLRŐL tart távolságot (marginTop 48/64), nem alulról.
   Alulról tartva az ELSŐ sáv nem kap semmit, és a kalkulátor-sáv után nulla
   hézag marad -- mérve pontosan ez történt. Felülről tartva minden sáv
   egyformán viselkedik, a szomszédos margók pedig összeolvadnak. */
.ag-strip { margin-top: var(--space-12); }

@media (min-width: 900px) {
	.ag-strip { margin-top: var(--space-16); }
}

.ag-grid {
	display: grid;
	gap: var(--space-4);
	/* Mobilon EGY hasáb, és a kártya VÍZSZINTES: kép balra, szöveg jobbra. Így
	   négy cikk elfér egy képernyőn, nem kell négyet görgetni. A tervben is így
	   van (CategoryRow layout="horizontal"). */
	grid-template-columns: 1fr;
}

@media (max-width: 899px) {
	.ag-grid .ag-card {
		display: grid;
		grid-template-columns: 116px minmax(0, 1fr);
		gap: var(--space-3);
		align-items: start;
		border: 0;
		border-bottom: 1px solid var(--border-subtle);
		border-radius: 0;
		background: none;
		padding-bottom: var(--space-4);
	}

	.ag-grid .ag-card__media img {
		aspect-ratio: 4 / 3;
		border-radius: var(--radius-image);
	}

	.ag-grid .ag-card__body { padding: 0; }
	.ag-grid .ag-card__title { font-size: var(--text-sm); }
	.ag-grid .ag-card__lead { display: none; }
}

@media (min-width: 900px) {
	/* A tervben NÉGY hasáb, nem rugalmas auto-fit: a rovat-sáv mindig négy
	   cikket mutat, egy sorban. */
	.ag-grid {
		grid-template-columns: repeat(4, 1fr);
		gap: var(--space-6);
	}
}

/* --- Kalkulátor-sáv (CalculatorBar). EGY kártya, benne a rács. Az első
       csempe asztalin két sort fog el: az a sáv súlypontja. --- */

.ag-calcbar {
	background: var(--surface-card);
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-card);
	padding: var(--space-5);
	display: grid;
	gap: var(--space-4);
}

.ag-calcbar__head {
	display: flex;
	align-items: baseline;
	gap: var(--space-3);
	flex-wrap: wrap;
}

.ag-calcbar__title { margin: 0; font: var(--type-h3); font-size: var(--text-lg); }

.ag-calcbar__sub {
	margin: 0;
	font-family: var(--font-sans-ui);
	font-size: 15px;
	color: var(--text-secondary);
}

.ag-calcbar__grid {
	display: grid;
	/* minmax(0, 1fr) és nem 1fr: az utóbbinál a sáv alapértelmezett
	   min-width: auto értéke miatt egy hosszabb szó SZÉTFESZÍTI a saját
	   oszlopát, és a két hasáb egyenlőtlen lesz. Mérve: 154 / 133 px. */
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ag-calc {
	display: grid;
	gap: 6px;
	align-content: start;
	height: 100%;
	padding: var(--space-4);
	background: var(--surface-page);
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-control);
	text-decoration: none;
	transition: var(--transition-control);
}

@media (hover: hover) and (pointer: fine) {
	a.ag-calc:hover {
		background: var(--teal-50);
		border-color: var(--accent);
	}
}

.ag-calc__icon { color: var(--text-accent); }
.ag-calc__icon svg { width: 20px; height: 20px; }

.ag-calc__name {
	font-family: var(--font-sans-ui);
	font-size: var(--text-sm);
	font-weight: var(--weight-medium);
	color: var(--text-body);
}

.ag-calc__note {
	font-family: var(--font-sans-ui);
	font-size: var(--text-xs);
	line-height: 1.45;
	color: var(--text-secondary);
}

/* Ami nem visz sehova, az ne látsszon kattinthatónak. */
.ag-calc--nolink { cursor: default; }

@media (min-width: 900px) {
	.ag-calcbar { padding: var(--space-6); }
	.ag-calcbar__title { font-size: var(--text-xl); }

	/* NYOLC EGYENRANGÚ csempe, négy hasáb, két sor. A tervben egy nagy csempe
	   állt elöl, de az a HÉT elem páratlanságát kezelte, nem hangsúly volt
	   (Balázs, 2026-08-29). Nyolccal a páratlanság megszűnt, tehát a kiemelés
	   funkciója is -- ezért nincs helyette más súlypont sem. */
	.ag-calcbar__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		grid-auto-rows: minmax(104px, auto);
	}
}

/* --- Kezdő belépő (BeginnerBlock). A lap MÁSODIK sötét felülete, de nem a
       lábléc grafitja, hanem a márka mély tealje: ez hívás, nem lezárás. --- */

.ag-beginners {
	margin-top: var(--space-12);
	padding: 28px;
	background: var(--teal-800);
	border-radius: var(--radius-card);
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-6);
	align-items: center;
}

.ag-beginners__text { display: grid; gap: var(--space-3); justify-items: start; }

.ag-beginners__eyebrow {
	margin: 0;
	font: var(--type-label);
	letter-spacing: var(--tracking-eyebrow);
	text-transform: uppercase;
	color: var(--teal-200);
}

.ag-beginners__title {
	margin: 0;
	font: var(--type-h2);
	font-size: var(--text-xl);
	color: #fff;
}

.ag-beginners__lede {
	margin: 0;
	font-family: var(--font-sans-ui);
	font-size: 17px;
	line-height: 1.65;
	color: #DCEEF3;
	max-width: 46ch;
}

/* A gomb itt FEHÉR alapon teal, nem a szokásos elsődleges: sötét felületen az
   accent-fill nem válik el eléggé. */
.ag-beginners__cta {
	background: #fff;
	color: var(--teal-800);
	border-color: transparent;
}

.ag-beginners__cta:hover { background: var(--teal-50); color: var(--teal-900); }

.ag-beginners__list { margin: 0; padding: 0; list-style: none; display: grid; }

.ag-beginners__list a {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 0;
	color: #fff;
	text-decoration: none;
	font-family: var(--font-sans-ui);
	font-size: 17px;
}

.ag-beginners__list li + li a { border-top: 1px solid rgb(255 255 255 / 0.18); }

.ag-beginners__num {
	font: var(--type-h4);
	color: var(--teal-300);
	min-width: 22px;
}

.ag-beginners__arrow {
	margin-left: auto;
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	color: var(--teal-200);
}

.ag-beginners__list a:hover .ag-beginners__label { text-decoration: underline; }

@media (min-width: 900px) {
	.ag-beginners {
		margin-top: var(--space-16);
		grid-template-columns: 1fr 1fr;
		gap: var(--space-12);
		padding: var(--space-12);
	}

	.ag-beginners__title { font-size: var(--text-2xl); }
}