/**
 * Demó aloldal — Embedded mód bemutató szekció
 *
 * Forrás:
 *   - `template-parts/sections/demo-embedded.php`
 *   - DESIGN_GUIDELINES.md: --radius-panel-lg (32px) frame, color-primary-light
 *     placeholder háttér, fs-h2 + lh-h2 cím, container padding rendszer
 *
 * Tartalom:
 *   1. `.demo-embedded__header` — eyebrow + H2 + sub (központosított)
 *   2. `.demo-embedded__frame`  — kártya-frame (border + radius-panel-lg) ami
 *      tartalmazza a `#estiwise-embed` mount-target div-et.
 *
 * Placeholder logika:
 *   - A `#estiwise-embed:empty` selector mutatja a CSS-placeholdert (aspect-
 *     ratio doboz + "Embedded demo hamarosan…" szöveg).
 *   - Amint a beágyazandó SDK feltölti a mount-targetet (gyerek elem kerül
 *     bele), a `:empty` nem teljesül → a placeholder automatikusan eltűnik,
 *     a tényleges widget veszi át a helyét. Nincs JS-feltétel.
 */

/* ==========================================================================
   Szekció wrapper
   ========================================================================== */

.demo-embedded {
	padding: var(--spacing-xl) var(--container-padding-mobile) var(--spacing-section-mobile);
	background-color: var(--color-background);
}

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

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

.demo-embedded__container {
	max-width: var(--container-max-width);
	margin: 0 auto;
}

/* ==========================================================================
   Eyebrow chip — „Embedded mód" pill, központosítva a frame felett
   ========================================================================== */

.demo-embedded__eyebrow-row {
	display: flex;
	justify-content: center;
	margin-bottom: 24px;
}

@media (min-width: 768px) {
	.demo-embedded__eyebrow-row {
		margin-bottom: 32px;
	}
}

@media (min-width: 1200px) {
	.demo-embedded__eyebrow-row {
		margin-bottom: 40px;
	}
}

/* ==========================================================================
   Frame — strukturális csoport (NINCS vizuális keret)
   --------------------------------------------------------------------------
   A frame korábban tintált háttér + border + shadow volt. User-döntés
   (2026-05-27): „csak tisztán a beágyazás" — a frame látható dekoráció
   nélkül engedi át az embed-tartalmat, mintha közvetlenül az oldalon lenne.
   A wrapper DIV megmaradt strukturálisan (mount-target szülője), de minden
   vizuális stílus levéve.
   ========================================================================== */

.demo-embedded__frame {
	position: relative;
	/* Vízszintes padding — a beágyazott widget belső kártyáinak árnyékai
	   („Mit tehetünk érted?" service-cards) a frame két szélén ne csapódjanak
	   le. Vertikálisan 0, mert a section padding tartja a vertikális ritmust. */
	padding: 0 16px;
}

@media (min-width: 768px) {
	.demo-embedded__frame {
		padding: 0 24px;
	}
}

@media (min-width: 1200px) {
	.demo-embedded__frame {
		padding: 0 32px;
	}
}

/* ==========================================================================
   Mount target — ide rendereli a beágyazandó SDK a tartalmát.
   --------------------------------------------------------------------------
   Placeholder/üres állapot kezelése NINCS — az embedded mód fejlesztője
   intézi a betöltés-előtti state-et. Itt csak a min-height adott, hogy a
   layout ne ugráljon a script betöltése közben.
   ========================================================================== */

.demo-embedded__mount {
	display: block;
	width: 100%;
	min-height: 480px;
}

@media (min-width: 768px) {
	.demo-embedded__mount {
		min-height: 560px;
	}
}

@media (min-width: 1200px) {
	.demo-embedded__mount {
		min-height: 640px;
	}
}