/* ============================================================
   p9: MASTER — Homepage International (page-master.php).
   Wyłącznie uzupełnienia brakujące w base.css/main.css, prefiks wfm-.
   ============================================================ */

/* ---------- hero ----------
   Uwagi 1.09: hero 1:1 jak na wersji PL (main.css, blok „Skalowanie 1:1 z makietą"):
   ten sam kadr zdjęcia (auto 100%, lewa krawędź 388 jednostek makiety), ta sama
   wysokość sceny (837 jednostek), ta sama kolumna treści (440 jednostek, wcięcie
   104 + 20) i podpisy założycieli (same imiona). Powyżej 1920px kadr jest
   centrowany jak w hero PL; na mobile ten sam plik i kotwiczenie co hero PL
   (hero-home-mob-2026.jpg, auto 100%, right -364px). Wcześniejsza wersja miała
   szerszą kolumnę tekstu (560 jednostek) i dodatkowy padding na podpisy, przez
   co opis nachodził na postać, a treść siedziała wyżej niż na PL. */
.wfm-hero .wf-phero__stage {
	position: relative;
	height: auto; /* main.css (≥721) ustawia sztywne 837 jednostek — przy dłuższej treści scena rośnie */
	min-height: calc(837 * var(--u, 1px));
	background-color: #000;
	background-image: var(--wf-bg);
	background-size: auto 100%;
	background-position: calc(388 * var(--u, 1px)) top;
	background-repeat: no-repeat;
	align-items: center;
}
@media (min-width: 721px) {
	/* Wygaszenie lewej strony zdjęcia pod tekst — jak wf-whero (main.css) */
	.wfm-hero .wf-phero__stage::after {
		content: "";
		position: absolute;
		inset: 0;
		background: linear-gradient(90deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.66) 30%, rgba(0, 0, 0, 0.2) 50%, transparent 66%);
		pointer-events: none;
	}
	.wfm-hero .wf-phero__inner {
		position: relative;
		z-index: 1;
		justify-content: center;
		gap: calc(40 * var(--u, 1px));
		/* Siatka hero PL: kontener 1480, wcięcie 104 + 20 jednostek makiety. */
		max-width: calc(1480 * var(--u, 1px));
		padding-top: calc(64 * var(--u, 1px));
		padding-bottom: calc(96 * var(--u, 1px));
		padding-left: calc(124 * var(--u, 1px));
		padding-right: calc(104 * var(--u, 1px));
	}
	.wfm-hero .wf-phero__headings { gap: calc(28 * var(--u, 1px)); }
	.wfm-hero .wf-badge { font-size: calc(12 * var(--u, 1px)); padding: calc(8 * var(--u, 1px)) calc(20 * var(--u, 1px)); }
	/* Kolumna tekstu jak wf-hero__content PL (440 jednostek) — tekst nie wchodzi na postać. */
	.wfm-hero .wf-phero__title { font-size: calc(48 * var(--u, 1px)); line-height: 1.15; max-width: calc(470 * var(--u, 1px)); }
	.wfm-hero .wf-phero__sub { font-size: clamp(15px, calc(19 * var(--u, 1px)), 19px); line-height: 1.55; max-width: calc(440 * var(--u, 1px)); }
	.wfm-hero .wf-phero__btns { gap: calc(24 * var(--u, 1px)); }
	.wfm-hero .wf-phero__btns .wf-btn { font-size: clamp(13px, calc(16 * var(--u, 1px)), 16px); padding: calc(10 * var(--u, 1px)) calc(28 * var(--u, 1px)); }
}
@media (min-width: 721px) and (max-width: 1024px) {
	/* Tablet: opis w wąskiej kolumnie makiety nie mieści się w wysokości sceny —
	   kolumna tekstu do 56% szerokości, scena rośnie z treścią, a podpisy
	   założycieli schodzą z kadru pod przyciski (w rzędzie, przy lewej krawędzi),
	   żeby nie nachodziły na CTA. */
	.wfm-hero .wf-phero__stage { flex-direction: column; justify-content: center; align-items: stretch; }
	.wfm-hero .wf-phero__inner { padding-top: 40px; padding-bottom: 14px; gap: 24px; }
	.wfm-hero .wf-phero__title { max-width: 56%; font-size: clamp(26px, calc(48 * var(--u, 1px)), 48px); }
	.wfm-hero .wf-phero__sub { max-width: 56%; font-size: 14px; }
	/* Selektory z .wfm-hero — wyższa specyficzność niż bazowe reguły .wfm-hero__people niżej w pliku. */
	.wfm-hero .wfm-hero__people {
		position: relative;
		z-index: 1;
		bottom: auto;
		display: flex;
		gap: 32px;
		margin: 0 auto;
		padding: 0 calc(124 * var(--u, 1px)) 36px;
	}
	.wfm-hero .wfm-hero__people .wf-hero__person:first-child,
	.wfm-hero .wfm-hero__people .wf-hero__person:last-child { grid-column: auto; }
}
@media (min-width: 1921px) {
	/* Jak hero PL: powyżej makiety kadr 1920px centrowany, boki wypełnia czerń. */
	.wfm-hero .wf-phero__stage { background-position: calc((100vw - 1920px) / 2 + 388px) top; }
}
.wfm-hero .wf-phero__title { text-shadow: 0 2px 24px rgba(0, 0, 0, 0.55); }
.wfm-hero .wf-phero__sub { text-shadow: 0 2px 16px rgba(0, 0, 0, 0.6); }

/* Podpisy założycieli na zdjęciu — komponent wf-hero__person-card z main.css,
   rozłożony w tej samej siatce 3 kolumn co hero PL. */
.wfm-hero__people {
	position: absolute;
	left: 0;
	right: 0;
	bottom: calc(64 * var(--u, 1px));
	z-index: 2;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 0;
	max-width: calc(1480 * var(--u, 1px));
	padding-left: calc(104 * var(--u, 1px));
	padding-right: calc(104 * var(--u, 1px));
	pointer-events: none;
}
.wfm-hero__people .wf-hero__person { grid-row: 1; }
.wfm-hero__people .wf-hero__person:first-child { grid-column: 2; }
.wfm-hero__people .wf-hero__person:last-child { grid-column: 3; }
.wfm-hero__people .wf-hero__person-card { padding-left: calc(24 * var(--u, 1px)); }
.wfm-hero__people .wf-hero__person-card strong { font-size: clamp(14px, calc(20 * var(--u, 1px)), 20px); line-height: 1.5; }
.wfm-hero__people .wf-hero__person-card span { font-size: clamp(11px, calc(14 * var(--u, 1px)), 14px); line-height: 1.5; }
@media (max-width: 720px) {
	/* Mobile 1:1 jak hero PL (main.css ≤720): kadr hero-home-mob-2026.jpg
	   auto 100% kotwiczony do prawej, treść wycentrowana, dolny fade do czerni. */
	.wfm-hero .wf-phero__stage {
		min-height: 0;
		padding: 84px 0 40px;
		background-color: #000;
		background-image: var(--wf-bg-mob, var(--wf-bg));
		background-repeat: no-repeat;
		background-size: auto 100%;
		background-position: right -364px top;
	}
	.wfm-hero .wf-phero__stage::after {
		content: "";
		position: absolute;
		inset: auto 0 0 0;
		height: 140px;
		background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.94));
		pointer-events: none;
	}
	/* Dłuższy opis EN wchodzi na korpus maszyny — lekkie przyciemnienie kadru
	   od lewej pod tekstem (PL ma krótsze hasło i obywa się bez tego). */
	.wfm-hero .wf-phero__stage::before {
		content: "";
		position: absolute;
		inset: 0;
		background: linear-gradient(90deg, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.42) 55%, rgba(0, 0, 0, 0.15) 100%);
		pointer-events: none;
	}
	.wfm-hero .wf-phero__inner { position: relative; z-index: 1; min-height: 532px; justify-content: center; padding-top: 0; padding-bottom: 0; gap: 36px; }
	.wfm-hero .wf-phero__headings { gap: 28px; }
	.wfm-hero .wf-phero__title { font-size: 32px; text-shadow: none; }
	.wfm-hero .wf-phero__sub { font-size: 16px; line-height: 1.5; text-shadow: none; }
	.wfm-hero__people { display: none; }
}

/* ---------- WallFlow in Action ---------- */
/* Nakładka play jest dekoracyjna (placeholder do czasu wgrania filmu) */
.wfm-action .wf-yt__play { pointer-events: none; }
.wfm-action__label { margin-bottom: -8px; letter-spacing: 0.04em; }
/* Uwagi 27.08: wyśrodkować boxy materiałów oraz pigułki UV / White Ink i CTA. */
.wfm-action .wfm-action__label,
.wfm-action .wfm-video__side > .wf-btn { align-self: center; }
.wfm-action .wfm-materials { max-width: 560px; margin: 0 auto; }
.wfm-action .wfm-tags { justify-content: center; align-self: center; }

/* ---------- Why WallFlow (uwagi 21.08: równa siatka kart z ikonami) ---------- */
.wfm-why__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
	max-width: 1120px;
	margin: 0 auto;
}
.wfm-why__card {
	display: flex;
	gap: 18px;
	align-items: flex-start;
	padding: 26px 28px;
}
.wfm-why__icon { width: 40px; height: 40px; flex: 0 0 auto; margin-top: 2px; }
.wfm-why__card strong { display: block; margin-bottom: 4px; }
.wfm-why__card p { color: #d9d5e3; margin: 0; font-size: 14px; line-height: 1.6; }
/* Uwagi 27.08: opis pod każdym punktem — karty w rzędzie mają równą wysokość. */
.wfm-why__grid { align-items: stretch; }

/* ---------- Support that keeps you printing ---------- */
.wfm-support__usps { justify-content: center; margin: -24px 0 48px; }
.wfm-support .wf-center { margin-top: 40px; }

/* ---------- responsive ---------- */
@media (max-width: 1024px) {
	.wfm-why__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
	.wfm-support__usps { margin: -8px 0 32px; }
	.wfm-why__grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
	.wfm-hero .wf-phero__sub { font-size: 16px; }
}
/* 2026-09-06: keep the shading aligned with the centered 1920px hero. */
@media (min-width: 1921px) {
    .wfm-hero .wf-phero__stage::after {
        left: calc((100vw - 1920px) / 2);
        right: auto;
        width: 1920px;
    }
}