/* ==========================================================================
   [fejlec] — oldalankénti Hero (fejléc) stílusok — ingatlan-modul.

   Felépítés: desktop stílusok, majd a fájl végén EGY közös mobil blokk (767px).
   ========================================================================== */

.mhi-hero {
    position: relative;
    min-height: 700px;
    display: flex;
    padding-bottom: 80px;
    align-items: flex-end;
    overflow: hidden;
    background: #141210;
}

/* Háttérkép.
   Megj.: a duplikált .mhi-hero osztály SZÁNDÉKOS — a specificitást (0,3,1)-re
   emeli, hogy az Elementor-kit / téma globális img-szabályai (pl. height:auto,
   border-radius, box-shadow) ne írják felül a teljes felületet kitöltő
   háttérképet (!important nélkül; a fájl ráadásul a láblékben, minden más
   CSS után töltődik). */
.mhi-hero__bgwrap {
	position: absolute;
	inset: 0;
	z-index: 0;
}
.mhi-hero.mhi-hero .mhi-hero__bgwrap img.mhi-hero__bg {
	width: 100%;
	max-width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

/* Alulra fókuszáló sötét gradiens — a szövegek olvashatóságához. */
.mhi-hero__scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient( 180deg, rgba( 11, 10, 9, 0.68 ) 0%, rgba( 11, 10, 9, 0.3 ) 40%, rgba( 11, 10, 9, 0.92 ) 100% );
}

/* Tartalom. */
.mhi-hero__content {
	position: relative;
	z-index: 2;
	max-width: 1140px;
	margin: 0 auto;
	width: 100%;
}

/* Eyebrow: fehér vonal + csupa nagybetűs fehér felirat. */
.mhi-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 15px;
}
.mhi-hero__eyebrow .mhi-eyeline {
	width: 26px;
	height: 1px;
	background: #ffffff;
}
.mhi-hero__eyebrow .mhi-eyetext {
	font-family: 'Schibsted Grotesk', sans-serif;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 3.84px;
	text-transform: uppercase;
	color: #ffffff;
}

.mhi-hero__title {
    font-family: 'Schibsted Grotesk', sans-serif;
    color: #ffffff;
    max-width: 80%;
    margin: 0;
    font-size: 45px;
    font-weight: 700;
    line-height: 1.2em;
    letter-spacing: -0.03em;
}

.mhi-hero__lead {
    max-width: 60ch;
    margin: 15px 0 0;
    color: rgba(255, 255, 255, 0.8);
    font-family: "Instrument Sans", Sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.7em;
}

/* Gombsor. */
.mhi-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 15px;
}

/* Gold gomb. */
.mhi-btn-gold {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 17px 34px;
	background: #c9a558; /* gold-500 */
	color: #141210;
	border-radius: 100px;
	font-family: 'Schibsted Grotesk', sans-serif;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.28px;
	text-decoration: none;
	cursor: pointer;
	transition: background 300ms, transform 300ms, color 300ms;
}
.mhi-btn-gold:hover,
.mhi-btn-gold:focus-visible {
	background: #e6cd94; /* gold-300 */
	transform: translateY( -2px );
	color: #141210;
}

/* ============================================================
   Mobil — 767px alatt (egyetlen közös blokk)
   ============================================================ */
@media (max-width: 767px) {
    .mhi-hero {
        min-height: 550px;
        padding: 0px 20px 55px 20px;
    }
    .mhi-hero__title {
        font-size: 30px;
        line-height: 1.3em;
        letter-spacing: -0.02em;
        width: 100%;
    }
    .mhi-hero__lead {
        font-size: 16px;
        line-height: 1.9em;
    }
	.mhi-hero__eyebrow .mhi-eyetext {
		font-size: 11px;
		letter-spacing: 3px;
	}
	.mhi-btn-gold {
		padding: 15px 28px;
	}
}