/* --- Kalkulátor-csempék.
       KÉT HELYEN kell ugyanaz: a főoldali sávban és a /kalkulatorok/ gyűjtő-
       oldalon. Ezért került ki a home.css-ből ide: egy forrás, két hívó. Ha
       ez a fájl visszaolvadna a főoldaléba, a gyűjtőoldal stílus nélkül
       maradna -- pontosan az az állapot, amit Balázs 2026-08-31-én kifogásolt
       ("mintha megbolult volna a typo, térköz"). --- */

/* --- 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);
	}
}

/* --- A GYŰJTŐOLDAL: ugyanaz a csempe, három hasábban, teljes szélességben. --- */

/* KILÉPÉS A SZÖVEG-SÁVBÓL. A lap törzse `.ag-measure` alatt fut (68 karakter),
   ami SZÖVEGHEZ helyes, csempe-rácshoz nem: 1440 px-en a nyolc csempe a bal
   oldalon szorongott, a jobb fele üresen (mérve 2026-08-31).
   NINCS ELTOLÁS, ÉS EZ SZÁNDÉKOS. Először `left: 50%` + `transform` volt itt --
   csakhogy az a SZÜLŐ közepéhez igazít, a szülő pedig a keret BAL széléhez
   tapad, nem a képernyő közepéhez. A helyi előnézeten a rács fele kilógott a
   képernyőről, miközben a mérés (1200 px széles rács, nincs vízszintes túllógás)
   rendben volt. A megoldás egyszerűbb: a törzs bal széle EGYBEESIK a keret bal
   szélével, tehát elég szélesnek lenni, eltolni nem kell. */
.ag-kalkoldal {
	width: min(calc(100vw - 2 * var(--gutter)), calc(var(--container-max) - 2 * var(--gutter)));
	max-width: none;
	margin-block: var(--space-8);
}

/* Egy hasáb mobilon, kettő 640 fölött, HÁROM 900 fölött -- ez utóbbi Balázs
   kérése. A főoldali sáv négyet használ, mert ott keskenyebb kártyában ülnek. */
.ag-kalkoldal .ag-calcbar__grid {
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 640px) {
	.ag-kalkoldal .ag-calcbar__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 900px) {
	.ag-kalkoldal .ag-calcbar__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		grid-auto-rows: minmax(104px, auto);
	}
}

/* --- A friss cikkek UGYANAZZAL a kártyával, mint a főoldalon.
       A `.ag-card` a layout.css-ben él, tehát minden lapon rendelkezésre áll;
       csak a rács hiányzott hozzá ezen az oldalon. --- */

.ag-cardgrid {
	display: grid;
	gap: var(--space-4);
	grid-template-columns: minmax(0, 1fr);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 640px) {
	.ag-cardgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 900px) {
	.ag-cardgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.ag-kalkoldal__cim {
	margin: 0 0 var(--space-4);
	font: var(--type-h3);
	font-size: var(--text-xl);
}

/* --- A GYŰJTŐOLDAL RÁCSA NEM SZÖVEGTÖRZS-LISTA.
       EZ A SZEKCIÓ A /kalkulatorok/ GYŰJTŐOLDALT JAVÍTJA, nem a nyolc aloldalt --
       csak azért utazik a kétoszlopos munkával egy PR-ben, mert ugyanabban a
       munkamenetben mértem ki.

       A LELET, mérve 2026-08-31 renderelve: a csempék 24 px-cel beljebb kezdődtek,
       mint a lap H1-e és bekezdése, és csak BALRÓL. Mobilon ez nem igazítási
       kérdés volt, hanem 24 px hasznos szélesség: 303 px széles csempe 327 helyett.

       AZ OK NEM A RÁCSBAN VOLT, hanem specifikusságban: a fenti
       `.ag-calcbar__grid { padding: 0 }` (0-1-0) alatt marad az article.css
       `.ag-prose ul { padding-left: 24px }` szabálya (0-1-1), és az article.css
       a sorrendben KÉSŐBB tölt. Ugyanez a `.ag-prose li` margójával: a sor-hézag
       20 px lett a 12 helyett, miközben a hasáb-hézag 12 maradt.
       A főoldalon ez nem jött elő, mert ott a sáv nincs `.ag-prose` alatt.

       Ezért a szűkebb, `.ag-prose`-hoz kötött szelektor: pontosan ott nyer, ahol
       az ütközés van, és máshol nem szól bele semmibe. --- */

.ag-prose .ag-calcbar__grid,
.ag-prose .ag-cardgrid {
	padding-left: 0;
}

.ag-prose .ag-calcbar__item,
.ag-prose .ag-cardgrid > li {
	margin-bottom: 0;
}