/**
 * Hero-quote blokk — ügyfél-idézet KÖZVETLENÜL a Hero alatt
 * ==========================================================================
 * Középre zárt pull-quote a közös .hero-band-en belül (front-page.php):
 * ügyfél-logó → idézet (idézőjelben) → ki mondta (név · cég). Átlátszó háttér +
 * z-index:1 → a hero háttér-shape-jei mögötte átfolynak, a szöveg viszont
 * FÖLÖTTÜK marad (ugyanaz a minta, mint a showcase-tickernél).
 *
 * Térköz: a hero alsó paddingja nagy (a vertikális centrálás miatt, header-
 * tudatos érték), ezért negatív felső margóval közelebb húzzuk hozzá. Desktopon
 * az alatta jövő ticker saját −64px-es felső margóját a showcase-ticker.css
 * nullázza (`.hero-quote + .showcase-ticker`) — a heróhoz húzást itt az idézet
 * viszi. Mobilon a ticker rejtett → az idézet után a showcase-present jön.
 *
 * Scope: minden szabály `.hero-quote`-ra szkópolva. A szerkesztő-vásznon a
 * `hero-quote__*` osztályok bekezdés-/kép-blokkokon ülnek (Path B), ezért a
 * kép-szabályok `img`-re szűkítettek (a wp:image a <figure>-re teszi az osztályt).
 * ========================================================================== */

.hero-quote {
	position: relative;
	z-index: 1;
	margin-top: -48px;
	/* Mobilon a ticker rejtett → KÖZVETLENÜL a showcase-present jön, aminek a
	   panelje görgetéskor `data-parallax="0,-120"`-szal 120px-et FELFELÉ úszik
	   (ráúszik a fölötte lévő szekcióra). 40px alsó térközzel ez rátakart az
	   idézetre (user, 2026-09-23) → a parallax-útnak (120px) + a látható résnek
	   együtt kell elférnie. 128px + a következő szekció 24px felső paddingja. */
	padding: 0 var(--container-padding-mobile) 128px;
	text-align: center;
}

@media (min-width: 768px) {
	.hero-quote {
		padding: 0 var(--container-padding-tablet) 64px;
	}
}

@media (min-width: 1200px) {
	.hero-quote {
		margin-top: -64px;
		padding: 0 var(--container-padding-desktop) 64px;
	}
}

.hero-quote__figure {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	max-width: 840px;
	margin: 0 auto;
}

/* ---------- Ügyfél-logó (a szekció legalján, az attribúció alatt) ---------- */

img.hero-quote__logo {
	display: block;
	width: auto;
	height: 34px;
	max-width: 220px;
	object-fit: contain;
}

@media (min-width: 768px) {
	img.hero-quote__logo {
		height: 40px;
	}
}

/* ---------- Idézet ---------- */

.hero-quote__text {
	margin: 0;
	font-family: var(--font-heading);
	font-size: var(--fs-h6);
	line-height: 30px;
	font-weight: var(--fw-medium);
	color: var(--color-text);
	text-wrap: pretty;
}

/* A globális `p` (main.css) muted színt + alsó margót ad — itt az idézet-
   tipográfia öröklődjön (a szerkesztőben maga a <p> viseli az osztályt). */
.hero-quote__text p,
p.hero-quote__text {
	margin: 0;
	color: var(--color-text);
}

@media (min-width: 768px) {
	.hero-quote__text {
		font-size: var(--fs-h4);
		line-height: 36px;
	}
}

/* ---------- Attribúció — „ki mondja" + alul az ügyfél-logó ---------- */

.hero-quote__author {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
}

/* Portré + név/cég egy sorban (a portré opcionális). */
.hero-quote__person {
	display: flex;
	align-items: center;
	gap: 12px;
}

/* Név · cég EGY sorban (a cég a logón is látszik → itt tömör a meta-sor). */
.hero-quote__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: center;
	gap: 6px;
}

img.hero-quote__avatar {
	flex-shrink: 0;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	object-fit: cover;
}

.hero-quote__name {
	font-size: var(--fs-body-md);
	line-height: var(--lh-body-md);
	font-weight: var(--fw-bold);
	color: var(--color-text);
}

.hero-quote__sep,
.hero-quote__company {
	font-size: var(--fs-body-md);
	line-height: var(--lh-body-md);
	font-weight: var(--fw-medium);
	color: var(--color-text-muted);
}