/*
 * Cikkoldal.
 *
 * A lap egyetlen valódi feladata: hosszú szöveget olvashatóan adni. Minden
 * más -- oldalsáv, hirdetés, adatlap -- ennek van alárendelve.
 */

.ag-article__head { padding-top: var(--space-8); }

.ag-crumbs {
	margin-bottom: var(--space-4);
	color: var(--text-secondary);
	font-size: var(--text-xs);
}

.ag-crumbs a { color: var(--text-secondary); }

.ag-article__title {
	max-width: 20ch;
	margin-block: var(--space-2) var(--space-4);
	font-size: var(--text-3xl);
}

@media (min-width: 1024px) {
	.ag-article__title {
		max-width: 24ch;
		font-size: var(--text-4xl);
	}
}

/* A felvezető nagyobb a törzsnél, de nem címsor: Roboto marad. */
.ag-article__lead {
	max-width: var(--measure-article);
	color: var(--text-secondary);
	font-size: var(--text-lg);
}

/* Meta sor: kis méret, tehát Roboto. A Playfair itt elvékonyodna. */
.ag-article__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2);
	color: var(--text-secondary);
	font-size: var(--text-xs);
}

.ag-article__avatar {
	border-radius: 50%;
	vertical-align: middle;
}

.ag-article__author { font-weight: 500; }

.ag-article__cover { margin: var(--space-6) auto var(--space-8); }

.ag-article__cover img {
	display: block;
	width: 100%;
	border-radius: var(--radius-card);
}

.ag-article__cover figcaption {
	margin-top: var(--space-2);
	color: var(--text-secondary);
	font-size: var(--text-xs);
}

/* --- Kéthasábos elrendezés --- */

.ag-article__layout {
	display: grid;
	gap: var(--space-12);
}

@media (min-width: 1024px) {
	.ag-article__layout {
		/* A szöveg kapja a helyet, az oldalsáv fix 320 px. */
		grid-template-columns: minmax(0, 1fr) 320px;
		align-items: start;
	}
}

.ag-article__sticky {
	display: grid;
	gap: var(--space-6);
}

@media (min-width: 1024px) {
	/* A sticky elem csak a SAJAT SZULOJEN BELUL tud utazni. A rácson
	   `align-items: start` áll, ami az <aside>-t a tartalma magasságára húzza
	   össze -- így a szülő és a ragadós doboz PONTOSAN egyforma magas lett,
	   nulla mozgástérrel, és a szabály némán hatástalan maradt. Mérve
	   2026-08-29: mindkettő 694 px, a szövegoszlop ugyanabban a sorban 5138.
	   Az aside-nak tehát végig kell érnie a soron; a benne álló doboz mérete
	   ettől nem változik. */
	.ag-article__side { align-self: stretch; }

	.ag-article__sticky {
		position: sticky;
		top: var(--space-6);
	}
}

/* A tartalomjegyzék asztali nézetben az oldalsávban áll, mobilon a cikk elején
   -- ugyanaz a markup, két helyen, és mindig csak az egyik látszik. */
.ag-toc--mobile { display: block; }
.ag-toc--desktop { display: none; }

@media (min-width: 1024px) {
	.ag-toc--mobile { display: none; }
	.ag-toc--desktop { display: block; }
}

/* --- Törzsszöveg --- */

.ag-prose {
	font-size: var(--ag-article-size);
	line-height: var(--leading-article);
}

.ag-prose > * { margin-block: 0 var(--space-6); }

/* Bőséges felső térköz a címsorok előtt: ez választja el a gondolati
   egységeket, nem egy vonal. */
.ag-prose h2 {
	margin-top: var(--space-16);
	font-size: var(--text-2xl);
}

.ag-prose h3 {
	margin-top: var(--space-12);
	font-size: var(--text-xl);
}

.ag-prose ul,
.ag-prose ol { padding-left: var(--space-6); }

.ag-prose li { margin-bottom: var(--space-2); }

.ag-prose blockquote {
	margin-inline: 0;
	padding-left: var(--space-6);
	border-left: 3px solid var(--accent);
	color: var(--text-secondary);
	font-style: normal;
}

.ag-prose figure { margin-inline: 0; }

.ag-prose figcaption {
	margin-top: var(--space-2);
	color: var(--text-secondary);
	font-size: var(--text-xs);
}

.ag-prose img {
	border-radius: var(--radius-card);
}

/* Táblázat: keskeny képernyőn SAJÁT MAGA görgethető, a lap nem.
   A blokkszerkesztő figure keretbe teszi, arra elég az overflow. A KLASSZIKUS
   szerkesztővel írt cikkekben viszont a <table> keret nélkül áll -- négy ilyen
   cikk van ma az oldalon --, és ott a táblázat maga lesz a görgethető doboz.
   Markupot nem alakítunk át hozzá: egy félig megírt keret rosszabb, mint egy
   kicsit szokatlan megjelenítés. */
.ag-prose .wp-block-table,
.ag-prose figure.wp-block-table { overflow-x: auto; }

.ag-prose > table {
	display: block;
	width: max-content;
	max-width: 100%;
	overflow-x: auto;
}

.ag-prose table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--text-sm);
}

.ag-prose th,
.ag-prose td {
	padding: var(--space-2);
	border-bottom: 1px solid var(--border-subtle);
	text-align: left;
}

/* Kiemelt tipp. A Gutenberg "kiemelt bekezdés" stílusára is ráhúzzuk, hogy
   szerkesztőben is elérhető legyen, saját blokk nélkül. */
.ag-prose .is-style-tipp,
.ag-prose .ag-tip {
	padding: var(--space-6);
	background: #F0F8FA;
	border-left: 3px solid var(--accent);
	border-radius: var(--radius-card);
}

/* --- Adatlap --- */

.ag-sheet {
	max-width: var(--measure-article);
	margin-bottom: var(--space-8);
	padding: var(--space-6);
	background: var(--surface-card);
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-card);
}

.ag-sheet__title {
	margin-bottom: var(--space-4);
	font-size: var(--text-lg);
}

.ag-sheet__list { margin: 0; }

.ag-sheet__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-4);
	padding-block: var(--space-2);
	border-bottom: 1px solid var(--border-subtle);
}

.ag-sheet__row:last-child { border-bottom: 0; }

.ag-sheet__row dt {
	color: var(--text-secondary);
	font-size: var(--text-sm);
}

.ag-sheet__row dd {
	margin: 0;
	font-weight: 500;
}

/* --- Tartalomjegyzék --- */

.ag-toc {
	margin-bottom: var(--space-8);
	padding: var(--space-4) var(--space-6);
	background: var(--surface-card);
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-card);
}

.ag-toc__head {
	font-family: var(--font-sans-ui);
	font-size: var(--text-sm);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	cursor: pointer;
}

.ag-toc__list {
	margin: var(--space-4) 0 0;
	padding-left: var(--space-6);
	font-size: var(--text-sm);
	line-height: 1.5;
}

.ag-toc__item { margin-bottom: var(--space-2); }

.ag-toc__item--3 { padding-left: var(--space-4); }

/* --- Kalkulátor doboz --- */

.ag-calcbox {
	padding: var(--space-6);
	background: #F0F8FA;
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-card);
}

.ag-calcbox__title { font-size: var(--text-lg); }

.ag-calcbox__note {
	color: var(--text-secondary);
	font-size: var(--text-sm);
}

.ag-calcbox .ag-btn {
	background: var(--accent);
	color: var(--text-inverse);
}

/* --- Szerzői doboz --- */

.ag-authorbox {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-4);
	align-items: start;
	padding: var(--space-5);
	background: var(--surface-card);
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-card);
}

.ag-authorbox__img {
	display: block;
	width: 96px;
	height: 96px;
	border-radius: 50%;
}

.ag-authorbox__body {
	display: grid;
	gap: 10px;
	justify-items: start;
}

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

.ag-authorbox__name {
	margin: 0;
	font: var(--type-h3);
}

.ag-authorbox__bio {
	margin: 0;
	font: var(--type-body);
	font-size: 17px;
	max-width: 62ch;
}

@media (min-width: 900px) {
	.ag-authorbox {
		grid-template-columns: 96px 1fr;
		gap: var(--space-6);
		/* A tervben 28 px, és erre NINCS token a skálán (24 és 32 van).
		   Az artboard komponense is közvetlenül írja. */
		padding: 28px;
	}
}

/* --- Záró címkék --- */

.ag-article__tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin: var(--space-6) 0 var(--space-6);
	padding: var(--space-4) 0 0;
	border-top: 1px solid var(--border-subtle);
	list-style: none;
}

/* --- Kapcsolódó cikkek --- */

.ag-related {
	margin-top: var(--space-12);
}

.ag-related__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-4);
}

@media (min-width: 900px) {
	.ag-related { margin-top: var(--space-16); }
	.ag-related__grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
}

/* --- Kiemelt idézet (PullQuote). A core blokkot öltöztetjük, nem újat
       gyártunk: a szerző a megszokott helyen találja a szerkesztőben. --- */

.ag-prose .wp-block-pullquote {
	margin: var(--space-6) 0;
	padding: var(--space-2) 0 var(--space-2) var(--space-5);
	border-left: 3px solid var(--accent);
}

.ag-prose .wp-block-pullquote blockquote {
	margin: 0;
	border: 0;
	padding: 0;
}

.ag-prose .wp-block-pullquote p {
	margin: 0;
	font: var(--type-h3);
	font-style: normal;
	color: var(--text-body);
	text-wrap: pretty;
}

.ag-prose .wp-block-pullquote cite {
	display: block;
	margin-top: 10px;
	font-family: var(--font-sans-ui);
	font-size: var(--text-xs);
	font-style: normal;
	color: var(--text-secondary);
}

.ag-prose .wp-block-pullquote cite::before { content: "— "; }

/* A jobbra kifuttatott változat. Csak ott, ahol van hely rá: keskeny
   képernyőn visszaáll a rendes idézetre, különben szétnyomja a szöveget. */
@media (min-width: 900px) {
	.ag-prose .wp-block-pullquote.is-style-ag-pull-right {
		float: right;
		width: 300px;
		margin-left: var(--space-6);
		padding: var(--space-4) 0 0;
		border-left: 0;
		border-top: 2px solid var(--accent);
	}
}

/* --- Kiemelő doboz (Callout). Csoport blokkra ül, három hangnemben. --- */

.ag-prose .wp-block-group[class*="is-style-ag-callout-"] {
	margin: var(--space-6) 0;
	padding: var(--space-4) var(--space-5);
	border-left: 3px solid var(--accent);
	border-radius: 0 var(--radius-card) var(--radius-card) 0;
	background: var(--surface-accent-soft);
	font-family: var(--font-sans-ui);
	font-size: 17px;
	line-height: 1.6;
}

/* Az ELSŐ címsor a dobozban a kísérőszöveg, nem szakaszcím: kicsi, nagybetűs,
   a hangnem színével. A tervben ez a "title" tulajdonság. */
.ag-prose .wp-block-group[class*="is-style-ag-callout-"] > :is(h2, h3, h4, h5, h6):first-child {
	margin: 0 0 6px;
	font: var(--type-label);
	font-size: 12px;
	letter-spacing: var(--tracking-eyebrow);
	text-transform: uppercase;
	color: var(--teal-800);
}

.ag-prose .wp-block-group[class*="is-style-ag-callout-"] > p { margin: 0 0 6px; }
.ag-prose .wp-block-group[class*="is-style-ag-callout-"] > :last-child { margin-bottom: 0; }

.ag-prose .wp-block-group.is-style-ag-callout-tip {
	background: var(--success-100);
	border-left-color: var(--success-600);
}

.ag-prose .wp-block-group.is-style-ag-callout-tip > :is(h2, h3, h4, h5, h6):first-child { color: var(--success-600); }

.ag-prose .wp-block-group.is-style-ag-callout-caution {
	background: var(--warning-100);
	border-left-color: var(--warning-600);
}

.ag-prose .wp-block-group.is-style-ag-callout-caution > :is(h2, h3, h4, h5, h6):first-child { color: var(--warning-600); }

/* --- Önálló oldal. Nem cikk: nincs rovat, szerző és olvasási idő. --- */

.ag-page__head { padding-block: var(--space-8) var(--space-4); }

.ag-page__title { margin: 0; font: var(--type-h1); max-width: 24ch; }

.ag-page__cover { margin: 0 auto var(--space-6); }

.ag-page__cover img { width: 100%; border-radius: var(--radius-image); }

.ag-page__pages {
	margin-top: var(--space-6);
	font-family: var(--font-sans-ui);
	font-size: var(--text-sm);
	color: var(--text-secondary);
}