/**
 * blocks/hero/hero.css — Főoldal HERO (a bundle .hero szekciója, BEM-re skálázva).
 * Kétoszlopos fejléc + full-width kép, a header alatt egy képernyőnyi magasságban.
 */

.hero {
	max-width: var(--container); margin: 0 auto;
	height: calc(100svh - var(--header-h)); min-height: 420px;
	display: flex; flex-direction: column;
	padding: var(--space-6) var(--gutter) 0;
}
.hero__grid {
	flex: 0 0 auto;
	display: grid; grid-template-columns: 1.55fr 1fr;
	gap: var(--space-6) var(--space-8); align-items: start;
}
.hero__eyebrow {
	grid-column: 1 / -1; margin: 0;
	display: flex; align-items: center; gap: 14px; white-space: nowrap;
	font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.16em;
	text-transform: uppercase; color: var(--fg-muted);
}
.hero__eyebrow::before { content: ""; width: 30px; height: 1px; background: var(--gray-400); flex: none; }
.hero__title {
	grid-column: 1; align-self: start; margin: 0;
	font-family: var(--font-display); font-weight: 700; letter-spacing: -0.03em;
	font-size: clamp(2.25rem, 0.4rem + 4.7vw, 4.5rem); line-height: 0.98;
	max-width: 14ch; text-wrap: balance;
}
.hero__title em { font-style: italic; font-weight: 700; }
.hero__aside {
	grid-column: 2; align-self: start; max-width: 40ch;
	display: flex; flex-direction: column; gap: var(--space-6); padding-top: 4px;
}
.hero__lead {
	margin: 0; font-family: var(--font-body); font-weight: var(--w-light);
	font-size: var(--text-lg); line-height: 1.55; color: var(--fg-muted); max-width: none;
}
.hero__lead em { font-style: normal; font-weight: inherit; color: inherit; }
.hero__actions { display: flex; gap: var(--space-4); flex-wrap: wrap; margin: 0; }
.hero__actions .wp-block-button__link, .hero__actions .btn { display: inline-flex; align-items: center; gap: 12px; }
.hero__actions .btn-ar { display: inline-block; transition: transform var(--dur) var(--ease); }
.hero__actions .wp-block-button__link:hover .btn-ar, .hero__actions .btn:hover .btn-ar { transform: translateX(5px); }

/* kép — natív core/image (figure.wp-block-image), kitölti a maradék magasságot.
   A .wp-block-image compound szelektor felülírja a core figure margóját/displayét. */
.hero__img { flex: 1 1 auto; min-height: 0; overflow: hidden; }
.wp-block-image.hero__img { display: block; margin: var(--space-6) 0 0; }
.hero__img .mph { width: 100%; height: 100%; }
.hero__img img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (max-width: 760px) {
	.hero { height: auto; min-height: 0; padding-top: var(--space-7); padding-bottom: var(--space-8); }
	.hero__grid { grid-template-columns: 1fr; gap: var(--space-5); }
	.hero__title { grid-column: 1; max-width: 16ch; }
	.hero__aside { grid-column: 1; max-width: none; gap: var(--space-5); }
	.hero__actions .wp-block-button, .hero__actions .btn { flex: 1 1 auto; }
	.hero__actions .wp-block-button__link, .hero__actions .btn { justify-content: center; width: 100%; }
	.hero__img { min-height: 0; height: auto; margin-top: var(--space-6); }
	.hero__img .mph, .hero__img img { height: auto; aspect-ratio: 16 / 11; }
}