/**
 * Funkció-aloldal — törzs (natív Gutenberg-tartalom stílusa)
 *
 * A funkció-posztok törzse SZABAD szerkesztésű Gutenberg-tartalom (nem
 * Path B) — ez a fájl a gyári blokkokat öltözteti a téma design-tokenjeibe,
 * a `.funkcio-single__content` scope alatt:
 *
 *   - `wp:media-text` — váltakozó kép/videó–szöveg sorok; a tükrözést a
 *     gyári `has-media-on-the-right` osztály (blokk-eszköztár) intézi, a
 *     mobil-stackelést az `is-stacked-on-mobile` (gyári block-library CSS).
 *     Itt csak térköz, lekerekítés és tipográfia jön rá.
 *   - `wp:video` / `wp:embed` — teljes szélesség, panel-radius.
 *   - folyószöveg (p / list / heading) — olvasási max-szélesség (measure).
 *
 * Kiemelt kép-panel (.funkcio-single__featured) — széles fejléc-vizuál a
 * hero alatt (blog-single minta).
 */

.funkcio-single__body {
	padding: 40px var(--container-padding-mobile) var(--spacing-section-mobile);
	background-color: var(--color-background);
}

@media (min-width: 768px) {
	.funkcio-single__body {
		padding: var(--spacing-xl) var(--container-padding-tablet) var(--spacing-section-tablet);
	}
}

@media (min-width: 1200px) {
	.funkcio-single__body {
		padding: var(--spacing-xl) var(--container-padding-desktop) var(--spacing-section-desktop);
	}
}

.funkcio-single__container {
	max-width: var(--container-max-width);
	margin: 0 auto;
}

/* Kiemelt kép — széles fejléc-panel a hero és a tartalom között */
.funkcio-single__featured {
	margin: 0 0 var(--spacing-xl);
	border-radius: var(--radius-panel-lg);
	overflow: hidden;
	box-shadow: var(--shadow-card);
}

.funkcio-single__featured-image {
	display: block;
	width: 100%;
	height: auto;
}

/* ==========================================================================
   Tartalom — alap vertikális ritmus + tipográfia
   ========================================================================== */

.funkcio-single__content > * {
	margin-top: 0;
	margin-bottom: 0;
}

.funkcio-single__content > * + * {
	margin-top: var(--spacing-md);
}

/* Folyószöveg-elemek olvasási szélessége (a média-sorok teljes szélesek) */
.funkcio-single__content > p,
.funkcio-single__content > ul,
.funkcio-single__content > ol,
.funkcio-single__content > h2,
.funkcio-single__content > h3,
.funkcio-single__content > h4 {
	max-width: 70ch;
}

.funkcio-single__content p {
	font-size: var(--fs-body-lg);
	line-height: var(--lh-body-lg);
	font-weight: var(--fw-medium);
	color: var(--color-text-muted);
}

.funkcio-single__content ul,
.funkcio-single__content ol {
	padding-left: 24px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	font-size: var(--fs-body-lg);
	line-height: var(--lh-body-lg);
	font-weight: var(--fw-medium);
	color: var(--color-text-muted);
}

.funkcio-single__content h2 {
	font-size: var(--fs-h2);
	line-height: var(--lh-h2);
	font-weight: var(--fw-black);
	color: var(--color-text);
	letter-spacing: -0.02em;
}

.funkcio-single__content h3 {
	font-size: var(--fs-h3);
	line-height: var(--lh-h3);
	font-weight: var(--fw-bold);
	color: var(--color-text);
}

.funkcio-single__content h4 {
	font-size: var(--fs-h4);
	line-height: var(--lh-h4);
	font-weight: var(--fw-bold);
	color: var(--color-text);
}

/* Címsor előtt nagyobb levegő (új tartalmi egység kezdete) */
.funkcio-single__content > * + h2,
.funkcio-single__content > * + h3 {
	margin-top: var(--spacing-xl);
}

.funkcio-single__content a {
	color: var(--color-primary);
	font-weight: var(--fw-bold);
	text-decoration: none;
	transition: color var(--transition-base);
}

.funkcio-single__content a:hover,
.funkcio-single__content a:focus-visible {
	color: var(--color-primary-dark);
	text-decoration: underline;
}

/* ==========================================================================
   Média–szöveg sorok (wp:media-text) — a váltakozó blokk-ritmus
   ========================================================================== */

.funkcio-single__content > .wp-block-media-text {
	margin-top: var(--spacing-xl);
	margin-bottom: var(--spacing-xl);
	max-width: none;
	grid-column-gap: var(--spacing-lg);
}

@media (min-width: 1200px) {
	.funkcio-single__content > .wp-block-media-text {
		margin-top: var(--spacing-2xl);
		margin-bottom: var(--spacing-2xl);
		grid-column-gap: var(--spacing-xl);
	}
}

/* A gyári 8%-os belső padding helyett a grid-gap adja a távolságot */
.funkcio-single__content .wp-block-media-text .wp-block-media-text__content {
	padding: 0;
}

/* Mobil-stack esetén a média és a szöveg közé függőleges térköz */
@media (max-width: 600px) {
	.funkcio-single__content .wp-block-media-text.is-stacked-on-mobile .wp-block-media-text__content {
		padding-top: var(--spacing-sm);
	}
}

/* Média-oldal — kép és videó egységes panel-lekerekítéssel */
.funkcio-single__content .wp-block-media-text__media img,
.funkcio-single__content .wp-block-media-text__media video {
	border-radius: var(--radius-panel-lg);
	width: 100%;
	height: auto;
}

/* A fél-szélességű oszlopban a nagy címsor-fokozatok vizuálisan H3-méretre
 * váltanak (a szemantika marad) — 38px-es H2 a split-sorban aránytalan. */
.funkcio-single__content .wp-block-media-text h2,
.funkcio-single__content .wp-block-media-text h3 {
	font-size: var(--fs-h3);
	line-height: var(--lh-h3);
	font-weight: var(--fw-bold);
	color: var(--color-text);
	margin: 0 0 var(--spacing-sm);
}

.funkcio-single__content .wp-block-media-text p {
	margin: 0;
}

.funkcio-single__content .wp-block-media-text p + p {
	margin-top: var(--spacing-sm);
}

/* ==========================================================================
   Önálló videó / beágyazás / kép blokkok
   ========================================================================== */

.funkcio-single__content > .wp-block-video,
.funkcio-single__content > .wp-block-embed,
.funkcio-single__content > .wp-block-image {
	margin-top: var(--spacing-xl);
	margin-bottom: var(--spacing-xl);
}

.funkcio-single__content .wp-block-video video {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--radius-panel-lg);
}

.funkcio-single__content .wp-block-embed .wp-block-embed__wrapper {
	border-radius: var(--radius-panel-lg);
	overflow: hidden;
	aspect-ratio: 16 / 9;
}

.funkcio-single__content .wp-block-embed iframe {
	width: 100%;
	height: 100%;
	border: 0;
}

.funkcio-single__content .wp-block-image img {
	display: block;
	max-width: 100%;
	height: auto;
	border-radius: var(--radius-panel-lg);
}

.funkcio-single__content figcaption {
	margin-top: 12px;
	font-size: var(--fs-body-sm);
	line-height: var(--lh-body-sm);
	font-weight: var(--fw-medium);
	color: var(--color-text-muted);
	text-align: center;
}