/**
 * Dobozok shortcode stílusok — ingatlan-modul.
 *
 * Források: sablon/fooldal „Találja meg budapesti otthonát!” dobozcsoportja,
 * Million Homes — Rólunk sablon (srow / value-item / lepesek / lista).
 * A plugin CSS-e mindig a téma után (késői prioritással) töltődik, így
 * nem kell !important spam; a specifikumokat a .im- osztályok adják.
 *
 * Felépítés: desktop stílusok komponensenként, majd a fájl végén
 * EGY tablet blokk (1024px) és EGY közös mobil blokk (767px).
 */

/* ============================================================
   1. Dobozrács — rács + belső elválasztóvonalak (gap technika)
   ============================================================ */
.im-dobozok {
	background: rgba(20, 18, 16, 0.1);
	border: 1px solid rgba(20, 18, 16, 0.1);
	border-radius: 16px;
	overflow: hidden;
	display: grid;
	grid-template-columns: repeat(var(--im-doboz-oszlopok, 4), minmax(0, 1fr));
	gap: 1px;
}

/* Egy doboz */
.im-doboz {
	background: #f6f3ee;
	padding: 44px 32px;
	display: flex;
	flex-direction: column;
}

/* Ikonkör */
.im-doboz__ikon {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	border: 1px solid #af736678;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	transition: background .4s ease, border-color .4s ease;
}

.im-doboz__ikon svg {
	width: 26px;
	height: 26px;
	color: #AF7366;          /* Lucide: stroke = currentColor */
	stroke-width: 1.4;
	transition: color .4s ease;
}

/* Cím */
.im-doboz__cim {
	font-family: 'Schibsted Grotesk', sans-serif;
	font-size: 1.25rem;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.02em;
	margin: 22px 0 0;
	color: #141210;
}

/* Szövegezés */
.im-doboz__szoveg {
	margin: 10px 0 0;
	font-size: 14px;
	line-height: 1.6;
	color: rgba(20, 18, 16, 0.6);
}

/* CTA (gomb) — alapból rejtett, hoverre kinyílik */
.im-doboz__cta {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	align-self: flex-start;
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	margin-top: 0;
	font-family: 'Schibsted Grotesk', sans-serif;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-decoration: none;
	color: #AF7366;
	transition: max-height .4s ease, opacity .35s ease, margin-top .4s ease;
}

.im-doboz__cta::after {
	content: " →";
}

/* Hover effekt */
.im-doboz:hover .im-doboz__ikon {
	background: #AF7366;
	border-color: #AF7366;
}
.im-doboz:hover .im-doboz__ikon svg {
	color: #fff;
}
.im-doboz:hover .im-doboz__cta {
	max-height: 40px;
	opacity: 1;
	margin-top: 16px;
}

/* ============================================================
   2. «Amiben segítünk» — sorszámozott lista (.services__list / .srow)
   A sorszámot (01, 02 …) a shortcode generálja; ide csak a stílus kell.
   ============================================================ */
.services__list {
	display: flex;
	flex-direction: column;
}

.srow {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 44px;
	padding: 38px 16px;
	border-top: 1px solid rgb(20 18 16 / 10%);
	cursor: default;
	transition: padding-left 400ms cubic-bezier(.16,1,.3,1), background 400ms cubic-bezier(.16,1,.3,1);
}

/* Záró felső elválasztóvonal az utolsó sor után. */
.services__cap {
	border-top: 1px solid rgb(20 18 16 / 10%);
}

.srow__num {
	font-family: 'Schibsted Grotesk', system-ui, sans-serif;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.16em;
	color: #AF7366; /* gold-700 */
}

.srow__title {
	font-family: 'Schibsted Grotesk', system-ui, sans-serif;
	font-weight: 600;
	font-size: 25px;
	margin-bottom: 0;
    line-height: 1.4;
	letter-spacing: -0.02em;
	transition: color 400ms cubic-bezier(.16,1,.3,1);
}

.srow__desc {
    max-width: 650px;
    text-align: right;
    font-size: 16px;
    line-height: 1.65;
    color: rgb(20 18 16 / 52%);
    transition: color 400ms cubic-bezier(.16, 1, .3, 1);
}

/* Hover: sor balra tolódik, háttér + arany cím. */
.srow:hover { padding-left: 28px; background: #faf7f1; }
.srow:hover .srow__title { color: #AF7366; }
.srow:hover .srow__desc  { color: rgb(20 18 16 / 62%); }

/* ============================================================
   3. «Ahogyan dolgozunk» — elvek listája (.values__list / .value-item)
   A shortcode csak a listát adja; a mellette lévő sticky fejlécet
   (eyebrow + h2) Elementorban érdemes megépíteni egy 2. oszlopban.
   ============================================================ */
.values__list {
	display: flex;
	flex-direction: column;
}

.value-item {
	padding: 44px 0;
	border-top: 1px solid rgb(20 18 16 / 10%);
}

.value-item:last-child {
	border-bottom: 1px solid rgb(20 18 16 / 10%);
}

.value-item h3 {
	font-family: 'Schibsted Grotesk', system-ui, sans-serif;
	font-weight: 600;
	font-size: 30px;
	line-height: 1.05;
	letter-spacing: -0.02em;
}

.value-item p {
	margin-top: 16px;
	margin-bottom: 0;
	max-width: 540px;
	font-size: 18px;
	line-height: 1.72;
	color: rgb(20 18 16 / 62%);
}

/* ============================================================
   4. «Segítünk» — egyszerű felsorolás (.lista)
   Forrás: Sablon — csak szám + cím (leírás nélkül).
   ============================================================ */
.lista {
	display: flex;
	flex-direction: column;
}

.lista__sor {
	display: flex;
	align-items: baseline;
	gap: 16px;
	padding: 16px 0;
	border-top: 1px solid rgb(20 18 16 / 10%);
}

.lista__num {
    flex: 0 0 auto;
    min-width: 26px;
    font-family: 'Schibsted Grotesk', system-ui, sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2px;
    color: #AF7366;
}

.lista__title {
    font-family: 'Schibsted Grotesk', system-ui, sans-serif;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.5px;
}

.lista__cap {
	border-top: 1px solid rgb(20 18 16 / 10%);
}

/* ============================================================
   4b. «Miért minket» — kártyarács (.why-grid)
   2 oszlopos rács SÖTÉT szekcióhoz: fehér cím, fehér/55% leírás,
   fehér sorszám, felső hairline vonalak kártyánként.
   Az oszlopszám a --miert-oszlopok CSS változóval (oszlopok attr, 1–2).
   ============================================================ */
.why-grid {
	display: grid;
	grid-template-columns: repeat(var(--miert-oszlopok, 2), minmax(0, 1fr));
	gap: 0 88px;
}

.why-card {
	padding: 25px 0;
	border-top: 1px solid rgb(255 255 255 / 16%);
}

.why-card__num {
	font-family: 'Schibsted Grotesk', system-ui, sans-serif;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 1.8px;
	color: #ffffff;
}

.why-card__title {
	margin-top: 14px;
	font-family: 'Schibsted Grotesk', system-ui, sans-serif;
	font-weight: 600;
	margin-bottom: 15px;
	font-size: 24px;
	line-height: 1.14;
	letter-spacing: -0.5px;
	color: #ffffff;
}

.why-card__desc {
	margin-top: 12px;
    max-width: 100%;
	font-size: 14px;
	line-height: 1.65;
	color: rgb(255 255 255 / 55%);
	margin-bottom: 0px;
}

/* ============================================================
   4c. «Vásárlóknak» — lista (.buyers-list / .buyer-row)
   Gold sorszám + cím + leírás sorokban; felső hairline vonal
   soronként és záró vonal a lista végén (.buyers-list-close).
   ============================================================ */
.buyers-list {
	display: flex;
	flex-direction: column;
}

.buyer-row {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: baseline;
	gap: 16px;
	padding: 22px 0;
	border-top: 1px solid rgb(20 18 16 / 10%);
}

.buyer-row__num {
	flex: none;
	min-width: 26px;
	font-family: 'Schibsted Grotesk', system-ui, sans-serif;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 1.8px;
	color: #AF7366;
}

.buyer-row__title {
	margin-bottom: 0;
	font-family: 'Schibsted Grotesk', system-ui, sans-serif;
	font-weight: 500;
	font-size: 20px;
	line-height: 1.18;
	letter-spacing: -0.5px;
}

.buyer-row__desc {
	margin-top: 5px;
	margin-bottom: 0;
	font-size: 15px;
	line-height: 1.65;
	color: rgb(20 18 16 / 62%);
}

.buyers-list-close {
	border-top: 1px solid rgb(20 18 16 / 10%);
}

/* ============================================================
   5. «Folyamat» — lépésrács (.lepesek)
   Nagy gold sorszám (a shortcode generálja: 01, 02 …).
   ============================================================ */
.lepesek {
	display: grid;
	grid-template-columns: repeat(var(--lepes-oszlopok, 4), minmax(0, 1fr));
	border-top: 1px solid rgb(20 18 16 / 10%);
}

.lepesek__cella {
    padding: 30px;
	border-left: 1px solid rgb(20 18 16 / 10%);
}

.lepesek__cella:first-child {
	border-left: none;
}

.lepesek__num {
	font-family: 'Schibsted Grotesk', system-ui, sans-serif;
	font-weight: 700;
	font-size: 72px;
	line-height: 0.92;
	letter-spacing: -3px;
	color: #AF7366;
}

.lepesek__title {
    margin-top: 22px;
    font-family: 'Schibsted Grotesk', system-ui, sans-serif;
    font-weight: 600;
    font-size: 24px;
    line-height: 1.12;
    letter-spacing: -0.5px;
    margin-bottom: 15px;
}

.lepesek__desc {
    margin-top: 12px;
    max-width: 300px;
    font-family: 'Instrument Sans', system-ui, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: rgb(20 18 16 / 55%);
    margin-bottom: 0px;
}

/* ============================================================
   6. «Amiért minket választanak» — sötét sáv, gold ikonos kártyák
   ============================================================ */




.mhi-adv__inner {
	position: relative;
	max-width: 1240px;
	margin: 0 auto;
}

/* Opcionális szekciófejléc (a shortcode `kicsi` + `cim` attribútumából). */
.mhi-adv__head {
	text-align: center;
	margin-bottom: 64px;
}
.mhi-adv__head .mhi-eyetext {
	color: #e6cd94; /* gold-300 */
	letter-spacing: 3.36px;
}
.mhi-adv__title {
	font-family: 'Schibsted Grotesk', system-ui, sans-serif;
	font-weight: 700;
	font-size: 45px;
	letter-spacing: -1.35px;
	color: #ffffff;
	margin: 0;
}

/* Kártyarács — 4 oszlop (a sablon 2 oszlopa helyett). */
.mhi-adv__grid {
	display: grid;
	grid-template-columns: repeat(var(--eloany-oszlopok, 4), minmax(0, 1fr));
	gap: 24px;
}

.mhi-adv__card {
	background: rgba( 255, 255, 255, 0.04 );
	border: 1px solid rgba( 255, 255, 255, 0.1 );
	border-radius: 18px;
	padding: 32px;
}

/* Ikon doboz — a lucide <i data-lucide> SVG-jét öleli. */
.mhi-adv__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 12px;
	background: rgba( 201, 165, 88, 0.12 );
	border: 1px solid #af736652;
}
.mhi-adv__icon svg {
	width: 24px;
	height: 24px;
	color: #AF7366; /* Lucide: stroke = currentColor */
	stroke-width: 1.5;
}

.mhi-adv__card h3 {
	font-family: 'Schibsted Grotesk', system-ui, sans-serif;
	font-weight: 700;
	font-size: 20px;
	letter-spacing: -0.4px;
	color: #ffffff;
	margin: 18px 0 0;
}
.mhi-adv__card p {
	margin: 12px 0 0;
	font-size: 15px;
	line-height: 1.7;
	color: rgba( 255, 255, 255, 0.62 );
}

/* ============================================================
   Ikonos sáv — sötét, ikon-körös cellák hover-CTA-val (.mh-features)
   «rolunk» sáv: cellák közt hairline elválasztóvonal; hoverre
   terracotta ragyogás + kinyíló CTA-gomb. Sötét szekcióba való.
   ============================================================ */
.mh-features {
	display: grid;
	grid-template-columns: repeat(var(--mh-features-oszlopok, 4), minmax(0, 1fr));
	margin-top: 84px;
	background: #14110f;
	color: #f7f4ef;
	border-radius: 16px;
	overflow: hidden;
}

.mh-feature {
	padding: 44px 32px;
	border-right: 1px solid rgba(247, 244, 239, 0.12);
	transition: background .4s, border-color .4s;
}

.mh-feature:last-child { border-right: none; }

/* Hoverre a cella jobb-vonala is a ragyogás színét veszi (folt nélkül folytatódik). */
.mh-feature:hover {
	background: rgba(175, 115, 102, 0.22);
	border-right-color: rgba(175, 115, 102, 0.22);
}

/* Ikonkör — a lucide <i data-lucide> SVG-jét öleli. */
.mh-fic {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: #af7366;
	border: 1px solid #af7366;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all .4s;
}

.mh-fic svg {
	width: 26px;
	height: 26px;
	color: #f7f4ef;          /* Lucide: stroke = currentColor */
	stroke-width: 1.4;
	transition: all .4s;
}

.mh-feature:hover .mh-fic { background: #c98c7d; border-color: #c98c7d; }

.mh-feature h3 {
	font-family: 'Schibsted Grotesk', sans-serif;
	font-size: 20px;
	font-weight: 600;
	letter-spacing: -0.02em;
	margin-top: 22px;
}

.mh-feature p {
	margin-top: 10px;
	font-size: 14px;
	line-height: 1.6;
	color: rgba(247, 244, 239, 0.7);
}

/* CTA — alapból rejtett, hoverre kinyílik. */
.mh-fcta {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	height: 42px;
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	margin-top: 0;
	padding: 0 22px;
	background: #af7366;
	color: #f7f4ef;
	border-radius: 100px;
	font-family: 'Schibsted Grotesk', sans-serif;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-decoration: none;
	transition: max-height .4s, opacity .35s, margin-top .4s, background .3s;
}

.mh-fcta:hover { background: #c98c7d; }

.mh-feature:hover .mh-fcta { max-height: 42px; opacity: 1; margin-top: 16px; }

/* Érintőképernyőn nincs hover — a CTA ott látszik alapból. */
@media (hover: none) {
	.mh-feature .mh-fcta { max-height: 42px; opacity: 1; margin-top: 16px; }
}

/* ============================================================
   Tablet — 1024px alatt
   ============================================================ */
@media (max-width: 1024px) {
	.im-dobozok { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.lepesek   { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.mhi-adv   { padding: 88px 40px; }
	.mhi-adv__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.mhi-adv__title { font-size: 36px; }
	.mh-features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.mh-feature:nth-child(2n) { border-right: none; }
}

/* ============================================================
   Mobil — 767px alatt (egyetlen közös blokk)
   ============================================================ */
@media (max-width: 767px) {
	/* Dobozrács: egy oszlop, kisebb belső térköz. */
	.im-dobozok {
		grid-template-columns: 1fr;
	}
	.im-doboz {
		padding: 30px 22px;
	}

	/* srow: szám + cím egy sorban, leírás alatta. */
	.srow {
		grid-template-columns: auto 1fr;
		gap: 16px 20px;
		padding: 20px 0;
	}
	.srow__title {
		font-size: 20px;
		line-height: 1.4
	}
	.srow__desc {
		grid-column: 1 / -1;
		max-width: none;
		font-size: 15px;
		max-width: 100%;
		text-align: left;
	}

	/* Elvek: kisebb cím és térköz. */
	.value-item {
		padding: 32px 0;
	}
	.value-item h3 {
		font-size: 22px;
		margin-bottom: 10px;
	}
	.value-item p {
		margin-top: 10px;
		max-width: 100%;
		font-size: 16px;
	}

	/* Lista: kisebb cím. */
	.lista__title {
		font-size: 24px;
	}

	/* Miért minket: egy oszlop, szűkebb térköz. */
	.why-grid {
		grid-template-columns: 1fr;
	}
	.why-card {
		padding: 32px 0;
	}
	.why-card__title {
		font-size: 22px;
	}
	.why-card__desc {
		max-width: 100%;
	}

	/* Vásárlóknak: kisebb cím, szűkebb margó. */
	.buyers-list {
		margin-top: 28px;
	}
	.buyer-row__title {
		font-size: 22px;
	}

	/* Lépésrács: egy oszlop, felső elválasztóvonalak. */
	.lepesek {
		grid-template-columns: 1fr;
	}
	.lepesek__cella {
		border-left: none;
		border-top: 1px solid rgb(20 18 16 / 10%);
		padding: 32px 0 28px;
	}
	.lepesek__cella:first-child {
		border-top: none;
	}
	.lepesek__num {
		font-size: 56px;
	}
	.lepesek__title {
		font-size: 26px;
	}

	/* «Amiért minket választanak»: egy oszlop, szűkebb sáv. */
	.mhi-adv {
		padding: 0px;
	}
	.mhi-adv__grid {
		grid-template-columns: 1fr;
	}
	.mhi-adv__head {
		margin-bottom: 40px;
	}
	.mhi-adv__title {
		font-size: 28px;
	}
	.mhi-adv__card {
		padding: 26px 22px;
	}
	.mhi-adv__card p {
		font-size: 14px;
		line-height: 1.65;
	}

	/* Ikonos sáv: egy oszlop, vízszintes elválasztóvonalak. */
	.mh-features {
		grid-template-columns: 1fr;
		margin-top: 48px;
	}
	.mh-feature {
		padding: 30px 22px;
		border-right: none;
		border-bottom: 1px solid rgba(247, 244, 239, 0.12);
	}
	.mh-feature:last-child {
		border-bottom: none;
	}
}